あっちの多趣味なそらら1

あっちの多趣味なそらら2

ロゴ

ロゴ

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

あっちの多趣味なそらら

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




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



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



レスポンシブ対応に

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


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

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



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



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

hitsuzi.hatenablog.com


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


テーマ変更の際の注意点

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



ヘッダーを変える

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


旧ヘッダー

旧ヘッダースマホ版

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

過去を振り返る

acchinosorara.hatenablog.jp



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

新しいヘッダー画像


画質キレイになりました!

オベちゃんのデッサン崩れも修正。ただ、元がアナログのイラストなので限界が…



オベちゃん比較

CLIP STUDIO PAINTメッシュ変形を使用し、イラストの歪みを矯正。色味もハッキリさせました。(彩度上げすぎた…)




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

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



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

次なるカスタマイズ

acchinosorara.hatenablog.jp

 



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

フッターイラスト
フッターイラスト
ページトップへ戻るボタン