Twitterはこちら仕事依頼はこちら

今ココ!がわかる順序リストをHTMLとCSSで作る

今ココタイムラインをHTMLとCSSで作る

こんにちは、ぽんひろ(@ponhiroo)です。

今回作るのは「今ココ順序リスト」です!名前は適当に付けました!

それがこちら!

  1. 鶏肉、じゃがいも、玉ねぎ、にんじんを切る
  2. 全部炒める
  3. 沸騰したらあくをとり、弱火〜中火で15分くらい煮込む
  4. 火を止めルウを割りいれる。溶けたら弱火で10分くらい煮込む
  5. 完成!

画像も入れられます。

  1. 鶏肉、じゃがいも、玉ねぎ、にんじんを切る
  2. 全部炒める
  3. 沸騰したらあくをとり、弱火〜中火で15分くらい煮込む
  4. 火を止めルウを割りいれる。溶けたら弱火で10分くらい煮込むカレー
  5. 完成!

手順が果てしなく長いコンテンツはユーザーが「長い」と認識してしまうと離脱率が上がってしまいます。

長いコンテンツが悪いのではなく細かい要素に分けて段階をふめばユーザーのストレスが軽減し、離脱率が下がります。これを心理学で「段階的開示」と言います。

そのため順序を提示し、今自分がどの辺にいるのかわかってもらうためにタイムラインを使います。

よくWeb会員登録するときに出てくるアレと同じです。

画像を使う人もいますがさすがに時間がかかって面倒です。それならHTMLとCSSで作っちゃえってことです!

もちろん、スマホにも対応しています。

それでは見ていきましょう!

スポンサーリンク

今ココ順序リスト:HTMLコード

表示結果

  1. 鶏肉、じゃがいも、玉ねぎ、にんじんを切る
  2. 全部炒める
  3. 沸騰したらあくをとり、弱火〜中火で15分くらい煮込む
  4. 火を止めルウを割りいれる。溶けたら弱火で10分くらい煮込む
  5. 完成!

コード

<div class="flow">
<ol>
 	<li class="now">鶏肉、じゃがいも、玉ねぎ、にんじんを切る</li>
 	<li>全部炒める</li>
 	<li>沸騰したらあくをとり、弱火〜中火で15分くらい煮込む</li>
 	<li>火を止めルウを割りいれる。溶けたら弱火で10分くらい煮込む</li>
 	<li>完成!</li>
</ol>
</div>

class=”now”って書いてあるところが「今ココ」になります。

ですので以下のように変更すれば…

コード

<div class="flow">
<ol>
 	<li>鶏肉、じゃがいも、玉ねぎ、にんじんを切る</li>
 	<li class="now">全部炒める</li>
 	<li>沸騰したらあくをとり、弱火〜中火で15分くらい煮込む</li>
 	<li>火を止めルウを割りいれる。溶けたら弱火で10分くらい煮込む</li>
 	<li>完成!</li>
</ol>
</div>

こうなります。

表示結果

  1. 鶏肉、じゃがいも、玉ねぎ、にんじんを切る
  2. 全部炒める
  3. 沸騰したらあくをとり、弱火〜中火で15分くらい煮込む
  4. 火を止めルウを割りいれる。溶けたら弱火で10分くらい煮込む
  5. 完成!

今ココ順序リスト:CSSをコピペ!

CSSをコピペします!色や文章は各自変更してください!

WordPressを使っている方は

WordPressの管理画面→外観→テーマエディター→スタイルシートにコードを貼り付けます。
※外観→カスタマイズ→追加CSSの方でも可(好きな方で)

親テーマではなく子テーマを編集してください。何のことかわからない人はググってから行いましょう!

コード


.flow {
	padding: 1em;
	background: #fef9ed; /* 背景色カラーコード */
	margin: 0;
}
.flow ol{
	margin: 1em 0;
	padding-left: 1.2em;
	line-height: 1.8;
}
.flow li {
	opacity: 0.5;
	margin: 0 0 .5em 5em !important;
}
.flow .now {
	opacity: 1;
	font-weight: bold;
	position: relative;
}
.flow .now:before {
    content: "今ココ"; /* 今ココ */
    position: absolute;
    left: -6.5em;
    top: 0.2em;
    padding: 0 7px;
    background: #f6a068; /* 今ココ背景色カラーコード */
    color: #fff;
    font-size: 0.8em;
    border-radius: 5px;
}
.flow img{
	margin:0.5em 0;
	vertical-align:top;
}

