僕の使用しているブログデザイン、カスタマイズを紹介します。
※2018年6月18日追記 横幅を広くしました。
※2018年8月10日追記テーマの変更をしました。
※2019年10月28日追記テーマの変更をしました。
こんにちは、あるはです。
今回は僕のブログのデザインに使用しているテーマとカスタマイズを参考にさせていただいた記事とともに紹介したいと思います。
ブログデザイン
テーマ
使用しているテーマは「Innocent」です。
以前はZENO-TEALというカード型表示にできるテーマを使用していましたが、無理やりカード表示にしていてSEO的によくないかもと思ったり、ホーム画面で記事一覧を見る人もそんなにいないだろうと思い、デザインを変更しました。
テーマをアレンジ
文字サイズ
※現在の文字サイズは16pxです。
文字サイズを16pxから17pxに変更しています。文字は大きいほうが見やすいと思って少し大きめにしています。
あと自分のPCから見ると一部の文字が若干小さくなるという謎の不具合を解消するためでもあったりするのですが、ほかの端末から見ると何も異常は見られなかったのでそういう意味ではやらなくてもよかったかなと思います。
一応こちらの記事で少し語っているので合わせてどうぞ
ブログタイトル下のナビゲーションメニュー
こちらの記事「はてなブログテーマ「Innocent」のカスタマイズ（ナビゲーションバー編）」のコードをコピペして弄りました。記事内では詳しい解説がされていませんが、コード内のURLを好みのカテゴリのURLに変更して、アイコンをFontAwesomeから持ってきて置き換えるといった流れです。
ちょっと難しいかもしれませんが、見た目がかっこいいので頑張って導入する価値ありです。
タイトルのフォント
※現在は消しています
タイトルのフォントはWebフォントのGoogle Fontsからニコモジを使用しています。
デザイン設定→カスタマイズ→ヘッダーのタイトル下にlink href="https://fonts.～から始まるHTMLをコピペして、以下のCSSコードをデザインCSSにコピペするとタイトルのフォントが変わります。
#blog-title{ font-family: "Nico Moji"; font-size:30px; letter-spacing: 0.05em; }
なぜかスマホのほうで見るとフォントが変わってないんですよね...何とかしたいところです。
カスタマイズ
記事上のおすすめ記事
※現在は消しています
残念ながらどこを参考にしたかよく覚えてないのでそれっぽい記事を置いておきます。
記事内の人気記事セレクション（スマホ向け）の項目にあるデザインがとてもよく似ているのでおそらくこれだと思います。
少しアレンジをしていて、「人気記事セレクション」ではなく「ぜひ読んでほしい！」というタイトルにしています。コード内の4行目の人気記事セレクションと書いてあるところをぜひ読んでほしい！に変えただけなので簡単です。
他にもいいデザインがあったのでもしかしたら変更するかもしれませんね。
シェアボタン
※現在はZENO-TEALにデフォルトでついているデザインを使用しています。設定方法はこちらの記事からどうぞ↓
シェアボタンについてはこちらを参考にさせていただいたというか、そのままコピペなんですけどね。
最近HTTPS化してはてブの数が取得できなくなったので焦りましたがなんとかなりました。
その時の記事↓↓
はてブの数が取得できないよという方はぜひ見てみてください。
【はてなブログカスタマイズ】色々な「SNSシェアボタン」と「フォローボタン」を集めてみた。 - LIABLIFE（リアブライフ）
こちらにたくさんデザインが転がっているのでぜひどうぞ～
サイドバーのフォローボタン
こちらの記事のサイドバー用３（背景が降りてくる）の項目にあるコードのコピペです。ツイッター以外SNSをやっていないので、はてなブログの読者になるボタンとツイッターのフォローのみになっています。
いらない部分は消しましょう。
コードの最後に改行を入れることをおすすめします。（<p></p>を入れましょう）
一番上に戻るボタン
またまたどこを参考にしたか忘れてしまったので検索1位にあった記事を貼っておきます。
aniota-alvarado.hatenablog.com
この一番上に戻るボタンってみんな使ってるんですかね...？僕はあまり使っていないのですが、設置しているひとが多いので一応付けときました。
見出しのデザイン（大・中のみ）
※現在は消しています
見出しのデザインはこちらの2つの記事を参考にさせていただきました。
ブログのテーマカラーに合わせて色を変えただけですね。
ブログの横幅を広くしました。
※現在は消しています
PC版のみですが横幅を広くしました。
こちらの記事を参考にしました。
wannabe-jellyfish.hatenablog.com
そのままコピペしたら表示が崩れてしまったので、
#wrapperのwidthを900px
#mainのwidthを800px
に変更しました。
僕が変更したデザインは以上です。
詳しい解説をしようと思いましたが、僕の気力と体力が持たないので詳しいことはリンク先の記事を参照してください。
こんな記事も書いてます。
今回はここまで！
最後まで読んでいただきありがとうございます。
Copyright ©arhah All rights reserved.
