ワードプレス装飾見本（備忘録）

モノノケ姫：コダマ×三男（ファンタジー仕様）

いや～。長かった..。WordPressを始めた頃「編集画面で改行」プレビュー「変化なし..。」 Excel感覚で挑んだ結果、玉砕していた頃が懐かしい

そこから他者との差別化を目的に、サイト全体のレイアウト、機能、デザインのカスタムに加え「オリジナル装飾品」の制作に勤しんだ結果、こんな感じのサイトに。

※99パ～セルフカスタム

イソガバマワレ

大義名分

Webサイト運営理念

【目的】
読者の目に留まりやすい「SEO検索流入上位表示」をブログ運営の根幹とし「読者さんとGoogle先生」も好む、高品質で健全なサイトを目指す。

【狙い】
ズバリ！指名検索「セルフトラベリングタイランド」でRe検索されること！これぞまさにブロガーの誉。

【対策と方法】
高品質なWeb制作を可能とする、各種スキルの習得　⇒　インプットとアウトプット！

ってなわけで、ブログ運営において必要と思われる、Web装飾手法やデザイン、アニメーションネタをアウトプットしていきます。

これは本番の動作確認を兼ねた練習記事。すべて独り言。今後運営していく「ブログのネタ帳」と言ったところでしょうか。閲覧自由ですが、中毒性があります。自己責任でどうぞ。

Contents

BOX

まずコレ。ブログの必須アイテム。BOXは文章とか囲む装飾枠。 Web制作と無縁の会社員時代でも、〇〇サイトの「BOX」デザインはいい感じだな～..。とか思っていたので、読者の印象に残る大切なパーツ。

BOXを詳しく

ボックス Type-1（シンプル型：背景色レス・枠線アリ）

当サイトで使用する装飾BOXのデザインを、どーするか悩んでいたところ、タマタマ覗いたサイトカッコウの許嫁（アニメ公式）で発見！ ~~ヨシ、パク~~ こちらのデザインを参考とさせて頂き、ありがたく独自カスタム。シーズン２楽しみ！

タイトル

シンプルながら使い勝手の良い洗練されたデザイン！自分で言うと「自画自賛」になるらしい。中には「文章・画像・箇条書きリスト・表・動画・リンク」お好きなものをブチ込めばOKです。

code

開けゴマ

BOXシリーズ：Type-1（シンプル型：背景色レス・枠線アリ）

＜備考＞
※アイコン ⇒ Font Awesome使用（要:CDN読み込み）

<! ----- 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>

Copy

/* -----CSS----- */
.decorative-box-7 {
    max-width: 600px;
    margin: 2em auto;
    overflow: hidden;
    background-color: #fff;
    border-radius: 12px;
    border: solid 2.5px #6f6f6f;
}
.box-title-7 {
    margin: 0;
    padding: 0.3em 1em 0.28em;
    text-align: center;
    background-color: #cfcfcf;
    border-bottom: solid 2.5px #6f6f6f;
}
.decorative-box-7-content {
    padding: 0 1em;
}

Copy

カラーバリエーション

タイトル

①ここはコメント挿入欄。文章とも言う。サイズ感・余白・色・文字間・行間・配置とかチェック。もう少し入力しておく。

This is ピーチレッド

タイトル

②ここはコメント挿入欄。文章とも言う。サイズ感・余白・色・文字間・行間・配置とかチェック。もう少し入力しておく。

This is ライトパープル

タイトル

③ここはコメント挿入欄。文章とも言う。サイズ感・余白・色・文字間・行間・配置とかチェック。もう少し入力しておく。

This is ブルー

タイトル

④ここはコメント挿入欄。文章とも言う。サイズ感・余白・色・文字間・行間・配置とかチェック。もう少し入力しておく。

This is ライトブルー

タイトル

⑤ここはコメント挿入欄。文章とも言う。サイズ感・余白・色・文字間・行間・配置とかチェック。もう少し入力しておく。

This is ダークパープル

タイトル

