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テクを使って、見やすい・おしゃれ・個性的なリストをサイトに入れてみてください。

*お問い合わせフォームページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

■LINEできいてみる(アカウントがある方)

(タップ・またはqrでアプリを起動してください。回答できる内容には限りがありますが、なにか課題解決のきっかけができるかもしれません。)


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

Message

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

  関連記事

ワードプレスCSSで色が変わらない時『functions.phpやテーマカスタマイザー』もチェック

今回は、ワードプレスのサイト制作をするとき、ひっかかりそうなポイントにつ …

ワードプレス・ブログメディアで、ヘッダー画像を変える2通りの方法【phpモバイル非表示有】

今回は、ワードプレス・ブログメディアのサイトを作ったときに、ヘッダー(上 …

ワードプレス記事一覧ページの『本文からの抜粋』を表示する関数と、その文字数の調整方法をチェックする

今回は、ワードプレスの文字を出力する関数についてです。 レイアウトをいじ …

有名サービス・企業ectで使われる印象的な色を、CSSで使えるカラーコードで覚えよう(色商標についても)

今回は、身近なサービスとかに使われている色って、カラーコードだとどうなっ …

音声セミナー・講座・音楽視聴をサイトに実装できる、HTML5 audio要素を使いこなそう

今回は、管理人もこのサイトやお仕事受付サイトで使用している、便利なHTM …

webサイトがカッコ良くなるCSS~RGBAカラーやグラデーションで微妙な色合いも表現

今回は、webサイトをカッコ良く見せるために必要な基本技術・CSS(スタ …

【CSS3でおしゃれなサイトに】画像(星空)をくるくる回す(キーフレーム・transform:rotateなど)

今回は、CSSを使って、動きのあるサイトを作ってみたいと思います。 絵は …

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

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

ワードプレス派が覚えると便利なPHP~投稿記事・固定ページ指定して表示/非表示

今回はワードプレスサイト制作で使えるテクニックです。 PHPで使う条件分 …

ワードプレスの子テーマって、なぜ必要なの?

今回は、ワードプレスサイトを作るときにたまに話題になる『子テーマ』につい …