あっちの多趣味なそらら

なんかイマイチ…てかダメダメだったブログデザインを改良!

あっちの多趣味なそららのタイトルロゴ

 

こんにちはです。

そして大分遅れましたが、明けましておめでとうございますです。

 

 

 

 

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

 

というわけで、今までのデザインがイマイチだったのもあり、ブログのデザインを全体的に改良してみました。 

 

 

 

 

まず今回のリニューアルにあたって、念頭に置いたのが

 

 

レスポンシブデザイン対応

 

 

 

 

これって何かと言うと、

 

簡単に言えば、「パソコン」「スマホ」「タブレット」などの、それぞれ異なる画面サイズでも、自動でレイアウトを調整して見やすくしてくれる機能です。

 

 

最近は「ネットはスマホで見る!」のが当たり前になっているので、ウェブ上で何か作るときは、パソコンはもちろんスマホで見た時にレイアウトがどうなるか意識しなければいけません。

 

 

 

 

1.テーマの変更 

 

今まで自分が使っていたデザインテーマがレスポンシブ非対応だったため、まずはテーマを変更するところから始めました。

 

 

 

今回使わせていただいたテーマはこちら。

hitsuzi.hatenablog.com

 

レスポンシブ対応の、白をベースにしたシンプルなデザインが印象的なテーマです。

カスタマイズがしやすい所も気に入ってます。

 

 

ここで注意事項!

テーマを変更するとCSSが初期状態にリセットされるので、あらかじめメモ帳などにコピペしてバックアップを取っておきましょう。

 

 

 

さて、テーマを変更したら次は…… 

 

 

 

 

2.ヘッダー画像のリメイク

 

ヘッダー画像とは、ブログのトップに出てくるタイトル画像のことです。

 

 

 

変更前のヘッダー画像はコレ。

 

ヘッダー画像リメイク前_PC版


こっちがパソコン版…

 

 

そして、

 

ヘッダー画像リメイク前_スマホ版

 

こっちがスマホ版…

 

 

 

 

ヘッダーに関しては、

前々から「変えたい! 早く変えたい!」とウズウズしてました。

 

遠目に見ると分かりづらいかもですが、

 

 

画質がめちゃ悪い。

 

 

なぜかと言うと、

CLIPSTUDIO PAINTというソフトの仕様だからです。

 

自分が愛用、というかソレを通り越して溺愛しているイラスト制作ソフトちゃんですが、実際のヘッダーサイズと同じ大きさで作った結果、どうしてもピクセル数の関係で画像が粗くなってしまいました。

 

解像度を上げても同じ結果…

大きいサイズで作ると、実際にブログに配置するときに設定が大変だし…

 

 

 

さて、ブログの顔とも言うべきこのヘッダー画像をどう綺麗に見せるか。

 

 

 

 

 

別のソフトで作ればいいじゃない!

 

 

 

そう、
自分は仕事でIllustratorという、デザイン業務に特化したプロのソフトを使っていました。

このソフト、オブジェクトをどれだけ拡大縮小、変形させても画質がキレイに保たれる優れもの!

今回のように、ウェブ向けの小さい画像を作るのにもピッタリ!

 

それを自宅でも導入すれば、ロゴでも広告でもキレイなものを作りたい放題!

 

 

 

 

 

イヤ、無理です。

 

今言ったIllustratorはプロの方々に広く愛用されている分、値段がお高い…

ボンビーな私にはちょっと(=_=)

 

 

そこで、Illustratorに似た仕様のフリーソフトを使うことに。

 

 

 

そのソフトがコチラの「インクスケープ

forest.watch.impress.co.jp

 

インクスケープは一言で言うなら、Illustratorの簡易版みたいなソフトです。

Illustratorに比べると、少し使いにくい気もしますが…)

 

 

 

これでキレイなヘッダーが作れるぞ~!

 

 

CLIPSTUDIOでピクセルが目立たない位の大きさの素材を用意し、インクスケープにて配置していきます。

 

 

 

 

そして、新・ヘッダー画像が完成!

 

新しいヘッダー画像_CLIPSTUDIOとインクスケープのコラボ


キレイに出来ました!(*^O^*)

 

 

 

 

イラストの方も少し修正しています。

 

 

ヘッダー画像イラストの修正前と修正後比較

 

歪みが気になったので、CLIPSTUDIOのメッシュ変形を使って矯正。

色味もハッキリとさせました。


かわいいですね。(自分で言うなw)

 

 

 

この後、やっぱりCSSで苦戦してましたが
試行錯誤の末、何とか普通に見れるデザインにはなったかなぁと。

 

これでブログを書くモチベーションも上がりました。

 

色々参考にさせて頂いた方の記事に感謝です。ありがとうございます。

 

 

また細かい装飾や調整は追々やっていこうと思います。

 

 

今年もあっちの多趣味なそららを宜しくお願いしますm(__)m

 

 

 

ではまた!

 

 

 

 

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

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