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

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

【デザイン】ブログのデザインについての考察(その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:twenty twelve】ナビメニューを上部に固定する方法

皆さんこんにちわ。 今回はtwnty twelveテーマのメニューを上部に固定す …

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

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

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

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

no image
【WordPress:ボロス兵士の日誌】にwordpress popular postsをインストールして横並びにしてみました。※レスポンシブ対応

私がこの前開設してなかなか順位が上がらない困ったサイトちゃんのお話です。 ボロス …

20150221_custommenu_07
WordPressカスタムメニュー作成手順

WordPressにおけるカスタムメニューの作成手順を解説します。 WordPr …

【ご報告】【WordPress】Stinger3をドロップダウンメニューに対応させてみました。(stinger3ver20131217対応)【Stinger3】 記事の一部修正【改善】

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

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

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

no image
wordpress twenty twelve に子テーマを設定する。(前編)※追記【重要】あり

みなさまこんにちは。 先日、くりてすのテーマをなにも考えずに更新しデザインをまっ …

no image
ポートフォリオサイトにWEBコンテンツ「ボロス兵士の日誌」を追加しました。

趣味の一つマジックザギャザリングのブログサイトを制作したのでポートフォリオサイト …

no image
wordpress 作成した記事が「お探しのページが見つかりません」状態になった時の対処法。

私、首をひねりました。「記事は必ず存在する。だのに”お探しのページが …