はてなブログのカスタマイズ
このブログは「はてなブログ」の「テーマストア」で人気No. 1だったcodomisuさんの「Minimalism」のテーマをもとに、デザインを自分好みにいろいろとカスタマイズしてあります。
この記事では、カスタマイズの際に、参考にさせて頂いたページを紹介しておきます。ありがとうございました。
- タイトルのフォントサイズを変更する
- タイトルを画像にする
- タイトルの下にメニューバーを作る
- 日付の前にアイコンをつける
- 記事の文字サイズを変更する
- 見出しのデザインをカスタマイズする
- 目次に番号をつける
- サイドバーのタイトルの横にアイコンを表示させる
- 「上に戻る」ボタンを設置する
- サイドバーに「スライドショー」をつける
- 記事に蛍光マーカーをつける
タイトルのフォントサイズを変更する
タイトルの文字サイズを自分の好みの大きさに変更しました。
参考記事
タイトルを画像にする
タイトルの部分を文字だけの表示から、画像を使ったものに変更しました。
イラストがメインのブログなので、どんな絵を描く人なのか、来た人に一目でわかるようにしたいと思いました。
参考記事
タイトルの下にメニューバーを作る
タイトルの下に、カテゴリのメニューバーを作りました。
スマホから見る時にとても便利です。
参考記事
日付の前にアイコンをつける
記事の日付の前についているアイコンを好みのものに変更しました。
ただし、3行目の
font-family:"blogicon";
を
font-family:"FontAwesome";
に変更して「FontAwesome」のアイコンが使えるようにしました。アイコンは色も自由に変えられます。
参考記事
【はてなブログ】日付・タイトルのデザインを変更 | ダチョウのたまご。
記事の文字サイズを変更する
記事の文字サイズを読みやすいように少し大きくしました。はてなブログは記事の文字サイズが小さいそうです。
.entry-title {
font-size: ◯◯pt;
}
を追加すると、記事のタイトルの文字サイズも自由に変えられます。
参考記事
見出しのデザインをカスタマイズする
「中見出し」のデザインをカスタマイズしました。
参考記事
目次に番号をつける
目次に番号をつけました。
参考記事
サイドバーのタイトルの横にアイコンを表示させる
「プロフィール」の左横にある、葉っぱのアイコンのつけ方です。
サイドバーを「FontAwesome」のアイコンでデザインできます。色も自由に変えられます。
参考記事
「上に戻る」ボタンを設置する
記事をスクロールさせた後、トップに戻れるボタンを設置しました。
長い記事を読んだ後、一気にタイトルまで戻れるのでとても便利です。
参考記事
azanaerunawano5to4.hatenablog.com
サイドバーに「スライドショー」をつける
サイドバーに自分の作品の紹介バナーをつけました。
クリックすると、購入ページにとべます、数が複数あったので、スライドショーにしてみました。下にオマケで、「LINE STORE」のリンクもつけました。
参考記事
english-apple-diy.hatenablog.com
記事に蛍光マーカーをつける
記事の中で強調したい箇所に、蛍光ペン風のマーカーが引けるようにしました。
参考記事
