にせもんのホンモノ

普通の人"にせもん"による雑記ブログ

レスポンシブデザイン|テーマ変更でブログデザイン一新!

f:id:nisemon_honmono:20201022224746j:plain


"ブログ見直します!宣言"からしばらく経ち、時間だけが経過してしまいました……。もしかしたら"アイツ口だけかよ!"なんて思った方もいるかもしれません。

言い訳っぽく聞こえますが、実は何度もやり直してたのです。

せっかく作成したブログ、手戻りができなくなってしまうと大変なので「見直し用」にサブブログを作り、今回はその中で試行錯誤して考えてみました。

 

 

なぜブログを見直したいのか?

これまではパソコン・スマートフォンの2種類設定していましたが、どうしてもスマートフォン用の設定範囲に限りがあるため不便に感じていました。

今ではスマホでの利用者が多いので、スマホ表示に合わせた設定をするのが理想的ではあるのですが私の実力では難しいです。

 

レスポンシブデザインにしたい

デザインテーマを選択するとき「レスポンシブデザイン」対応の表記がありますよね?

表示された機器の種類やサイズに応じて表示内容が最適な状態に変化するよう設定され、スマートフォンでもPCと同じデザイン設定でブログが表示されるものです。

わたしも一時期は使っていたのですが、ヘッダータイトル画像を変更した際にスマートフォン画面でうまく表示されないという不具合が生じました。

 

結局、PC用とスマートフォン用の2種類設定していたのですが、"やっぱりレスポンシブデザインがいい!"ということで試行錯誤することにしました。

はてなブログPro」であれば詳細な設定ができるようですが、あくまで無料のままでなんとかしようとしたので苦戦しましたね。

 

f:id:nisemon_honmono:20190219212029p:plain

 

チェックボックスを付けるだけで簡単そうに見えるんだけど…

ヘッダー画面をイジると上手く合わなかったんですよね。

 

見出しをカスタマイズしたい

以前ブログでも紹介しましたが、デザインや色彩を学ぶ中でブログに反映できないか模索していました。

アクセス数が多いブロガーさんは「見出し」や「強調文字」等工夫されていますよね?

あくまで個人的な印象ですが、サルワカさんのサイトを参考にされている方が結構多いのではないでしょうか?

 

saruwakakun.com

 

はてなブログのデザインテーマの場合、見出し(h1~h5まで)がデフォルトでセットされていることが多く、CSSで上書きできないケースもあります。

"ちょっと個性が欲しいな"という方は、よく考えてデザインテーマを選択した方がよさそうです。

 

ヘッダータイトル画面を変更したい

先程の「レスポンシブデザイン」にも関わるのですが、ヘッダータイトル画面を変更したかったんです。

ブログの中で一番影響力が大きいであろう「ヘッダータイトル画面」

 

nisemon-honmono.hatenablog.com

 

綺麗なレイアウトになるようにブログテーマを色々試した結果、
ブログテーマは「Minimalism」に決定


hitsuzi.hatenablog.com

 

"なんだよ、結局1位のやつ選んだだけじゃん!"

とか言わないでくださいね・・・

デザインは最小限のみに抑えてあるので今後のカスタマイズ性も高く、何よりもシンプルなデザインが私好みでした。

 

ブログロゴも併せて変更 

「ヘッダータイトル画面」と併せてロゴも変更しました。

もしかすると一番時間かかったのはこれかも・・・

 

f:id:nisemon_honmono:20190219213403p:plain

ブログロゴ‗検討案


ロゴデザインとか考えだしたらキリがないですね…

サイトやアプリなどを参考に色々作成してみましたが、無駄に時間だけかかっただけかもしれません。

 

結局こんな感じになりました。

 

f:id:nisemon_honmono:20190219214152p:plain

ロゴ案‗before・after

 

背景デザインも含めて今回は結構悩みに悩んで作成しました。

話せば長くなりそうなので別記事で報告いたします(笑)

 

2019/02/19 記事作成
2020/05/09 記事更新 

 

最後まで読んでいただき、
ありがとうございます!

 

===========================
ブログランキングに参加中です!
励みになりますのでポチッとしてください!
===========================

にほんブログ村 にほんブログ村へ
にほんブログ村


人気ブログランキング