WordPress利用者はプラグイン「AddQuicktag」を使うと楽

このプラグインは頻繁に使うHTMLを登録し、1クリックで使うことができるようになります。

それではインストールしていきましょう!
まず管理画面から「プラグイン」→「新規追加」を選択します。
「AddQuicktag」を検索し、インストールをクリック。

有効化します。

WordPressの管理画面→設定にAddQuicktagがあるので選択します。

1にわかりやすい名前を2にHTMLコードをコピペします。右のチェックは全て入れておいて大丈夫です。
今ここタイムラインaddquicktag設定

コピペ用

<div class="flow">
<ol>
 	<li class="now">手順1</li>
 	<li>手順2</li>
 	<li>手順3</li>
</ol>
</div>

これで投稿画面にボタンが追加されています。

注意点としてビジュアルエディタの方ではできませんでした…。

テキストエディタの方で「class=”now”」の位置を変更してください。

色を変更するときのポイント

そのままの色で使う人は少ないと思うので、配色に関するポイントを少し紹介します。

この順序リストは4つ色を使ってます。全体の背景、全体の文字色、今ココの背景、今ココの文字色。

薄くなるのはCSSで透明度を下げています。

背景色を変更したい場合CSSの


background: #fef9ed; /* 背景色カラーコード */

background: #f6a068; /* 今ココ背景色カラーコード */

これらのカラーコードを変更します。

オススメは「今ココ背景色」をサイトのテーマカラーに、「全体背景色」をテーマカラーの明度を下げたものへ変更します。

このサイトのメインカラーのカラーコードは「#f6a068」です。

明度を下げたカラーコードを調べたい場合はカラーコードをGoogleで検索すればいくつかサイトが出てきます。

どこでも良いのですが下記サイトはよく使います。

color-hex

彩度を変えるより明度を変える方が簡単になじみやすくなります。

今ココがないバージョンを載せたいとき

今ココをあらわすclass=”now”を抜いて表示すると

  1. 鶏肉、じゃがいも、玉ねぎ、にんじんを切る
  2. 全部炒める
  3. 沸騰したらあくをとり、弱火〜中火で15分くらい煮込む
  4. 火を止めルウを割りいれる。溶けたら弱火で10分くらい煮込む
  5. 完成!

このように文字が薄くなってしまいます。

理想は

  1. 鶏肉、じゃがいも、玉ねぎ、にんじんを切る
  2. 全部炒める
  3. 沸騰したらあくをとり、弱火〜中火で15分くらい煮込む
  4. 火を止めルウを割りいれる。溶けたら弱火で10分くらい煮込む
  5. 完成!

こんな感じかと思います。

このリストの作り方については下記記事をご覧ください。

参考 【Cocoon】全40通り!おしゃれなリスト(箇条書き)を作る!コピペOK【カスタマイズ】

【Cocoon】全40通り!おしゃれなリスト(箇条書き)を作る!コピペOK!
Cocoonのリスト(箇条書き)のカスタマイズ記事です。組み合わせ次第で40種類作れます。色やアイコンも変えられるようになっています。設定は面倒ですが一度カスタマイズしてしまえば簡単にリスト(箇条書き)が使えるのでオススメです。他にもCocoonカスタマイズをやってるのでよかったらそちらもご覧ください。

Cocoonカスタマイズ他にもやってます!

他にもいろいろCocoonカスタマイズをやってますので良かったらご覧ください!

あわせて読む Cocoonカスタマイズをまとめ!おしゃれなものや機能性をあげるものなど!

【30通り以上!】Cocoonカスタマイズ!コピペで簡単!
Cocoonのカスタマイズまとめです。おしゃれなものから機能性をあげるものまで紹介します。プロフィール、タブ切り替え、トップページ、リスト、ボックス、スマホのメニュー固定方法なども紹介していきます。

コメント

  1. これは素晴らしい記事ですね!

    • >ドにゃロンさん

      ありがとうございます!
      そういっていただけるとあらゆるやる気がアップします!

ページトップへ