こんにちは！
Rito(Rito)です！
ブログを作っていくと、最初にサクッと手順の説明をしたくなる時がありますよね？
今回はそんなサクッと手順を説明するときに使えそうな「ステップフロー」のCSSを作ってみました。
私と同じもので良ければ、どうぞお使いください。
- コピペは自己責任でお願いします。
- 使用してデザインが崩れた等の不具合は受け付けておりません。
WordPressテーマ「JIN」を使用しています。他のテーマでは試しておりませんので、ご了承ください。
スポンサーリンク
今回の手順
- STEP1CSSをコピペ[外観]＞[カスタマイズ]＞[追加CSS]の一番下にコピペ
- STEP2HTMLをコピペ[新規投稿]＞[テキストエディタ]にコピペ
- 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を登録しておくと便利！
いつでもさっと書き出せますよ。
終わりに。
今回はシンプルなステップフローを作成してみました。
自分のために作ったものなので、他の動作確認は一切していませんので本当にコピペは自己責任でお願いしますね（笑）
- 単体一つで区切る連続ではなく、単体で使う方法もいいかもしれません。
見栄えはこんな感じになります。
使い方次第でいろいろ使えそうな気がしてきましたね！
では！
スポンサーリンク
Ritoさん
初めまして、パッパパといいます。
ブログでステップフローのカスタマイズ利用させていただいています。ありがとうございます！大変使いやすいです！
導入の際に気づいたことがありましてコメントさせていただきました。
こちらの記事のステップ2のコードをコピーした時と
ステップ３のコピーした時とのコードで
記号””””の形が違ってしまうようです。
ステップ３のコピーをそのまま追加すると形が崩れてしまうのでステップ3のコードをステップ2のように表示していただければと思います。
ご指摘ありがとうございます！
修正しておきます！