⑥ここはコメント挿入欄。文章とも言う。サイズ感・余白・色・文字間・行間・配置とかチェック。もう少し入力しておく。

This is シルバー

タイトル

⑦ここはコメント挿入欄。文章とも言う。サイズ感・余白・色・文字間・行間・配置とかチェック。もう少し入力しておく。

This is ゴールド

英語で言えました

ボックス Type-2（シンプル型：背景色アリ・枠線ナシ）

タイトルアイコンは汎用性の高いデザインをチョイス。Font Awesomeなら、お好きな物に変更可。
無論、スマホ～ PCデカモニターまで、狭く広くカバーする「レスポンシブ」コーディングです。たぶん。

タイトル

シンプルながらも配色が功を奏し、堂々たる存在感！これも自分で言うと「手前味噌」になるらしい。中には「文章・画像・箇条書きリスト・表・動画・リンク」お好きなものをブチ込めばOKです。

カラーバリエーション

タイトル

⑧ここはコメント挿入欄。文章とも言う。サイズ感・余白・色・文字間・行間・配置とかチェック。もう少し入力しておく。

桃赤

タイトル

⑨ここはコメント挿入欄。文章とも言う。サイズ感・余白・色・文字間・行間・配置とかチェック。もう少し入力しておく。

紫

タイトル

⑩ここはコメント挿入欄。文章とも言う。サイズ感・余白・色・文字間・行間・配置とかチェック。もう少し入力しておく。

紫陽花

タイトル

⑪ここはコメント挿入欄。文章とも言う。サイズ感・余白・色・文字間・行間・配置とかチェック。もう少し入力しておく。

青

タイトル

⑫ここはコメント挿入欄。文章とも言う。サイズ感・余白・色・文字間・行間・配置とかチェック。もう少し入力しておく。

葡萄

タイトル

⑬ここはコメント挿入欄。文章とも言う。サイズ感・余白・色・文字間・行間・配置とかチェック。もう少し入力しておく。

鼠

タイトル

⑭ここはコメント挿入欄。文章とも言う。サイズ感・余白・色・文字間・行間・配置とかチェック。もう少し入力しておく。

金

読めない漢字
２つありました

ボックス Type-3（リッチ型：背景色アリ・枠線ナシ・アニメーションicon）

これらのBOXシリーズは、HTMLの構文に１行書き足すことで、カラーチェンジ、アニメーション、アイコン変更に加え、背景画像も追加できる着せ替え方式。気分次第でコロコロ変更できます。

タイトル

欲しいもの全部付き！豪華フル装備♪もっとド派手にすることも出来るが、これくらいに留めるのがベター。せっかくなので、アイコンアニメを複数パターン制作してみマス。

カラー&背景＆アイコンアニメのバリエーション

タイトル

⑮アイコンをチェックマークに変更のうえ、フロート上死点でクルンと回転♪いたって現実的。このデザインはスマホで見たときの違和感をとるのに一苦労です。

タイトル

⑯アイコン２種のフュージョン！「backface-visibility: hidden」プロパティで、裏表切り替えアニメーションの「@keyframes」がスマートに。もっと早く試せばよかったな～。

タイトル

⑰ボイ～ン♪ボイ～ン♪ボイ～ン♪ブシュー。ツン。レンダリングエンジンから悲鳴が聞こえる。fpsが落ちてきた気が..。気のせいか？気のせいですね。たぶん。

マネッコ三女

⑱アイコンアニメはココまで。続きは「WP装飾見本」制作終盤頃、ネタを考え実装しマス。

タイトル

⑲お隣の⑱から文頭文末上下余白が広くなっているが、これは横スクロールの高さを整然と合わせる為で、ミスったわけではありません。

タイトル

⑳ここはコメント挿入欄。文章とも言う。サイズ感・余白・色・文字間・行間・配置とかチェック。もう少し入力しておく。

タイトル

㉑ここはコメント挿入欄。文章とも言う。サイズ感・余白・色・文字間・行間・配置とかチェック。もう少し入力しておく。

タイトル

