クマの動物研究

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

ブログをオシャレに変えたい。これを読んで【目次と見出し】をカラフルチェンジ!

HTML編集やCSSなど専門用語は分からない! でもダサいはてなブログをオシャレに綺麗に変えたい! というあなたのための記事へようこそ。

わたし自身「ぷろぐらみんぐ」に関してはド素人なので参考になると思います。

 

何がってブログのデザイン変えたいんでしょう?

 

変えられますよ。

なーんにも分からないクマでも出来たのですから!

 

サイトデザイン変えました

 

この度、サイトデザインをいじりました。

 

デザインのことなどよくわかっていないのに手を出した。

しーえすえすやえいちなんちゃら語?

いまご覧いただいているのが素人クマが完成させたサイト。幸せのまっ黄色ブログ。

 

 

はい、変わりました!

 

今までははてなブログでアフィリエイトをやるなら最適といわれたreachを使っていたのですが、検索流入があるページはごく一部なのでそこまでこだわらなくてもいいだろうと変えてみることに。

 

あの有名なひつじさんが作ったMinimalism(以降、ミニマリズムと表記)というテーマ。無駄なものは省いて美しさと実用性を追求したというミニマリズム。

これに決めました。

 

 

……いやー。

 

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

 

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

クマ

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

 

難しいですね。

難しいというか、そもそも意味がわからない。

 

HTML、CSS。

なんやねん。日本語で喋らんかい。

 

とパソコンに向かってぶつくさ言いながら使っています(笑)

 

作業は難航した

 

慣れない作業に時間がかかりました。

気がついたら夜中だった…。

 

 

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

 

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

 

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

クマ

ここはどんな色にしようかな。

 

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

熊ちゃん

…ってどうやって色を変えるの?

 

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


えっ⁉

 

すぐに問題がふりそそぐ。

 

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


色のコードはどこですか⁉ 

 

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


クマさん大変! テーマ変えたら写真が消えたよ⁉

 

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


写真が、ふきだしも出ない⁉ どうなってんの⁉

 

わからないことだらけで四苦八苦。

ぐああああと叫びながら、それでも始めてしまった以上もとに戻すこともできず、前に進むしかないので頭をかきむしりながらなんとか最後までやり通しました。

 

というわけで今日は。

「サイトのデザインを変えてみたら華やかになった!」

 

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

クマが使わせていただいた参考記事を巻末に貼っていますので後でお読みください。その前に素人がサイトデザインに手をだした場合、どういう作業風景になるのかをご覧いただければ幸いです。

 

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

 

あれが欲しかったのです。

プロっぽいやつ。あれ。

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

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


ヘッダー下についているナビゲーションメニューというやつ。

サイトを訪れたお客様がどこに行けばいいのかわかるように案内するもの。これがあるとSEO対策になる。

 

ユーザーがすべてのGoogleさん。

ユーザーが便利になるアイテムは高く評価してくれます。パンくずリストとかね。

 

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

※増減できます。

 

HOME、サイト紹介、儲ける、はてな編集、猛獣注意、お問い合わせを設置。

良ければ飛んでみてください。各カテゴリーのトップに繋がっています。

 

設置方法ですか?

あとでご紹介しますね。 

CSSは難しい 

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

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

 

▽叫ぶクマ。

 

▽解決した。

 

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

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

知識がなくてもコピペができれば大丈夫。必要なのは根気だけでした。

 

テーマを変えてみた 

 

デザインを自分で変えるのは難しいし時間もかかりますが、幸いはてなブログではテーマを用いることで作業がぐっとラクになります。

 

今回クマが使わせていただいたテーマはミニマリズム。

 

ミニマリズムのメリット

 

さきほどのナビゲーションメニューをいちからとりいれるのは手間がかかるのですが、「ミニマリズム」ならちょっとコードを入れるだけで設置できる!

 

またスマホからみてもpcからみても見やすいように設計されている。

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

 

公式ページでインストール

 

ミニマリズムに変える説明をします。テーマを変えない場合はこの項目は飛ばして「見出しをオシャレに変えたい」まで進んでください。

 

テーマははてなブログの【デザイン設定】から変えることができます。

公式テーマとインストールして使うテーマの2種類があります。

 

公式テーマとは、はてなブログ側で用意されたもの。

そうではないテーマもあります。

 

公式ページに並んでいる美麗なテーマたち。

はてなブログで一番人気のMinimalismもここにあります。

もちろんぜんぶ無料。

 

テーマを変える時は注意 

 

新しいテーマに変える時、気をつけていただきたいのは、変えた時点で、CSSが初期化されてしまうということ。

 

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

テーマを変えてからもういちどCSSに書き加える。それでうまくいきます。

 

ナビの設置方法

 

さて、さきほどのナビゲーションメニュー。

どうやってつけるのか?

 

ミニマリズムの場合はカンタンにできるのでこちらをお読みください。 

hitsuzi.hatenablog.com

 

見出しをオシャレに変えたい

 

テーマ関係なく、見出しをオシャレにするコードの説明です。

CSSにコードを追加するだけで好きな見出しに変えられる!

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

saruwakakun.com

 

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

目次をおしゃれにするコード。

こちらを参考にしてクマは今の目次に変えました。

www.fuji-blo.com

  

ぜひ参考にしてみてください。