はてなブログのテーマを「ZENO-TEAL」に変更してカスタマイズ。もうBrooklynには戻れない。

 　戻れない＠双子育児おやじのまるばです。

 　双子が生まれて４ヶ月。ブログを始めて１１ヶ月。ブログのテーマを「Brooklyn」から「ZENO-TEAL」に変更しました。

導入にあたって

・はてなブログproに登録が必要。

・作者のページ（ZENO-TEAL）を全部読みました。

最初にやったこと

・全てのブログ記事に「続きを読む」を挿入。

・各記事の一番最初に画像を挿入。

　「続きを読む」を入れないとトップページのカードをクリックできません。また一番最初に画像がないと「はてなの画像」が表示されます。この２つの作業は挫折しそうになるぐらいしんどいです。もし、テーマを変えたいという人は、ZENO-TEALをインストールする前に上記の作業を実施しましょう。

　僕の場合１５０記事ぐらいありましたが、双子くんが寝ていた夜中にコツコツやりました。

　双子くんは泣いてないですが、僕が泣きました。

テーマカラーを決めよう

　まずはカラーを変更。公式ページの「カスタマイズ5：全体のテーマカラーを変更する」を参考にしました。

　僕の場合は、オレンジ色を主体に「Color - Style - Material design guidelins」を見て決めました。以下のコードを「デザインCSS」に挿入。

　色を変更するだけで、イメージはかなり変わります。#FFA500などの部分を好きなコードに変更してください。

背景色を変更

　初期設定だとこんな感じで、点々が入ります。

　僕の場合は、見やすいように「白」に変更しました。

プロフィール欄のリンクの色を変更

　プロフィール欄のリンクについて初期設定では「黒」のままなので、見やすいように色をつけました。 これもデザインCSSに挿入。

トップに戻るボタン

　画面右下の表示されるボタンです。

　ヘッダ→タイトル下部分に以下を挿入。

　フッター部分に以下を挿入

　デザインCSSに以下を挿入。ZENO-TEALの場合は、@media以降を消去した方がうまくいきました。

参考にしたサイト

うっすら透明な「上に戻る」ボタンのはてなブログ設置法 - あざなえるなわのごとし

タイトル下におすすめ記事を表示

　公式ページには、画像サイズバラバラ対応版もありますが、画像を揃える「カスタマイズ1：ヘッダー（タイトル下）におすすめ記事を並べて表示する 」の方が結果的にうまくいきました。　

　ヘッダ→タイトル下部分に以下を挿入。

　デザインCSSに以下を挿入。 

フッター部分を作る

　公式ページの「カスタマイズ4：フッターにコンテンツを表示 」を参考に以下のように変更。

　フッター部分に以下を挿入（一部省略）。月間アーカイブをフッター部分に移動しました。

　デザインCSSに以下を挿入。

戻れない

　トップページについて、２ページ目以降を見ると、「次のページ」はありますが、「前のページ」はありません。

　他のブログテーマの場合、「前のページ」ボタンがある。こんな感じ。

　今後、詳しい人が「前のページ」ボタンをカスタマイズしてくれるのを待っています。 

　２０１７年８月３１日追記

　これは「はてなブログ」の仕様ということが分かりました。「はてなの中の人」さんお願いします。

変更した感想

　・自分のブログがさらに好きになった。

　・CSSとか謎だったものが、少しだけ好きになった。

　・変化ってめんどくさいけど、楽しいと思った。

まとめ 

 　もし今からはてなブログproをはじめるなら「ZENO-TEAL」一択。

なんかいつもと違う。

うん。いつもと違う。

たまにはいいだろ〜