こんばんは、氷太です。
はてなブログのカスタマイズって難しいですよね～・・・。
ほんと自由が利かないというか、ユーザー目線に立っていないというか。
こうしたい！と思い立っても感覚的にそれができない。
ブログのトップページを「一覧形式」で表示できるようにしました
とかほんと今更過ぎるだろ・・・。
とは言えありがたい事に、数多くの先輩方が試行錯誤の末に素晴らしいカスタマイズを紹介してくれているの不幸中の幸い。
今回はオレがこのブログに施したシャレオツなカスタマイズをご紹介して行きたいと思います！
オメーのブログ、全然オシャレじゃねえから！
って方も知っておいた方がいいカスタマイズありますよ(震え声
このブログに施したカスタマイズ
テーマ
まずはデザインテーマは『ZENO-TEAL』を選択しました。
こういうカード式のレイアウトですね。
うん、これだけでもいいんじゃねえかなってくらいオシャレですね。
このデザインテーマを使用して記事を書く場合気を付けなければいけないのは、文中に『続きを読む』を挿入しなければならないという事です。
記事書く時左上に出てる奴ですね。
これを入れないと、ＴＯＰページから記事に飛ぶ事ができません。
それともう１つはこのカードのアイコン画像は、アイキャッチで自由に選択できるのではなく１番最初の画像が反映されるという事です。
メインカラーを決める
３つの色をGoogleのマテリアルデザインから選択しましょう。
Color - Style - Material design guidelines
オレは青系が好きなので青系で行こうと決めてましたが、青にも色々な青が当然ですがありますので迷いました。
ちなみにオレの選択したメインカラーの青は『#26C6DA』になります。
メインカラーが決定したら１段階濃い色と薄い色をメモして置き、
を参照しカラーコードを入力していきましょう。
プロフィールをサイドバーに設置する
ブログを作った段階で、初めからサイドバーにプロフィールがあるかと思います。
それで満足なら構わないんですが、好きな画像を指し込みたい方は設定が必要です。
まずは普通に記事で反映させたいプロフィールを記載して行きましょう。
ＨＴＭＬ編集タブを開いてコードをコピペ。
デザイン→カスタマイズ→サイドバー→モジュールを追加→ＨＴＭＬにコードを張る
こんな感じになります。
とはいえこのままだとバラついた感じになるので、<br />タグを使用したり元々のコードを<center>コード</center>とcenterタグで閉じると見やすくなります。
シェアボタンを設置する
ZENO-TEALでは初めからシェアボタンのデザインが用意されているので楽チンです。
タイトル上は不要かもしれませんが、タイトル下には置いておきましょう。
アイキャッチを利用した「この記事が気に入ったらフォロー」を設置する
このブログで言うと、記事下にあるこの部分の事ですね。
これ非常にイイですよ。マジで。
ただスタイリッシュなだけじゃありません。
実に機能的です。
設置は非常に簡単なので、これだけでも今すぐ入れておくべきです。
だってオレ、これを設置して２週間経たないくらいなんですが一気に読者さん増えましたもんね。
設置する前はブログ書いてる人『氷太』、読者『氷太』みたいな状態でした。
サイドバーに読者になるボタン設置してもいいと思いますが、オレみたいに読者１名の表記のまま耐えられるような精神力がない人は速攻で入れるべきです。
こちらのブログをご参照ください。
最新記事・人気記事等をタブメニュー式にサイドバーに設置する
初めはどうしようかな～って悩みました。
人気記事の一覧が出てますよね？
最新記事なりカテゴリーなりは、読み手がタブを切り替えないと認識されない訳ですから・・・。
どうしようかな～・・・って思いましたけど、スマホの人の事考えると凄くこの機能は魅力的なので導入する事に決定しました。
無駄にスクロールさせる事もないですしね。
それとＰＣ版で見て貰う時も利点はあるんですよ。
サイドバーに設置しているので追従させる事ができるんですよね。
これはこちらのブログでコードが記載されてます。
追従の仕方もね。
アドセンスを自動挿入＆任意に広告無しにする
はてなブログを使用している知識0の人間にとって最大の難関。
自動挿入も任意に広告無しも既に多くの人がやり方を紹介してくれている訳ですが・・・。
肝心の合体したものがないんだな。
試行錯誤の末に何故か分からないまま別のブログではできたのですが、挙動がどうにもこうにもおかしい状態でした。
今はこんな素晴らしいツールあるんですよ！！
これ凄い・・・。
コードを作成してくれて、張るだけでいいんですもん。
このツールはもっと広められるべきです。
自由自在に素人でも操れます。
ヘッダ画像の設定
このブログではコーヒーの写真を引き伸ばしてヘッダ画像に設定しております。
凄いイキってる感じがプンプコしますでしょ？
そういう感じにしたかったので満足してます。
フリー素材もレベルが凄い高いんですねぇ・・・。
何もコンセプトが無い方はこちらのサイト。
自然を用いたい方はこちらのサイト。
食べ物を用いたい方をこちらのサイト。
全部フリーです！ありがたく使用させて頂きましょう！
そして問題だったのがヘッダ画像のサイズ感ですよ。
上記のサイトで取得した画像をペイントで横幅1000×縦300にトリミングしたんですが全然フィットしない訳です。
調べても調べても、全然ピタッと収まらないんですよね。
それかスマホで見てみるとおかしい事になったり、読み込みが極度に遅くなったりする訳ですよ。
どうにもこうにも転ばないので、自分で要素を検証しながら設定してみる事に。
#blog-title {
background: url('画像URLを入力する') center 50%;
background-size: cover;
}
これをCSSに記入すればイケるハズです。
画像は記事に写真を投稿してURLを取得しましょう。
この部分です。
レスポンシブならスマホもこれでバッチリ反映されるはず！
まとめ
これぐらいでしょうか・・・。
あと何かカスタマイズしたかな・・・。
また思いついたら随時書き足して行きますね！
「ここどうなってんの？」っていう所あったら教えてください。
ほとんどZENO-TEALの機能かとは思いますが・・・。