アメブロ 関連記事を読んでもらうためのプチカスタマイズ

アメブロ 関連記事プチカスタマイズ

アメブロの記事下の関連記事ありますね。

これは、SEO的にも有効でしかも内部リンクなので、
訪問者の方に対しても、滞在時間が延び
PV増加
にもつながります。

 

 

 

アクセスが少なくても、PVが多くて、
滞在時間が長いブログは、濃いファンがいるということです。

 

新しい訪問者の方を増やす一方で、
PVも増やしていくと、あなたのブログのファンも増えていきます。

 

以前の記事でも書いているのですが、
アメブロでは、【関連記事の設定】が簡単にできるようになっています。
【アメブロ 関連記事を表示させる方法とは?】

 

 

記事下に設置してありますが、
記事を最後まで読んでいただけるということは、
少なからずも、あなたのブログに興味があるということです。

 

その関連記事なら、ちょっと読んでみよう!!
いろんなページを読んでくれる場合があります。

 

逆に、記事が気に入って、その関連記事が読みいという方に対して、
なかなか関連記事が見つからない場合だったりすると・・・・

なーんだ!! 他には、ないんだ!!
と思われてしまい、サイトを閉じられてしまいますし、
再訪問のきっかけも、逃してしまいます。

 

訪問者に喜んでいただくことが、
一番のSEO対策となりますので、
ここは、しっかりいろんなページを読んでいただく工夫をしていきましょう。

 

私のアメブロでも、関連記事を出していますが、
ちょっとインパクトがない感じ・・・
こんな感じね。

デフォルトの関連記事表示

 

普通は、皆さんこんな感じかと思いますよ。

でも、ここをちょっと目立たせると・・・・
こんな感じ。

関連記事のスタイル変更

記事を読んで、おっと目が留まるでしょう。

 

こんな風に、まず滞在時間を目立たす工夫をしていきたいですよね。

これは、CSSにちょっとスタイルを追加しました。
もちろん、CSSに入れないアメブロでも、
【フリープラグイン】に追加させれば、表示は可能。

 

ぜひともやってみて!!

 

 

CSSの設置方法

【関連記事】のエリアは、【articleThemeListArea】という部分です。

画像も一緒に表示する場合もここなんですが、
今回は、あくまでも【テキスト】の装飾ということで。

 

関連記事を、色で囲みその囲みの角を丸くするCSSコード。

.articleThemeListArea{
padding:10px; ← 囲み部分の内側余白を設定しています。
background:#e5fff6; ← 囲み部分の背景色を設定しています。
border-radius:15px; ← 囲み部分の角を丸くする設定をしています。
width:350px; ← 囲み部分の幅を設定しています。
}

最初に、囲み部分の設定をします。

このCSSの数字や色を変更すると、
自分の好きなお色や、囲みを大きくしたりできます。

 

次に、リストの装飾をします。

.articleThemeListArea li {
border-bottom:1px dotted #979797; ← 記事項目の下線の設定をしています。
width:320px; ← 下線の長さ(幅)を設定しています。
padding:3px 0 3px 18px; ← 文字の余白を設定しています。
line-height:0.8; ← 行の高さを設定しています。
background:url(●●●アップロードしたリストアイコンに変更してね。) no-repeat;
}

 

リストの前のアイコンは、お好きな画像をアップロードして、
アップロードした先のURLを記述すれば、OK!!

 

ついでに・・・
記事見出しもちょっと大きい文字に変更したりして・・・・

記事見出しは、【articleThemeHeading】の部分です。

 

ここは、お好きなように。

 

今回私は、ちょっと大きくしています。
デフォルト(初期設定)は12ポイントくらいで、
太字の設定になっているみたいです。

.articleThemeHeading {
padding:0 0 3px 18px; ← 文字の余白を設定しています。
font-size:14px; ← 文字の大きさの設定をしています。
font-weight:bold; ← 文字の太さを設定しています。
}

 

これを、全部CSSに追加します。

 

CSSを追加するときに、解りやすいようにコメントアウトを残します。
全部記述すると、こんな感じです。

/* articleThemeListAre 関連記事 ←これが、コメントアウトです。*/
.articleThemeListArea{
padding:10px;
background:#e5fff6;
border-radius:15px;
width:350px;
}
.articleThemeListArea li {
border-bottom:1px dotted #979797;
width:320px;
padding:3px 0 3px 18px;
line-height:0.8;
background:url(リストアイコンのURLを入れてね。) no-repeat;
}
.articleThemeHeading {
padding:0 0 3px 18px;
font-size:14px;
font-weight:bold;
}

 

レイアウト変更できない、アメブロのテンプレートを使用している方は、
【フリープラグイン】に、下記のコードを記述してくださいね。

 

<style type=”text/css”>
.articleThemeListArea{
padding:10px;
background:#e5fff6;
border-radius:15px;
width:350px;
}
.articleThemeListArea li {
border-bottom:1px dotted #979797;
width:320px;
padding:3px 0 3px 18px;
line-height:0.8;
background:url(リストアイコンのURLを入れてね。) no-repeat;
}
.articleThemeHeading {
padding:0 0 3px 18px;
font-size:14px;
font-weight:bold;
}
</style>

 

背景色・囲みの大きさ・角の丸みの大きさ・リストアイコンURLなどを、
変更すると、ご自分のデザインになりますので、
変更してお使いくださいね。

 

完成すると、こんな感じね。

【アメブロdeアフィリエイト】月10万を稼ぐ方法

 

 

 

 

 

※画像をクリックすると、大きくなりますよ♪

 

 

表示が変わらない?
そういう時は、F5キーを1回プッシュ!!
更新がかかります。

 

また、色ってなかなか見つけにくいですよね。
そういう時は、このサイトを利用しましょう。
自分の好きな色を見つけることができるはず!!

http://www.colordic.org/

 

 

 

※画像をクリックすると、サイトへ飛びます。

 

こんな、プチカスタマイズでも、
訪問者さんの目を惹き、PVアップにつながります。
ぜひお試しあれ!!

 


サンプルに使っているテンプレートは、
アメブロビズ2(AmebloBiz2)で作成したものです。
興味がある方は、こちらから!!
アメブロビズ2(AmebloBiz2)レビューと特典

One Response to “アメブロ 関連記事を読んでもらうためのプチカスタマイズ”

  1. […] でも書いているのですが、 関連記事などもそうですが、ちょっと目立たせてあげると、 PVが増えたり、滞在時間が増えたりするんです。 → 【アメブロ 関連記事のプチカスタマイズ】 […]

コメントを残す

サブコンテンツ

管理人:ちえぞう

chiezou



こんにちは。ちえぞうです。
手作りモノが、大好きで、好きが講じて手芸家になりました。
自分の時間を、もっと大事にするため、アフィリエイトもしています。 夢を叶える為に、日々奮闘中です。

もっと詳しくプロフィール♪

line

お役に立てたら、ぽちっとな ♪



Fc2ランキングへ



お問い合わせ

ペンちゃんをクリック!!

pen

ご質問や、ご相談など、
気軽にメールしてくださいね。

アメブロテンプレート参考本

このページの先頭へ