クリエイターハートブログ

クリエイターハートブログはものづくりの心からおくるブログです。

【デザイン】ブログのデザインについての考察(その1)【ブログ】

      2013/12/31

皆さんこんにちわ。

wordpresslogo

今回はブログのデザインについての私なりの考察(その1)を記事にしたいと思います。

「なんか私のブログ、シンプル過ぎというか殺風景というか…どうにかできないかなぁ」

「wordpress使っているけどデフォルトの状態だと思い入れがなんかでないなぁ。。。」

という方はご一読を。参考になるかもしれません。

目次

  • はじめに
  • 画像を利用しよう
  • 段落スタイルを利用しよう
  • 小物にこだわろう
  • さいごに

はじめに

まず、ご自分のサイトが殺風景に見えたりシンプル過ぎると思う場合は視覚的な印象が薄いということになります。

そこで視覚的な印象をインパクト大にするために以下のことを実践してみてください。

画像を利用しよう

たとえば視覚的なインパクトを上げるために有効で且つ簡単な作業が画像を利用することです。

文字だけのブログ記事と写真入りの記事では視覚的なインパクトが全然違います。

記事1つにつき1~3枚程度用意して貼り付けるとそれだけでもインパクトは違いますし、アイキャッチに設定したりすることで、関連記事プラグインの見栄え等がよくなります。

私の場合はなるべく、記事の先頭に画像を配置するようにしていますが、HowTo等の記事は大量に画像をキャプチャして貼り付けてあります。これをするだけで以前のシンプルな記事と比べてインパクトが大きくなりました。

段落スタイルを利用しよう

wordpressの記事投稿画面のビジュアルのツールバーに「段落」という部分があると思います。

20131124_01

↑文字サイズのお隣ですね。

それの中に見出し1とか見出し2とかがあると思います。見出しの部分となる文章にこれを付加することで記事の彩り・印象を変えることができます。見出し毎のスタイルは「外観」→「テーマ編集」からCSSをいじっていただくことでご自由にお好きなスタイルに変更することが可能です。

ちなみに私は見出し3までCSSでデザインを加えており、記事のタイトルも同じようにデザインしております。

小物にこだわろう

シンプルに見えるのはテキストが大部分を占めているデザインだからです。

それに一工夫、例えばツイッターアイコンやRSSアイコン、続きを読むアイコン、Google+アイコン、facebookアイコン、コメントアイコンなど小物を作成、または配布サイトからダウンロードしてテーマに付加すると細部のデザインにこだわる形となりグッとブログ全体の視覚的インパクトが向上します。

さいごに

以上でブログのデザインについての考察を終わりますが、まだまだこだわれる部分があるはずなので(jQueryでの動的なデザイン等)後日また記事にしたいと思いますが、上記のリストをやってみるだけでも大分ブログの印象が変わると思います。私も小物にこだわろうと現在、鋭意アイコンを制作中です。

ブログのデザインでお悩みの方は是非お試しください。

ではまた。

 - WordPress ,







Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


  関連記事

【※重要なお知らせあり】【WordPress】Stinger3をドロップダウンメニューに対応させてみました。(stinger3ver20131217対応)【Stinger3】

本記事はStinger3でのドロップダウンメニュー実装記事です。Stinger5 …

no image
Twenty Twelve サイトタイトルをロゴに変更する方法

先日、サイトタイトルをロゴに変更しました。という記事を書きました。 以下はそのコ …

no image
【WordPress】TwentyTwelve 「続きを読む」を画像に変更する方法。

TwentyTwelveテーマに限らず記事を作成しているときに挿入できるmore …

no image
WordPress をマルチサイト化しました。(参考URL有り)

私、複数サイトを制作したくてマルチサイトの勉強を致しました。 参考にさせて頂いた …

no image
簡単にCSSでのグラデーションを実現!「Ultimate CSS Gradient Generator」!

記事のタイトルの背景が無色透明だと無味乾燥だなぁ・・・とは思いませんか? そこで …

no image
wordpressをこれから始める初心者の方はまずこの一冊。

私、wordpressを始めてから約1年が立とうとしています。 今でもわからない …

no image
サイトタイトルをロゴに変更しました。

所要時間5分程度で作ったロゴをサイトのトップに。 最近、私地元でMr.child …

no image
ロリポップレンタルサーバーで記事を編集中に「403エラー」が出た時もしかしたらこの対処をすると大丈夫かもしれない。

先日、wordpress twenty twelve に子テーマを設定する。(前 …

no image
子テーマの重要性

あー、やっちまったよ と思いましたが後の祭りでした。 先日、一年ほど前から運営し …

no image
MANP環境のWordPressをマルチサイト化した方法。

さすがに本番環境であれこれ触りまくって公にしてしまうのはどうかと今更ながらに感じ …