ブログで、関連記事への内部リンクを枠で装飾♫

ブログで、関連記事への内部リンクを枠で装飾

テンプレートが変わったことで今までの書き方では合わなくなった面が多く、それに加えて以前と改行が変わってることにも気付いたので少しずつ新しい記事には変更と調整を加えてるので
以前の解説と大きく変わってしまった「関連記事(内部リンク)」についての 第2回「枠で装飾」編です。

スポンサーリンク

もっと見やすく、目を惹く関連記事を!

ブログで、関連記事への内部リンクを枠で装飾♫

↑このように枠で囲みグラデーションで色を付けてみました。
(デザインはコロコロ変わってるので混乱しないように画像で表示しています。)

これまでのスタイルは、サムネイルとタイトルだけのシンプル表示でした。

サムネイル付き内部リンク

しかし、テンプレートが変わり以前の記事を見てみると
↑の画像のように同じように改行を指定してるのに、行間がバラバラになってました(^^;)

それに両サイドにカラムが付いたことで少し寂しくも見えたこともあり枠を付けることにしました。

コピペでOKの登録コード

ShareHtmlメーカー のページへ行き↓のコードを貼付けてBookmarkletを生成し登録します。

登録方法など詳しくは過去記事をご覧下さい。 

以前のコードとの大きな違いはcssで後からでも装飾できるようにクラス名を付けました。

追加するcssはこちら↓

解説

白からベージュぽい色へのグラデーションを指定しています。

■ 色を変える場合は、6行目~10行目までの
#fffが白
#f8e4b8がベージュなので同じ色コードを全部変更して下さい。

その時に、9行目だけは#FF・・・のように最初に大文字のFFがある箇所は透明度らしいのでFFの後ろだけを書き換えて下さい。

■ 角の丸みは、11~13行目のradiusで調整できます。

■ 17行目では境界線の色を変更できます。

■ 23行目では、以前はサムネイルと文字の隙間が引っ付いていたのでサムネイルの右側の隙間を空けました。

<br style=”clear:both;” />が効かない?

前から思っていたのですが、ShareHtmlで貼った外部リンクや内部リンクにはタグの最後に<br style="clear:both;" />があるのに後ろに書いた文章がまた回り込んでしまう!?

しょうがないから<br style="clear:both;" />
の後ろに<br clear="left">も記入してたのですが保存して次に見ると消えてる時もあり、だから行間がバラバラなんだろうな~と不思議な現象に悩みました。

結果、
<br style="clear:both;" /><div style="clear:both;">に変更することで解決しました。

(↑は大文字で書いてるのでコピペする際は気を付けて下さい)

 

内部リンクで誘導することの大切さ!

「人気の投稿」「関連記事」「過去記事はこちら」など
内部リンクを貼り出してから明らかに1日のページビューが増えました。

私も1日に多くのサイトを回ってますが、
自分で置き換えて考えても、興味を惹く書き方のリンクしか踏まないので
開いたページだけで過去記事までは読まずに閉じることが殆どです。

訪れて下さった方に
役立って貰える記事や、誘導できる恥ずかしくない記事を書き続けることの方が大事だし大変ですが
それらの記事もきちんと誘導できなければ検索エンジンまかせだけになってしまいます。

サイドバーまで見てくれることを期待するよりも、
記事内に関連する過去記事を目立つように貼ってアクセスアップできたらいいですね♪(^^)v

最後までご覧いただき ありがとうございました。

この記事が役に立ったと思った方はシェアして頂けると嬉しいです。(^^)

スポンサーリンク

このページをシェアしてくれたら嬉しいな~(*'∀'人)

テスト
おじぎ猫 訪問ありがとうございました。

お知らせ
スパムが多いため、コメントは承認制になっています。
確認次第、承認と返信をいたしますね。(^^)/

My Youtube
石巻貝を助けるコリドラス 石巻貝を助けるコリドラス
morphing morphing
恐竜体操で食べられた!? 恐竜体操で食べられた!?
ゴジラのパロディ ゴジラのパロディ
アナと雪の猫王 アナと雪の猫王
Prince PURI #2 Prince PURI #2
トカゲ酒飲んで変身!! トカゲ酒飲んで変身!!

 15日月末ポイント消滅 !? 確認はこちら 楽天市場

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

トップへ戻る