リンクの先頭に画像を挿入する2

箇条書きリンクの補完1をスタイルシートを使って書き直しました。

サイドリンク

このカスタマイズは新着記事コンテンツの編集です。マイブログメニューの[デザイン]⇒[コンテンツ]の[新着記事]から編集を行います。ソース中段あたりに次の記述があります。

<% loop:list_article -%>
(<% article.createstamp | date_format("%m/%d") %>)<a href="<% article.page_url %>"><% article.subject | tag_break %></a><br />
<% /loop -%>
※各カスタマイズの紹介を独立させるために、初期状態のソースで説明します。

これがリンクを表示している箇所です。<img>タグの変わりに<div>タグを記述します。

<% loop:list_article -%>
<div class="sidelink">(<% article.createstamp | date_format("%m/%d") %>)<a href="<% article.page_url %>"><% article.subject | tag_break %></a></div>
<% /loop -%>

次にスタイルシートの編集.sidelink{ } を追加します。

.sidelink{
background-image:url('http://blogcustomize.seesaa.net/image/link.png');
background-repeat:no-repeat;
}

以上で作業は完了です。見た目は箇条書きリンクの補完1と同じです。

関連記事:箇条書きリンクの補完1
トップページへ戻る

サイトマップ

Seesaaブログのカスタマイズ > 新着記事 > 箇条書きリンクの補完2
スタイルシート カスタマイズ

スタイルシート作成ツール

HTMLカスタマイズ
サイト全体

記事コンテンツ

コメント、トラックバック
新着記事

カテゴリ

最近のコメント、トラックバック

検索ページ

その他