はたらきアリ新聞~会社員×副業で生き抜く時代~

社会を生き抜くための方法を常に見いだし、小さな節約を積み上げる「手取りアップ作戦」を実行中。社会に翻弄されない力を身に付けることがこの新聞の目的です。

はたらきアリ新聞

【はてなブログ】初心者がすべてコピペで出来たZENO-TEALカスタマイズまとめ

スポンサーリンク

スポンサーリンク

f:id:finana:20190620054456p:plain

【ZENO-TEAL】はてなブログPro版のテーマストアでダウンロードできる人気テーマです。

 

⇓はてな有料テーマ人気ランキング

www.worker-ant0818.work

 

私自身、このテーマに一目ぼれして以来、カスタマイズすることを覚えていろんなコードを入力しました。

 

実態はネットの賢者の知恵を借りてきて、私のサイトに合うように調整しただけなのですが。

 

今のデザインは現状、完成形です。

 

かなり満足しています。

 

前回、紹介したようなすごいデザインのサイトはいくらでもあって本当はマネしてみたい気持ちはあります。

 

 ⇓紹介記事はこちら

www.worker-ant0818.work

 

が、本業は記事を書くこと。

今のデザインも十分に良いと考えているので、ここらで一旦カスタマイズは中断です。

 

次の目標である

 

  1.  見出しの再検証
  2. リライト
  3. ツイッター戦略
  4. 内部リンク作成
  5. 雑記から特化へ

 

に集中したいと考えています。

ですが、その前にこれまでにカスタマイズを総まとめした記事を残しておこうと考えました。

 

 

【ZENO-TEAL】カスタマイズ総まとめ

f:id:finana:20190612014907j:plain

さて、はてなブログの有料テーマはデザインもおしゃれなのだが、しかしながらカスタマイズはどのテーマでも必要となってくるでしょう。

 

正直に言うと、テーマのデザインが少しパンチが弱いからです。

 

有名なブロガーさんは間違いなくワードプレスを使っています。

そしてそのワードプレスの有料テーマはどれも一級のおしゃれであって、そもそもがデフォルトでも使えそうです。

もしくはカスタマイズしても初心者でも使いやすいと良いことづくめです。

 

はてなブログテーマはデフォルトでは足元にも及ばないので、カスタマイズして追いつかなければなりませんが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に別々でコードを入力すればその分動作が重くなるので推奨です。

 

デザイン

f:id:finana:20190607035108p:plain

はてなブログはこのようにサイト全体ページを上のように区分けしています。

 

赤字部分の

 

  • タイトル下
  • 記事上
  • 記事下
  • フッタ

 

にHTMLを入力することができ、それぞれをCSSで装飾することが可能です。

 

形が決まっているので、ワードプレス民が不満に思うポイントなのですが、いくら自由度は高いワードプレスといってもブログサイト自体は大体のユーザーがこの形ですので特に気にする必要はありません。

 

タイトル下

f:id:finana:20190623035110j:plain

f:id:finana:20190623035137p:plain

まずはヘッダーですが、はてなブログのヘッダーは上の図のように幅が中途半端です。

そしてCSSなどでも変更することが出来ません。

しかし、めいっいぱい使わないとデザイン的にアウトかと。

 

対応策としてはヘッダを消してしまって、タイトル下にヘッダとなる画像を挿入するといった方法です。

参考にしたリンクは以下のサイトです。

