【ZENO－TEAL】はてなブログPro版のテーマストアでダウンロードできる人気テーマです。
【⇓⇓はてな有料テーマ人気ランキング】
【２０１９年】はてなブログ有料テーマ｜総ダウンロード数人気ランキング
私自身、このテーマに一目ぼれして以来、カスタマイズすることを覚えていろんなコードを入力しました。
実態はネットの賢者の知恵を借りてきて、私のサイトに合うように調整しただけなのですが。
今のデザインは現状、完成形です。
かなり満足しています。
前回、紹介したようなすごいデザインのサイトはいくらでもあって本当はマネしてみたい気持ちはあります。
しかし、本業は記事を書くこと。
今のデザインも十分に良いと考えているので、ここらで一旦カスタマイズは中断です。
次の目標である
- 見出しの再検証
- リライト
- ツイッター戦略
- 内部リンク作成
- 雑記から特化へ
に集中したいと考えています。
ですが、その前にこれまでにカスタマイズを総まとめした記事を残しておこうと考えました。
【ZENO－TEAL】カスタマイズ総まとめ
さて、はてなブログの有料テーマはデザインもおしゃれなのだが、しかしながらカスタマイズはどのテーマでも必要となってくるでしょう。
正直に言うと、テーマのデザインが少しパンチが弱いからです。
有名なブロガーさんは間違いなくワードプレスを使っています。
そしてそのワードプレスの有料テーマはどれも一級のおしゃれであって、そもそもがデフォルトでも使えそうです。
もしくはカスタマイズしても初心者でも使いやすいと良いことづくめです。
はてなブログテーマはデフォルトでは足元にも及ばないので、カスタマイズして追いつかなければなりませんがHTMLやCSSの入力は初心者には少しハードルが高いです。
私もかなり時間がかかりましたし、今でも自分でコードを作ることは出来ません。
しかし、しっかりとした知識を持っていればワードプレス顔負けのサイトを作ることが出来るのは他のユーザーさんが実証済みなので私も努力したのです。
この記事では順に私が行ったカスタマイズを説明していきます。
設定画面
まずは設定画面です。
管理画面から「設定」➡「詳細設定」➡「headに要素を追加」で以下を入力
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js“></script>
⇦Jqueryコード。なめらかな動きを付けないときに必要なコード
<link rel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css”>⇦font-awesomeコード。外部サイトから使いたいアイコンを引っ張ってくるときに入力
<script>$(document).on(‘mousedown’,’.bx-viewport a’,function(){window.location.href = $(this).attr(‘href’);});</script>⇦スライダーを設置したとき、このコードを入れることによってクリックからのリンクがうまく動作する
headに要素を追加しておくことによって、サイト全体で外部データの仕様が可能になります。
HTMLやCSSに別々でコードを入力すればその分動作が重くなるので推奨です。
デザイン
はてなブログはこのようにサイト全体ページを上のように区分けしています。
赤字部分の
- タイトル下
- 記事上
- 記事下
- フッタ
にHTMLを入力することができ、それぞれをCSSで装飾することが可能です。
形が決まっているので、ワードプレス民が不満に思うポイントなのですが、いくら自由度は高いワードプレスといってもブログサイト自体は大体のユーザーがこの形ですので特に気にする必要はありません。
タイトル下
⇩
まずはヘッダーですが、はてなブログのヘッダーは上の図のように幅が中途半端です。
そしてCSSなどでも変更することが出来ません。
しかし、めいっいぱい使わないとデザイン的にアウトかと。
対応策としてはヘッダを消してしまって、タイトル下にヘッダとなる画像を挿入するといった方法です。
参考にしたリンクは以下のサイトです。
（参照：【ブログカスタマイズ】はてなブログのヘッダー画像の余白を非表示にする方法 – つきなしことのは日記）
つぎにグローバルメニューです。
デフォルトでは何もないので、コードの追加でヘッダの直下に追加します。
カスタマイズ2：タイトル下にグローバルナビゲーションバーを表示 – ZENO-TEAL
そして【ZENO－TEAL】はレスポンシブル対応なので、スマホ表示の時は多段形式ととなるよう設定します。
タイトル下のグローバルナビゲーションバーを多段形式にする – ZENO-TEAL
次にグローバルメニュー直下にあるコメント付きリンクです。
<div class=”header-info”><a href=”URL”><b>タイトル</b></a></div>
<style type=”text/css”>
.header-info { position: relative; z-index: 0;}
.header-info a { display: block;font-size: .7em; text-decoration: none; text-align: center; color: #3f3f3f; background: #ECEEF1; padding: .4em;
}</style>
ひつじさんから参考にしました。
（参照：【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 – ひつじの雑記帳）
そしてスライダーです。
画像付きおすすめ記事が次々に入れ替わるのがカッコよくて導入しました。
（参照：【bxSlider】ブロガー必見！コピペだけで簡単にコンテンツスライダーを導入する方法）
記事上
記事上です。
上のぱんくずリストは
「デザイン」➡「カスタマイズ」➡「記事」からぱんくずリスト設置にチェックを入れました。入れる方がSEO的に有利になるようです。
記事タイトル直下にグーグルアドセンスのリスト広告を設置しました。
アドセンスの広告を指定した箇所にどの記事でも表示できるようにしたい場合必要です。同様に私は記事下、サイドバーそして１つ目の見出し前の４か所に広告が貼れるように設定しました。
それぞれの設定する方法は以下を参考にしました。
（参照：はてなブログへのアドセンス設置を全自動化するコード（コピペOK） – 45 For Trash）
そしてソーシャルパーツはデフォルトのものはすべてチェックを外しました。
読込時間が遅くなるためです。しかし拡散には必須のソーシャルパーツ。
これを自身で設定します。
（参照：カスタマイズ3：記事の上下にシェア用ソーシャルボタンを設置 – ZENO-TEAL）
記事下
①記事下のシェアボタン直下にフォローボタンを入れてみました。
見出しの画像と合わせて、デザイン性は高いフォローボタンだと思っています。
（参照：はてなブログでアイキャッチ画像を使って「この記事が気に入ったらフォロー」を設置 – FOXISM）
②サイドバーが最下まで追従するCSSです。
（参照：CSSだけでサイドバーを固定/追従/解除する方法が超簡単！しかも軽くて滑らか！ – オークニズム）
③フッタを充実させるとかっこよく見えます。
（参照：カスタマイズ4：フッターにコンテンツを表示 – ZENO-TEAL）
④いつでも「トップに戻る」ボタンが追従します。
（参照：はてなブログで超簡単に「トップページに戻る」ボタンを設置する方法 – はてぶ丸）
サイドバー
プロフィールをマテリアル風デザインにしてみました。
（参照：プロフィール部分をマテリアルデザインのアレっぽくしてみる – FOXISM）
プロフィールにあるデフォルトのフォローボタンはダサいので撤去。
代わりにデザインしたものを設置します。
（参照：はてなブログに11種類から選べるSNSフォローボタンをコピペ＋αで実装するカスタマイズ – いつ俺〜いつから俺ができないと錯覚していた？〜）
はてなブログ純正のアイコンを設置しました。
（参照：はてなブログのサイドバータイトルでFont Awesomeとはてなブログ純正アイコンを使う方法 – オークニズム）
関連記事などを目立つように変更です。
（参照：【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 – ひつじの雑記帳）
<style type=”text/css”>
.urllist-title-link { font-size: 13px;}
.urllist-date-link{ font-weight:700; margin:5px 5px;}
.urllist-date-link a{ color: #ffffff !important; background: #cc4f5e; padding: 0px 10px;}
.hatena-urllist>li { border-bottom: 3px dashed #ECF0F1;}
.recommend-content { margin: 15px 10px 15px 1px; font-size:14px;}
.recommend { position: relative; border: 1px solid #333; margin: 30px 5px;}
.recommend-title { position: absolute; top: -15px; left: 20px; font-size: 18px; font-weight: bold; background: #fff; padding: 0px 5px;}
.hatena-module-entries-access-ranking .urllist-with-thumbnails .urllist-item .urllist-image { width: 75px; height: 75px; border-radius: 0em; border: solid 3px #3f3f3f; }</style>
aboutページ変更
はてなブログのaboutページはいわばプロフィールページなのに見ての通り余りにもダサすぎる。
よってカスタマイズします。
右図のように変更。ページの都合上収まっていないが、まだデザインされているので確認してみてください。https://www.worker-ant0818.work/about
（参照：【コピペ歓迎】はてなブログのダサいaboutページを見やすくオシャレにカスタマイズ！ – オークニズム）
ボトムメニュー（スマホ画面のみ）
スマホ画面でのみ表示されるボトムナビゲーションを設定。
最近ではどのサイトやアプリでも利用されていて、回遊性アップには欠かせないものです。
【⇓⇓設定方法など詳細はこちら】
【はてなブログ】ボトムナビゲーションなどアクセスアップ手法まとめ
その他
ページが切り替わるとスーッとアニメーションが動く設定
（参照：【本当は教えたくないCSSコピペ】ページを開くとスーッてスライドするアニメーション – オークニズム）
ｈ２固定化解除
（参照：h2見出しが画面最上部に固定されるのを解除する方法 – ZENO-TEAL）
リンクにクリックが乗るとホバーするCSS
（参照：【CSSコピペ】カーソルを合わせるとふわっと浮かぶアニメーションカスタマイズ – オークニズム）
Twitter貼りつけ
私はツイッターとブログをやっているので、相乗効果のためにブログにもツイッターで呟いた内容が見れるようにしている。
（参照：はてなブログでtwitterをサイドバーや記事内に埋め込む方法 – MUTANT）
記事に吹き出し調の文章を挿入
記事を会話形式にして堅苦しくなく分かりやすく説明するときによく使う手法。
リード文や質問形式でもよく使うのでブログ運営には必須のデザインです。
はてなブログのカスタマイズには時間がかかる
これで参考にしたすべてのページを紹介することができました。
カスタマイズすることは私自身はとても楽しかったです。
学ぶことによって自分のサイトがどんどんかっこよくなっていくと思うと、楽しくて仕方ありませんでした。
しかし、ブログを書くことが本業ですからあまりお勧めしません。
ワードプレスで有料テーマを買った方がダントツで楽です。
合計でどれだけカスタマイズに時間がかかったのか覚えていませんが、かなり費やしました。
これだけ時間かけるなら２万円のテーマを買ってもお釣りがくると思います。
私はいい経験になったので、これで良しとします。
楽しかった～