ブログ運営

【はてなブログ】初心者OK!簡単カスタマイズでブログをおしゃれに!

おばけ
おばけ
どうも!風街おばけ(@obake_kzmc)です!

僕はHTMLやcssの知識がほぼ0な状態(聞いたことはある程度)でブログを始めました。

しかし、そんな僕でもやってみると簡単にカスタマイズすることができました。

それもそのはず、検索してビックリ!

コピペOKな見出しやシェアボタン等のcssを公開している神ブロガーさんがたくさんいらっしゃるではありませんか。

その中からさらに自分好みのものをペタペタ貼って完成!

自分でやったことといえば、カラー変更ぐらいのもんです。

今回は僕がこのブログをカスタマイズする際に参考にした記事や、こういうデザインもいいなと思った記事をまとめて紹介します!

【全部無料】ブログ運営・記事製作が捗るおすすめツールまとめ! ブログを1記事製作するにしても人によっては、写真や画像選び、加工や編集、アイキャッチ画像の製作、という風...

カスタマイズする前に

はてなブログは、1つのアカウントで最大3つのブログを作成できます。(はてなブログProだと最大10個まで)

なので、非公開のブログを作ってまずはそこで実際の見栄えがどう映るか確かめつつ作業することをオススメします。

本ブログをいじりまくるとミスしたとき修正が大変ですからね…!

なにか不具合があったときにすぐに元に戻せるようソースコードのバックアップもお忘れなく!


タイトル文字のカスタマイズ

ブログタイトル「すみっこから」のフォント設定です。

ちなみに僕は「Sawarabi Gothic」というフォントを使用していて、ゆるくてまるっこい見た目が気に入っています。

www.a-s-blog.com

タイトル前の紙飛行機アイコンは、こちらの記事を参考にさせていただきました。

saruwakakun.com

文字の大きさや行間のカスタマイズ

記事中での文字サイズや、改行した際の行間を調整しました。

初期状態だと改行したときに行間が空きすぎるのに困っていたので、大変助かりました。

www.ituore.com

yamatodiary.hatenadiary.jp

見出しのカスタマイズ

シンプル、かわいい、かっこいい、オシャレ、個性的…。

どんなジャンルをとってもぴったりな見出しがたくさん紹介されているので、その中から好みのものを良いとこ取りさせていただきました。

saruwakakun.com

www.okuni.me


シェアボタンのカスタマイズ

シェアボタンっていろんなデザインがいろいろありますよね。

しかし、僕がシェアボタンで1番重要視したのは「シェア数を表示しないこと」です。

なんでもシェア数を表示する仕様だと、ページ読み込みの際に少し重くなるそうです。

ほんのちょっと重くなるレベルだとは思いますが、読んでる人の方に負担にぐらいなら僕はいらない!

と思い「表示なし」で素敵なデザインである、この記事を参考させていただきました。

webgaku.hateblo.jp

下の3つの記事は、こういうデザインもいいなーと気になっている記事です。

どっかのタイミング変えてみるかも。

www.okuni.me

www.kototoka.com

www.daipanman.com

 太字指定すると自動でマーカーが入るカスタマイズ

強調したい文字を太字にすることありますよね?

その際に自動で太字指定した文字にマーカーを入れてくれるカスタマイズです。

↑ の「太字指定した文字にマーカー」部分のようなデザインにできちゃいます。

www.ringocatnote.com

リンクを強調するカスタマイズ

おすすめ記事や関連記事を枠で囲って目立たせるカスタマイズです。

↑ のようなデザインにできるので、通常のテキストリンクよりも読み手の目に留まりやすいく、クリック率が上がるはずです。

www.notitle-weblog.com

目次のカスタマイズ

目次のカスタマイズ記事はいっぱいありますが、こちらの記事は訪問済みの色やカーソルを載せたときの色など、細かく指定できるところに惹かれて参考にさせていただきました。

llewevil.hatenablog.com

サイドバーのフォローボタンのカスタマイズ

こちらのフォローボタンは、画面やサイドバーなどのサイズに合わせて自動でピッタリのサイズになってくれるという有難い仕様です。

そしてボタンもカーソルを載せるとビニョーンと伸びてとっても可愛いですw

ohama-style.com

画像をセンタリング(中央寄せ)に配置するカスタマイズ

記事内に載せる画像サイズが小さいときや、サイズにバラつきがある画像を複数載せるときでも統一感あるキレイなデザインにすることができます。

写真やイラストを多く載せる人にはオススメです!

www.clrmemory.com

グローバルメニューのカスタマイズ

こちらの記事では、グローバルメニューをパソコンではすべて表示し、スマホではトグルメニューで表示することができます。

僕は画面サイズの大きいスマホが苦手で iPhone SE を使用しているので、スマホでゴチャゴチャした表示にならないのは大変助かりました。

www.yukihy.com

アイキャッチ画像の高さをカスタマイズ

はてなブログの困った仕様である「強制的にアイキャッチ画像が正方形でトリミングされる問題」を解決してくれます。

アイキャッチをこだわって作っている人は適用してみてはいかかでしょうか?

www.okuni.me

カエレバ・ヨメレバのカスタマイズ

Amazon楽天のアフィリエイトリンクを一括で製作できる カエレバ・ヨメレバ のカスタマイズです。

ボタンや画像位置を調整することでオシャレに目立たせ、クリック率が上がる効果を期待できます。

www.yukihy.com

僕は ↑ の css をコピペして製作しましたが、パソコンからだとボタンがズレてしまっていたため、あわせてこちらも追記しました。

tousimaster.com

まとめ

以上がこのブログに適用したカスタマイズのまとめとまります。

ブログテーマ用に適用した細かいものを除けは、これで全てなはず…!

初心者の僕は、ただ調べてコピペしただけです。

こんな素敵なカスタマイズを考え、そして公開してくださっている神ブロガー様のおかげで、簡単にカスタマイズすることができました。

改めまして数々のブロガーさん、その節は大変お世話になりました。

ある程度ブログをカスタマイズして運営に慣れてきたら、こういった本読んで勉強するのもいいですね!

ブログで稼ぐのにおすすめの本
こんな記事もおすすめ