とり子の楽観主義

とり子の楽観主義

オプティミストを目指すとり子の雑記ブログ。

【初心者にもできる】はてなブログで行ったカスタマイズまとめ19選【Minimalism】

blog

今回は、備忘録も兼ねて、私がはてなブログをカスタマイズする上で参考にさせていただいた記事をまとめたいと思います。

CSSとは何ぞや?」な初心者がカスタマイズできるのは、その方法をネットで公開してくださっている方のおかげです。

本当にありがとうございます!

※掲載に問題ありましたらお手数ですがお知らせください。迅速に対応させていただきます。

 

ちなみに、ここで紹介するカスタマイズは、基本的にこのブログが現在使用しているテーマである"Minimalism"で導入し、現状うまく使えているものです。

hitsuzi.hatenablog.com

もちろん、他のテーマを利用されている方にも使えるものがあると思います!

ヘッダー関係

ヘッダー画像を作る

これについては以前書いた記事で、私が行った方法と参考にさせていただいた記事をまとめています。

torikooptimism.hatenablog.com

 

ナビゲーションメニューの設置

グローバルナビ

↑これです。

こちらの記事で紹介されている、ブログテーマMinimalism用のナビゲーションメニューを使用しています。

hitsuzi.hatenablog.com

 

ナビゲーションメニューの文字をカスタマイズ

デフォルトで表示される文字のサイズが小さく感じたので、こちらの記事の「ナビゲーションメニューの文字サイズや文字色など各種設定の変更」で紹介されている方法を使って、サイズを変更しました。

www.crypto-ksw.com

他のカスタマイズについてもかなり丁寧にまとめられているので、私が今書いているこの記事より参考になると思います。

 

記事一覧表示のカスタマイズ

はてなブログ無料版で記事を一覧表示にする

はてなブログProでは機能として記事の一覧表示があるのですが、残念ながら無料版にはそれがありません。

なので、私はこの方法を使って疑似的に一覧表示にしています。

Googleの評価が下がるとの噂もあるので、自己判断でお願いします。)

私の場合は、使用前は80%ぐらいだった直帰率が、一覧表示にしてからは最高で50%台にまで改善したので、検討の価値はあると思います。

dokuwohaku.hateblo.jp

 

記事一覧の表示件数を変更する

一覧表示にしただけだと、1ページに記事がこれでもかとずらーっと表示されてしまうので、こちらの記事で紹介されている方法を使って表示される記事数を変えました。

www.a-s-blog.com

これまた、これだけだと設定表示件数に満たない記事数の場合、記事が表示されないようだったのですが、上の記事のコメント欄に修正案を書き込みされている方がいらっしゃいました。

qiita.com

見事、これで解決しました。

 

サイドバーのカスタマイズ

プロフィール画像を大きくする

デフォルトだとプロフィール画像がすごく小さいですよね??

こちらの記事で紹介されている方法で画像を少し大きくしました。

プロフィール画像が目立つと、ちょっとはブログを覚えてもらいやすくなりますよね。

www.ratoblo.com

 

読者登録ボタンを目立たせる

標準の読者登録ボタンが目立たないので、こちらの記事を参考にさせていただきました。

www.notitle-weblog.com

 

Feedlyのフォローボタンを追加する

はてなブログを利用している方以外にもブログを定期的に読んでいただきやすいように、Feedlyのフォローボタンをサイドバーに追加しました。

こちらの記事を参考にさせていただきました。

www.uxirisu.tokyo

 

記事を見やすくするカスタマイズ

シェアボタンを変更する

こちらの「シェアボタンを設置する」で紹介されているコードを記事上、記事下に使わせてもらっています。

www.crypto-ksw.com

元のボタンデザインはこちらです。

saruwakakun.com

 

文字の標準サイズを大きくする

Minimalismでは標準サイズの文字が小さく感じたので、こちらの記事を参考にサイズを変更しました。

nukio0803.hatenablog.com

 

見出しデザインを設定する

長い記事を読みやすくするには見出しが必須になってくるので、こちらのデザインを使わせていただいています。

この記事で使用している見出しがそうです。

www.notitle-weblog.com

 

強調したい文章にマーカーを引く

飛ばし読みしてもだいたい記事の内容が伝わるように、強調したい部分はこちらを参考にマーキングしています。

こんな感じです。

mu2in.hatenablog.com

 

引用部分を明確にする

本の紹介をすることが多いので、本から引用した文章が明確になるようにこちらの記事で紹介されているデザインを使わせてもらっています。

こんな感じです。

www.bambi.red

 

特定の文字に背景色をつける

必要に応じて文章にメリハリをつけるために最近使用するようになりました。

こんな感じです。

こちらの記事を参考にさせていただきました。

↑の他にも色々なデザインが紹介されています。

saruwakakun.com

 

吹き出しを活用する

こんな感じです。

こちらの記事を参考にさせていただきました。

www.notitle-weblog.com

 

あわせて読みたい」記事リンクを目立たせる

こちらの記事を参考にさせていただきました。

www.notitle-weblog.com

 

記事下におすすめ記事のリンクを表示する

この記事の下にあるやつです。

内容はちょくちょく変更しています。

こちらの記事を参考にさせていただきました。

www.tontonpig.com

 

商品紹介

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

商品を紹介する際は、ヨメレバカエレバを使用しています。

ボタンのカスタマイズは、こちらのものを使わせてもらっています。

rough-log.com

 

アプリーチ

このブログでは登場回数少なめですが、スマホのアプリを紹介したいときはこちらを使用しています。

mama-hack.com

アプリーチの使い方については、こちらを参考にさせていただきました。

www.uxirisu.tokyo

 

終わりに

全て網羅できたかは分かりませんが、以上がカスタマイズの際に参考にさせていただいた記事やサイトです。

初心者でもいろいろカスタマイズできたのは、こちらに紹介させていただいた記事の、またそれを公開してくださった方のおかげです。

繰り返しになりますが、ありがとうございます。

※掲載に問題ありましたらお手数ですがお知らせください。迅速に対応させていただきます。

これからもいろいろとカスタマイズを楽しんでみたいと思います!