• ランディングページが作れない!そんな悩みで作るのを後回しにしてませんか? ブログ運営
    ランディングページが作れない!そんな悩みで作るのを後回しにしてませんか?
  • ランディングページ
    初心者がたった1時間でプロ並みのキャッチコピーを手に入れる方法
  • ランディングページ(LP)の作り方と構成について ブログ運営
    ランディングページ(LP)の作り方・構成!重要な7つの要素とデザイン
  • WordPress
    初めてのブログの作り方!初心者が最低限抑えておきたいこと
  • 私が実際に使っている便利な無料ツールと書いてあるイラスト お得情報
    便利な無料ツール!私が実際に使っている3選
  • ランディングページはテンプレートを使えばデザイン性の高いページが簡単に作れる ブログ運営
    ランディングページはテンプレートを使えばデザイン性の高いページが簡単に作れる!
  • 便利ツール
    検索順位チェックツール!変動や推移まで保存出来るオススメツールをご紹介
  • SEO
    ブログのPVを3日間で1.5倍上げる方法
  • 無料オプトインアフィリエイトの始め方!初心者にオススメな案件とASP ブログ運営
    オプトインアフィリエイトの始め方!初心者にオススメな案件とASP
  • アドセンス以外の広告で稼ぐには ブログ運営
    アドセンス以外の広告で稼ぐ!おすすめクリック広告をご紹介

リストのデザインを装飾するCSSサンプルについて

今日は、WordPressでホームページなどを作成する際に役立つデザインや装飾に関してです。

今回は、リストの装飾CSSについて書きたいと思います。

通常のリストのデザインは、下記のようなとってもシンプルなものです。

通常のリスト

  1. 項目1
  2. 項目2

オシャレなリスト

  1. 項目1
  2. 項目2

だけど、ブログの個性を出すためにオシャレなデザインに変更できたら嬉しい!という事で、今回はCSSでカンタンにリストのデザインをオシャレに変更できるように、リストのデザインを装飾するCSSのサンプルを集めちゃいました!

HTMLの書き方も一緒に載せますので、使い方が分からない方でも、そのままコピペすれば使えます。

リスト以外にも、「見出し」のデザイン変更のCSSとHTMLは、こちらの記事で紹介してますので、ご参考までに。

見出しデザインCSSの設定方法!コピペ出来るサンプル82選
2018.4.1
初心者の方でも簡単に見出しのデザインを変更出来るようにコピペでOKな見出しのCSSのサンプルを集めました。 そして、そのサンプルを使うためのCSSの設定方法についても紹介します。 ※お使いのテーマによっては、デザインが崩れてしまう場合もあるので「class」を使う見出しの設定方法も一緒にご紹介します...

自分のサイトが何位に表示されているか?

毎日の順位を自動チェックして記録してくれる必需品!♪

検索順位をボタン一発で調査、記録。検索順位チェックツールGRC

リストデザインの装飾CSSのサンプル

では、ここから、実際にリストデザインを変更するCSSとHTMLの書き方をご紹介します。こちらは、そのままコピペしてご自身のサイトで使って頂いても大丈夫です。

cssをテーマのスタイルシート(style.css)に入れて、HTMLを記事内に書く事で設定したデザインが反映されます。

oogle Chromeだとキャッシュの問題で、スタイルシートに記載してもすぐに反映されない時もあるので、その場合はInternet Explorerで開いて、更新し直すことで確認できるので、私はいつもそうしてます。

▼コピーの仕方↓

copy

三角形のリスト

リストデザインの見本

HTMLの書き方

CSSの書き方

矢印のリスト

リストデザインの見本

HTMLの書き方

CSSの書き方

○×のリスト

リストデザインの見本

HTMLの書き方

CSSの書き方

【スポンサーリンク】

チェックリスト

リストデザインの見本

HTMLの書き方

CSSの書き方

丸のリスト

リストデザインの見本

HTMLの書き方

CSSの書き方

丸のリスト2

リストデザインの見本

HTMLの書き方

CSSの書き方

矢印と丸のリスト

リストデザインの見本

HTMLの書き方

CSSの書き方

番号と丸のリスト

リストデザインの見本

HTMLの書き方

CSSの書き方

【スポンサーリンク】

ノート風のリスト

リストデザインの見本

HTMLの書き方

CSSの書き方

ひし形のリスト

リストデザインの見本

HTMLの書き方

CSSの書き方

タグのリスト

リストデザインの見本

HTMLの書き方

CSSの書き方

ボックス風のリスト

リストデザインの見本

HTMLの書き方

CSSの書き方

 

数字のリスト

リストデザインの見本

HTMLの書き方

CSSの書き方

おまけ

記事内でリストを使う時に、線で囲いたい場合は、下記のように

fieldsetを使えば可能です!記事内に記載するときは、こんな感じです。

リストデザインの見本

HTML

リストのデザインを変更するCSSをいくつかご紹介してきました。

CSSをお使いのテーマのスタイルシートに追加して使って下さいね。

スタイルシートは、外観のテーマの編集の中にあります!

【スポンサーリンク】
関連キーワード
  • 記事内にphpを直接使わずPCとスマホの条件分岐する方法
    記事内にphpを直接使わずPCとスマホの条件分岐する方法
  • スマホのみで表示されるテキストウイジェットを作る方法について
    賢威7ウイジェット追加!モバイル(スマホ)のみで表示されるテキストウイジェットを作る方法
  • WordPress子テーマ作り方・有効化方法!カスタマイズ前に必ず準備しよう
  • リストのデザインを装飾するCSSサンプルについて
    リストのデザインを装飾するCSSサンプル!HTMLの書き方も!
  • 見出しデザインCSSの設定方法!コピペ出来るサンプル82選
  • パソコンのみで表示されるテキストウイジェットを作る方法について
    賢威7ウイジェット追加!パソコンのみで表示されるテキストウイジェットを作る方法
ついに浮気しちゃいました!

ついに、浮気をしてしまいました・・・そう、ワードプレスのテーマです。

これまで、有料のテーマは何個も購入してますが、この便利屋のブログはCSSの記事とかの変更が面倒なので、なるべくテーマの変更を控えてましたが、一目ぼれをしてしまい衝動を抑えられず、ついに変更に踏み切りました。

見てもらいたい記事をスライダーで表示させることが出来たり、CSSが分からない人でも「入力補助」の機能を使って記事作成画面で、簡単にボタンの作成とかランキングの作成、会話の吹き出しの作成などが出来るので、マジで楽!

これまで、CSSやらいじってカスタマイズをしてきましたが、それがこのテーマには最初から入っているので、驚き。1年半前に出会っていれば、もっと記事に時間がかけられて、収益も上がってたのかな。。と思いつつ苦笑。

とりあえず、ブログを始めたばかりの人にとっても始めて1年以上経ってる私のような人にとっても、このテーマは欲しかった機能が揃ってる!という感じでした。まー私の説明よりも公式ページでその魅力を確認してみてください。

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事