Twenty Thirteenでリストマーカーに画像を設定

リストマーカーをよいものに変えると、見栄えが一気に引き締まってきます。「Twenty Thirteen」でウェジェットのリスト要素がリンクの場合、リストマーカーに矢印の画像を設定します。

はじめに

「Twenty Thirteen」でウェジェットのリスト要素がリンクの場合、リストマーカーに矢印の画像を設定します。
・リストマーカーの画像を準備
・スタイルシート(style.css)でリストマーカーを表示

リストマーカーの画像を準備

リストマーカー用の画像を用意し、WordPressのimagesフォルダにアップロードします。

スタイルシート(style.css)でリストマーカーを表示

スタイルシート(style.css)でウェジェットのリストマーカーの画像を指定しますが、プロパティはlist-style-imageではなく、background-imageを使用します。list-style-imageでは、リストマーカーの位置調整が難しいためです。background-imageを使用した場合は、paddingでリストマーカと文字の位置調整を行います。

<使用例>

.widget > a {
	color: #209020;
	padding-left: 23px;
	padding-top: 1px;
	background-image: url(images/list_style_arrow_001.gif);
	background-repeat: no-repeat;
}

おわりに

「Twenty Thirteen」でウェジェットのリスト要素がリンクの場合、リストマーカーに矢印の画像を設定しました。

関連記事(Twenty Thirteenの各部個別の表示をカスタマイズ)

  1. Twenty Thirteenのメニューから検索フォームを削除
  2. Twenty Thirteenのフッターにコピーライトを表示
  3. Twenty Thirteenで見出しのデザインを変更
  4. Twenty Thirteenで記事に枠を表示
  5. Twenty Thirteenでリストマーカーに画像を設定
  6. Twenty Thirteenでサイトのロゴをヘッダーに表示

関連記事(目次)

  1. インターネットで情報発信!

コメントを残す

メールアドレスが公開されることはありません。

※日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)