スキップしてメイン コンテンツに移動

スマートブログへのデザイン三ヵ条

些細な日常のウェブバージョンで考え通りのデザインがついに掴めた。というのは画像を元のサイズでカラム一杯まで合わせることができるようになったためなんだ。


やればできるというか、BloggerはデフォルトのCSSで勝手にデザインが付けられるからそれを踏まえながら変更しないと駄目だったし、一般的な方法だけではサイト作成も追い付かなかったと思う。


さらに文字サイズも調節してブログ全体がスマートになったと驚いた、咄嗟に。ウェブバージョンは画面一杯ではないし、しかも二列だからほっそり受け留められるせいではないか。纏まりが加わってスマートブログという印象を与え出した。


気に入ったので、どうすれば実際に可能だったのか、纏まりによってブログをスマートに生み出し得る具体策を明らかにしておきたいと思う。


  • 見出しがちゃんと目立つ
  • コンテンツが整理されている
  • 端々の位置が揃っている

最初に本文の文字サイズを大きめに変えていだけれども違和感が幾らかあった。記事名の文字サイズに近付いてしまってどちらがどちらとも判然としないせいだった。


画像が小さめなので、むしろ文章を強調するスタイルを求めていたせいだ。


しかし最大でカラム一杯まで広がった画像に対しては文章を強調するよりもバランスを取りたくなった。


本文の文字サイズを小さめにすると記事名との差が広がって違和感も相当に減ったと感じた。記事名がしっかり目立つように変わったわけだ。


本文の文字サイズを大きめにしたままで、記事名の文字サイズをさらに上げても本文とのバランスは取れるけれども画像が大きくなったから文章のデザインも大きめだとイメージが打つかるので、文章は強調せずに避けるように反対に小さくした。


するとスマートブログに生まれ変わった。記事名は見出しの一つだけれどもしっかり目立たないと構成が速やかに掴めなくなるから意味合いが薄れるし、新しく違和感を減らせたのは本当に良かった。


スマートブログを考えると他のデザインも関係していて予め組み込まれていた。


ブログ全体がすっきりしているのはコンテンツの行間が取られているせいだ。別々のものがくっ付いているとすっきりしないと思う。


Bloggerのデフォルトのシンプルテンプレートだと記事ページで日付と記事名の間隔が狭過ぎて離したけど、その後はサイト広告をヘッダーに入れてウェブバージョンでヘッダー画像にくっ付いたので、CSSで引き離さなければならなかった。


#header-inner {margin-bottom:2em;}

コンテンツの行間が取られていると色んなものがあっても整理されていて個々に邪魔されず、イメージが互いに打ち消し合わずに分かり易くなるし、ブログ全体がスマートに生まれ変わってしまう。


デザインとしては端々もきっちりしていると尚良いのではないか。


モバイルは文章の長さを左寄せでスマホの機種毎の画面幅に合わせるのが物凄く大変で、完全には無理かも知れないけど、文字サイズと行間、さらに可変的な文字サイズで文章の長さが画面の右端に近付くように調節している。


ウェブバージョンはパソコンとタブレットで画面一杯は使わずにメインのカラムに合わせれば済むから比較的に簡単だけど、できるかぎり、右端まで届くような文章の長さを選択するようにデザインを付けなければならなかった。


ブログのデザインに納得できると居心地に優れる。だから人々に好まれるかどうかは趣味嗜好によるにせよ、スマートだと気持ち良く更新できそうなので、個人的には本当に望ましく感じるし、記事を載せる意欲も膨らんだ。

コメント

些細な日常の人気の投稿

Imgurで画像URLと埋め込みコードを取得する方法

MOTOROLAのMoto G5 Plusを使い出してのスマホレビュー

PlayストアでAndroidアプリのダウンロードが非常に遅い場合の打開策