デザイン

プロっぽいブログにするためのコツ

ブログに凝るとプロっぽいブログにしたくなりますよね。
今回はブログの見た目を簡単にプロっぽくするコツを解説します。

それでは見た目で「このブログ、プロっぽい」と思わせる
簡単な方法とは何か?

それは

■ポイントにグラデーションを効かせる

ということなのです。

例えば、ちょとしたタイトルや見出し、
メニューなんかにグラデーションが効いてると
簡単にプロっぽさが出てきます。

例えばこんな

ブログの記事のタイトル

 
のような感じにすると、グッとプロっぽくなるわけです。
 
 
 
これはどうやっているかというと、HTML上は

<h2>ブログの記事のタイトル</h2>

と書いています。

で、これにどう設定しているかというと
<h2>タグの背景をグラデーションに設定しているわけです。
 
 
 
で、<h2>タグの背景画像というのが実は
コレ↓なんです。

で、この画像を<h2>タグの背景に横いっぱいに敷き詰めると

ブログの記事のタイトル

 
な感じになります。

この画像を<h2>タグの背景に設定するには、CSS上

h2{background: url(ttback.gif) left top repeat;}

と設定するとOKです。
 
 
 
なぜ画像ファイルが縦に長いのかというと、
タイトルが2、3行になっても大丈夫なように長めのモノを利用しています。

あと、よーく見るとわかりますが、
タイトル全体を赤い枠で囲っています。
というのも、グラデーションを利用するとボンヤリした印象になりがちですが
枠で囲むことによってシャープさを出しています。

さらにちょっとしたことですが、背景の色を赤に指定しています。
背景に赤を指定した上で、グラデーションの画像を背景に指定しています。
これによって、もし画像を読み込む際に時間がかかったとしても
それまで背景を単色の赤で塗りつぶして、文字が白くても読める工夫をしています。

アナタもこれで、プロっぽいブログに仕上げてくださいね。

wordpressブログをiPhone/Android/スマートフォン対応する!前のページ

いざ本を書く、という時に自分を助けてくれるブログの書き方次のページ

関連記事

  1. ブログ/blog

    アナタのブログBlogのテーマを見つける方法

    ブログマスターブログを構築すると決意した後に決まって出てくるのがこ…

  2. ブログ/blog

    wordpressワードプレスブログでアンケートを簡単に実施するプラグインplug-in

    ブログやメルマガをやってるとアンケートを取りたいことってありますよ…

  3. ブログ/blog

    ブログBlogをはじめるのにどれがいいですか?

    ブログBlogをはじめるのに、どれがオススメですか?という質問…

  4. SEO

    SEO、パンダアップデート対策のためのコンテンツ重視策とは?

    SEOの観点で、特に2012年7月以降に実施されたパンダアップデー…

  5. SEO

    ブログを始める前に一番重要なSEOとは?

    初心者のアナタが、ブログを始める前に、一番重要なSEOってなにかわ…

  6. SEO

    検索エンジンはアナタのブログをどの程度認識しているのか?

    アナタのブログへのアクセスのほとんどが検索エンジン経由、もしくは…

最近の記事

PAGE TOP