そららのクリエイティブログ

ヘッダーイラスト

I LIKE CREATIVE.

はてなブログをレスポンシブ対応に。デザインを色々と改良しました

あっちの多趣味なそらら
明けましておめでとうございます。あっちのそららです。
挨拶が遅れましたが、今年最初の記事となります。

2018年は、より新鮮な気持ちでブログを書きたい!

というわけで、現状のブログデザインがイマイチだったので、ブログテーマを変更し全体的にデザインを改良しました。

レスポンシブ対応に

まずはレスポンシブデザイン対応のブログテーマを選択しました。

レスポンシブって何かと言うと、「パソコン」「スマホ」「タブレット」など、画面サイズが変化しても、サイトのレイアウトを自動で調整してくれる機能です。
文章であれば端で自動改行され、画像であればデバイスに合わせたサイズ調整をしてくれます。

最近は、スマホでインターネットを見るのが当たり前になっているので、WEBコンテンツを制作する時は、パソコンはもちろんスマホで見た時も見やすいレイアウトになるよう意識しなければいけません。

たまにスマホ非対応のサイト(スマホでもPCで見た時と同じレイアウトになる)を目にしますが、スマホの画面サイズでPC版のサイトを見ると、文字は小さい移動や拡大もコントロールが難しいなど、色々と見にくくて不便です。

今回使わせていただいたブログテーマは、こちらの「Minimalism」です。

hitsuzi.hatenablog.com

レスポンシブデザイン対応の、白をベースにしたシンプルなデザインが特徴のテーマです。必要最小限のデザインで余分なものが無いため、後からパーツを追加したりとカスタマイズが幅広く出来る所も気に入っています。

テーマ変更の際の注意点

ブログテーマを変更すると、CSSが初期状態にリセットされるので、あらかじめメモ帳といったテキストファイルにコードをコピペしてバックアップを取っておきましょう。

ヘッダーを変える

ヘッダー画像もイマイチだったので、調整しました。

旧ヘッダー(パソコン版)

旧ヘッダー(スマホ版)
調整前のヘッダーです。1つ目がPC版、2つ目がスマホ版。
自作した「あっちの多趣味なそらら」のロゴと、うちの看板娘オベちゃんのイラストが入っています。

acchinosorara.hatenablog.jp

デザインも画質もよろしくなかったので、ヘッダーリニューアル!

新ヘッダー
画質キレイになりました!
オベちゃんのデッサン崩れも修正。ただ、元がアナログのイラストなので限界が…

オベちゃん 調整前と調整後の比較
CLIP STUDIO PAINTのメッシュ変形を使用し、イラストの歪みを矯正。色味もハッキリさせました(彩度上げすぎた…)。

ブログテーマの変更とヘッダー画像の改良だけで、ブログの見栄えが見違えるように変わりました。モチベーションが上がります。

まだブログ内の細かい装飾や調整が大量に控えているので、CSSやHTMLとの戦いが待っています。

今年もあっちの多趣味なそららを宜しくお願いしますです。

(Pixivのバナーを触ると…)

©2017 Sorara Creative Blog