【はてなブログ-カスタマイズ】ステップバーを導入してみる（CSS対応）

ブログカスタマイズの記事などで適用手順を書くことが多いため、ステップバーを導入してみました。

ステップバーを導入する前は①、②、③・・・といった書き方でした。
それがステップバーの導入により、CSSでデザインされた見た目に変わりました。

今回の対応により、手順を書いている感じがパッと見で表現できるのが良いなと思っています。

使い方がちょっと独特なので、その辺も含めて書いていきます。

変更内容
- 変更前
- 変更後
参考サイト
適用したCSS
デザインの適用手順
定型文の登録
- ステップバー
- 追加ステップ
使い方
注意事項
おわりに
関連記事

変更内容

以前記事にした「続きを読む」の設定手順を例として書いてみます。
miya-moto-memo.hatenablog.com

変更前

①記事編集ページで「続きを読む」を設定したいところをクリック

②「続きを読む」をクリック
（おそらくどの編集モードでも設定可能なはず）

③「続きを読む」が設定される

④「更新する」ボタンをクリック

⑤トップページを確認する
「続きを読む」が差し込まれているはずです。

変更後

STEP

記事編集ページで「続きを読む」を設定したいところをクリック

STEP

「続きを読む」をクリック
（おそらくどの編集モードでも設定可能なはず）

STEP

「続きを読む」が設定される

STEP

「更新する」ボタンをクリック

STEP

トップページを確認する
「続きを読む」が差し込まれているはずです。

参考サイト

以下のサイトを参考にさせて頂きました。ありがとうございます。
www.fuji-blo.com
上記サイトでは5種類のデザインが紹介されています。
自分はこの中で「デザイン3」をコピーさせて頂きました。

適用したCSS

/***ステップバーデザイン3***/
.step-wrap3 {
 counter-reset: count;
 margin: 2em 0;
 position: relative;
}
.step-content3 {
 padding: 1.3em 0 .3em 1em;
 margin: 0 0 1em 1em;
 position: relative;
 border-top: solid 2px #ddd;
}
.step-content3::before {
 content: "";
 display: block;
 position: absolute;
 bottom: 0;
 left: -10px;
 border-style: solid;
 border-width: 17px 8px 0 8px;
 border-color: #ddd transparent transparent transparent;
}
.step-content3::after {
 content: "";
 display: block;
 height: calc(100% - 36px);
 border-left: dashed 4px #ddd;
 position: absolute;
 top: 16px;
 left: -4px;
}
.step-label3 {
 padding: 3px 20px 3px 15px;
 color: #fff;
 font-weight: bold;
 position: absolute;
 top: -18px;
 left: -20px;
 background: #111;
 border-radius: 20px;
 z-index: 1;
}
.step-label3::after {
 counter-increment: count;
 content: counter(count);
 position: relative;
 left: .3em;
}
.step-body3 {
 margin-top: .5em;
 padding: 0 0 1em;
}
.step-wrap3 > :last-child {
 box-shadow: 5px 7px 0 -5px #ddd;
}
.step-wrap3 > :last-child::before, .step-wrap3 > :last-of-type::after {
 display: none;
}
/***ステップバーデザイン3***/

上記のCSSを適用すると、ステップバーのデザインが適用されます。

デザインの適用手順

一応、適用手順を載せておきます。
※さっそく今回適用したステップバーを導入しました。

STEP

ヘッダーの右上あたりにあるところをクリックして「デザイン」をクリック

STEP

「カスタマイズ」→「デザインCSS」→「CSS記述領域」をクリック

STEP

上述のCSSをコピペする（既存のCSSは消さずに）

STEP

「変更を保存する」をクリック

STEP

デザインが変更されているか確認する

デザインが変更されなかったり、変になっている方は
手順が間違っているか、今使っているデザインテーマと相性が悪いか、他にもCSSやJSを埋め込んでいてその影響か、、などなど原因は色々考えられます。

定型文の登録

以下2つの定型文を登録します。
定型文の登録方法に関しては以下リンクを参考にして頂ければと。
miya-moto-memo.hatenablog.com

ステップバー

<div class="step-wrap3">
<div class="step-content3">
<div class="step-label3">STEP</div>
<div class="step-title3">タイトル</div>
<div class="step-body3">本文</div>
</div>
<p>ここに追加する</p>
</div>
<p>ステップバー枠外はここに移動</p>

追加ステップ

<div class="step-content3">
<div class="step-label3">STEP</div>
<div class="step-title3">タイトル</div>
<div class="step-body3">本文</div>
</div>
<p>ここに追加する</p>