大学の人事屋さん

人事労務・ライフハック系の情報を発信する大学職員のブログです

当ブログのカスタマイズまとめ

f:id:aka_man_booo:20210228232308p:plain

はてなブログは多くの先達者がおられますので、カスタマイズがとても簡単です。

カッコ良さや可愛さなど自分の好みに合わせたものが、検索すればたくさん出てきて本当にありがたいですね!

今回は私のぶろぐで使用したカスタマイズをご紹介いたします。

 

cssやhtmlって難しくてよくわからないよ。

その辺りもコピペで簡単だから、食わず嫌いせず探してみよう!

 

 

吹き出し

まず私がブログで使いたかったのは、この吹き出しです。

 

こういうやつですね。

 

おしゃれなブログや見やすさを追求すると、この吹き出しに思い至る人もいらっしゃるのではないでしょうか。

そこでお世話になったのはこちらのブログです。

 

www.notitle-weblog.com

 

600弱も引用されていますね!すごい…!

「HTML編集」を一部使う必要はありますが、吹き出しを極力簡単にすべく取り組まれていますので、慣れてしまえばとても簡単なのが特徴です。

 

必要なものは、吹き出しの中の画像だけです。

イラストACさんやいらすとやさんなどで探してアップロードしちゃえばそれでOK!

簡単ですね!

 

使い方が簡略化された吹き出し

 

見出し

次は見出しです。

はてなブログは見出しのサイズが大・中・小と3種類あり、好みによってカスタマイズを加えることができます。

 

見出しは初期設定じゃだめなの?

初期設定だと文字のサイズが違うだけで、少し物足りない気がするんだよね。

 

参考にしたサイトはこちらです。

saruwakakun.com

 

この方も有名なブロガーさんですよね。

1500以上の引用は圧巻すぎる…。

 

とんでもない量のサンプルが置いてありますので、必ず好みにあったものが見つかると思います。

また、色合いについては、こちらもご覧ください。

www.netyasun.com

 

cssではカラーコードというものがあり、文字や文字背景、背景など細かく設定することができます。

私のブログはモノトーンをベースにしていますので、黒やグレーなんかで統一してみました。

 

見出しはわかりやすく、みやすいものを使おう

 

蛍光マーカー

次は蛍光マーカーについてです。

紫っぽいの黄色のものがあります。

 

ご紹介するサイトはこちら

hirochiki10.hatenablog.com

 

まだあまり引用されてはいないようです。

しかし、この蛍光マーカーはめちゃくちゃ使い勝手良いですよ!

何より、HTMLを開くことなく、「太字」と「斜体」のボタンだけで使うことができるのは素晴らしいの一言。

f:id:aka_man_booo:20210228225853p:plain

 

これまでは「デザインcss」というところにコピペしていたのですが、今回の蛍光マーカーは「headに追加」という別の場所に貼り付けています。

 

もちろんHTMLで編集するやり方(上述の吹き出しのように)もあるのですが、コードを複数コピペする必要があり、中々敷居が高いと思っていました。

ところが、こちらではボタンひとつで見やすい演出が可能になります!

 

目次

目次もブログの記事を読みやすくする上で非常に重要です。

この記事上段に設置してあるものですね。

 

参考にさせていただいた記事はこちら

blog.minimal-green.com

 

筆者さんの好みなのか、紹介ページは全体的に緑色で並べられていますね。

これを私のモノトーンに合わせるために、必要な部分を黒で統一しました。影の有無なども編集できますので、立体感や高級感まで演出することが可能ですよ!

 

ロゴ?みたいなマークは何かな?

FontAwesomeってやつだね。これも設定する必要があるよ。

 

FontAwesomeは簡単に言えば、「一々画像をWEBページで使用していたら容量がヤバくなるので、共通マークとしてWEB上に保存し、それぞれのキーワードをcssに打ち込むことで表示できるようにする仕組み」のことです。

ちょっとわかりづらいかもしれませんね(笑)

 

全てを理解しなくても(私のように場当たり的に)使うことはできますが、なんか気持ち悪い!という方もいらっしゃると思いますので、わかりやすいサイトを載せて起きます。

blog.codecamp.jp

 

目次は個性が一番出るところ

 

まとめ

ブログを見やすくするために、たくさんの工夫がされているんだね。

そうだね。ちなみにこのブログでも見出しを使い分けていて、このまとめは中見出し、各項のチェックは小見出しで目立たせているよ。

ほえー。これって見出しだったんだ。でも目次には中見出しは表示されてるけど、小見出しは表示されないね。

うん。それもcssで設定しているんだよ。カスタマイズは一度スタイルが確立してしまえばいじることはないから、最初は頑張って設定してみようね!