㉒観光情報系ブログを想定した対策の一環「BOX」はそろそろお腹一杯。他者との差別化も問題ナシ。とは言え、実際使うのは３種類くらいかも。

タイトル

㉓さらりと使っている背景画像。無論、SVGファイル。Illustrator で自作も可能だが、Webエンジニア向けの素材配布サイトを活用のうえカスタム。

タイトル

㉔ここはコメント挿入欄。文章とも言う。サイズ感・余白・色・文字間・行間・配置とかチェック。もう少し入力しておく。

ボックス Type-4（選択切り替え型）

BOXシリーズ最終章。ちょっと一工夫でいろんな見せ方が。Webは楽しい

メルヘンレッドメルヘンピンクメルヘンパープルミッドナイトパープルメンヘラボード

タイトル

㉕サンプルは5種類。さらに数を増やしても、綺麗にレイアウトも出来きる優れもの。下記サイトをお手本にカスタム♪選択切り替え型は、応用次第で読者に好まれそうな「合理的格納コンテンツ」の雛形としても活躍の予感。タブ切り替え表示

タイトル

㉖ちょい下から「ブワット」フェードイン！このブワットがポイント。当サイトの場合、サイトの顔とも呼べるヘッダーに「ゾウサンズ」アニメーション導入済。記事中はシンプルな仕上がりを意識。

タイトル

㉗ゾウサンズアニメーション..。今はググってもヒットしないが、そのうち当サイトがヒットする。たぶん。

タイトル

㉘この選択切り替え型は「CSS」で管理しているが、同一記事内「複数設置時」における「label」タグの管理がメンドイ。参考にしたサイトに情報が無かったので補足しておく。「JS」併用が効率的。

タイトル

㉙これでフィナーレ。登場アニメーション付き！勢いあまり、チョークにもアニメを仕込みそうになったが思いとどまる。当たり前だが、他所でありがちなチョークの表示崩れなど皆無。気が付くと「BOXデザイン」これで29種目。おそろしや～。

タイトルとコメント挿入欄色差は「mix-blend-mode」プロパティで調整。いい感じ！

閉じる

箇条書きリスト

積極的に使いたいパーツ。箇条書きリストは、項目ごとに文章を整理して、文頭に見やすく記号やアイコンを含む装飾。遥か昔、上司から「箇条書きを使え」と注意された記憶がヨミガエル。

箇条書きリストを詳しく

箇条書きリスト Type-1（ナンバリングとBOXの連携）

これ、ナンバリングタイプ。項目内容に順序が発生する場合に使用。下記はHTMLに「ul ・ ol ・ li」タグを使わない、比較用の”もどき”です。

【ビフォー】

これは“もどき”でフィクションです

1. 当サイトはリンクフリーにつき「当方への許可」は原則不要です。
⇒ 画像の無断使用（無断転載）は著作権法に基づきお断りします。
⇒ 画像への直リンク行為ご遠慮下さい。

2. 低スペック、又は古いデバイスで（）当サイトを閲覧時、アニメーション、及びスクロール動作の一部に滑らかさが欠ける場合があります m(_ _)m。

3. 箇条書きリスト「８種」ご用意させて頂きました。
※HTMLをコピペのうえ、ご使用下さい

はい。ブサイク。

次、ホンモノ。

【アフォー】

これは“本物”でフィクションです

当サイトはリンクフリーにつき「当方への許可」は原則不要です。
画像の無断使用（無断転載）は著作権法に基づきお断りします。

画像への直リンク行為ご遠慮下さい。
低スペック、又は古いデバイスで（）当サイトを閲覧時、アニメーション、及びスクロール動作の一部に滑らかさが欠ける場合があります m(_ _)m。
箇条書きリスト「８種」ご用意させて頂きました。
※HTMLをコピペのうえ、ご使用下さい

整いました。

Webにおける箇条書きリストのルール
「文頭記号の後ろで文章を折り返す」自動整形のこと。

Webにおける箇条書きリストのルール「文頭記号の後ろで文章を折り返す」自動整形のこと。

