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

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

f:id:marubaff:20170827194513j:plain

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

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

導入にあたって

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

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

最初にやったこと

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

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

 

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

 

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

 

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

テーマカラーを決めよう

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

 

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

 

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

背景色を変更

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

f:id:marubaff:20170824114013j:plain

 

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

f:id:marubaff:20170824114055j:plain

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

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

 

トップに戻るボタン

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

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

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

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

参考にしたサイト

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

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

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

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

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

フッター部分を作る

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

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

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

戻れない

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

f:id:marubaff:20170824144118j:plain

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

f:id:marubaff:20170823165424j:plain

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

 

 2017年8月31日追記

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

 

変更した感想

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

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

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

まとめ 

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

 

なんかいつもと違う。

うん。いつもと違う。

たまにはいいだろ〜

ブログ運営カテゴリの最新記事