2019年11月9日Ritoこんにちは!Rito(Rito)です!ブログを作っていくと、最初にサクッと手順の説明をしたくなる時がありますよね?今回はそんなサクッと手順を説明するときに使えそうな「ステップフロー」のCSSを作ってみました。私と同じもので良ければ、どうぞお使いください。コピペは自己責任でお願いします。使用してデザインが崩れた等の不具合は受け付けておりません。WordPressテーマ「JIN」を使用しています。他のテーマでは試しておりませんので、ご了承ください。今回の手順STEP1:CSSをコピペしようSTEP2:HTMLをコピペしようSTEP3:行程の数を増やそう。今回の手順STEP1CSSをコピペ[外観]>[カスタマイズ]>[追加CSS]の一番下にコピペSTEP2HTMLをコピペ[新規投稿]>[テキストエディタ]にコピペSTEP3もっと工程を増やそう<li>~</li>までをコピペ。必要な部分を書き換える。class=”stepflow-black“></div>にすればOKSTEP4アレンジしてみてよう!左側の線の色とかも変えられるよ!↑こんな感じのやつをコピペで作りましょう。STEP1:CSSをコピペしよう[外観]>[カスタマイズ]>[追加CSS]の一番下にコピペしましょう。#cccccc;}/*ステップフローのCSSここまで*/STEP2:HTMLをコピペしよう[テキストエディタ]の方にコピペしましょう。class="stepflow_content">*コンテンツ*</div></li></ul>STEP3:行程の数を増やそう。class="stepflow_content">*コンテンツ*</div></li>STEP4:アレンジしてみよう!左の縦線の色を変える。左の灰色の部分はCSSの9行目の「background-color:#cccccc!important;」の部分を変えよう![#cccccc]を好きなカラーコードで記入しましょう!○や●の色を変える。○の色も変えられます。[#232F3E]を好きなカラーコードで記入しましょう!自分のサイトカラーに合わせてくださいね。AddQuickTagに登録しておくと便利ワードプレスプラグインの「AddQuickTag」を使用している方は、HTMLを登録しておくと便利!いつでもさっと書き出せますよ。今回はシンプルなステップフローを作成してみました。一つで区切る連続ではなく、単体で使う方法もいいかもしれません。見栄えはこんな感じになります。PMRitoさん初めまして、パッパパといいます。ブログでステップフローのカスタマイズ利用させていただいています。ありがとうございます!大変使いやすいです!導入の際に気づいたことがありましてコメントさせていただきました。こちらの記事のステップ2のコードをコピーした時とステップ3のコピーした時とのコードで記号””””の形が違ってしまうようです。ステップ3のコピーをそのまま追加すると形が崩れてしまうのでステップ3のコードをステップ2のように表示していただければと思います。コメントをキャンセルメールアドレスが公開されることはありません。アスリーマンRITOアスリーマンとはアスリート×サラリーマンの造語。仕事をしながらアスリート体型を目指す人。仕事×スポーツ・運動・カッコイイ体。それがアスリーマン!【急募】アスリーマン筋トレ・運動・プロテインが好きな方。研究により明らかになる。