(参照:【ブログカスタマイズ】はてなブログのヘッダー画像の余白を非表示にする方法 - つきなしことのは日記

 

f:id:finana:20190623035641p:plain

つぎにグローバルメニューです。

デフォルトでは何もないので、コードの追加でヘッダの直下に追加します。

カスタマイズ2:タイトル下にグローバルナビゲーションバーを表示 - ZENO-TEAL

そして【ZENO-TEAL】はレスポンシブル対応なので、スマホ表示の時は多段形式ととなるよう設定します。

タイトル下のグローバルナビゲーションバーを多段形式にする - ZENO-TEAL

 

f:id:finana:20190623040642p:plain

次にグローバルメニュー直下にあるコメント付きリンクです。

<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>

ひつじさんから参考にしました。

(参照:【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 - ひつじの雑記帳

 

そしてスライダーです。

画像付きおすすめ記事が次々に入れ替わるのがカッコよくて導入しました。

(参照:はてなブログにスライドショーをコピペで設置!初心者向けカスタマイズ - 英語とappleとDIYと

 

記事上

f:id:finana:20190623041805p:plain

記事上です。

上のぱんくずリストは

「デザイン」➡「カスタマイズ」➡「記事」からぱんくずリスト設置にチェックを入れました。入れる方がSEO的に有利になるようです。

 

記事タイトル直下にグーグルアドセンスのリスト広告を設置しました。

アドセンスの広告を指定した箇所にどの記事でも表示できるようにしたい場合必要です。同様に私は記事下、サイドバーそして1つ目の見出し前の4か所に広告が貼れるように設定しました。

それぞれの設定する方法は以下を参考にしました。

(参照:はてなブログへのアドセンス設置を全自動化するコード(コピペOK) - 45 For Trash

 そしてソーシャルパーツはデフォルトのものはすべてチェックを外しました。

読込時間が遅くなるためです。しかし拡散には必須のソーシャルパーツ。

これを自身で設定します。

(参照:カスタマイズ3:記事の上下にシェア用ソーシャルボタンを設置 - ZENO-TEAL

 

記事下

f:id:finana:20190623044409p:plain

①記事下のシェアボタン直下にフォローボタンを入れてみました。

見出しの画像と合わせて、デザイン性は高いフォローボタンだと思っています。

(参照:はてなブログでアイキャッチ画像を使って「この記事が気に入ったらフォロー」を設置 - FOXISM

②サイドバーが最下まで追従するCSSです。

(参照:CSSだけでサイドバーを固定/追従/解除する方法が超簡単!しかも軽くて滑らか! - オークニズム

③フッタを充実させるとかっこよく見えます。

(参照:カスタマイズ4:フッターにコンテンツを表示 - ZENO-TEAL

④いつでも「トップに戻る」ボタンが追従します。

(参照:はてなブログで超簡単に「トップページに戻る」ボタンを設置する方法 - はてぶ丸

 

サイドバー

f:id:finana:20190623050438p:plain

プロフィールをマテリアル風デザインにしてみました。

(参照:プロフィール部分をマテリアルデザインのアレっぽくしてみる - FOXISM

プロフィールにあるデフォルトのフォローボタンはダサいので撤去。

代わりにデザインしたものを設置します。

(参照:はてなブログに11種類から選べるSNSフォローボタンをコピペ+αで実装するカスタマイズ - いつ俺〜いつから俺ができないと錯覚していた?〜

f:id:finana:20190623050912p:plain

はてなブログ純正のアイコンを設置しました。

(参照:はてなブログのサイドバータイトルで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ページ変更

f:id:finana:20190623053041p:plainf:id:finana:20190623052801p:plain

はてなブログのaboutページはいわばプロフィールページなのに見ての通り余りにもダサすぎる。

よってカスタマイズします。

右図のように変更。ページの都合上収まっていないが、まだデザインされているので確認してみてください。https://www.worker-ant0818.work/about

 

(参照:【コピペ歓迎】はてなブログのダサいaboutページを見やすくオシャレにカスタマイズ! - オークニズム

 

ボトムメニュー(スマホ画面のみ)

f:id:finana:20190530021259p:plain

スマホ画面でのみ表示されるボトムナビゲーションを設定。

最近ではどのサイトやアプリでも利用されていて、回遊性アップには欠かせないものです。

 

⇩設定方法など詳細はこちら

www.worker-ant0818.work

 

その他

 

ページが切り替わるとスーッとアニメーションが動く設定

(参照:【本当は教えたくないCSSコピペ】ページを開くとスーッてスライドするアニメーション - オークニズム

 

h2固定化解除

(参照:h2見出しが画面最上部に固定されるのを解除する方法 - ZENO-TEAL

 

リンクにクリックが乗るとホバーするCSS

(参照:【CSSコピペ】カーソルを合わせるとふわっと浮かぶアニメーションカスタマイズ - オークニズム

 

Twitter貼りつけ

私はツイッターとブログをやっているので、相乗効果のためにブログにもツイッターで呟いた内容が見れるようにしている。

(参照:はてなブログでtwitterをサイドバーや記事内に埋め込む方法 - MUTANT

 

記事に吹き出し調の文章を挿入

記事を会話形式にして堅苦しくなく分かりやすく説明するときによく使う手法。

リード文や質問形式でもよく使うのでブログ運営には必須のデザインです。

www.worker-ant0818.work

 

カスタムするには時間がかかる

 

これで参考にしたすべてのページを紹介することができました。

これをすべて行うと私みたいなサイトになります。笑

 

カスタマイズすることは私自身はとても楽しかったです。

学ぶことによって自分のサイトがどんどんかっこよくなっていくと思うと、楽しくて仕方ありませんでした。

 

が、

 

ブログを書くことが本業ですから、あまりお勧めしません。笑

 

ワードプレスで有料テーマを買った方がダントツで楽です。

 

合計でどれだけカスタマイズに時間がかかったのか覚えていませんが、かなり費やしました。

 

これだけ時間かけるなら2万円のテーマを買ってもお釣りがくると思います。笑

 

私はいい経験になったので、これで良しとします。

楽しかった~