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

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)
  1. この記事へのコメントはありません。

サイト内検索

おすすめ記事

ページ上部へ戻る