やりたいことも増えてきたので、そろそろサイトのテーマを変えようかなぁと。
今まで使用していたテーマは「Cocoon」。無料で使えてシンプルかつ高機能。個人的には有料級だと思えるほど素晴らしいテーマです。
変更する(引っ越し先の)テーマは「SWELL」。有料ですが、使い心地や書きやすさを売りにしているテーマです。
テーマの変更に伴って、試験的ではありますがサイト名も「Tsut-psの休日」→「御茶ノ音(おちゃのーと)」に変更しています。↑やっとです……!
テーマを変える理由
テーマを変える理由はいくつかありますが、書きやすさ重視で「SWELL」を選んでみました。「いろんな方が良いよ~」と言っていて、実際に調べてみると良さげだったのも印象的でした。
良質なデザイン・最適化された高速化・書きやすそうな感じ、すべて揃っていそうです。
Cocoonは高機能だけど、“ちょっとカオスな内部構造”が気になる
Cocoonのデメリットというと、HTML+CSSの構造がちょっとカオスな感じになっていることかなぁと。
同一URLでもPC/スマホ両方で見られるレスポンシブ対応ですが、見る画面の大きさによってはごちゃっとしていたり、表示が崩れてしまったり、デザイン面で“整備のゆるい感じ”が否めませんでした。
なので、その都度CSSカスタマイズ。本筋であるページ制作よりも、デザイン整備にとてもとっっっても時間をかけてしまいました……。
また、こちら側でデザインを変えようとしたときに、一筋縄ではいかないような構造になっていたり、諦めなきゃいけなかったり。
例えば、プロフィールカード。縦に長かったので、ここをスッキリさせたいなぁと思いました。

しかし、HTMLの要素がこういうふうに分けられていて困りました……。

SWELLでは既にこんな感じになっています↓ かなりイメージに近いので、あまり手を加える必要はなさそう。

Cocoonの(シンプルすぎて)物足りない点
ぱっとCocoonでやりたいことがあったときに、独自で実装しなきゃいけない……なんてことも結構ありまして。
「高機能なCocoonで物足りないってどういうこと……?」って思われるかもしれませんね。
特にサイト型(←この表現があってるのかわからない)のページを作る際に、独自でHTMLとCSSを書いて実装しなきゃいけない、という労力はすごいものでした。
例えば、PCで見たとき、「左側にシェアボタンを置きたい……」なんて場合。プラグイン入れればいいんですが、有名どころでリダイレクトを含むものがあり(怖っ)、なるべく自分で実装したいなぁと。
しかしながら、Cocoonでむりやり実装するのは かなり時間を要しました。

これどうやっているかというと、実は一番上のシェアボタンに無茶振りしてもらっているんですよね……。(↓自由に使っておk)
カスタマイズしたCSS
@media screen and (min-width: 1360px) {
.sns-share.ss-top {
display: flex;
position: fixed;
top: 180px;
left: calc(50vw - 672px);
}
.ss-top .sns-buttons {
display: flex;
align-items: center;
flex-direction: column;
gap: 0.5em;
}
.ss-top a.share-button {
display: flex;
font-size: 22px;
margin: 3px;
height: 46px;
width: 46px;
color: #fff;
border: initial;
border-radius: 50%;
line-height: 1.5;
color: #626262;
background-color: transparent !important;
box-shadow: none;
}
.ss-top .button-caption {
display: none;
}
.ss-top .sns-share-buttons .share-count {
right: initial;
bottom: -6px;
font-size: 16px;
color: #626262;
font-weight: bold;
}
}
SWELLでは、すでにシェアボタンが左にそっと表示される形に対応しているので、良さげでした。

ただ、シェア数が表示されない点はなにげにショックかもしれません……。一応モチベにはなっていたので。
ブロックエディターが使ってみたい(という理由付け)
書きやすさから言えば、少し前にWordPressへ搭載された「ブロックエディター」がありますよね。
あれ、ずーーっと使いたいなぁと思いつつも、なかなか踏ん切りがつかず、クラシックエディタから抜け出せないままでいました。
かなり前にCocoonのブロックエディターをいじったこともあるのですが、やっぱり慣れずじまい。
なので、すこーし投げやりな考えではありますが、今回のテーマ移行とともに「ブロックエディター」に完全移行します。
これでページ作成にかかる時間も圧倒的に楽になるはず……! (切望)
Cocoonの見た目に、「すっかり見慣れてしまった」というデメリット
デメリットになりうるのか……? というツッコミが入りそうです。
Cocoonは無料で使える反面、どこでも使われていて、見慣れすぎてしまった感があります。いい意味でも、悪い意味でも、それぐらい馴染みの深いものです。
インターネットサーフィンをしているときに、Cocoonの未カスタマイズ状態のサイトを見かけます。そのたびに、「また量産(適当に作った)サイトなのかな」と勘ぐってしまいます……。ネットに数年潜ってきた中で、やはりイメージがあまり良くないのです(テーマ利用者側の問題)。
加えて、Cocoonは初期から大幅には変えにくいテーマなので、みんな似通ったデザインになってしまうところもデメリットでした。
なので、「初期デザイン見慣れすぎ問題」から脱したかったのです。ぱっと見Cocoonに見えない、かつモダンっぽいデザインを目指しつつ。
そしたら、CSSが余白含め1700行くらいに……。何やってるんだろう、本当に。記事かけ。

SWELLでは、サイト型の構造が作れるので、個性の出しやすいようなテーマになっています。
なので、さほどCSSを意識しなくてもかぶらなさそうな点が好印象でした。
見た目はどんなふうに変わるんだろう
以前の見た目と今とを比較できるように、テーマが「Cocoon」だったときの画像を置いておきますね。2窓にしてぜひぜひ比較してみてくださいね~。












歴史を感じる……。
あとがき:なんかこのページだけ、異様にブログっぽいよね
たまにはこういうお知らせページもいいよね。
あっ。そうそう、バグとか表示エラーとか、怖いじゃん? だから、全ページをブロックエディターに書き換えようと思います。
うぉぉぉおぉぉおお、めちゃくちゃリライト(書き直し)が大変だァァァ。
どれぐらいかかるかわからんね。まぁ、一気に進めるので、気長に待っててくだされ。
おしまい。