アメブロdeアクセスアップ

アメブロ記事タイトルの背景を変更する方法 | アメブロのテンプレートやツールを使って、アクセスアップする方法やアメブロカスタマイズの方法をご紹介します。


テーマ:CSSでカスタマイズ

アメブロのプチカスタマイズです。

 

記事タイトルの変更方法って、記述しているかと思ったんですが、
書いていませんでした。(・・・・すみません)

 

記事タイトルもちょっと目立つように、背景やフォントなどを変更してみましょう。

 

 

 

 

アメブロでも他の無料ブログでもそうですが、
記事タイトルは、アクセスアップの部分でもとても重要な部分です。

 

 

SEO的にも、記事タイトルをキーワードを含めインデックスされるような、
タイトルのつけ方をしていくのが、一番いい方法です。

 

 

その記事タイトルですが、アメブロの場合も無料ブログの場合でもそうですが、
タイトルバーの部分は、サイドバーと同じように、デザインされていますよね?

 

 

 

自分でタイトルバーを作成してもOK!!ですが、
画像加工が得意ではない方もいらっしゃいます。

 

背景色だけでも変更すると、ちょっとポイントになりますので、
今回は、背景色を変更しフォントもちょっと変えたりしてみたいかと思います。

 

 

【CSS編集可能】デザインをサンプルにして、
CSSを記述しますので、参考にしていただければと思います。

 

 

記事タイトルの背景を変更する方法

「デザイン変更」より、「CSS編集」をクリックです。(いつもの通り)

 

 

変更していない場合は、こんな感じです。

 

記事タイトルの背景

 

 

CSSでは、こんなコメントアウトの記述箇所をみつけてください。

 

/* skinArticleHeader 記事タイトルエリア */

 

今デフォルト(初期設定)では、左にグレーのラインが入っています。
全体の色は、設定されていません。

 

ソースはこんな感じです。

 

 

 

 

 

 

背景をブログのテーマに合わせて、グリーンに、
色を変更しただけだと、ちょっとさびしいのでワンポイント画像をつけて、
下にラインをひきました。

※例として、グリーンベースのモノにしてみます。

 

 

コードは、こんな感じです。

 

 

 

 

 

で、保存してブログを確認してみてね。

※ブログで反映されない場合は、F5キーを押下して更新をかけてくださいね。

 

 

完成は、こんな感じです。

 

記事タイトルの背景設定

 

 

 

 

 

コードの解説

 

margin:0; ← で、記事全体の余白をなくしています。

なので、上ピッタリにくっつきます。

 

padding:15px 30px; ← 文字の内側余白を取っています。
ポイント画像の大きさで、上からの余白と、左側からの余白の数字を変更するといいです。

 

border-left:none; ← デフォルトの左ラインを表示させない指定です。

 

background:url(“ポイント画像のアップロード先URL”) no-repeat 5px 10px #f6ffe5;

 

no-repeat の後の数字ですが、ポイント画像の位置です。

ポイント画像の大きさで、変更してみてください。

 

 

 

 

ポイント画像ではなく、背景に画像をひく場合は、
余白も変わってきますが、backgroundの指定も変わってきます。

 

なのでポイント画像のコードと下記のコードを差し替えれば大丈夫です。

 

background:url(“ポイント画像のアップロード先URL”) no-repeat;

 

 

 

 

 

 

先に画像だけを作成してアップロードしてから、CSSを変更してくださいね。

 

 

 

「CSS編集可能」なデザインでは、記事タイトルのフォントを変更する場合でも、
記事タイトルの背景画像の大きさによって変更したほうがいいかと思います。
文字のバランスなどもありますね^^

 

 

ブログのテーマや、記事タイトルのデザインによっても、
フォンとは変更するようにした方がいいです。

 

 

 

記事タイトルのフォントを変更する場所は、コメントアウトで、

 

/* skinArticleTitle 記事タイトル文字 */

 

 

この部分です。

※フォントカラーも変更可能です。

 

全体のバランスを考えて、カスタマイズしてくださいね^^

 

 

 

参考になれば嬉しいです。

 

 

 

 

テンプレートデザイン・カスタマイズのこと、アクセスアップのこと、
アメブロのことならお任せあれ!

Copyright © アメブロdeアクセスアップ All Rights Reserved.