wordpressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

【海外CSSテク・before擬似要素】リストタグのマーカーだけ色・模様を変えて、カラフル・おしゃれにする方法

   

こんにちは、管理人@SS_mshpです。

今回は、CSSをうまく使って、リストタグの見栄えを変えてみます。

よくある『・』『■』『算用数字』といったリストマーカーだけじゃないものを実装してみます(色つき・★マークなど)さっそくコードなどをみていきましょう。

■普通に色を指定しただけだと、全体に色がついてしまう


たとえば、サイト全体のフォント色に黒が指定されていて、リストタグの『ul』に色を指定した場合はこうなります。
マーカーだけでなく、全体が赤くなってしまいました。

そのほか、『li』だけに色を指定しても、その項目だけ色がかわるので、リストマーカーだけ色付けというわけにはいきません。その場合は、ちょっと特殊なCSS要素を使うことになります。

■cssのbefore擬似要素を使ってみる

■やってみた例

リストタグの頭のマーカー部分が星マークで、オレンジ色になりました。真っ黒の点だけのリストより華やか&場合によっては見やすくなります。

なお、コードはこちらのサイトを参考にしてみました。海外のサイトにつき英語標記ですが。
(how to set Bullet colors in UL/LI html lists via CSS)
https://stackoverflow.com/questions/5306640/how-to-set-bullet-colors-in-ul-li-html-lists-via-css-without-using-any-images-or

■HTML&CSSのコードとワンポイント解説

.ul-colored1 {list-style:none;padding:0;margin:0;}
.li-colored1 { text-indent: -.7em;}
.li-colored1:before {content: “★”;color: orange;}

<ul class=”ul-colored1″>
<li class=”li-colored1″>項目1</li>
<li class=”li-colored1″>項目2</li>
<li class=”li-colored1″>項目3</li>
</ul>

ポイントは、『擬似要素beforeを使って、内容(content)で★や色を指定』『list-style:none;で、マーカーをなくしておく』というところでした。また、上記の海外サイトの紹介ではul/liに対してクラスをつけてなかったんですけど、ここだけでなく他の部分のul/liに干渉しないよう、クラス指定(クラス名は適当です)を入れました。

■失敗例・あとがき

ちなみに、list-style:none;が効いていないと、このように通常のマーカーと擬似要素マーカーが2重に表示されて失敗します
原因は、CSSでlist-style:none;を書いたあとに、CSSの下のほうで、 ulにlist-style:disc;(マーカーに丸)が書いてあったからです。下に書いてあるものがあとから読み込むから優先で表示されて、擬似要素は指定してないから残った、みたいな感じでしょうか。

この場合は、該当部分のlist-styleをnoneにすることで、狙った表示ができました。他の部分とかぶっていてうまく表示しないみたいな事例もあるので、押さえておくと対処しやすくなります。

ぜひ皆さんも、このCSSテクを使って、見やすい・おしゃれ・個性的なリストをサイトに入れてみてください。

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

【カテゴリ】 - webサイト制作 【タグ】 -

Message

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

  関連記事

【PHPでWPカスタマイズ】プラグイン不使用で、テーマに関連記事表示機能を実装しPV・滞在時間を上げる

今回は、サイトをしっかり見てもらうために、『WordPressサイトに、 …

PHP・shuffleやarrayを使った、画像ランダム表示方法~メインビジュアルやバナー・テキストにも利用可能

今回は、以前お取引先のスクールの担当者さまと、『サイトのメインビジュアル …

wordpress構成ファイルのxmlrpc.phpを無効化する方法【実は攻撃されやすい】

今回は、wordpressの構成ファイルで、ちょっとクセのある『xmlr …

【別に止めなくてOK】wordpressサイトなどに、アメブロ・fc2など無料ブログの更新情報を表示して連携する方法

今回は、『無料ブログにすべきかwordpressにすべきか』という疑問に …

【マテリアルデザインCSSフレームワーク】Materializeで、カッコいいビジネスサイト(静的HTML)を作る

今回は、フレームワークを使ったサイト制作を行ってみます。 利用するのは『 …

【wordpressカスタマイズ】llorix_oneなどビジネストップ1カラムテーマで、カスタマイザーで入らない動画・オーディオを入れる

今回は、人気の海外ディベロッパーのwordpressテーマで、動画やオー …

【WPカスタマイズ】子テーマさえ入れとけば大丈夫?なわけねーだろ!(親テーマに手を入れる・ファイルコピー適応させる羽目になる事例)

今回は、推奨されてるWPの子テーマについてですが、『結局親テーマいじる羽 …

【セキュリティ・脆弱性対策2018】wordpressでサイバー攻撃されやすいファイルってどんなのがあるの?

今回は、wordpress利用者にも気になる『サイバー攻撃』についてです …

ワードプレスでデータベースにたまる余計なデータって何があるの?事例と対処方法

今回は、ワードプレスのサイトでよくある『データベースにたまる余計なデータ …

【WPカスタムフィールドはこう使う】カップ焼きそばレビュー記事に、カスタムフィールドで評価スコアを(CSSつけ方もあり)

今回はwordpressの機能『カスタムフィールド』で、より具体的に利用 …

【PHPで条件分岐】wordpressのサイトで、ページごと(固定・記事・カテゴリ・複数ページ)に、表示される内容を変えたいっ!

今回は、wordpressのサイトで使われるPHPプログラムの条件分岐で …

wordpressの仕組み~ヘッダーに入ってくるCSSは、どのように出力されるか(wp_headにcustomize_cssをadd_action)

今回は、自分のフリー曲素材サイトのチューニングをしてて、wordpres …