デザインテーマ「ZENO-TEAL」カスタマイズ忘備録＋α【はてなブログ】

こんにちは。

あなたはブログテーマは何を使っていますか。

私ははてなブログをはじめた2018年2月からこれまでデザインテーマ「Brooklyn」のお世話になってきたのですが、2018年6月にデザインテーマを「ZENO-TEAL」に変更してみました。

「ZENO-TEAL」には公開された頃から興味があったのですが、その頃は使い始めた「Brooklyn」を自分なりにカスタマイズし終えたばかりの時だったのと、まだあまりカスタマイズに慣れていなかったこともあり、すぐに変更することはしませんでした。

あれから1年。

はてなブログのHTTPS化移行のためにコードの修正作業をしていた私は、自分が以前よりは「どのようにすればブログテーマをカスタマイズできるか」がわかるようになっていることに気づきました。

そこでHTTPS化でコードの修正などを行うついでにデザインテーマを「ZENO-TEAL」に変更してみることにしたのです。

今回は、私がデザインテーマを「ZENO-TEAL」に変更する際に行ったカスタマイズをご紹介します。「ZENO-TEAL」以外のテーマでも使えるカスタマイズもありますので、よろしければ試してみてください。

ZENO-TEALとは？

「ZENO-TEAL」はorefolder (id:c-miya) さんが制作されたトップページをカード型にレイアウトしたデザインテーマです。レスポンシブ対応のため、PCでもスマホでもフラットなカード型レイアウトで表示されるのが魅力です。

ZENO-TEAL

これまで利用してきた「Brooklyn」もレスポンシブ対応のテーマでしたが、これまではレスポンシブは利用せずスマホではスマートフォンのデザイン設定を利用してきました。

今回の「ZENO-TEAL」ではスマホでカード型レイアウトを使うためにレスポンシブデザインモードで利用します。

ZENO-TEALを利用する際の注意事項

「ZENO-TEAL」を導入する際にはいくつか注意しなければならないことがあります。

１．はてなブログ無料版で使用しない

「ZENO-TEAL」は、はてなブログ無料版で使用すると、広告の表示がGoogleアドセンスのポリシー違反になる恐れがあるため無料版では使うことができないようです。「ZENO-TEAL」を使用するには、はてなの広告を非表示にできるPro版の機能が必須になります。

２．各記事の一番最初に画像を表示する

トップページのカード型レイアウトで表示される画像は、各記事の一番最初の画像が表示されます。 そのため「ZENO-TEAL」のフラットなデザインを活かすには、各記事の一番最初に画像を設置する必要があります。

画像の推奨サイズは16：9のようです。

私の場合は、元々、トップ画像を全て黄金比のサイズ（1024×630px）で統一していたので、そのままでもきれいに表示されました。

３．各記事に「続きを読む（moreタグ）」を入れる必要がある

「ZENO-TEAL」では、トップページのカードに各記事の一番最初の画像と導入文が表示されます。

そして、この導入文には記事の「続きを読む（moreタグ）」の手前までの内容が表示されるのですが、「続きを読む（Moreタグ）」を設定しないとカードをクリックしても記事にジャンプしない仕様となっているのです。

そのため「ZENO-TEAL」を使用する際は、全ての記事に「続きを読む（moreタグ）」を入れる必要があります。

また「続きを読む（moreタグ）」の前に「見出し」を入れると、カードに「見出し」の一部が表示されてカッコ悪くなってしまいます。

私の場合は、元々全ての記事の一番最初の画像の下に以下のコードを記述していたので、とくに何もしなくても移行することができました。

<p style="display: none;">　</p>
<p><!-- more --></p>

このコードの赤色の部分<p style=”display: none;”>　</p>は「このコードから下の項目を表示しない」というコード、青色の<p><!– more –></p>は「続きを読むタグ」です。

一番最初の画像の下にこのようにコードを記述することで、トップページに記事タイトルと画像のみを表示することができます。

このコードは「ZENO-TEAL」でなくても利用することができますが、他のデザインテーマでは「コメントを書く」ボタンがトップページに表示されてしまいます。

そのような場合は次のコードを

「ダッシュボード」＞「デザイン」＞「カスタマイズ」＞「｛｝デザインcss」

に記述すると 、トップページでコメント欄を表示しないようにすることができます。

/*はてなブログトップページでコメント欄を非表示にする*/
.page-index .comment-box, .page-category-category_name .comment-box, .page-entries-year-month-day .comment-box{
display:none;
}

 ※「ZENO-TEAL」ではこのコードは必要ありません。

４．記事一覧の設定を全文形式にする

「ZENO-TEAL」を導入したら

