はてなブログをpro化したからテーマをZENO-TEALに変えてみたよ

 

f:id:qweasdzxc-green:20170904173940j:plain

こんにちは、keyです

 

先週金曜日にはてなブログのproに「30日無料体験」があるよーっていう記事を書きました

 

green-house.hatenablog.com

 でね、結局一番何がしたかったかというと、ブログのデザインを見やすくしたかったんです

 

まだカスタムは途中段階なので、今みてくれてる時と次にブログに遊びに来てくれたときでデザインは変わってるかも!

今はZENO-TEALにしてCSSもいじって前のデザインよりはかなり見やすくなっていると思います

 

 

今日はZENOーTEALのテーマをインストールしたあとどのようにカスタマイズしたのかをお伝えしたいと思います

ZENO-TEALをインストールしてすぐの人の参考になればいいな~って感じです

 

カスタマイズ方法はコピペ

こんな記事を書くなら、ブログをカスタマイズするとき変更ごとにスクショをとって記録を残しておくべきでした。。。

 

といっても、僕自身が考案したCSSのコードなんてものはほとんどなくて、全て他の人のコードを参考にさせてもらっています

あはははは

 

先人たちには感謝しておりますm(_ _)m

リンクを貼ることで恩返しということで。。。

 

CSSはコピーさせていただきましたが、そもそものCSSの基本的な知識はこちらの本で学習しました

CSSだけでなく、はてなブログ初心者にはおすすめの良い本です!

 

green-house.hatenablog.com

 

 

まずはテーマをインストール

なにはともあれ、まずはテーマをインストールです

僕は「ZENO-TEAL」というテーマのデザインに惚れてpro化を決心したといっても過言ではないです

pro化 → テーマ何にしようか → ZENO-TEAL  じゃなくて、
ZENO-TEALええやんけ!!! → pro化するか!  って感じです

 

なのでpro化してZENO-TEALがインストールまで直行でした

ちなみにZENO-TEALはテーマランキングでも結構上の方です

f:id:qweasdzxc-green:20170904150806p:plain

 

ZENO-TEALのインストールへのリンクはこちら

ZENO-TEAL - テーマ ストア

 

特徴としては、トップページがカード型であることとレスポンシブデザイン対応だということ、色使いや節々がオシャレっていうことです!

 

個人的にカード型のほうが一覧性が良いので好きです

スマホ最適化を考えたときもレスポンシブデザインだとカスタマイズの手間がかなり省けるので助かりました

 

 

そういえば不思議に思ったことが1つありました

「新しいテーマをインストールしたらそれまでのCSSが消える」って聞いてたんですが、消えませんでした

なんでだろ?

 

よくわからないですが、消える可能性もあるので新しいテーマをインストールする際はCSSのバックアップをとっておきましょう!

 

 

参考ページ1:ZENO-TEALの公式デモサイト

ZENO-TEALを作った方の公式でもサイトです

zeno-teal.hatenablog.com

インストールしたらどんな感じになるのかなーっていうイメージが付きます

それに加えて、いくつかのカスタマイズのCSSを提供しています

  • タイトル下におすすめ記事を配置する方法
  • テーマカラーの変更方法
  • フッターにコンテンツを配置する方法
  • タイトル下にグローバルナビゲーションを配置する方法
  • ソーシャルボタンの配置方法
  • etc...

 

めちゃくちゃ参考になります

ZENO-TEALをインストールしたら、まずはこのサイトに行ってカスタマイズするのが良いと思います

 

僕はタイトル下におすすめ記事とか、フッターにコンテンツなどを今後導入していきたいと思っています

気が向いたときにします!!!

 

 

参考ページ2:「仮想株式会社TERIOSNET」さん

同じはてなブロガーさんです

サイト名はなんだか怪しいですね笑

ブログ自体を会社と見立てて、カテゴリーを◯◯課って感じで分けてる感じです

実際はまったく怪しいサイトではないです!

むしろカスタマイズの面でかなり助かりました

どうやらサイト自体最近できたようです

www.teriosnet.com

こちらもめちゃくちゃ参考にさせてもらいました

カスタマイズの例を出すと

  • フォントサイズ、行間、段落など記事体裁の調整
  • 見出しのカスタマイズ
  • 目次のカスタマイズ
  • カード表示に背景色
  • etc...

 

特にフォントサイズ、行間、段落などの記事体裁に関してはほんとにありがたかったです

というのも標準ではフォントサイズが小さすぎるし、なんとなく見づらいと感じていたのです

参考にさせてもらったCSSをコピペするだけでかな~~り見やすくなりました!

 

 

参考ページ3:「ヨッ!センス」さん

こちらのページでは「カエレバ」のデザインを参考にさせてもらいました!

いままでのCSSでは、テーマが変わったことによりカエレバの画面表示が変な表示になっていたからです

yossense.com

 

いろんな人の参考CSSを試してみて、最終的には「ヨッ!センス」さんのものがベストだと判断しました

 

レスポンシブ対応でカエレバのデザインに困っている方は参考にさせてもらってはいかがでしょうか

クリック率激増らしいですよ!僕はまだ変更したところだからわかんないけど!

プロブロガーの方のおすすめだし、期待しております\(^o^)/

 

 

まとめ

f:id:qweasdzxc-green:20170904173956j:plain

最初に言ったように、30日無料体験があるということで先週の金曜日にpro化しました

この記事はその記事から3日経っていますが、カスタマイズ自体は金曜日に行いました!

 

参考にさせていただいたページを参照することで、僕ぐらいのブログのカスタマイズなら2時間程度で完了することができました

 

いや~見やすいデザインっていいね!

なんとなくブログを更新しようっていう気になる!

前のデザインが糞すぎただけだけどさ!

 

ZENO-TEALを導入してすぐの方は参考にしてみてはいかがでしょうか

 

 

 

おわりっ