YouTubeから学ぶ

✳︎日々思ったこと、YouTubeから学んだこと、旅行や留学の思い出などを書き留めています✳︎

【ブログ】はてなブログのデザイン変更しました!✳︎設定手順記載✳︎

 

ブログのデザインを変更しました!

手順が分からず、迷ったので、

こちらに備忘録として書き留めておきます。

参加になれば幸いです。

 

《変更後デザイン》

f:id:rislife:20190518124849j:image

 

 

目次について

 

きっかけは、目次の利用。

 

レスポンシブデザインでないと、

せっかくPC画面で目次のデザインをしても、

スマホ画面に反映されない…

悲しい…

 

ということで、

ブログのテーマをレスポンシブデザインに変更しました!

 

レスポンシブデザインとは、

PC画面で設定したデザインが崩れずに、

スマホに反映できるというものです。

 

ちなみに、目次はコレです↓

f:id:rislife:20190518125128j:image

 

目次の作り方は簡単で、

記事を作成する際に、

見出し(↓画像赤枠)と、

その横にある記号(↓画像黄色枠)

を使用します。

 

見出しにしたい文字を選んで、

大見出しから小見出しのいずれかに変更し、

目次を置きたいところで記号を押すと、

 

“[:contents]”という文字が現れるので、

これで作成完了です。

f:id:rislife:20190518125416j:image

 

手順1 テーマ設定を行う

 

それでは、ブログデザイン変更の手順を記載していきます。

まずは、テーマ設定です。

管理画面→デザイン

でデザイン設定画面に行き、

左側のテーマを下までスクロールすると、

『テーマストアでテーマを探す』

が出てくるので、

そちらをクリック(↓画像赤枠)

f:id:rislife:20190518125826j:image

 

テーマストアで、『Haruni』を選び、

プレビューしてインストールをクリック。

すると、自分のブログのHaruniバージョンのプレビューが出てくるので、

このテーマをインストールをクリックします。

 

※インストール画面左下の、

『Demo デモブログ:Haruni』から、

デザインのカスタマイズ方法が確認できます。

私は、そちらを参考にカスタマイズしていきました。

 

f:id:rislife:20190518130148j:image

f:id:rislife:20190518130156j:image

f:id:rislife:20190518130601j:image

 

手順2 スマホをPCデザインに合わせる

 

手順1だけだと、スマホにデザインが設定されないので、

デザイン画面のスマホ設定下にある、

レスポンシブデザインをクリックします。

これだけです!

f:id:rislife:20190518131141j:image

 

このままでも十分可愛いのですが、

グローバルメニューと呼ばれる、

ブログ内のリンクの一覧が欲しいので、

その設定をします。

 

手順3 グローバルメニューの設定

 

先ほど紹介したデモサイトをご覧ください。

yumekawa.hatenadiary.com

 

✳︎補足説明✳︎

『headに要素を追加』は、

管理画面から、設定→詳細設定

の画面下の方にあります。

これは、貼り付けるだけでオッケーです。

 

そして、デザイン設定画面の、

ヘッダの『タイトル下』HTMLで、

メニューバーに表示したい名前と、

リンク先を変更します。

これは、デモブログからHTMLをコピーして、

貼り付けたら、

自分で変更をする必要があります。

 

f:id:rislife:20190518131711j:image

 

手順4 グラデーションの色を変更

さらに、デザインCSSで、

私はグラデーションの色を変更しました。

やり方は、下のデモサイトをご覧ください。

 

yumekawa.hatenadiary.com

 

✳︎補足説明✳︎

CSSコードの、

背景1,2に記載されている、

#から始まる数字とアルファベットの6文字が、

色の設定箇所です。

好きな色のコードに変更すると、

グラデーションも変わります。

 

ちにみに私は、

背景画像を使用したかったので、

1番最初に書かれている、

『body,』は消して記入しています。

 

手順5 シェアボタンを変更

 

シェアボタンとは、

ツイッターフェイスブックに、

記事をシェアできるボタンです。

デザイン画面ではソーシャルパーツと書かれています。

f:id:rislife:20190518181931j:image

 

これも、デモサイトを見ながら、

記事下か記事上のHTMLを変えるだけ。

 

 

yumekawa.hatenadiary.com

 

以上です!

 

うまくいきましたでしょうか?

 

 

デザイン変更のポイント

 

ポイントは、

プレビュー画面を鵜呑みにしないこと!

です。

 

デザイン設定画面のプレビューは、

実際と異なることがあります。

なので、デザインを変更したら、

直接ページを立ち上げて、

PCとスマホ両方から確認した方が良いです。

 

私の場合は、

グローバルメニューのメニューバーが、

PC版でもスマホと同じデザインで、

プレビューされるため、

どうやったらタイトル下に、

メニューバーが作れるのかで悩んでいました。

 

プレビューでスマホデザインになっていても、

実際PC画面でブログを立ち上げて見ると、

きちんと反映されている、

という事に気づくまで、

30分くらい費やしたと思います…

 

 

というわけで、以上、

私でも出来たブログデザイン変更について、

でした!

 

まだまだ手直し出来るところはありそうですが、

取り急ぎここまで。

 

質問等あれば、コメントか、

ツイッターからお願いします(^^)

 

ブログランキング・にほんブログ村へ