箇条書きリスト Type-2（アイコンとBOXの連携）

制作しといてナンです..。２種類もあれば十分だと思うが、ブログの練習がてらバリエーションを追加。それと、短文にも対応するショートBOXも用意。

標準サイズ

ご確認下さい

リンゴ食べたい
メロン食べたい
スイカ食べたい

アリよりのナッシ。

ショートサイズ

ご確認下さい

ウナギ食べたい
ブリ食べたい
ホタテ食べたい

どーでもいー

アイコンバリエーション

●

チェック

趣味コピペ
特技コピペ
それダメな人

ハテナ

リンゴ硬くて微妙
スイカ種多くて微妙
イチゴ酸っぱくて微妙

ビックリ

軽油：60円
ハイオク：100円
レギュラー：90円

高校生のとき

ナガレボシ

筋肉モリモリになりますよ～に
頭が良くなりますよ～に
ずっと健康でいられますよ～に

オススメ

ワンカトー！
ニカトー！
サーンカトー！

マル

マル
マルッ
マール

ゾウサンズ若年層構成員

三男です。
三女です。
次男です。
次女です。

ゾウサンズ！みんな仲良し♪

ご紹介が遅れました。上の選択切り替え型は「タブ」と言います。詳細は後ほど。

閉じる

ステップバー

ステップバーは時系列を分かりやすく説明する装飾。いくつかデザインタイプはあるが目的は同じ。

ステップバーを詳しく

ステップバー Type-1（装飾BOX・Gマップの連携）

デザインタイプを少し悩んだが、すぐ解決。当サイト採用のデザイン一択。直感的に時系列を把握しやすくベリーグッド。まさに「Webサイト」向けのデザイン！

【how to】とある美容室の予約からお店までの行きかた

※実在するフィクション

STEP1

美容師の診察予約

LINEで担当美容師と直接コンタクトを図り、要望を伝える。

情報に誤り無きこと

コースを伝える。
例）カット or カラー or パーマ
希望日時を伝える。
例）〇月〇日の〇時～〇時に仕上がる時間帯で
理容師からの返答確認後、予約確定の正式依頼をする。
例）では、〇月〇日の〇時に伺います！
理容師からの正式回答を確認する。

予約はこれでOK。あとは当日に備える /ᐠ. .ᐟ\。

STEP2

自宅から最寄り駅へ

高尾駅（京王線）まで歩きましょ。～所要20分

STEP3

電車で三軒茶屋へ

推奨ルート。

電車経路

高尾駅
新宿行きに乗車 ★5番ホーム
北野駅
新宿行き「特急」に乗り換え ★3/4番ホーム
明大前駅
京王井の頭線、渋谷行きに乗り換え ★4番ホーム
渋谷駅
田園都市線、長津田行きに乗り換え
三軒茶屋
降車駅

高尾から三軒茶屋まで、～所要60分チョイ。

特記事項

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

STEP4

三軒茶屋駅から美容室へGO！

GOOLはすぐソコ。南口から徒歩7分！

しかし、Gマップ操作時の変な青枠をどうにかしたい..。誰か教えて下さい。

GOAL

乙デス。

※文頭のアイコンがデザインを整えるコツ

code

開けゴマ

Type-1（ステップバーとBOXの連携）

＜備考＞
※CSS ⇒ コチラをお手本にカスタムCSSで作るステップフロー4パターン

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

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

<div class="stepbarwrap"><!-- 1段目ステップエリア -->
<div class="steplabel"><!-- ラベルレイアウト -->
<span class="stepcircle"></span><!-- タマ　-->
<span class="line-start"></span><!-- 初段追加タマ線　-->
<p class="stepnumber Trigger58">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 Trigger50"></span><!-- ↑1段目ステップライン-->  
<span class="partition-line"></span><!-- 見切り装飾-->  
</div><!-- ↑１段目ステップEND -->                                     <!-- ↑１段目ステップEND -->

