きみに拍手を贈りたい

オタクが好きなことを毎日書き綴ねるだけ。

MENU

429-ブログカスタマイズするのが面白いのでぜひやってみて欲しい

こんばんはかえるマニアです。

 

ここ最近毎日私の記事を読んでくれている方にはもうお気づきかもしれますが、ブログをリニューアルいたしました!!!(他にやらなきゃいけないことがたくさんあるのに....)

 

まぁリニューアルというよりかはカスタマイズに近いのかもしれませんが.....

細かい部分だとタグ続きを読むを導入したり、目次引用見出しなどのデザインをちょこちょこ変えていました。新しい部分では今までなかったヘッダの下にグローバルメニューを付けたり、これまで放置していたサイドバーなどを見やすくしてみました。はてなアイコンなるものも使って見やすくなったはずです...!

 

さらには、ヘッダ画像をリニューアル!

前まではこのブログ名にも由来していたBuono!Bravo☆Bravoのセットを模したヘッダだったのですが、ブログ全体を薄緑を基調とした感じにカスタマイズしていたら前のが合わないなと感じてきたので、思い切って新しくしてみました。

f:id:kaerumania_27:20210828222147p:plain 

前の。カラフルでごちゃごちゃ...

f:id:kaerumania_27:20210828222202p:plain

新しいの。ちょっとお洒落な感じになったかな?

 

 

何を隠そう、私は今ブログのカスタマイズに狂っているのです。

最初はもとからあるデザインを使用しているだけだったのですが、自分なりに変えられるのが楽しい!最近では記事を書いている時間よりもカスタマイズに割いている時間のほうが多いかも?と思うレベルでいじくりまわしています。

とはいっても私もHTMLは基礎の基礎をかじったくらいでCSSに関してはマジで分からないのでコピペしてきたりそれをちょこちょこいじるだけなのですが...

それでも自分好みになっていくのが面白い!

これならブログをサボらずに書き続けられるぞ!!そう、これこそがブログを続けるモチベーションになっているのです。(ちょっと言い過ぎた)

 

というわけで本日は私なりのはてなブログカスタマイズ方法をご紹介していきたいと思います!

 では早速!

 

 

グローバルメニュー

グローバルメニューはヘッダの下にあるメニューボタンのことです。

f:id:kaerumania_27:20210828224107p:plain

普段はこれ。

f:id:kaerumania_27:20210828224141p:plain

画面サイズが小さくなるとまとめて表示される感じになると見やすい。

 

このブログでは主にどんなジャンルを扱っているのかが一目で見てわかりやすくなります。

redo5151.hatenablog.com

私はこの方の記事を見ながらやってみました。backgroundの色を変えるだけで自分好みっぽくなるので簡単です。

redo5151.hatenablog.com

また『TOP』の左側についている家のアイコンははてなブログでデフォルトで使用できるアイコンを使用しました。これの使い方もこちらの記事で。

本来なら他のカテゴリにもアイコンを付けたほうが見やすいのでしょうが、ジャンルがマイナーすぎてアイコンがなかったので付けるのを辞めました。

はてなブログのアイコンの他にも導入してくれば使えるアイコンもあるようです。

 

サイドバー

サイドバーはブログを表示した時に横に出るメニューのようなものです。ブログのデザインによっては下に表示される方もいますね。

f:id:kaerumania_27:20210828224759p:plain

こちらはアイコンとボックスを使って見やすくしてみました。元からモジュールで出すものを変化できるのでカスタマイズ性は高いです。

redo5151.hatenablog.com

この方には本当にお世話になっています。

ちなみにSNSの部分はリンクモジュールだとアイコンが表示できなかったのでHTMLのモジュールを使用しています。

 

トップへ戻るボタン

ページの右下に表示されるトップに戻るボタンです。スクロールに追従して動いてきます。

f:id:kaerumania_27:20210828225136p:plain

トップページなどが膨大に長い方にオススメです。自分用にもあると便利。

www.fuji-blo.com

こちらの記事を見ながら作りました。他にもいろいろなデザインで作っている方がいるので一度検索してみてください。

 

目次

見出しに設定したものが勝手に目次になります。

f:id:kaerumania_27:20210828225644p:plain

やはり最初に目次があるとどんな内容があるのか一目であるので見やすくなると思います。

www.fuji-blo.com

たくさんデザイン集があるので気に入ったものを自分でさらにカスタマイズするのがおすすめ。

 

引用

著作権のあるものなどを紹介するときは引用しましょう。そのときに使うのがこれ。

引用するとこんな感じ

オタクは絶対に引用を使う日が来るのでカスタマイズしておいて損はないです。

saruwakakun.com

こちらを使わせていただきました!いろんなところと色を合わせると統一感が出ます。

 

見出し

f:id:kaerumania_27:20210828230411p:plain

 

あるとここから話題が変わるんだなと分かるのでオススメです。上のが大見出しで下のが中見出しの設定です。

saruwakakun.com

www.tsubasa-note.blog

まだ悩んでいる途中なのですが、こちらを参考にさせて頂きました。

 

 

ヘッダー画像

ブログの顔ともいえる部分です。画像を設定するのでカスタマイズ性が高いです。

f:id:kaerumania_27:20210828215228p:plain

ここに関しては気合いです。

お好みで作るのが良いと思います。頑張ってください。

私はイラレで作りました。

 

 

 

 

というわけで本日は私がここ数日やらなければならないことを後回しにしていじくりまわしていたはてなブログのカスタマイズ方法でした!

こんな私でさえコピペでぱっと見いいものが作れるので、記事を書くのに煮詰まっているあなたも気分転換にやってみてはいかがでしょうか?心機一転、モチベーションが湧いてくると思います!

ではまた!