「ダッシュボード」＞「設定」＞「詳細設定」＞「トップページの表示形式（PC版）」＞「全文形式」

で「全文形式」を選択します。そうしないとトップページをカード型レイアウトで表示することができません。これまで「一覧形式」で表示していた人は意外と見落としがちなポイントです。

５．トップページの記事数を偶数にする

トップページをカード型レイアウトは横2列に並ぶため、奇数だと最後が1枚だけになってしまいます。記事数の変更は

「ダッシュボード」＞「設定」＞「詳細設定」＞「トップページの記事数（PC版）」

で変更することができます。

 導入したカスタマイズ

ここからはデザインテーマを「ZENO-TEAL」に変更する際に私が導入したカスタマイズについて、「ZENO-TEAL」独自のカスタマイズと、他のデザインテーマでも流用できるカスタマイズの順にご紹介します。

「ZENO-TEAL」独自のカスタマイズ

「ZENO-TEAL」独自のカスタマイズについては「ZENO-TEAL」公式サイトに紹介されている方法に準じて以下を導入しました。

タイトル下にグローバルナビゲーションバーを表示

まずは以下の記事を参照してグローバルナビゲーションバーを設置しました。

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

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

全体のテーマカラーを変更

続いてテーマカラーをもともとの「Teal」から「Gray」系に変更しました。

カスタマイズ5：全体のテーマカラーを変更する – ZENO-TEAL

背景の変更

ZENO-TEALの背景はデフォルトではドットですが、これをシンプルな白に変更しました。背景はダッシュボードの「背景画像」「背景色」で簡単に変更することができます。

「ダッシュボード」＞「デザイン」＞「カスタマイズ」＞「背景画像」or「背景色」

フッターのカスタマイズ

続いてブログの一番下、フッターをカスタマイズ。今回は「読者登録」ボタン、「お問い合わせ」ボタンも設置してみました。

 カスタマイズ4：フッターにコンテンツを表示 – ZENO-TEAL

他のデザインテーマでも流用できるカスタマイズ

続いては、今回、私が導入した「ZENO-TEAL」以外のデザインテーマにも流用できるカスタマイズをご紹介します。

jQueryの読み込みを速くするコード

シロマ (id:shiromatakumi) さんの記事を参考にjQueryコードの見直しを行いました。

はてなブログをカスタマイズしてる人向け。jQueryの読み込みを速くするためにコードを変えてみた – NO TITLE

実は「jQueryの読み込みを速くするコード」自体は、今までいろいろなカスタマイズを導入する中で記述されていたのですが、今まであまり意味がわかったせいもありカスタマイズしたコードごとにヘッダー・フッター・記事上・記事下などいろんなところに同じjQueryコードが貼られていました。

今回のカスタマイズに際して、それらのコードをヘッダー１箇所を残して他の場所のコードを全て削除することができました。

ヘッダーの高さを調整

「ZENO-TEAL」はデフォルトだとヘッダーの高さが少し大きめな気がするので調整します。

/*ヘッダー高さ*/
#blog-title{
height:180px;
}

コードの180の部分を調整することでヘッダーの高さを変更できます。

このコードは次の位置に貼り付けます。

「ダッシュボード」＞「デザイン」＞「カスタマイズ」＞「｛｝デザインcss」

文字サイズ・行間・改行での行間の調整

「ZENO-TEAL」のデフォルトでは文字サイズが小さめ、行間が広めなのでそれぞれ調整します。

/*文字サイズ変更*/
.entry-content {
font-size:16px;
line-height:1.8em;
}

/*改行での行間*/
.entry-content p {
margin: 0.3em 0;
}

 16の部分を変更すると文字サイズ、1.8の部分を変更すると行間、0.3の部分を変更すると改行での行間をそれぞれ調整することができます。

このコードは次の位置に貼り付けます。

「ダッシュボード」＞「デザイン」＞「カスタマイズ」＞「｛｝デザインcss」

複合メニューバーの導入

これまで「スマートフォン」のデザイン設定で使用していたスマホ画面用の「複合メニューバー」をレスポンシブデザインの「ZENO-TEAL」に導入します。

スマホ画面に「複合メニューバー」を導入する方法【はてなブログ カスタマイズ忘備録（２）】

「複合メニューバー」のコードを以下に貼り付けます。

「ダッシュボード」＞「 デザイン」＞「カスタマイズ」＞「ヘッダ」＞「タイトル下」

ここに貼ることで、レスポンシブデザインモードを利用した際、PC画面でもスマホ画面でも「複合メニューバー」が表示されるようになります。

今回は、先程、変更した「ZENO-TEAL」の全体カラーに合わせて「複合メニューバー」の色も変更しました。