<div class="stepbarwrap"><!-- 2段目ステップエリア -->
<div class="steplabel"><!-- ラベルレイアウト -->
<span class="stepcircle"></span><!-- タマ -->
<p class="stepnumber Trigger58">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 Trigger50"></span><!-- ↑２段目ステップライン-->  
<span class="partition-line"></span><!-- 見切り装飾-->  
</div><!-- ↑２段目ステップEND -->  

<div class="stepbarwrap">
<div class="steplabel">
<span class="stepcircle"></span>
<p class="stepnumber Trigger58">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 background-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-400">高尾駅</span>
<p class="sub-list">新宿行きに乗車</p></li>
<li>
<span class="font-weight-400">北野駅</span>
<p class="sub-list">新宿行き「特急」に乗り換え</p></li>
<li>
<span class="font-weight-400">明大前駅</span>
<p class="sub-list">京王井の頭線、渋谷行きに乗り換え</p></li>
<li>
<span class="font-weight-400">渋谷駅</span>
<p class="sub-list">田園都市線、中央林間行きに乗り換え</p></li>
<li>
<span class="font-weight-400">三軒茶屋</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 Trigger50"></span><!-- ↑３段目ステップライン--> 
<span class="partition-line"></span><!-- 見切り装飾--> 
</div><!-- ↑３段目ステップEND -->                                                   

<div class="stepbarwrap">
<div class="steplabel">
<span class="stepcircle"></span>
<p class="stepnumber Trigger58">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.5px solid #6f6f6f" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

</div>                                                   
<span class="stepline Trigger50"></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>

ヤベーゼ +_+

Copy

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

ステップバー標準搭載のWP「デザインテンプレート」を使えば、ブロックエディタ上で簡単に編集できると思われるが、私が愛用するサイトの雛形は、10年前に開発されたオールドテーマ。無論、そんな機能あるわけナッシ ≡(▔﹏▔)≡。

上は基本の型。やはり順序が発生する説明はステップバーが分かりやすい。だが、コードがヤバイ。ごちゃついてしまう。未熟者が「カスタム」した結果、HTMLの構文が難読難解デアル。

ステップバーカラーサンプル

思いのほか良いポッピー。これも着せ替え方式で、背景、各所カラー変更等、自由自在。いわゆるステップバーの追加オプション♪ ポッピー？

【色見本】ポッピーフレーバー

※マネしないで下さい

STEP1

美容師の診察予約

LINEで担当美容師と直接コンタクトを図り、要望を伝える。

STEP2

自宅から最寄り駅へ

高尾駅（京王線）まで歩きましょ。～所要20分

STEP3

電車で三軒茶屋へ

高尾駅から三軒茶屋まで、～所要60分チョイです。

STEP4

三軒茶屋駅から美容室へGO！

GOOLはすぐソコ。徒歩4分！

STEP5

三軒茶屋駅から美容室へGOGO！

GOOLはすぐソコ。徒歩5分！

STEP6

三軒茶屋駅から美容室へGOGOGO！

GOOLはすぐソコ。徒歩6分！

ポッピーでした！

ステップバー解説レイアウトサンプル

閲覧負荷を軽減するコンテンツの見せ方に「重きを置けば」おくほど

【デザインサンプル】ステップバーと「how to」向け装飾手法

※時系列と関係ありません

レベル1

２カラム短文表示

２カラム短文表示（小型タブレットは１カラム）

１カラム短文表示

インテルCoreiシリーズ終了します。

↑このデザイン、キッカケは「サルワカ」さんのサイト美しいフラットデザインの作り方で見かけ、当サイトも導入。PCでは２カラム、スマホは１カラム自動可変のレスポンシブデザイン！

レベル2

２カラム長文表示

1カラム長文表示

表示崩れ断固反対！当サイトのモット～。「レスポンシブレイアウト」の最適解を意識した結果コレ。インラインスクロール。どんだけ長文ぶち込んでも美しく表示。

スクロールするまで文章が足りないので、もう少し入力しておきマス。もう少し。もう少し。もう少し..。あ～ダメ！全然足りなーい！

これで、これでどうだ！そろそろ良い頃合いなので、この辺で勘弁しておく。

