WordPressで使える装飾とか14選！ 他いろいろ♪（備忘録）

<! ----- HTML ----- >
<div class="decorative-box-7">
<p class="box-title-7">
<i class="fa-solid fa-clipboard"></i>タイトル</p>
<div class="decorative-box-7-content">
<p>文章とか入力</p></div>
</div>

<! ----- HTML ----- >
<div style="height:5px" aria-hidden="true" class="wp-block-spacer"></div>
<p class="lead-lines-on-both-sides trigger ">【how to】 とある美容室の予約からお店までの行きかた</p>

<p class="text-right cautionary-note font-weight">※これはフィクション</p>
<div class="stepbar"><!-- ステップバー　START　--><!-- ごちゃつく構文につき注意されたし　-->

<div class="stepbarwrap"><!-- 1段目ステップエリア -->
<div class="steplabel"><!-- ラベルレイアウト -->
<span class="stepcircle"></span><!-- タマ　-->
<span class="line-start"></span><!-- 初段追加タマ線　-->
<p class="stepnumber trigger">STEP1</p></div><!-- ステップ名 -->
<div class="stepinside"><!-- ↓内包レイアウト--><!-- ↓ 内包コンテンツ-->  
<p class="title">美容師診察予約</p><!-- ステップタイトル--> 
        
<p>
<i class="fa-brands fa-line fa-fw"></i>LINEで担当美容師と直接コンタクトを図り、要望を伝える。</p>

<div class="decorative-box-4 change-color-24">
<p class="box-title-4 change-color-15">
<i class="fa-solid fa-clipboard"></i>情報に誤り無きこと</p>
<div class="decorative-box-4-content">

<ol class="list-numbering">
<li>
コースを伝える。
<p class="sub-list">例）カット or カラー or パーマ</p></li>
<li>
希望日時を伝える。
<p class="sub-list">例）〇月〇日の〇時～〇時に仕上がる時間帯で</p></li>
<li>
美容師からの返答確認後、予約確定の正式依頼をする。
<p class="sub-list">例）〇月〇日の〇時に伺います！</p></li>
<li>
美容師からの正式回答を確認する。</li>
</ol>
</div>
</div>

<p>
<i class="fa-regular fa-calendar-check fa-fw"></i>予約はこれでOK。 あとは当日に備える /ᐠ. .ᐟ\。</p>

</div><!-- ↑ステップ内包コンテンツ-->  
<span class="stepline trigger"></span><!-- ↑1段目ステップライン-->  
<span class="partition-line"></span><!-- 見切り装飾-->  
</div><!-- ↑１段目ステップEND -->                                     <!-- ↑１段目ステップEND -->

<div class="stepbarwrap"><!-- 2段目ステップエリア -->
<div class="steplabel"><!-- ラベルレイアウト -->
<span class="stepcircle"></span><!-- タマ -->
<p class="stepnumber trigger">STEP2</p></div><!-- ステップ名 -->
<div class="stepinside"><!-- ↓内包レイアウト--><!-- ↓ 内包コンテンツ--> 
<p class="title">自宅から最寄り駅へ</p><!-- ステップタイトル--> 

<p>
<i class="fa-solid fa-person-walking fa-fw"></i>高尾駅（京王線）まで歩きましょ。 ～所要20分</p>

</div><!-- ↑ステップ内包コンテンツ-->  
<span class="stepline trigger"></span><!-- ↑２段目ステップライン-->  
<span class="partition-line"></span><!-- 見切り装飾-->  
</div><!-- ↑２段目ステップEND -->  

<div class="stepbarwrap">
<div class="steplabel">
<span class="stepcircle"></span>
<p class="stepnumber trigger">STEP3</p></div>
<div class="stepinside">
<p class="title">電車で三軒茶屋へ</p>   
       
<p>
<i class="fa-solid fa-train-subway fa-fw"></i>推奨ルート。</p>

<div class="decorative-box-4 change-color-24 illustration">
<p class="box-title-4 change-color-15"><i class="fa-solid fa-clipboard"></i>電車経路</p>
<div class="decorative-box-4-content">

<ol class="list-numbering">
<li>
<span class="font-weight">高尾駅</span>
<p class="sub-list">新宿行きに乗車</p></li>
<li>
<span class="font-weight">北野駅</span>
<p class="sub-list">新宿行き「特急」に乗り換え</p></li>
<li>
<span class="font-weight">明大前駅</span>
<p class="sub-list">京王井の頭線、渋谷行きに乗り換え</p></li>
<li>
<span class="font-weight">渋谷駅</span>
<p class="sub-list">田園都市線、中央林間行きに乗り換え</p></li>
<li>
<span class="font-weight">三軒茶屋</span>
<p class="sub-list">降車駅</p></li>
</ol>
</div>
</div>

<p>
<i class="fa-solid fa-train-subway fa-fw"></i>高尾駅から三軒茶屋まで、 ～所要60分チョイ</p>

<div class="decorative-box-4 change-color-24">
<p class="box-title-4 change-color-15"><i class="fa-solid fa-clipboard"></i>特記事項</p>
<div class="decorative-box-4-content">

<ul class="list-check">
<li>
「北野駅」以外、行き先を確認のうえ、入線してきた電車ならばどれでも乗車OK（特急・準急とか指定なし）</li>
<li>
明大前駅の渋谷方面は常時激込み..。乗れないときもあるので注意（速やかに列に並び待つ）</li>
<li>
渋谷駅での乗り換えは、一度駅構外（地上階）へ出て、地下道から田園都市線に向かいます。</li>
</ul>
</div>
</div>

</div> <!-- ↑ステップ内包コンテンツ-->
<span class="stepline trigger"></span><!-- ↑３段目ステップライン--> 
<span class="partition-line"></span><!-- 見切り装飾--> 
</div><!-- ↑３段目ステップEND -->                                                   

<div class="stepbarwrap">
<div class="steplabel">
<span class="stepcircle"></span>
<p class="stepnumber trigger">STEP4</p></div>
<div class="stepinside"><p class="title">三軒茶屋駅から美容室へGO！</p>    
    
<p>
<i class="fa-solid fa-person-walking fa-fw"></i>GOOLはすぐソコ。 南口から徒歩7分！</p>

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d810.6028459644631!2d139.67367886365335!3d35.6422348170915!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018f4a2549d8627%3A0xdef55c1f06a5aea8!2z44OZ44Or44OZ44G444Ki44O8!5e0!3m2!1sja!2sjp!4v1701937475272!5m2!1sja!2sjp" width="600" height="450" style="border:0; border-radius: 15px" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

</div>                                                   
<span class="stepline trigger"></span>      
<span class="partition-line"></span>
</div>                                                     
                                       
<div class="stepbarwrap"><!-- 最後に付け足す -->
<div class="steplabel">
<span class="stepcircle"></span>
<span class="line-end"></span><!-- 終段追加タマ線　-->
<p class="stepnumber">GOAL</p></div>

<p class="step-end">乙デス。</p>                     
<span class="partition-line"></span>                                                  

</div>
</div>

ヤベーゼ +_+

/* -----CSS----- */