シェアボタン・読者登録ボタンのカスタマイズ

「ZENO-TEAL」にはオリジナルのシェアボタンが用意されていますが、今回は「Brooklyn」で利用していたシェアボタンを引き続き使うことにしました。読者登録ボタンも「Brooklyn」のものを利用させていただいています。

他のデザインテーマで「Brooklyn」のシェアボタン・読者登録ボタンを利用する方法【はてなブログ】

カテゴリーをリスト表示からタイル表示に変更

「ZENO-TEAL」ではサイドバーのカテゴリーがリスト表示されますが、これを「Brooklyn」のようなタイル表示に変更しました。

サイドバーのカテゴリーをリスト表示からタイル表示にする方法【はてなブログ カスタマイズ】

 ヨメレバ・カエレバのデザインカスタマイズ（レスポンシブ版）

「ZENO-TEAL」をレスポンシブデザインモードで利用するにあたり、ヨメレバ・カエレバのデザインカスタマイズもレスポンシブで利用できるものに変更しました。

コードはつばさ (id:tsubasa123)さんが紹介されているレスポンシブ版のデザインcssを利用させていただきました。

コピペでどうぞ。CSSでカエレバ・ヨメレバのデザインカスタマイズ2案目 – つばさのーと

今回はつばさ (id:tsubasa123)さんのコードを「ZENO-TEAL」に合わせ少し調整し、Yahoo!ショッピングと7netを追加した次のコードに修正しました。

/*ヨメレバ・カエレバ（レスポンシブ）*/
.booklink-box, .kaerebalink-box {
font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
padding: 22px 25px 22px 25px;
width: 94%;
margin: 0 auto 15px;
border: 3px solid #dfdfdf;
box-sizing: border-box;
text-align: center;
}
.booklink-image, .kaerebalink-image {
width: 100%;
margin: 0 0 5px 0;
}
.booklink-image img, .kaerebalink-image img {}
.booklink-info, .kaerebalink-info {
line-height: 125%;
width: 100%;
}
.booklink-name, .kaerebalink-name {
margin: 0 0 4px 0;
}
.booklink-name a, .kaerebalink-name a {
color: #0066cc;
text-decoration: underline;
}
.booklink-name > a, .kaerebalink-name > a {
font-size: 16px;
}
.booklink-name a:hover, .kaerebalink-name a:hover {
color: #FF9900;
}
.booklink-powered-date, .kaerebalink-powered-date {
font-size: 8px;
}
.booklink-detail, .kaerebalink-detail {
color: #333333;
font-size: 12px;
margin: 0 0 10px 0;
}
.booklink-link2, .kaerebalink-link1 {}
.booklink-link2 a, .kaerebalink-link1 a {
width: 90%;
display: block;
margin: 0px auto -12px;
padding: 10px 1px;
text-decoration: none;
font-size: 14px;
font-weight: bold;
box-shadow: 2px 2px 1px #dcdcdc;
}
.booklink-link2 a:hover, .kaerebalink-link1 a:hover {
opacity: 0.6;
}
@media screen and (min-width: 800px) {
.booklink-box, .kaerebalink-box {
text-align: left;
display: table;
}
.booklink-image, .kaerebalink-image {
vertical-align: top;
box-sizing: border-box;
display: table-cell;
width: 111px;
text-align: center;
margin: 0;
}
.booklink-image img, .kaerebalink-image img {
max-width: 100%
}
.booklink-info, .kaerebalink-info {
line-height: 125%;
vertical-align: top;
box-sizing: border-box;
display: table-cell;
padding-left: 25px;
width: auto;
}
.booklink-name, .kaerebalink-name {
margin: 0 0 24px 0;
}
.booklink-name > a, .kaerebalink-name > a {
font-size: 16px;
}
.booklink-powered-date, .kaerebalink-powered-date {
margin: 6px 0 0 0;
}
.booklink-detail, .kaerebalink-detail {
margin: 0 0 14px 0;
}
.booklink-link2 a, .kaerebalink-link1 a {
width: auto;
text-align: center;
margin: none;
}
.booklink-link2 > div, .kaerebalink-link1 > div {
width: 33.33%;
padding: 0 5px 5px 0;
box-sizing: border-box;
float: left;
}
}
.shoplinkamazon a {
color: #ffffff;
background: #ff9901;
border: 2px solid #ff9901;
}
.shoplinkrakuten a {
color: #ffffff;
background: #bf0000;
border: 2px solid #bf0000;
}
.shoplinkkindle a {
color: #ffffff;
background: #0074c1;
border: 2px solid #0074c1;
}
.shoplinkseven a {
color: #ffffff;
background: #00BABE;
border: 2px solid #00BABE;
}
.shoplinkyahoo a {
color: #ffffff;
background: #0074c1;
border: 2px solid #0074c1;
}

