はてなブログ初心者が行った、【ZENO-TEAL】のカスタマイズ
はてなブログで人気のテーマ【ZENO-TEAL】を使い続けてはや10ヶ月。
HTMLやcssを触ったことのなかった自分はこんなカスタマイズを導入しています。
本記事について
この記事ははてなブログの人気テーマZENO-TEALを利用している方、あるいはこれから利用しようとしている方に有効かもしれません。
はてなブログを利用してはや10ヶ月近く経ちますが、記事を見てくれている方にたいして少しでも見やすく、使いやすくするために私ことaroundfourが導入をしたカスタマイズを紹介します。
- 本記事について
- 本文の表示について
- 関連記事の表示系
- グローバルメニューのカスタマイズ
- 外部リンクを常時別ウィンドウで開くようにしました
- 更新日自動表示のカスタマイズ
- ZENO-TEAL公式カスタマイズ
- パンくずリストの導入方法
- jQuery関係のカスタマイズ
- シェアボタンのカスタマイズ
- AdSense関係のカスタマイズ
- 最後に
本文の表示について
囲み枠はこれを使う
【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30
サルカワさん1択。
文字サイズの変更
「うわっ…はてなブログ、読みにくすぎ…！」最大の原因はコレ - オークニズム
16px以上が基本らしいです。うちは17pxにしています。
関連記事の表示系
アイキャッチ画像を使ってこの記事をフォロー
はてなブログでアイキャッチ画像を使って「この記事が気に入ったらフォロー」を設置 - FOXISM
とっても好きなカスタマイズ。
この機能を使うときは、アイキャッチ画像にもこだわらなきゃって思います。
まあ思うだけで、かっこいいアイキャッチ画像は作れないのですが。あくまで思うだけ。
Milliardを利用＆カスタマイズ
Milliardの導入方法はこちら
はてなブログで関連記事をスタイリッシュに表示するならMilliardがおすすめ！ - すずろぐ
はてな公式の関連記事は関連性のない関連記事らしいので、Milliardに変更しています。
なおMilliardにした場合、ページの読み込みが遅くなるという弱点があります。
カスタマイズはこちらを利用しています
Milliard関連記事プラグインのCSSをいじり２列にしてブログになじむようにしてみました - Yukihy Life
あわせて読みたいの導入
おすすめ記事・関連記事のリンクを枠で囲って目立たせるカスタマイズ | SHIROMAG
どのブログでも使われていると言っても過言ではない囲み枠。
グローバルメニューのカスタマイズ
ZENO-TEALを使っておきながら、ZENO-TEALのグローバルナビゲーションを使わないという荒業。
Bambiさんのカスタマイズは常時グローバルナビゲーションを表示出来るため、採用させて頂いています。
PC＆タブレット用
画面トップに固定のグローバルナビゲーション＠はてなブログテーマ「Palette（パレット）」 - Bambi's BLOG @ hatena
グローバルナビゲーションは1段、2段どっちがいいのかは模索中。
個人的には1段がいいけど、ブログの回遊率をあげるなら2段の方が良いのかな？
スマートフォン用
スマホ画面下に固定表示「ボトムナビゲーション」の設置方法＠はてなブログ「Palette（パレット）」 - Bambi's BLOG @ hatena
これを使うと上に戻るのホバーボタンにかぶってしまう弱点が…。
自分では直せません。
外部リンクを常時別ウィンドウで開くようにしました
2018年 はてなブログで外部リンクを別ウィンドウで開くようにしました - インサイド シーナ
外部リンクを開くときに別ウィンドウにする target="_blank"をいつもいつも入力するのが面倒くさかったので探していたところたどり着きました。内部リンクは別ウィンドウで開かないのが便利です。
更新日自動表示のカスタマイズ
更新日自動表示のカスタマイズをアップデートしました、レスポンシブデザインの方はご確認ください | つばさのーと
AMP版は使えなかったので、サイトマップを読み込むものを使用中。
他の方が作られた更新日自動表示のカスタマイズはなぜか自分のブログではうまくうごかなかったので、こちらを利用しています。
ZENO-TEAL公式カスタマイズ
h2見出しが画面最上部に固定されるのを解除する方法 - ZENO-TEAL
これは即消しボンバーでした。当時は流行っていたのだろうか？
カスタマイズ5：全体のテーマカラーを変更する - ZENO-TEAL
ブログ内の色の指定ってとても難しくて、悩みます。
カスタマイズ4：フッターにコンテンツを表示 - ZENO-TEAL
公式通りです。
zeno-tealの蛍光マーカーを打ち消す方法 - テイコクザッシ
太字を多用すると結構目に優しくないので消しました。
ちなみに本当は太字もあんまり使わない方がSEO的に良いとかなんとか。
パンくずリストの導入方法
【はてなブログ】公式パンくずリストの階層化とカテゴリーのアーカイブ表示を行うブログパーツを作りました - 小さな星がほらひとつ
まずこちらを導入。
導入でアクシデントもあり
パンくずリストのカスタマイズで大苦戦 - アラフォーから始めるお小遣い稼ぎと陸マイラー
階層化は結構苦戦しました…。
jQuery関係のカスタマイズ
はてなブログをカスタマイズしてる人向け。jQueryの読み込みを速くするためにコードを変えてみた | SHIROMAG
jQueryの読み込みが早くなるそうです。
ブログの読み込み速度は重要ですが、これだけでは目立った効果は出ず、表示速度改善は永遠の課題です。
2018年 はてなブログに 上に戻るボタン をjQueryを使用して配置する方法 - インサイド シーナ
上に戻るボタンの設置です。
これはかなり初期から利用しています。
シェアボタンのカスタマイズ
コピペで簡単！はてなブログのシェアボタンをカスタマイズ | SHIROMAG
なぜか一部のアイコンの画像が表示されない症状がでましたが、 Font Awesomeを自分で指定しなおして修正しました。また、Google+はもう利用できなくなったので外しています。
AdSense関係のカスタマイズ
【本当にコピペ一発！】はてなブログで「文中にアドセンス広告を入れる」を自動化する方法 - UXエンジニアになりたい人のブログ
AdSenseの広告を自動で記事に入れてくれるカスタマイズです。
よくわからないままAdSenseの申込みをし、よくわからないまま合格しました。
2019年の2月ぐらいからだったかな？
収入は月500円ぐらいですね。今の所はてなブログProの月額にもなってないです。
最後に
HTMLとかcssとか、いまだにほとんどわかりません。
40歳間近のアラフォーが試行錯誤しながらこのようなカスタマイズを導入しましたが、ブログ初心者のかたでも作者さんがわかりやすく説明をしているので十分触れる内容だと思います。
はてなブログをはじめて10ヶ月で記事も100記事を超えたことですし、こんな雑記をアップした次第です。
2019年5月23日現在一日150pv～200pvをうろちょろしていますが、GW10連休前は一日300PV～400PVぐらいでした。なぜこんなに下がったのか…おじさんは悲しい。
でも一日に100人以上が記事を見てくれるってすごいですよね。自分で自分を褒めたい。
