AN(tcd014)のサイドバーに使われているリストマークをカスタマイズする

AN(tcd014)のサイドバーで使われているリストマークですが、TOPページだけにある右サイドバーには三角矢印の画像が使われており、それ以外の左サイドバーやTOPページ中央下部のウィジェットにはグレーの点の画像が使われています。
このリストマークを変更する方法を紹介します。
必ずバックアップを取って自己責任でお願いします。もし何らかのトラブル等がおこっても、私は一切の責任を負えませんのでご了承ください。
右サイドバーのリストマークを変更する
右サイドバーのリストマークは、style_pc.css の /* — index — */ の部分にある、 /* right side content */ です。
デフォルトは、三角矢印の画像が使われています。
.index_side_widget a に指定されている background の画像をお好きな画像に変更してください。
.index_side_widget a { background:url(img/common/arrow.jpg) no-repeat left 4px; padding:0 0 0 12px; }
デフォルトの右サイドバーのリストマーク
変更後の右サイドバーのリストマーク
アップロードした画像のサイズに合わせて、位置を調整してください。
ちなみに、.index_side_widget li に指定されている background:url(img/common/dot1.gif) は、li要素の下に表示されている点線部分なので、間違えないでくださいね。
左サイドバーのリストマークを変更する
左サイドバーのリストマークは、style_pc.css の /* — side content — */ の部分です。
デフォルトは、グレーの点の画像が使われています。
.side_widget li に指定されている background の画像をお好きな画像に変更してください。
.side_widget li { line-height:170%; margin:0 0 10px 0; padding:0 0 0 9px; background:url(img/common/bullet1.gif) no-repeat left 8px; }
デフォルトの左サイドバーのリストマーク
変更後の左サイドバーのリストマーク
スマホで表示された時のリストマークを変更するには、style_sp.css で同様の箇所を変更してくださいね。
コメント
- トラックバックは利用できません。
- コメント (0)
この記事へのコメントはありません。