【ブログカスタマイズ】ブログデザインをZENO-TEALに変更しました。

f:id:cristarin1120biz:20180823195505p:plain

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

変更しようと思ったわけ
ZENO-TEALとは？
とりあえず変更
スマホ表示
色の変更
シェアボタン
とりあえずここまで
追記　H30.6.19

変更しようと思ったわけ

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

www.kuro6.com

ZENO-TEALとは？

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

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

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

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

f:id:cristarin1120biz:20171016213608p:plain

こんな感じ！

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

とりあえず変更

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

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

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

設定方法を調べてみると

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

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

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

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

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

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

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

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

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

f:id:cristarin1120biz:20171016204708p:plain

スマホ表示

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

f:id:cristarin1120biz:20171016204228p:plain

おぅふ！

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

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

やばいやばい！！

これについては後程。

色の変更

やはり

f:id:cristarin1120biz:20171016204708p:plain

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

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

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

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

ーーッハ！

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

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

イエローに変更だ！！

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

zeno-teal.hatenablog.com

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

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

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

メインカラーは#FFEB3B

濃い色は#FDD835

薄い色は#FFEE58

にしました！

結果は…？

f:id:cristarin1120biz:20171016205406p:plain

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

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;
}
}

これを貼ってみた。

よし、スマホチェック！

f:id:cristarin1120biz:20171016211644p:plain

よしゃ！

ばっちりだぜ！！

神がいた…

シェアボタン

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

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

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

それに色んなシェアボタンが出てきても…って感じがしますし、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>