このコードは次の位置に貼り付けています。

「ダッシュボード」＞「デザイン」＞「カスタマイズ」＞「｛｝デザインcss」

最終更新日を表示

記事の最終更新日を表示するカスタマイズは、「Brooklyn」の頃からつばさ (id:tsubasa123)さんの紹介されているコードを利用させていただいています。

リライト好きな方へおススメしたい最終更新日を自動で表示するカスタマイズ – つばさのーと

ただし、今回デザインテーマを「ZENO-TEAL」に変更するにあたり、デザインcssのコードを「ZENO-TEAL」に合わせて次のように修正しました。

/*最終更新日を表示　CSSの追記（PC）*/
.lastmod {
color: #616161;
background-color: ;
padding: 5px 6px;
text-decoration: none;
font-size: 100%;
display: inline;
margin-left: 10px;
}
.lastmod::before {
margin-right: 5px;
padding-left: 3px;
font-family: FontAwesome;
content: '\f021';
}
.entry-date a {
padding: 5px 6px !important;
}
.entry-date a::before {
margin-right: 5px;
padding-left: 3px;
font-family: FontAwesome;
content: '\f017';
}

このコードをつばさ (id:tsubasa123)さんの紹介されている「CSSの追記（PC）」コードの代わりに以下に記載しています。

「ダッシュボード」＞「デザイン」＞「カスタマイズ」＞「｛｝デザインcss」

※最終更新日を表示するには、このコードの他につばさ (id:tsubasa123)さんの記事にあるコードを記事下に貼る必要があります。

コメントを書くボタンをカスタマイズ

id:minimalgreenさんのはてなブログの「コメントを書く」ボタンを大きく表示するコードを導入しました。

はてなブログ「コメントを書く」ボタンのカスタマイズ – Hatena Blog Theme Custom

コードは次の位置に貼り付けています。

「ダッシュボード」＞「デザイン」＞「カスタマイズ」＞「｛｝デザインcss」

ソースコードの表示のカスタマイズ

orefolder (id:c-miya) さんの記事を参考に、はてなブログでソースコードを見やすく表示するコードを導入しました。

はてなブログでソースコードの表示をわかりやすくするカスタマイズ – FOXISM

今回は「パターン2：黒背景」のcssコードを次の位置に貼り付けています。

「ダッシュボード」＞「デザイン」＞「カスタマイズ」＞「｛｝デザインcss」

 「Brooklyn」から引き続き使用するカスタマイズ

「Brooklyn」で導入している以下のカスタマイズは、テーマを「ZENO-TEAL」に変更後、特に手を加えなくてもそのまま使用することができました。

 「この記事は約◯分で読めます。」を表示

「この記事は約◯分で読めます。」を表示する方法【はてなブログ カスタマイズ】

強調表示の太字に蛍光ペン風のラインをつける

強調表示の太字に蛍光ペン風のラインをつける方法【はてなブログ カスタマイズ】

強調表示の「斜体」を強調表示の「太字」に変える

強調表示の「斜体」を強調表示の「太字」に変える方法【はてなブログ カスタマイズ忘備録（８）】

 Google AdSenseのカスタマイズ

AdSense広告の自動挿入コードは「ZENO-TEAL」に変更後も、PC版の設定がそのまま引き継がれました。

はてなブログの記事ページにAdSense広告を自動挿入

【PC版】はてなブログの記事ページにAdSense広告を自動挿入する方法【忘備録】

しかし、そのままではスマホでもPCでの広告表示設定が適用されてしまうので、AdSenseコードのカスタマイズを行いました。

レスポンシブ ウェブ デザインでPCとスマホでの広告の表示・非表示や広告サイズを切り替え

【AdSense】レスポンシブ ウェブ デザインでPCとスマホでの広告の表示・非表示や広告サイズを切り替える方法

まとめ

今回は、私がデザインテーマを「ZENO-TEAL」に変更する際に行ったカスタマイズをご紹介しました。

デザインテーマの変更によって、もしもアクセス数や収益が大きく減るようなことがあれば、レスポンシブデザインモードの利用を止めたり「Brooklyn」に戻すことも考えていたのですが、今のところはデザインテーマの変更による影響はなさそうです。

また今回のデザインテーマの変更で、今までよくわからないまま貼り付けていたカスタマイズコードも整理することもできました。これからデザインテーマを「ZENO-TEAL」に変える方や、ブログをカスタマイズする方の参考になれば幸いです。

デザインテーマを「ZENO-TEAL」に変更する際に行ったカスタマイズの紹介は以上です。