はちひろの雑記帳!題して「夢ノート」

両極端な趣味の「登山」と「プラモデル」を軸に、ブログ収益化やお金についてなどいろいろ書いていきます!

ブログ初心者集まれ!30記事を書きまして、ここまでのブログテーマ、デザイン遍歴

今回は私のブログテーマとデザインのお話をします。

前回の記事でも触れていますが、私はまだ立ち上げ1か月未満の初心者ブロガーです。

 

www.hatihiro.com

 

ようやく30記事書けたこともあり、

デザインがとりあえず決まったこともありますので

ここまでのデザインでの苦労を書きたいと思います。

 

この記事は以下の内容になってます。

 

 

 

 

ブログテーマとは

はてなブログのダッシュボードから「デザイン」をクリックすると、

いろんな「公式テーマ」が表示されますね。

 

これを選ぶことによって、自分のブログの大体のデザインが決まります。

 

あとは細かい設定があります。

 

 

私のブログと同じようにしたいならば

自分でもこのブログは見やすいなと思っているのですが、

もし私と同じようなデザインにしたい人がいたときのためにいろいろ書いておこうと思います。

 

一部でもいいなと思ったところがあればそこだけ真似すれば同じことができます。

f:id:ffnet:20180921201651j:plain

 

テーマ

まずは「テーマ」ですが、

「ダッシュボード」→「デザイン」

を選ぶと、左のほうにウインドが出てずらっと縦に出てくると思います。

 

f:id:ffnet:20180922001412j:plain

f:id:ffnet:20180922001444j:plain

その中をずっと下までスクロールさせると

「テーマストアでテーマを探す」

というボタンがあるのでクリック。

 

テーマストアのページに飛びます。

私のテーマは「UnderShirt」です。

 

レスポンシブ対応テーマで、PCでもタブレットでもスマホでも自動的にデザインが対応してくれる優れものです。

 

「プレビューしてインストール」

 

すると、自分のブログがこのテーマのものに変わります。

 

テーマを決めたらカスタマイズしよう!

ある程度好きなようにカスタマイズしましょう。

「ダッシュボード」→「デザイン」

から、

 

上のほうにあるスパナのマークをクリック!

 

f:id:ffnet:20180922001518j:plain

すると

「背景画像」

「背景色」

「ヘッダ」

「記事」

「サイドバー」

「フッタ」

「デザインcss」

とありますね。

 

 

 

まず「ヘッダ」です

タイトル画像を決めます。

ここでお気に入りの写真をブログタイトルの背景に入れることができます。

ブログ一番上の横長に細い画像ですね。

 

↓ここです。

f:id:ffnet:20180922001317j:plain

 

 

 

つぎに「サイドバー」

ブログ本文の右側にあるサイドバーのカスタムができます。

 

プロフィール、注目記事、最新記事、月間アーカイブ、カテゴリ

と入れてます。

 

順番も並び替えることができます。

「+モジュールの追加」

を押すといろいろサイドバーに増やせます。

いらないと思えば「削除」でサイドバーから消えます。

 

 

ここまでは難しくないと思います。

難しいのはここからです。

 

ブログ記事の見出しにアクセントをつけたい!

↑こんな風に見出しが囲ってあるとわかりやすいですよね?

 

 

私も早くこのようにしたかったのですが、いかんせんよくわからないので苦労しました。

 

ゆきひーさんのブログからここをそのままコピペさせてもらってます。

 

記事中に詳しい説明がされてますが、いろんなパターンの見出しのカスタマイズがあり、私はその中の「四角」というデザインをさせてもらってます。

 

見出しは「中見出し」のみで今のところ運営しています。

色は「#8FC4A1」とすると私の見出しの「薄い緑色」になります。

 

 

グローバルメニューにしたい!!

これがかっこいいんですよね!!

かなり四苦八苦しました!!

  

またまたゆきひーさんのコピペです。

 

「カテゴリ」にマウスを合わせると「子カテゴリ」がドロップダウンされます。

 

子カテゴリについて説明しなければなりません。

 

「子カテゴリ」ってどうやるの?

 

これもまた四苦八苦しました!!

なかなか難解だったのですが、要するに

 

「親カテゴリ」「親カテゴリ-子カテゴリ」

 

というルールでブログ記事の「カテゴリ」を選びます。

(「親カテゴリ-子カテゴリ」の 「-」これは半角のハイフン。)

 

 

あとはページに従い「パンくずリストを有効にする」にして、

 

つぎに、

「デザイン」→「サイドバー」でカテゴリの表示を

「アルファベット順」

し設定します。

 

 

そして、

スクリプトをコピーして

 

「デザイン」→「フッタ」にペースト。

 

 

最後に、

スタイルシートをコピーして

 

「デザイン」→「ヘッダ」→「タイトル下」にペーストします。

 

 

これで「親カテゴリ」「子カテゴリ」が表示されるようになります。

カテゴリの「階層化」ができるということです。

 

↑文字ばっかりでわかりにくくて申し訳ない。

 

戻ってグローバルメニューの設定

先ほどのページ

 

ゆきひーさんのブログのcssを

「デザイン」→「デザインCSS」に貼り付けます。

 

 

次に同じページの少し下にあるHTMLのコードを丸ごとコピーして

「デザイン」→「ヘッダ」→「タイトル下」に貼り付けます。

 

 

これでグローバルメニューが出てきました。

あとは「親カテゴリ」「子カテゴリ」の名前をきちんと自分のブログのものに打ち換えて、URLも入れます。

 

なんとか完成ですね。

ちなみに私はグローバルメニューの横幅を「1100」に変えてます。

 

 

スマホ版のトグルメニューの「MENU」ボタンが押せない!!

スマホ版のトグルメニューがボタンが聞かないというトラブル!!

もちろん私には何にもできませんでした。

 

記事を書くほうに一生懸命になってたのでトグルメニューをかなりの間放置してました。

 

解決方法が分かったのでこちらに書いておきます。

 

読み進めていくと「対処法」というところがあり、

 

「設定」→「詳細設定」→「headに要素を追加」とクリックし、

 

そこのコードをコピペして「変更を保存」すると解決です!!

 

 

プライバシーポリシーとお問い合わせフォーム

この2つがアドセンス申請時に必要、とありましたので作りました。

 

それを「ダッシュボード」の「固定ページ」というところに作りました。

 

完成です。

 

フッタ部分にもお問い合わせとプライバシーポリシーがありますが、フッタのデザインがいまいちなのでどこかで変える予定です。

 

 

まとめ

偉そうにいろいろ書いてますけど、

 

「コピペ」

 

ばかりです。

 

自分でイチから調べて作るのって結構大変。

パワーがいります。

 

私のブログが皆さんの助けになることを願います。