趣味と飛行とガジェットと

趣味で空を飛んでいるアラサー会社員が、スマホやタブレットを中心としたガジェットの活用法を気ままに紹介していきます。

スポンサーリンク

ブログのテーマをZENO-TEALに変えたった

f:id:c-miya:20170602180415p:plain

こんにちは、空飛ぶガジェッター、みいや(@flying_gadget_m)です。

読者の方は既にお気付きと思いますが、先日新テーマZENO-TEALを導入し、ブログのデザインを一新しました。管理人が行ったZENO-TEALの導入とカスタマイズについて、備忘録を兼ねてまとめます。

 

ZENO-TEALとは?

ZENO-TEALはorefolder (id:c-miya) さんが制作されたはてなブログ向け無料テーマ。トップページに画像が並ぶスタイリッシュなパネルデザインが特徴で、レスポンシブ対応なのでスマホ表示もバッチリの優れたテーマである。このような素晴らしいテーマを無料で公開してくれるorefolderさんに感謝。

 

www.foxism.jp

 

必須事項

テーマストアにも掲載されているが、ZENO-TEALを使う上で、以下に述べる事項は必須である。特に他のテーマから乗り換える人は過去の記事も全て対応させる必要があるのでそれなりに大変だと思う。

私もこれまでに書いた47記事を全て更新したが、ここ1週間はカスタマイズにかかりきりで記事を更新できなかった。

 

はてなブログProにする

はてなブログの無料版でZENO-TEALを使うことは推奨されていない。というのも、Google Adesnseの広告がトップページに表示されてしまうとポリシー違反となるため、はてなの広告を非表示にできるPro版の機能が必須だからだ。

私は以前からPro版を使っているのでこの点は問題なかった。というか、アドセンスの審査が通る内容のブログなら普通にProにした方が良いよ。私のブログの超絶ショボいアクセス数でもはてなブログProの料金とドメイン代くらいは回収できてるので。

 

hatenablog.com

 

記事の書き出しをZENO-TEALの流儀に合わせる

引っ越し組にはこれが最も大変な作業だ。ZENO-TEALにおける記事の書き出しの流儀とは以下の通りである。これからZENO-TEALでブログを書き始める人は、記事を書く際に必ずこの流儀を守る必要がある。

 

「アイキャッチ画像」→「導入文(3~4行)」→「続きを読む(Moreタグ)」→「見出し~本文(以降の構成は自由)」

 

これはどういうことかと言うと、ZENO-TEALはパネルデザインなので、トップページに各記事の概要がパネルで一覧表示される。このパネルの内容が「アイキャッチ画像」と「導入文」(Moreタグの手前まで)となるのだ。特に、「続きを読む(Moreタグ)」を設定しないとパネルをクリックしても記事にジャンプしない仕様となっているので要注意である。また、「続きを読む」の前に見出しを入れるとパネルに見出しの一部が不完全な状態で表示されるので、これもよろしくない。以下にZENO-TEALの流儀に従った記事の編集画面を示す。

 

f:id:flying-gadget:20171005201225p:plain

 

上記の編集結果はトップページのパネルには以下のように表示される。導入文がパネルのサイズに収まらない場合は途中までの表示となる。アイキャッチ画像の右上にはカテゴリが列挙される。上記の編集画面の記事はこちら

 

f:id:flying-gadget:20171005222718p:plain

 

アイキャッチ画像は記事の内容に関連した写真やイラストが最も良いが、ネタが無くて困る場合は素材サイトから適当に拾ってくることをお勧めする。トップページにパネルが並んだ時に見栄えが良くなるように選ぶのはセンスが問われる。私は一部の記事のアイキャッチ画像を無料で商用利用もOKの写真素材サイトである「Unsplash」さんからお借りした。

 

unsplash.com

 

トップページの表示記事数を偶数に

これも必須。トップページのパネルは横2列に並ぶので、奇数だと最後だけ1枚になり非常にバランスが悪い。トップページの記事数の設定は「ダッシュボード」→「設定」→「詳細設定」から簡単にできる。偶数の中でいくつにするかはサイドバーとの兼ね合いで決めればよい。PCで表示したときにサイドバーとパネル列の終わりがほぼ一致して、その直下にフッターが来るのが理想のバランスだと思う。ただしあまり多すぎると読み込みが遅くなるので適度に。このブログでは12記事にしている。

 

私が行ったカスタマイズ

テーマカラーの変更

ZENO-TEALのデフォルトのテーマカラーはテーマ名の由来にもなっているteal(青緑色)であるが、これは好きな色に変更可能である。このブログは飛行機がテーマなので、テーマカラーはGoogleのマテリアルデザインから空のイメージに近い水色をチョイスした。テーマカラーの変更方法は公式サイトでも紹介されている。

 

zeno-teal.hatenablog.com

 

フォントサイズと行間の調整

デフォルトの状態では若干文字が小さく行間が広いように感じたので、文字サイズを大きくして行間を狭くした。具体的にはデザインCSSに以下のコードを追加し、本文と大見出し(h3タグ)のフォントサイズと行間を変更した。

管理人はCSSの知識が皆無なので、CSSのカスタマイズはほぼコピペの寄せ集めである。なのでコードにおかしな点があるかもしれないが了承いただきたい。

 

/*フォントサイズ*/
.entry-content {
font-size:16px;
}

 

/*行間*/
.entry-content p { margin:0}

 

/*大見出し*/

.entry-content h3
{border-left-color:#03A9F4;
font-size: 22px}

 

その他のカスタマイズ

グローバルメニュー、ソーシャルボタンの追加、フッターのカスタマイズを公式サイトを参考に実施した。丁寧に解説してくれているので、そんなに難しくない。

 

zeno-teal.hatenablog.com

 

なお、はてなブログ自体のカスタマイズの基本は以下の書籍が分かりやすい。はてなブロガーなら1冊持っておいて損はないと思う。

 

テーマを変えた結果

見た目がおしゃれになった

自分で言うのもなんだが、ブログの見た目はかなり良くなったと思う。PC、スマホ、タブレットで表示を確認したが、どれも以前より格段に見やすくなった。記事を書くモチベーションもきっと上がると思う。

 

アクセスは…減った

テーマを変えてから、何故かアクセスは激減した(爆)。ただし、これはテーマを変えたことよりも、デザイン作業にかかりきりで記事を更新していないことが原因と考えている。進化したデザインで記事をたくさん書けばきっと以前よりも多くの人が読んでくれるようになるはず。

 

今後の課題

ヘッダ画像を作る

ブログタイトルが表示されるヘッダの部分、スペースが広いのに単色でちょっと味気ない。気の利いたヘッダ画像を作って入れたいところである。

 

プロフィールを充実させる

グローバルナビゲーションを作ってプロフィールへのリンクを貼ったはいいものの、肝心のプロフの中身が無さすぎる。ここは近いうちに充実させるんで、もうしばらくお待ちを。誰も興味ないかもしれないけどね。

【2017/10/8 詳細プロフィール作成しました】

www.flying-gadget.com

 

それでは、今日も読んで下さりありがとうございました。Good day!