クマの動物研究

副業ブログと猛獣事件を研究しています。

ブログをオシャレに変えたくて【目次と見出し】をカラフルにチェンジしてみた。

 

 

いつもと違います。

クマのブログ。

 

はい、デザインをいじりました。

 

f:id:cumata-tan:20210704181809j:plain



 

サイトデザインのことなどよくわかっていないのに、あちこち触りまくり…。

 

 

変わりました!

トップがいちばん変わったかな。

 

まずテーマを変えました。

 

今まではアフィリエイトに最適といわれたreachを使っていたのですが、検索からお客様が集中しているページは限られているのでそこまでこだわらなくてもいいだろうと変えてみることに。

 

……いやー。

 

久しぶりにCSSに触れました。

ふきだしを導入して以来。

 

難しいですね。

ややこしい。

 

正直、意味がわからない。

HTML、CSS。

 

よく分からない…。

 

それでもできるものです。

人間って不思議。

いやほぼコピペしただけなんですが。

 

 

作業に時間がかかります。

気がついたら夜中でした。

 

 

吹き出しの時は無料公開してくれている方からコピペさせていただいたのでラクでした。

 

今回も基本はコピペですが、全てがそうと言うわけにはいきません。色や細かい部分など自分のサイトに合わせて変える必要があります。

慣れない作業・知らない言葉に四苦八苦。

 

色ってどうやって変えるねん!

 

コピペしたけど反映されない!

 

写真が、ふきだしが出ない⁉ ぐあああああ!

 

…四苦八苦。

 

というわけで今日は。

「サイトのデザインを変えてみたどえ!」

 

はてなブログのテーマやデザインを変えたいな、とお考えのあなたに。

何かの参考になれば。

 

 

テーマ:ミニマリズム

 

 

 

 

デザインを変えてみた!

 

あれが欲しかった。

プロっぽいやつ。あれ。

 

これです。

 

f:id:cumata-tan:20210704172147j:plain

グローバルナビゲーション


ヘッダーの下につけてみた。

ナビゲーションメニューというやつ。

 

サイトを訪れたお客様がどこに行けばいいのかわかるように道作りというわけですね。

 

ナビゲーションメニュー

 

5つのボタンがあります。

※増減できます。

やり方については後でご紹介。

 

クマのメニューではHOME、動物記事、オススメ研究文具、閲覧禁止の怖い話、お問い合わせ。

 

まだ作りかけですが、一応全てできているので良ければ飛んでみてください。

今後、さらに改良を加えて参ります。

 

 

 

CSSは難しい 

 

余談ですが作業中はTwitter片手に泣き言が止まりません。

四苦八苦しながら何度もやり直しました。

 

▽叫ぶクマ。

 

▽解決した。

 

作業は迷走。

 

CSSってややこしいですけど、それでもなんとかかんとかできるものです。

やり方は上手な方々が公開してくださっているので、その通りにするだけ。

知識はなくても大丈夫。必要なのは根気だけでした。

 

 

テーマを変えてみた

 

こういうのをひとつひとつ自分のサイトに実装するにはやり方を調べて実行していくしかないのですが…。

 

幸いはてなブログではテーマを用いることで、ぐっと作業がラクになります。

 

今回クマが使わせていただいたテーマもそうです。

はてなブログでお馴染み、ひつじさんが公開しているテーマ、ミニマリズム。

 

ミニマリズム 

 

さきほどのナビゲーションメニューを取り入れやすく、またスマホからみてもpcからみても見やすいように設計されている。

いわゆるレスポンシブ対応のテーマ。

 

はてなブログでは【デザイン設定】からこのミニマリズムに変えることができます。

 公式テーマではなく、インストールしたテーマを選択。

 

公式ページにはいろんなテーマが並んでいます。

はてなブログで一番人気のMinimalism。

これをインストール。もちろん無料。

 

インストールする場合、気をつけていただきたいのは、テーマを変えたその時点で、CSSが初期化されてしまうということ。

 

つまり今、ふきだしやナビゲーションメニューなどをつけている場合、それらがすべて消えてしまいますのでテーマを変える前にコピーして別の場所に保管しておきましょう。

 

 テーマを変えてからもういちどCSSに書き加える。

それで元の状態にもどります。

 

作り方

 

さて、肝心のナビゲーションメニュー。

どうやってつけるのか?

 

クマが参考にさせていただいたサイト・記事は複数。

その中から分かりやすかった記事を貼りつけておきます。

 

 変えようかな…と思われているあなたに。

ぜひ一度じっくり読んでみてください。

 

はてなブログ一番人気のテーマ

Minimalismの使い方 byひつじさん

ナビゲーションメニューの設置方法からテーマのアレンジまで細かく説明してくださっています。

hitsuzi.hatenablog.com

 

 

▽こちらはテーマ関係なく、見出しをおしゃれにするコード集です。

見出しを好きなデザインに変えられます。

CSSにコードを追加するだけなので一分で出来ました。

こういうのを公開してくださっているのはありがたいですね。うーん、すごい。

saruwakakun.com

 

 ▼こちらもテーマ関係なし。

目次をおしゃれにするコードをまとめてくださっています。

こちらを参考にしてクマは大学ノートスタイルの目次に変えました。

www.fuji-blo.com