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

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


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

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

アメブロの「CSS編集可能」デザインでは、本当になにもないですよね^^

 

記事タイトルのタイトルバーのカスタマイズをして、
記事のタイトルを目立たせてみましょう。

 

 

 

以前の記事でも書いているんですが、
アメブロのCSS編集可能デザインは、「自分でやってね!」的な感じなので、
CSSやプラグインで、デザインを追加していかなければなりません。

 

 

記事タイトルバーの背景色を変更するだけで、
ガラッと記事の部分が変わること、ご存知ですか?
アメブロ記事タイトルの背景を変更する方法

 

 

記事タイトルバーは、SEO的にはキーワードを入れ込んで、
記事を書いていくのが王道です。

 

 

キーワード選定のことは、また違う問題なのですが、
記事のタイトルバーもちょっと目立たせた方が、読者さんにとっては、
嬉しいモノです。

 

 

背景を変更するのもいいですが、ブログのテーマやデザインテンプレートなどでは、
トータル的に、デザインを考えたほうがいいです。

 

 

その方がきれいです。

 

 

出来れば、サイドバーのデザインと記事のタイトルバーは合わせたほうが、
統一感が図れます。

 

 

このタイトルバーに画像を設置するには、まー画像が必要です。

 

 

 

自分で作るもよし、無料画像のサイトからゲットするのもよし、
一応画像を準備してあることを前提に、設置するCSSを解説していきますね。

 

 

 

 

記事タイトルバーに画像を設置する方法

画像の幅なんですが、2カラムの場合は、
本文の幅、665pxです。(全体の幅を変更した場合は、変わります。)

 

 

3カラムの場合は、本分の幅は、470pxです。

 

この大きさの画像を作成したり、無料素材サイトからゲットしておきましょう。

 

※今回は、こんなボタンフリーサイトからゲットしました。
→ Webフリー素材NESOUP
 
 
 

デザインの変更から、「CSS編集」をクリックすると、
すぐに画像をアップロードする場所がありますよね。

 
 
最初に画像をアップロードしておき、アップロードしたURLをコピーして、
メモなどに保存しておきましょうね。

 

 

 

 

CSSの記述のところで、こんな感じのコメントアウトを見つけてください。

 

 

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

 

 

skinArticleHeader というのが、記事のタイトル部分のことです。

 

 

デフォルト(初期設定)で、いろいろ記述がありますが、
その分を、ちょっと変更していくので、最初にある記述は、万が一のため、
コピーして、メモに貼っておきましょう。
(もし失敗した場合、いつでも元に戻せるように・・・)

 

 

 

下記コードをコピーして、貼ってください。

 

 

 

アップロード先のURLや、余白などは、数字を変更しながら、
調整していきます。

 

 

これ結構いい勉強になるんですよね^^

 

 

どういう数字に変更すると、バランスがよくなるか?

 

 

 

こればっかりは、やってみないと解らないので、
数字は、いろいろいじったほうがいいです。

 

 

 

 

完成は、こんな感じね。

 

タイトルバーを画像に変更

 

 

どうかしら?

 

 

全体的な画面をお見せしてませんが、
タイトルバーを変更したことで、文字色も変更しています。

 

 

記事タイトルの文字変更は、

 

/* (1-3) 記事/メッセージボード内の文字のスタイル
——————————————–*/

 

上記のコメントアウトの下にあります。

 

デフォルト(初期設定)では、フォントの大きさとカラーしか設定してありませんが、
太字にしたい場合は、下記のコードを追加してくださいね。

 

 

font-weight:bold;

 

 

 

 

 

CSSをいろいろ学ぶと本当に楽しくなってきますが、
時間がかかる場合も多々あります。

 

 

あまり突き詰めると、いくらあっても時間が足りなくなりますので、
ご注意くださいね。

 

 

 

 

このブログと私のアメブロのテンプレートは、
アメブロビズ2(AmebloBiz2)のデザインを使用しています。

既存のテンプレートや、有料のテンプレートには、
それぞれ、ブログのデザインにあったタイトルバーもちゃんと設置してあります。

ブログのテーマに合わせて、テンプレートは賢く選びましょう。

 

 

 

 

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

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