僕はHTMLやcssの知識がほぼ0な状態(聞いたことはある程度)でブログを始めました。
しかし、そんな僕でもやってみると簡単にカスタマイズすることができました。
それもそのはず、検索してビックリ!
コピペOKな見出しやシェアボタン等のcssを公開している神ブロガーさんがたくさんいらっしゃるではありませんか。
その中からさらに自分好みのものをペタペタ貼って完成!
自分でやったことといえば、カラー変更ぐらいのもんです。
今回は僕がこのブログをカスタマイズする際に参考にした記事や、こういうデザインもいいなと思った記事をまとめて紹介します!
見たい場所へジャンプ
カスタマイズする前に
はてなブログは、1つのアカウントで最大3つのブログを作成できます。(はてなブログProだと最大10個まで)
なので、非公開のブログを作ってまずはそこで実際の見栄えがどう映るか確かめつつ作業することをオススメします。
本ブログをいじりまくるとミスしたとき修正が大変ですからね…!
なにか不具合があったときにすぐに元に戻せるようソースコードのバックアップもお忘れなく!
タイトル文字のカスタマイズ
ブログタイトル「すみっこから」のフォント設定です。
ちなみに僕は「Sawarabi Gothic」というフォントを使用していて、ゆるくてまるっこい見た目が気に入っています。
タイトル前の紙飛行機アイコンは、こちらの記事を参考にさせていただきました。
文字の大きさや行間のカスタマイズ
記事中での文字サイズや、改行した際の行間を調整しました。
初期状態だと改行したときに行間が空きすぎるのに困っていたので、大変助かりました。
見出しのカスタマイズ
シンプル、かわいい、かっこいい、オシャレ、個性的…。
どんなジャンルをとってもぴったりな見出しがたくさん紹介されているので、その中から好みのものを良いとこ取りさせていただきました。
シェアボタンのカスタマイズ
シェアボタンっていろんなデザインがいろいろありますよね。
しかし、僕がシェアボタンで1番重要視したのは「シェア数を表示しないこと」です。
なんでもシェア数を表示する仕様だと、ページ読み込みの際に少し重くなるそうです。
ほんのちょっと重くなるレベルだとは思いますが、読んでる人の方に負担にぐらいなら僕はいらない!
と思い「表示なし」で素敵なデザインである、この記事を参考させていただきました。
下の3つの記事は、こういうデザインもいいなーと気になっている記事です。
どっかのタイミング変えてみるかも。
太字指定すると自動でマーカーが入るカスタマイズ
強調したい文字を太字にすることありますよね?
その際に自動で太字指定した文字にマーカーを入れてくれるカスタマイズです。
↑ の「太字指定した文字にマーカー」部分のようなデザインにできちゃいます。
リンクを強調するカスタマイズ
おすすめ記事や関連記事を枠で囲って目立たせるカスタマイズです。
↑ のようなデザインにできるので、通常のテキストリンクよりも読み手の目に留まりやすいく、クリック率が上がるはずです。
目次のカスタマイズ
目次のカスタマイズ記事はいっぱいありますが、こちらの記事は種類も多く、細かく指定できるところに惹かれて参考にさせていただきました。
サイドバーのフォローボタンのカスタマイズ
こちらのフォローボタンは、画面やサイドバーなどのサイズに合わせて自動でピッタリのサイズになってくれるという有難い仕様です。
そしてボタンもカーソルを載せるとビニョーンと伸びてとっても可愛いですw
画像をセンタリング(中央寄せ)に配置するカスタマイズ
記事内に載せる画像サイズが小さいときや、サイズにバラつきがある画像を複数載せるときでも統一感あるキレイなデザインにすることができます。
写真やイラストを多く載せる人にはオススメです!
グローバルメニューのカスタマイズ
こちらの記事では、グローバルメニューをパソコンではすべて表示し、スマホではトグルメニューで表示することができます。
僕は画面サイズの大きいスマホが苦手で iPhone SE を使用しているので、スマホでゴチャゴチャした表示にならないのは大変助かりました。
アイキャッチ画像の高さをカスタマイズ
はてなブログの困った仕様である「強制的にアイキャッチ画像が正方形でトリミングされる問題」を解決してくれます。
アイキャッチをこだわって作っている人は適用してみてはいかかでしょうか?
カエレバ・ヨメレバのカスタマイズ
Amazonや楽天のアフィリエイトリンクを一括で製作できる カエレバ・ヨメレバ のカスタマイズです。
ボタンや画像位置を調整することでオシャレに目立たせ、クリック率が上がる効果を期待できます。
僕は ↑ の css をコピペして製作しましたが、パソコンからだとボタンがズレてしまっていたため、あわせてこちらも追記しました。
まとめ
以上がこのブログに適用したカスタマイズのまとめとまります。
ブログテーマ用に適用した細かいものを除けは、これで全てなはず…!
初心者の僕は、ただ調べてコピペしただけです。
こんな素敵なカスタマイズを考え、そして公開してくださっている神ブロガー様のおかげで、簡単にカスタマイズすることができました。
改めまして数々のブロガーさん、その節は大変お世話になりました。
ある程度ブログをカスタマイズして運営に慣れてきたら、こういった本読んで勉強するのもいいですね!