カメラと週末旅行

一眼レフカメラを片手に週末に旅行するブログ

はてなブログテーマを「ZENO-TEAL」に変更|導入時の簡単カスタマイズを紹介

ブログテーマを「ZENO-TEAL」に変更

ブログテーマを「ZENO-TEAL」に変更しました。久しぶりのブログ大規模リニューアルでした。大変だった。忘れないうちに実装したカスタマイズをまとめます。

写真のサイズが大きく、WordPressみたいなカードスタイルに惹かれ、「ZENO-TEAL」に変更しました。 この「ZENO-TEAL」ですが、導入に少しコツがいります。導入時の注意点と、導入後のカスタマイズをまとめました。ご紹介します。 

 

ブログテーマ「ZENO-TEAL」導入は大変、まずは準備

テーマに合うように、記事を書き換える

まず、テーマを導入するにあたり、記事の導入部分を書き換える必要があります。記事の作成は、以下のように、①アイキャッチ画像、②簡単な導入文、③「つづきを読む」です。この順番で記事を作成します。アイキャッチ画像は極力準備しましょう。最悪デザインが崩れる場合があります。

ZENO-TEALの記事の書き方

 そうすると、ブログトップではこのようになります。

③の「つづきを読む」より上の文書が、ブログトップに記載されます。 

ZENO-TEALの記事の書き方

①の写真の次に、「つづきを読む」を設定すると、ブログのTOPに②の文書がなくなります。シンプルにしたい方は、これでもいいかもですね。お好きな方でどうぞ。

 

スタイルを導入する

記事の変更が終わったら、テーマをインストールします

ZENO-TEAL - テーマ ストア

「デザイン」→「テーマ ストアでテーマを探す」→「人気順」でTOP5に入っていると思いますので、そこからZENO-TEALを選択します。ついさっきまでZENO-TEALではなく、ZERO-TEALと間違って認識していたよ・・・。ここまでは、いつものテーマインストールですので、問題ないと思います。 

 

記事一覧の設定を「全文形式」に、トップの記事の数を偶数に変更する

さか、ブログトップを見てみましょう。素敵なカード型になって・・・いないと思います。たぶん、めちゃくちゃな状態になります。「設定」→「詳細設定」→「トップページの表示形式(PC版)」→全文形式にチェックを入れてください。また、トップの 記事の数を偶数にしてください。

ZENO-TEALの導入方法

私は、はてなブログを始めてすぐにPROに移行し、その際に、全文形式から一覧形式にしていたので、ここの設定の存在すら忘れかけていました。全文形式にチェックすると、カード風に表示することが出来ます。

 

「ZENO-TEAL」のカスタマイズいろいろ 

せっかくイマドキ風のデザインになったので、少しカスタマイズしていきます。テーマを変えてCSSもクリアされてしまうので、気分一新。作り変えます。

(1)ナビゲーションバーの作成

ナビゲーションバーとは、これです。タイトル下にあるメインカテゴリを表示するバーです。これがあると、何のブログか一発でわかりますし、関連する記事にも飛びやすいので、導入した方がいいと思います。

ZENO-TEALの導入方法

 参考サイト

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

 

(2)TOPに戻るボタンの実装

私の旅行の記事は文字数が1500〜3000、さらに写真が15〜25枚程度あるため、記事が長くなります。トップにすぐに戻れるよう、右下に「TOPに戻る」ボタンを導入しました。

ZENO-TEALの導入方法

参考サイト

【画像あり】はてなブログで「上へ戻る」ボタンを設置する方法

うっすら透明な「上に戻る」ボタンのはてなブログ設置法

 

(3)記事一覧に「前のページ」ボタンを追加する

ブログトップの記事一覧の下に、「前のページ」ボタンを追加しました。「次のページ」ボタンがあるのに、「前のページ」ボタンがないのが、どうしても気になってしまい、導入しました。

ZENO-TEALの導入方法

参考サイト

はてなブログの記事一覧に「前のページ」ボタンを追加する方法【コピペOK】 - まろりかモンスター

 

(4)背景の色をドットから灰色にする

「デザイン」→「カスタマイズ」→「背景色」で灰色に変更しました。これだけでも雰囲気が大きく変わります。

 

(5)フォントサイズを変更する

デフォルトのフォントサイズが少し小さいので、大きく変更しました。「デザイン」→「カスタマイズ」→「デザインCSS」にいき、以下の文字列を貼り付けて下さい

/* 文字サイズと行間 */
.entry-content {
font-size:15px;
line-height:1.9em;

今は15pxにしています。お好みのサイズに変更してみてください。

 

その他のカスタマイズいろいろ 

ZENO-TEALの導入をキッカケに、いろいろカスタマイズしてみました。それ以外でも、カスタマイズできるところは沢山あります。 プロフィール画像の拡大や、ファビコンの作成などなど、実際にトライしてうまくいったカスタマイズは、随時記事にしてアップしていきます。おまちください。

 

まとめ

ブログの記事、100記事突破までに、サイトの形を固めておきたかったので、このタイミングでトライしました。写真のサイズが大きく、WordPressみたいなイマドキ風のカードスタイルに惹かれ、「ZENO-TEAL」に変更しましたが、満足のいく仕上がりになりました。久しぶりのブログ大規模リニューアルで大変でしたが、がんばった甲斐があったと思います。

最後に、すばらしいブログテーマ「ZENO-TEAL」を開発して頂いた作者様には、感謝、感謝です。

はてなブログのテーマZENO-TEAL