Wordpress

【JIN】コピペで簡単 手順説明のステップフローCSSデザイン

Rito
Rito

こんにちは!
Rito(Rito)です!

ブログを作っていくと、最初にサクッと手順の説明をしたくなる時がありますよね?

今回はそんなサクッと手順を説明するときに使えそうな「ステップフロー」のCSSを作ってみました。

私と同じもので良ければ、どうぞお使いください。

  • コピペは自己責任でお願いします。
  • 使用してデザインが崩れた等の不具合は受け付けておりません。

WordPressテーマ「JIN」を使用しています。他のテーマでは試しておりませんので、ご了承ください。

今回の手順

  • STEP1
    CSSをコピペ
    [外観]>[カスタマイズ]>[追加CSS]の一番下にコピペ
  • STEP2
    HTMLをコピペ
    [新規投稿]>[テキストエディタ]にコピペ
  • STEP3
    もっと工程を増やそう
    <li>~</li>までをコピペ。
    必要な部分を書き換える。
    黒丸は<div class=”stepflow-black“></div>にすればOK
  • STEP4
    アレンジしてみてよう!
    左側の線の色とかも変えられるよ!

↑こんな感じのやつをコピペで作りましょう。

STEP1:CSSをコピペしよう

[外観]>[カスタマイズ]>[追加CSS]の一番下にコピペしましょう。

保存もお忘れなく!


CSS

/*ステップフローのCSS*/
ul.stepflow {
	border: none;
	margin: 1em 0.5em;
	padding: 0;
	list-style: none;
}
ul.stepflow > li:before, ol.stepflow > li:before {
	background-color:#cccccc!important;
}
.stepflow li {
    position: relative;
    padding: 0 0 1.5em 1.8em;
}
.stepflow>li:before {
	content: "";
	width: 3px;
	background: #cccccc;
	display: block;
	position: absolute;
	top: 28px;
	bottom: 0;
	left: 5px;
}
.stepflow-white {
	content: '';
	display: inline-block;
	position: absolute;
	top: 5px;
	left: 0;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: solid 3px #232F3E;
}
.stepflow-black {
	content: '';
	display: inline-block;
	position: absolute;
	top: 5px;
	left: 0;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: solid 3px #232F3E;
	background-color: #232F3E;
}
.stepflow_label {
	padding: 3px 0px 8px 0px;
	margin-bottom:8px;
	color: #999999;
	font-size: .8em;
	font-weight: bold;
}
.stepflow_title {
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.5;
	margin-bottom:15px;
}
.stepflow_content {
	font-size: .9em;
	line-height: 1.5;
	margin-top: .5em;
	padding: 0 0 1.5em;
	border-bottom: dashed 1px #cccccc;
}
/*ステップフローのCSSここまで*/

STEP2:HTMLをコピペしよう

[テキストエディタ]の方にコピペしましょう。


HTML

<ul class="stepflow">
<li>
<div class="stepflow-black"></div>
<div class="stepflow_label">STEP1</div>
<div class="stepflow_title">*タイトル*</div>
<div class="stepflow_content">*コンテンツ*</div>
</li>
<li>
<div class="stepflow-white"></div>
<div class="stepflow_label">STEP2</div>
<div class="stepflow_title">*タイトル*</div>
<div class="stepflow_content">*コンテンツ*</div>
</li>
<li>
<div class="stepflow-white"></div>
<div class="stepflow_label">STEP3</div>
<div class="stepflow_title">*タイトル*</div>
<div class="stepflow_content">*コンテンツ*</div>
</li>
</ul>

STEP3:行程の数を増やそう。

下のかたまりを増やせばOK!

</ul>の前に増やそう!

<li>
 <div class="stepflow-white"></div>
 <div class="stepflow_label">STEP3</div>
 <div class="stepflow_title">*タイトル*</div>
 <div class="stepflow_content">*コンテンツ*</div>
</li>

STEP4:アレンジしてみよう!

左の縦線の色を変える。

左の灰色の部分はCSSの9行目の
「background-color:#cccccc!important;」の部分を変えよう!

[#cccccc]を好きなカラーコードで記入しましょう!

○や●の色を変える。

○の色も変えられます。
[#232F3E]を好きなカラーコードで記入しましょう!

自分のサイトカラーに合わせてくださいね。

AddQuickTagに登録しておくと便利

ワードプレスプラグインの「AddQuickTag」を使用している方は、
HTMLを登録しておくと便利!

いつでもさっと書き出せますよ。

終わりに。

今回はシンプルなステップフローを作成してみました。

自分のために作ったものなので、他の動作確認は一切していませんので本当にコピペは自己責任でお願いしますね(笑)

  • 単体
    一つで区切る
    連続ではなく、単体で使う方法もいいかもしれません。
    見栄えはこんな感じになります。

使い方次第でいろいろ使えそうな気がしてきましたね!

では!

POSTED COMMENT

  1. パッパパ より:

    Ritoさん
    初めまして、パッパパといいます。

    ブログでステップフローのカスタマイズ利用させていただいています。ありがとうございます!大変使いやすいです!

    導入の際に気づいたことがありましてコメントさせていただきました。

    こちらの記事のステップ2のコードをコピーした時と

    ステップ3のコピーした時とのコードで

    記号””””の形が違ってしまうようです。

    ステップ3のコピーをそのまま追加すると形が崩れてしまうのでステップ3のコードをステップ2のように表示していただければと思います。

COMMENT

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