もしかして、ステップリストと命名した方が正しいのでは？

レベル3

２カラム並列スクロール

1カラム並列スクロール

右へスクロール → → →

ヨコスクロールシマシタ。

「how to系」だとこの機能は欲しいところだが、あまり見かけない。この方が合理的だと思うんですがね～。

ダークモード♪かっこえ～。

解説系の記事で活躍するレイアウト

レベル4

２カラム並列スクロール（ポッピー）

1カラム並列スクロール（ポッピー）

右へスクロール → → →

マタ右へスクロールしました。

もう、ネタ切れ。

フィナーレはポッピー。パステル系はWebと相性ヨシ。

レベル5

ステップバー総括

ベリーゴッド

閉じる

アコーディオン

アコーディオンは格納されているコンテンツを、読者の選択により「表示・非表示」を切り替える装飾。当サイトでは積極採用。

アコーディオンを詳しく

大義名分

アコーディオン

【目的】
合理化による、コンテンツ閲覧時間の削減（UX向上）

【狙い】
欲しい情報は取り出せ、不要な情報は非表示にすることで、読者の有限な時間の確保。

【使いどころ】
記事タイトルに対し「読者全員」が対象でない、コンテンツの一部を含む場合「アコーディオン」を使用することが多い。上から下に配置のうえ、読者を誘導するのがセオリー。
※デザイン依存度が高いので、納得できるものを選ぶべし

アコーディオン Type-1（h2見出し以下、格納コンテンツ用）

「Q＆A」１問１答コーナーでよく見かけるが、当サイトでは「H2見出し以下」のコンテンツを丸ごと格納。そもそも読者が見出しを見て、読むか否か判断のうえ、表示できるようにすべき。それが見出しの役割。

アコーディオーン

アコーディオン Type-2（Q＆A用）

はいコレ。よく見るやつ。上から下に並べて使うのがセオリー。当サイトでも使うかな？

SEOに強いワードプレス「デザインテンプレート」を教えて下さい！

SEOに強いテーマはありません。

学習を怠った素人、又は悪意を持つ人がテーマを開発しない限り「有料・無料」テーマ各社、ほぼ一緒。何れの開発者も、自分のところのデザインテーマを使って欲しいと思うのが人情。

SEOに「最適化」となるよう、最初から設計されています。

とは言え、テーマ構成における、PRG作成記法に基づく総量、デザイン性（機能を含む）の差で、間接的には影響。

失敗しないテーマ選びは「テンション爆上がり」するワードプレス「デザインテンプレート」を選ぶだけ。ヤル気があれば、高品質なコンテンツの提供に向け、自ずと努力スルモノ。ある意味SEO「最強」と言えるカモ？

注意喚起

闇が深いこのWeb業界、無知な素人を言葉巧みに誘導し、粗悪なテーマを高額で売りつける、悪質な会社もあるので油断大敵。さらに、コレに群がるアフィカス軍団。※景品表示法違反の行政指導を受けてもなお、一部の文言変更のみで販売を継続する根性。キモイは。

闇が深いこのWeb業界、無知な素人を言葉巧みに誘導し、粗悪なテーマを高額で売りつける、悪質な会社もあるので油断大敵。さらに、コレに群がるアフィカス軍団。

※景品表示法違反の行政指導を受けてもなお、一部の文言変更のみで販売を継続する根性。キモイは。

１問１答シリーズ、癖になりそう！ウケル

この１問１答シリーズ、癖になりそう！ウケル

アコーディオン Type-3（汎用）

汎用タイプは入れ子前提のデザイン。「表示・非表示」の切り替えは、読者さまの任意でございます。

大義名分

コード

code

開けゴマ

BOXシリーズ：Type-777

＜備考＞
※これはフィクション

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

Copy

/* -----CSS----- */
.decorative-box-777 {
    max-width: 600px;
    margin: 2em auto;
    overflow: hidden;
    background-color: #fff;
    border-radius: 12px;
    border: solid 2.5px #6f6f6f;
}

Copy