自分の備忘録として役立っている本ブログです。PCの設定、アプリの使い方、たまには料理だったりと、何かのやり方を記載した記事が多くなります。
手順を書き残すときに、ステップがわかりやすい表示を導入されているブログがあり、ずっと気になっていました。その方の過去記事を見てみますと、そのやり方が書き残されていたので、早速まねさせていただきます。
手順を説明する時の一工夫、ステップバー（タイムライン）とは
早速実装したステップバーのスクリーンショットがこちら。緑の丸の横にSTEPと書かれて、点線が下に伸びているため、ブロック化されます。手順を追って説明しているパートだということがわかりやすいと思います。
下記のリンク先に、完成させたステップバーがありますので、ご興味あれば是非ご覧ください。
参考にした記事
シンプルなデザインで見やすい記事を作られている「みやもと様」のブログを参照させていただきました。矢印のデザインで手順がわかりやすいです。ご紹介ありがとうございました。
みやもと様が参考にされたページが、「フジプロっ！のフジグチ様」のブログです。5つのデザインのステップバーのHTMLとCSSを配布されています。
導入手順を早速ステップバーで解説します
大きな流れをご説明しました。定型文や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コードを入れ込んでいきますので、うっかり本文を消したり、コードを消したりと何回かミスがありました。煩雑な作業になりますから、最初は新規記事で練習するつもりで一から始めると良いと思います。
型が決まっているところに内容を埋め込めば、話の脱線が無く無くなる。
本記事では導入に際しての大枠のみにとどめました。ステップバーという型があるため、定型文の作り方をここに入れてしまうと、手順説明のステップの流れがとどまって読みにくい記事になるように思います。
各論的な内容は別記事に書いていて、リンクする方が親切かなと思います。
最後に
見ていてうらやましかった、手順を示すステップバー（タイムライン）を導入することが出来ました。既存の記事も徐々にリライトする予定です。
