• 2015.2.21
• TCDANカスタマイズ
• コメントを書く

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 で同様の箇所を変更してくださいね。