【前編】ブログデザインをZENO-TEALに変更しました。

今回は今人気の『ZENO-TEAL』というブログテーマに変更しました。

 変更しようと思ったわけ

読者登録をさせていただいているkuro6さんのブログがオシャレで見やすいなぁ～って思っていたらブログのテーマについて紹介しておりましたので真似をさせていただきましたｗ

www.kuro6.com

 ZENO-TEALとは？

はてなブログで今超人気のテーマです。

カード表示がイケていると騒がれています。

僕も超イケてる！　って思ったので導入しようと思いました。

前はシンプル過ぎだったので…

こんな感じ！

おすすめがトップに出るとか羨ましいぞ！

とりあえず変更

これでオシャレになるぞぉ～って思ったら見れねぇ！！！

どのページも開かねぇ！！！

って思ったら僕が良く見ていなかっただけです。

設定方法を調べてみると

『続きを読む』の設定をしないと開かない。

画像表示しないなぁ～って思ったら

ブログの冒頭（一番トップ）に貼らないといけない。

なかなかデザイン変更は難しいなぁ～と思いつつ、まずは全ての記事が読めるようにしなくては！

ということで、すべての記事（７５記事）を修正しました。

（記事数多い人は泣くよなぁ…ってか泣いてる人いっぱいいた）

かかった時間はおよそ３時間…同じことの繰り返しをするこの作業が苦痛でした…

けれど、オシャレなブログにするには絶対にテーマ変更は必要だったのでとにかく作業をしました。

無事、すべてのコンテンツが開けるようになり、再び開業することができました。パチパチ。

スマホ表示

さて、スマホでも見てみよう。

おぅふ！

レスポンシブにしたらこうなるのね…

Daysしか映っとらんやんけ！

やばいやばい！！

これについては後程。

色の変更

やはり

このColorfulDaysにはこのグリーンは合わんよな…

あれ、どこからか声がする…

『凛ちゃんと言えば～～？』

『イエローだよーーー！！』

ーーッハ！

そうだ、凛ちゃんといえばイエローだ！

グリーンじゃない、イエローだ！

イエローに変更だ！！

色の変更はこちらを参考に。

zeno-teal.hatenablog.com

公式ページにて色変更のやり方をみながらやりましたが

わかりづらい！　というか、知識なさ過ぎてわからねぇ！

コピペで済むんですが、コピペの仕方というか、色コードを見つけ出して貼って、貼り付けたらどこが変わるんだかよくわからなかったですが、とりあえずやってみようと思ってペタペタ。

メインカラーは#FFEB3B

濃い色は#FDD835

薄い色は#FFEE58

にしました！

結果は…？

イエローだよーーーっ！！

OKOK、今のところばっちり！

スマホは？

あ、そうか。レスポンシブで変になっちゃったから調整しなきゃな。

調べてみると為になる記事が。

www.mori-tako.com

そしたら神に出会ったという記事を発見。

拝ませていただこう。

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

 これを貼ってみた。

よし、スマホチェック！

よしゃ！

ばっちりだぜ！！

神がいた…

シェアボタン

噂によるとデフォルトは重いらしい。

確かにページを開いたのにシェアボタンだけがゆっくりと出てくる感じはあります。

なのでやはり重いのでしょう。

それに色んなシェアボタンが出てきても…って感じがしますし、ZENO-TEALの方も載せてくださっているので合わせて使おうと思います。

zeno-teal.hatenablog.com

デザイン設定→スパナ→カスタマイズタブを開きます。

その中の記事にある記事上の入力欄をクリックします。

記事上だけでも良いかもしれませんが、僕はどうせならってことで両方に設置しました。

<div class="snsbtns1">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="sns-fb">Facebook</a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}', '', 'width=500,height=400'); return false;" class="sns-tw">Twitter</a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="sns-po">Pocket</a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button sns-hb" data-hatena-bookmark-layout="simple">Hatebu</a>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</div>

これでスマートなシェアボタンになりました！

（LINE共有もできれば残したかったけど…）

 とりあえずここまで

 記事の修正で非常に時間がかかり、色替えやヘッダー画像の修正で疲れちゃったので一旦ここまで。

こうやってまとめてみると大したことがなく感じるけど、やってみた側は結構大変なんだぜ（ドヤ）

良かったらZENO-TEAL利用の際に参考にしてください。

また、参考にさせていただいたサイトの運営者様方ありがとうございました。

追記　H30.6.19

イエローはいいんだが…見づらい！！
ということでイエローは崩したくないのですが、ちょっと暗めのイエロー？に変更。

Amber（アンバー）に変更しました。
もはやイエローではないとかいわないｗ