ゆーんの徒然日記

3歳の甘えん坊主りーくんとの毎日。

ブログのデザイン変更でやったこと|はてなProに移行して1ヵ月

こんにちは、ゆーんです。

前回は、グーグルアドセンス関連でやったことをまとめました。

www.xoyu-nxo.work

 

今回は、ブログのデザインについて。

女æ§ã®è¡¨æã®ã¤ã©ã¹ããçåã

ブログデザインを変えたいけど、難しそうだからと手をつけていない方

タイトルのデザイン変更はProじゃないとできないと思ってる方

英語と記号がたくさん並んでたら諦めたくなる方

 

 

、、、、ハイ。全部わたしのことですね。

 

 

そんなレベルでもできる、ブログアレンジです(^_^)v

ブログのデザインを変更する

グーグルアドセンスも合格し、ちょっと落ち着いて、ひと段落

ようやっとこさ、ブログデザインの変更に着手しました(遅)。

 

無料版の段階から、基本のブログデザインを変更できるのは知ってました。

 

[ダッシュボード]→[デザイン]で『公式テーマ』だけでも34種類のデザインに着せ替えできますし、『テーマストア』ではもう、山のようにデザインがあります。

 ãã¼ããã½ã³ã³ã®ã­ã£ã©ã¯ã¿ã¼ï¼é©ããé¡ï¼

ありすぎて、どれを選んだら良いのか分からなくなりませんか??

ゆーんは小一時間、片っ端からテーマを着せ替えしていました。

 

そして、結局。

 

選んだのは、1番シンプルな「Minimalism」です。

テーマストア人気NO1のやつですね。

 

小一時間ぽちぽちしてた意味…^^;

 

「Minimalism」を選んだ理由

色々ありすぎて、考えるのが面倒になったのも、あります。←

 

でも「Minimalism」を選んだ後に、色々調べていると、これを選んで正解だったかな~?と思えてきてます。

  • シンプルなので飽きがこないし
  • 利用している方が多い為、コピペだけでokなカスタマイズ法が多く
  • アレンジを加えることで、自分だけのオリジナル感を出せる

 

、、、まだ全然、アレンジできてないんですけどね;;

これから、やっていきたいんですが、ゆーんは「Minimalism」の基本の変更だけでもいっぱいっぱいでキャパオーバーなので、これまで変更したことをまとめておきたいと思います。

 

基本的に、「Minimalism」を作成した「こどみす」さんの解説をもとに、分からない部分を自分で調べていった感じです。

hitsuzi.hatenablog.com

ナビゲーションメニューの設置

ブログタイトル下の、ナビゲーションメニューを設置しました。

ナビゲーションメニューの設置方法については「こどみす」さんがコードを載せてくださってるのですが

残念ながらゆーんはそれを見ただけじゃどこを変更したら良いのやら、さっぱりでした;;

 

ので、こちらを参考にさせて頂きました。

www.inside-shiina.com

コードのどの部分を変更すれば良いのかなど、詳しく説明してくださってます。

ナビゲーションメニューの背景色を変える設定方法についても載せてくれてます。

 

ゆーんはタイトルの背景は白のままにして、ナビゲーションメニューの背景に色をつけました。

アイコンも設定したかったけど、難しそうだったのでとりあえず保留にしました。(でも可愛いからいつかやりたい、、)

 

ナビゲーションメニューを設定しながら思ったのですが、、、

『ゆーんの徒然日記』

雑記ブログすぎて、カテゴリ分けが困難

なんでもかんでもとりあえず《育児・日常》に放り込んでしまってる感がある。

もう少しちゃんと、カテゴリ分けしたいな、、、、

タイトルのデザイン変更

デザイン変更というほどでもないのですが、、^^;

文字色を変更

タイトルの文字色を、グレーに変更しました。

  • ブログタイトルの背景色
  • ブログタイトルの文字色
  • ブログ説明の文字色

をまとめて変更できるコードを「こどみす」さんが制作してくれています。

フォントを変更

フォントを変更しました。

参考にしたのはこちらの記事です。

www.mahoroban.com

こちらで紹介されているコードで、

  • font-family フォントの種類
  • font-size フォントサイズ
  • letter-spacing フォントとフォントの間隔

 が変更できます。

 

コピペで、手順通りにやってみました。

、、、、が、、、、、、

PCでは可愛くフォント変更できたのに、スマホに反映されない(;_;)

 

PCだとこんな感じで、まるみのある文字にしたんですが

スマホだと、字体はデフォルトのまま

文字の間隔だけあいてます。

なぜ~~~???

対処法は分からず、、、、

でもとりあえず最初のコレ↓↓

よりは多少、アレンジ感があるかと、、、

画面いっぱいより少し小さくおさまるように文字の間隔を調整しました;;

微調整すぎて伝わらない気がする。

どなたか対処法分かる方いらっしゃったら教えてください。

見出しのデザインを変更する

記事内の見出しのデザインを変更しました。

デザインはこちらから選ばせていただきました。

saruwakakun.com

コピペだけでできるものばかりです。ありがたいです。

はてなブログは、大見出しが「h3」タグで

中見出しが「h4」タグ

小見出しが「h5」タグとなっています。

それぞれのコードのタグの部分を変更すれば、見出しに反映されます^^

カラーコードを変更するだけで、自分のオリジナルっぽくブログを作れてちょっと嬉しいです。

 

だがしかし、ゆーんはここでも問題発生。

今までの記事、どんな感じになったかな~?と見てみると、、、、

記事が崩れまくっている、、(ToT)!!!???

なんの文字もないところに大見出しの吹き出しがついてたり

 

↑こんな感じで!!

分けわからん感じになってました。。。。。

恐らく、以前は見出しにデザインも入れてなかったから、気付かぬまま"空欄見出し"を量産してたのでしょう、、、、つらい、、、、、

 

そもそもが日記のような書き方で、他の人に見てもらうような書き方をしていないものばかりだったので

これから1つ1つ、リライトしていきたいと思います<(_ _)>

 

まとめ

ブログデザインのカスタマイズをまとめるつもりが

今後の課題がただただ山積みであることをハッキリさせるだけの記事になってしまった(;o;)

 

とりあえずはやっぱり過去記事の修正か、、、??

これを機に、ブログを見直したいと思います(ToT)/~