*

※本サイトは古くなっています。現在は「STINGER7」が最新です

見出し命!ブログに必要なデザイン

公開日: :

large_3170431061

ブログのデザインでもっとも大切なのは

見やすい事!

他のサイトとは違い、ブログは「記事」がメイン。
だから、文章がとにかく見やすい事が重要です。

ブログのカスタマイズは楽しくてついついのめり込み、このシンプルで大事な事を忘れがちになります。

photo credit: Javier Piragauta via photopin cc

ブログを始める前に決めておきたいデザイン

ブログの記事を魅力的にするのに重要なのは

  • H1(大見出し※STINGERの場合はタイトル)
  • H2(中見出し)
  • H3(小見出し)
  • H4(小見出し)
  • ul li(リストタグ)
  • blockquote(引用タグ)

です。

これを最初にちゃんと明確にしておくと、どんな記事も
メリハリのある記事となり印象も2割増し~5割増し!になります。

hタグ(見出し)のデザイン

hタグのデザインが魅力的だと非常にブログも魅力が上がるのですが、
なかなかユニークなデザインというのが難しい。

基本を最低限抑えると

  • 文字サイズを変える。
  • 適切な余白をあける

というのが最低条件になります。
とくにこの「余白」は結構重要なのでぜひ、意識して下さい!

STINGERではこんな感じ。

2013-10-14_204722

h2タグのデザイン

h2のタグは、よくある「ボーダー」系のデザインです。
CSSはこんな感じ。

ちなみに9行目の#1a1a1aこちらを参考に変えれば好きな色にできます。
スマートフォンはsmart.cssの方になりますので併せて変更が必要です。

で実は、STINGERの新しいものには

と隠しCSSがあります。
これの「.demo」を取って、現在のh2のcssを消すと

2013-10-14_205141

と「吹き出しデザイン」に変わります。
これは、今後変更するかもしれませんが多数、フォルダにバージョンを入れてありますので画像名を変える事で変わります。

2013-10-14_205253

h3タグについて

h3タグは、汎用性の高い「チェック」デザインを採用しています。

こちらも、いくつか用意しているので11行目の「cah3-bk.png」を変える事ができます。

2013-10-14_205646

※最近のバージョンのみです。ない方は以下からダウンロードして下さい。

tagicon.zip (1331ダウンロード)

引用のデザイン

ブログはよく、「引用」を用いますのでこれが「引用だ!」とわかるようにしておくと便利ですし読みやすいです。

こんな感じ

で、先の文を見ても分かると思うのですがこのデザインは引用以外でも使いやすいので僕は別途CSSを用意しています。

通常のblockquoteは、googleに引用文として捉えられるので、必ず使い分けましょう。

その他のhタグのデザイン

見出しタグのCSSデザインに関しては多数まとめられています。

【CSS】コピペで出来る見出しデザイン集

【CSS】CSSで作る見出しデザインの参考になるサイト

簡単なジェネレーターもあるようです。

CSS見出し ジェネレータ

他の人のマネしよう

まとめサイト

見出しタグにはいくつかの参考サイトもあります

2013-10-14_210843

見出しデザイン.com

2013-10-14_211122

croppy.org

ブログのデザインの参考

今回の記事の為にいくつかのサイトを巡ったのですが
意外と皆さんこだわっていない・・・

その中でも、「うわ~拘ってるなぁ。。」と思うサイトを紹介します。

WebDesignRecipies

2013-10-14_214343

タイトル

2013-10-14_211428

見出し

2013-10-14_211504

リスト

2013-10-14_211517

もう、拘りまくっていますね。

http://webdesignrecipes.com/

NANOKAMO BLOG

2013-10-14_214407

タイトル

2013-10-14_211820

見出し

2013-10-14_211902

NANOKAMOさんはとにかく全体的に吹き出しで統一しています。非常に凝った面白いデザインです。

http://nanokamo.com/

ホームページを作る人のネタ帳

2013-10-14_214431

タイトル

2013-10-14_212247

見出し

2013-10-14_212257

リスト

2013-10-14_212316

ネタ帳さんはWebクリエイターボックスのmanaさんのデザインですね。
当然、彼女のブログも拘っていて素敵です。

http://e0166.blog89.fc2.com/

バニデザノート

2013-10-14_214451

タイトル

2013-10-14_212640

見出し

2013-10-14_212724

バニデザさんのブログは凄く可愛いデザインですね。

http://vanidesign.blog.fc2.com/

まとめ

こんな風に、
「見出し」「引用」「リスト」などのデザインにも注目してみると
今後のデザインにとても役立つと思いますよ。

「デザインは細部に宿る。」って言いますし。

よければ、こちらもぜひ読んで下さい。
「脱」初心者の為のブログのSEO

スポンサーリンク

ad

ad

follow us in feedly

目次

この項目では基本的なWordPressの設定と「テーマのSTINGER」の基本設定を説明しています。
※未リンクページは順次制作予定です。

ブログが初めての方

STINGERのインストール

アフィリエイトの設定

簡単なカスタマイズをしよう

さらにSTINGER3を強力にしよう

  • functions.phpの内容
  • single.phpの内容
  • おすすめのカスタマイズ
  • RSSリーダーボタンをつけよう
  • カスタマイズするなら「子テーマ」で
  • 「子テーマ」に記述すると便利なコード

効果のあるブログを運営しよう

旧サイトもご参考下さい。

Present by ガジェとろ 絵師:@suzucut

カスタマイズ記事集合!AdventCalender2013

スポンサーリンク

follow us in feedly
「はじめてのWordPress」で紹介されました。

ブログ「ENJILOG」も書いてます。
http://rentalhomepage.com

※Google+限定投稿もしています

WordPressのレンタルサーバー比較

  • 僕がお勧めするアフィリエイト会社

    ここでは僕が使用しているASPをご紹介します。どんなブログでもアフィリエイトを貼っておくだけで月に数万から数十万円を稼ぐメディアに変わる力を持っています。僕自身そうでしたが、ブログをしているならとりあえず始めないと損です。

    【第1位】nend(ネンド)

    スマートフォンからの閲覧が50%を超える現在、絶対に設定したいスマートフォンに特化したASP。これだけで月額300万稼ぐ猛者もいるそうです。

    【第2位】A8(エーハチ)

    メジャーな広告主も多く、使いやすい管理画面。アフィリエイターで使用していない人はいないのでは?

    【第3位】afiliateB(アフィB)

    アフィリエイトB

    担当者のサポートも良く、A8にはない広告も多数!アフィリエイトするなら両方登録を。

PAGE TOP ↑