ブログでわかりやすい手順説明を実現するステップバーの導入方法

自分の備忘録として役立っている本ブログです。PCの設定、アプリの使い方、たまには料理だったりと、何かのやり方を記載した記事が多くなります。

手順を書き残すときに、ステップがわかりやすい表示を導入されているブログがあり、ずっと気になっていました。その方の過去記事を見てみますと、そのやり方が書き残されていたので、早速まねさせていただきます。

手順を説明する時の一工夫、ステップバー（タイムライン）とは
参考にした記事
導入手順を早速ステップバーで解説します
HTMLコード
- 定型文1
- 定型文2
CSS
ステップバー導入直後の所感
- 最初は新記事から導入しましょう
- 型が決まっているところに内容を埋め込めば、話の脱線が無く無くなる。
最後に

手順を説明する時の一工夫、ステップバー（タイムライン）とは

早速実装したステップバーのスクリーンショットがこちら。緑の丸の横にSTEPと書かれて、点線が下に伸びているため、ブロック化されます。手順を追って説明しているパートだということがわかりやすいと思います。

下記のリンク先に、完成させたステップバーがありますので、ご興味あれば是非ご覧ください。

driveon43.com

参考にした記事

シンプルなデザインで見やすい記事を作られている「みやもと様」のブログを参照させていただきました。矢印のデザインで手順がわかりやすいです。ご紹介ありがとうございました。

miya-moto-blog.hatenablog.com

みやもと様が参考にされたページが、「フジプロっ！のフジグチ様」のブログです。5つのデザインのステップバーのHTMLとCSSを配布されています。

www.fuji-blo.com

導入手順を早速ステップバーで解説します

STEP

上のリンク先記事を読んで雰囲気をつかむ

ステップバーとはなんぞやという説明を読んで、実物を見てその良さがわかれば次に進みましょう

STEP

デザインを選ぶ

本家「フジグチ様」のブログでは5種類のステップバーが紹介されています。ご自分のサイトデザインに一番合うものを選びましょう。色は後から修正が出来ますので、ここではデザインのみで。

STEP

HTMLコードをコピーして定型文に貼り付ける

はてなブログPC版の定型文貼り付け機能を使います。HTMLのコードは最初のみ使うデザイン（定型文1）と追加ステップ（定型文2）の2つのHTMLコードがあります。2つとも登録します。

STEP

CSSコードを貼り付ける

はてなブログのダッシュボード画面のサイドバーにあるデザインから「デザイン編集画面」に入り、スパナマーク＞デザインCSSに貼り付けて保存します

STEP

記事作成時に定型文貼り付けを使ってステップバーを作成する

HTMLコードを書き込んでいく作業なのでややこしいですが、一度やれば慣れます

STEP

出来上がったら喜ぶ

すっきりとまとまっているので、手順の説明がはかどりそうです。フローチャートのMermaid記法よりも簡単です。

大きな流れをご説明しました。定型文やCSSの貼り付け方、カラーの変更等の個々の手順はそのうち別記事にまとめたいと思います。今のところは「みやもと様」、「フジグチ様」のブログをご参照ください。

HTMLコード

今のところ何の問題も無いので、「フジグチ様」のコードを、改変せずに使っています。今後気になるところがあれば修正してきたいと思います。色は少し変えるかもしれません。

定型文1

<div class="step-wrap1">
<div class="step-content1">
<div class="step-label1">STEP</div>
<div class="step-title1">タイトル</div>
<div class="step-body1" style="border-bottom: dotted 2px #ddd;">本文</div>
</div>
<p>ここに追加する</p>
</div>
<p>ステップバー枠外はここに移動</p>

定型文2

<div class="step-content1">
<div class="step-label1">STEP</div>
<div class="step-title1">タイトル</div>
<div class="step-body1" style="border-bottom: dotted 2px #ddd;">本文</div>
</div>
<p>ここに追加する</p>

CSS

/***ステップバーデザイン１***/
.step-wrap1 {
 counter-reset:count;
 margin: 2em 0;
 position: relative;
}
.step-content1 {
 padding: 0 0 1.3em 2em;
 margin: 0;
 position: relative;
}
.step-content1::before {
 content: "";
 display: block;
 width: 13px;
 height: 13px;
 background: #6ab5a5;
 border: solid 3px #ffffff;
 border-radius: 50%;
 position: absolute;
 top: 3px;
 left: 3px;
 box-shadow: 0 0 0 2px #6ab5a5;
}
.step-content1::after {
 content: "";
 display: block;
 height: calc(100% - 35px);
 border-left: dotted 5px #768888;
 position: absolute;
 top: 30px;
 left: 10px;
}
.step-title1 {
 font-weight: bold;
 font-size: 120%;
}
.step-label1 {
 color: #768888;
 font-weight: bold;
}
.step-label1::after {
 counter-increment:count;
 content:counter(count);
 position: relative;
 left: .3em;
}
.step-body1 {
 margin-top: .5em;
 padding: 0 0 1em;
 border-bottom: dotted 2px #ddd;
}
.step-wrap1 > :last-of-type::after {
 display: none;
}
/***ステップバーデザイン１***/

ステップバー導入直後の所感

ファーストインプレッションを書き残します。ややこしそうに見えましたが、一度やれば二度目は簡単でした。

最初は新記事から導入しましょう

今回、導入にあたり最初に過去記事をリライトする形でHTMLコードおよびCSSを導入しました。もともとある文章を修正しながらHTMLコードを入れ込んでいきますので、うっかり本文を消したり、コードを消したりと何回かミスがありました。煩雑な作業になりますから、最初は新規記事で練習するつもりで一から始めると良いと思います。