ブログテーマをBrooklynからZENO-TEALへ初心者向けカスタマイズ補足情報

進撃のブログ運営
[ad04]

ブログ開設から使用していたBrooklynを卒業し、
Pro化のタイミングでテーマを変えました

新しく使用し始めたZENO-TEALについて
カスタマイズの補足情報をまとめました

テーマを変更した理由

個人的なことですので手短に

・たまたま訪問したブログがこのテーマですごく読みやすかった
・トップページで掲載できる記事数が多かった
・掲載記事数を増やしてもスクロールは長くならない

個人の感覚ですが
僕のような弱小ブログもPV数を見込めるのではと思いました

理由はこれくらいで
本題のカスタマイズ補足に移ります

カスタマイズの補足

f:id:ayame253:20170413182643j:plain

デモサイトにほとんどのカスタマイズが
掲載されているのでそちらを優先してください

このLIFEPORTの記事で紹介するカスタマイズはその補足、
ズレてるところを直したり、ちょっとだけ融通がきくようにしただけです

色の変更

デモサイトの中で紹介されているソースが
分かれていて一括で貼り付けできないので自分用に作ったものを貼ります

またタイトルカラーは別にしたかったので
その点がデモサイトと異なることはあしからずでお願いします

フッターの編集

f:id:ayame253:20170413183654j:plain

おそらくデモサイトのソースそのままで編集すると
ページ下部とブラウザ最下部がぴったり重なってしまってあまり綺麗ではありません

marginを設定すればいいだけですが
サクッと終わらせたければ下記コピペでうまくいくと思います

[ad03]

パンくずリストに背景追加

f:id:ayame253:20170413183111j:plain

背景のドットでパンくずリストの部分の可視性が悪いです

ほんの気持ち程度に透明をかけたホワイトを背景にしているのですが
こんなので良ければご使用ください

ZENO-TEALのメモ情報

TOPで表示される文字数は全角で36文字

Googleの検索結果より短い36文字です

この文字数以内にする必要はないと思いますが
上手く調整して体言止めできるように工夫するとCTR(クリック率)が上がるかもしれません

[ad01]

目次はh2とh3のみ表示

事象の報告だけで
記事作成を優先していてCSSの修正などしてません

本当はh4まで追加したいです
もしどなたか対応されたら教えてほしいです

ひとまずは目次の使い方を考えようと思います

おすすめ記事のスマホ表記は左から1つ目2つ目(固定)

f:id:ayame253:20170413184316j:plain

デモサイトで紹介されているカスタマイズの中の1つ、
「おすすめ記事」ですがスマホではこの2記事で固定です

より人気の高い記事をこの箇所に設定されると良いです

プロフィール欄のリンクのアンダーバーが消える

理由は不明ですが僕は消えてました
リンクは生きていました

突貫工事にすぎませんが
ソースでアンダーバーを表示させて対応しています

[ad02]

テーマ変更全般におけるCSSメモ情報(初心者向け)

追加カスタマイズは変更後すぐに記入する

LIFEPORTは
画像をふわっと表示させたり、
Youtube動画を画像として表示するカスタマイズをしています

これらのCSSのソースも消えてしまいますので
該当のカスタマイズを使用している過去記事は該当箇所が白紙になっていたり
信じられないくらい読み込み速度が遅くなります

マニュアル系記事で「バックアップは必須」をよく拝見しますが

「引き継ぎたいCSSの再記入は必須」と言ったほうがいいかもしれません

過度なカスタマイズは見直すタイミング

上記の内容につながりますが

Brooklynに限らず
テーマ依存のカスタマイズは少なくないと思います

そのようなカスタマイズを見直す良い機会かと思います

いずれにしてもテーマ変更の前に
「カスタマイズCSSの仕分け作業」をすることが賢明です

カスタマイズは必ず「メモ」を残す

最悪なパターンは
「あれこれ何のCSSだ?」です

/ふわっと表示させる/

スラッシュでその用途を示していない場合、初心者は地獄を見ます

今からでも遅くないので必ずメモ書きを残しましょう

スタイルシートの汎用性を過信しない

早い話、
テーマ変えると何かがおかしなことになっています

多くのカスタマイズをしている人ほど1つずつ
正しく機能しているかを確認する必要があります

この点でも不要なカスタマイズは見直しのチャンスですね

[ad07]