『ZENO-TEAL』でオシャレな記事カード表示に変更!初心者でも簡単な良テーマ!【カスタマイズ】

f:id:mihao1853:20170509203050p:plain

 

 

定期的発作

 デザインテーマ・Nakidでブログを開始し、1か月後にBrooklynにカスタマイズ。そして、1週間後の今日、なんとまたデザインテーマを変更してしまった。

 自分でも思う。こんなことばかりしていないで、来訪者の為にコンテンツを充実させろ、って。

 しかし、これは一度「はてなブログ」や「wordpress」に触れてしまったものにとっては一生付きまとう問題だと思う。「もっと見やすくできないか?もっと自分好みにできないか?あれはできないか?これはできないか?・・・」

 HTMLとCSSはブログをはじめるまで、一切触れたことが無かったのだがこの言語は本当にまずい。あれがほしいこれがほしい、もっともっと...まるで薬物中毒者だ。多分ブロガーならみんな分かってくれると思う。

 話がそれてしまったが、Brooklynの後継機は、『ZENO-TEAL』となった。

シャレオツな記事カードの表示に憧れる

f:id:mihao1853:20170417203228p:plain

 こちらは少し前のブログデザイン。マスコット的な女の子がデカデカと常駐するブログにあこがれていたので、自分でできる範囲でそれを実現したもの。

 これも悪くなかったし、その時の俺としては「記事一覧」表示が一番見やすいと感じていたので、その通りに作った。

 しかし、段々と目が肥えてくると、これでは足りなくなってしまったのだ。

 

f:id:mihao1853:20170509203050p:plain

 その結果がこれだ。ブログ全体を万人受けするようなすっきりとしたタイプのデザインに変更した。ナビゲーションメニューバーは今回も採用し、試しに文字を英語にしたらさらにすっきり。

 ちなみにブログマスコットは一見消えてしまったように見えるが、

f:id:mihao1853:20170509211357p:plain

「オレハココニイルゾー!」

 それと今回はさらに、

f:id:mihao1853:20170509204938p:plain

 記事上部、メニュー下におすすめ記事を表示できるようにした。このカスタマイズに関しては、

 

zeno-teal.hatenablog.com

 ZENO-TEAL作成者様のブログを参考にさせていただいた。

 

f:id:mihao1853:20170509205440p:plain

 今回最大の目的であるブログカードもこんな感じで表示されるように。しかも、カーソルを合わせることで下線が表示されるオシャレ演出付き。大満足だ。

 

色や見出しのカスタマイズ

 いつもならまずはお手軽な見出しや色のカスタマイズから入るのだが、今回はデフォルトのまま使うことにした。

 理由としては、デフォルトの状態が凄く僕好みだっただけだ。青緑を基調としたデザインだが、僕は今まで無難な黒しか選んでいなかったので、これが非常に新鮮。
 ブログタイトルが黄色だったこともあり、すごくポップな仕上がりに。

 ただし、見出しのh2で使われている吹き出しのようなデザインがあまり好きではないので、今日あたり変わっているかもしれない。

 

※追記

f:id:mihao1853:20170509232758p:plain
結局変更しました。やはりこれだろう。

 

ヘッダー周りに一苦労 

f:id:mihao1853:20170507005718p:plain

 実は既存のヘッダーは使いまわしておらず、今回新たに新調した。というのも、ZENOはレスポンシブスタイルのデザインテーマなので、折角だから取り入れてみたところ、案の定、スマホ画面にうまく収まらなかったのだ。

 僕のブログのように横長のタイトルロゴを使用している場合、かなり大きな空白が発生してしまうので、画像サイズは1000×200のはてな推奨仕様に変更し、さらにロゴ自体も一回り小さく変更。

さらに、

 @media (max-width: 480px) {
.header-image-only #blog-title #blog-title-inner {
background-size: auto 120px;
height: 120px;
}
}

 CSSにmediaを挿入。120のところを微調整しながら変更して、スマホにも収まるように変更した。

新コンテンツ

f:id:mihao1853:20170509210316p:plain

 デザイン変更に伴い、さらなるブログコンテンツの充実化を目指してこんな項目を設けてみた。

 まだ記事は作成していないが、Collectionつまり収集物。その通りだ。

 よくよく考えてみれば、僕はオタクなので、人に自慢したいコレクションが沢山あるのだ。

 (ここにヘルシングのセラス嬢関連の文章があったのだが、ちょっと失礼だったので消しました。ご無礼。)

 

以上!カスタマイズの備忘録でしたとさ。

スポンサーリンク