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

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

  関連記事

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

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

ワードプレスじゃない通常サイトをSSL(暗号化通信)化するときの、htmlソース編集方法

今回はプラグインで一発SSL化ができるワードプレスではなく、通常のweb …

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

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

ワードプレス・手動インストールってどうやるの?(自動インストールがない、あるいはエラーの場合)

今回は、サーバーの簡単インストールなどで、エラーになって入らない場合の対 …

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

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

baserCMS(ベーサーシーエムエス)サイト制作2~テーマCSSやパーツPHP編集でデザイン

今回は、前回ちょっとインストールしたbaserCMS(ベーサーシーエムエ …

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

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

googleカレンダーとメールフォームで、予約受付ってできるの?iframeレスポンシブに気をつけて

今回は、googleカレンダーとメールフォームで、予約受付ページを作って …

ワードプレスで画面真っ白で積んだとき、データベースから記事データを抜いて復旧

今回は、ワードプレスで、画面真っ白でどうしようもなくなったときの復旧方法 …

bootstrapのcolクラスをとphp関数を使って、3列レイアウトとブログ2カラムを切り替える

今回は、1ドメイン・1サイトで『トップページやコーポレート部分は1カラム …