【お知らせ】サイトテーマを変更するので、見た目がちょっと変わります(Cocoon→SWELL)

2023年3月21日

やりたいことも増えてきたので、そろそろサイトのテーマを変えようかなぁと。

今まで使用していたテーマは「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では、すでにシェアボタンが左にそっと表示される形に対応しているので、良さげでした。