WordPressで使える装飾手法、省スペースで合理的なレイアウトを意識！ブログのあるべき姿を追求してみた♪

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

はじめに

これは動作確認を兼ねた練習記事。すべて独り言。ブログのネタ帳といったところ。閲覧自由ですが、中毒性があります。デザインテーマは明るくハッピー！

ここでは、ブログで使えそうなWebデザイン装飾/アニメーションネタ/合理的省スペースなレイアウト（機能）をアウトプット。ナニカの気づきはアルと思います

イソガバマワレ

WordPressをExcel感覚で挑んだ結果、玉砕していた頃が懐かしい..。そこから他者との差別化を目的に、オリジナル装飾の制作に勤いそしんだ結果、メルヘンファンタジーなサイトに

OPENCAGE製：WordPressテーマをカスタム

大義名分

Webサイト運営理念深掘り

【目的】
読者の目に留まりやすい「SEO検索流入」上位表示がブログの根幹。高品質でGoogleさんの顔色を気にしない、健全なサイトを目指す！

【狙い】
自分と旅するタイランドで、指名検索されること！これぞまさにブロガーの誉ほまれ。

【戦略】
品質第一。省スペースで合理化。唯一無二。アメージングなユーザー体験でおもてなし。

【ブログのあるべき姿】
サイト訪問者が「ハッピーな未来を想像」できる、自由なコンテンツ制作。

【達成するには】
できるまで練習やぁーー！

Contents

BOX（ボックス）

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

BOXを詳しく

大義名分

BOX

【目的】
読者の目を留め印象づける。

【狙い】
ナニがナンデモ読んでもらう！

【使いどころ】
ここぞ！ってところで要点をまとめ、読者へ猛烈アピール。一般的に「文章」を挿入するが、お好きなコンテンツも挿入可。
※多用は厳禁、ナニガ重要か分からなくなりマス

デザイン：タイトル塗り×背景なし×枠線（シンプル）

どーするか悩んだ結果これ。メルヘンよりの造形でシンプルモダン。配色は補色/トライアド/スプリット/コンプリメンタリ/類似色/チント/シェードを意識しつつ、読みやすさに配慮。さじ加減が悩ましい..。

タイトル

【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30コピペでうまくいくのかな？

This is トイブルー(チント)

code

BOX:タイトル塗り×背景なし×枠線（シンプル）

＜備考＞
推奨アイコン Font Awesome

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

Copy

/* -----CSS----- */
.decorative-box-77 {
    max-width: 600px;
    margin: 2em auto;
    background-color: #fff;
    border-radius: 12px;
    border: solid 3.5px #b1e0fd;
}
.box-title-77 {
    margin: 0;
    padding: 0.3em 1em;
    text-align: center;
    background-color: #b1e0fd;
    border-bottom: solid 3.5px #b1e0fd;
}
.decorative-box-content-77 {
    padding: 0 1em;
}

Copy

【jQuery】ワンクリックでコピーするボタンを作る

バリエーション

省スペースな横スクロールレイアウト+マウスドラッグ＆スクロールスナップも合わせて導入。スライダーでも同じような動きは再現可。とはいえ、こちらがスマート。

Scroll

タイトル

➀コメント挿入欄。サイズ感・余白・色・文字間・行間・レイアウトのチェック。

This is グリーン(類似色)

タイトル

スクロールスナップブラウザ標準機能にしてくれればいいですノニ

This is オレンジ（補色）

タイトル

【jQuery】を使わずにマウスドラッグスクロールを実装する便利すぎ！

This is レッド（スプリットコンプリメンタリー）

スクロールコンテンツ、スルーされるかもしれない問題

ネイティブスクロールのあるべき姿

スクロールバーを明示的に表示のうえ、ユーザーが認識することで見逃し防止。

現状のモバイルは、iPhoneが足を引っ張る

初期状態スクロールバー非表示の鬼畜仕様。さらに日没後、スクロールバーの色が黒から白に変化する謎仕様。つまり、夜間は白い背景に（日中は黒い背景に）スクロールバーは表示されません(見えない)

対する秀逸なAndroidは期待通りの動き。初期状態スクロールバー表示のうえ、背景色問わず視認可。

サイト運営者の悲痛な叫び

提供するコンテンツを読者に見逃してほしくないわけで..。（見る見ないは別）しかし現状、デバイスのOSとブラウザに生殺与奪を握られて詰み。

iPhone救済情報はガセネタだった

SimpleBarJSライブラリーの導入でスクロールバーのReデザイン、常時表示が可能とのこと。期待するべからず。実装すると動きがゴミ「カクン、カクン..」ガタガタしながら動作..。

横スクロールの正解？

足りないスキルを思いやりでカバー。スクロールヒント+補完装飾で分かりやすく。

縦スクロールの正解？

Androidは問題なし。とはいえ、CSSで調整できるようにしてくれると嬉しい..。
対するiPhoneは論外。こんな感じで対策。

デザイン：タイトル塗り×背景塗り（リッチ）

背景ベタ塗りバージョン！BOX下端はアクセントライン♪

タイトル

シンプルながらも配色が功を奏し、堂々たる存在感！自分で言うと「自画自賛」と呼ばれてしまうが大きなお世話

バリエーション

選択切り替え型のレイアウト。めっちゃ省スペース。タブ機能をCSSでカスタムのうえ、実装してみた。アニメーションの追加も可。切り替え時、ふわっとさせたり、バイーン、シュッ、ポヨンとか..。

選択切り替え型のレイアウト。めっちゃ省スペース。タブ機能をCSSでカスタムのうえ、実装してみた。

アニメーションの追加も可。切り替え時、ふわっとさせたり、バイーン、シュッ、ポヨンとか..。

タイトル

➁コメント挿入欄。サイズ感・余白・色・文字間・行間・レイアウトのチェック。

#7bdacd × #effcfb

タイトル

➂コメント挿入欄。サイズ感・余白・色・文字間・行間・レイアウトのチェック。

#feb285 × #fffaf6

タイトル

➃コメント挿入欄。サイズ感・余白・色・文字間・行間・レイアウトのチェック。

#ff94a2 × #fff7f8

デザイン：タイトル塗り×背景塗り×アイコンアニメ（スーパーリッチ）

BOXのデザインはHTMLの構文に１行書き足すことで、カラーチェンジ、アニメーション、アイコン変更に加え、背景画像も追加できる着せ替え方式。つまり普通。

タイトル

欲しいもの全部付きのフル装備！唯一無二とはまさにコレ。きっと読者の記憶に残るハズ

バリエーション

個性豊か！スギ？..。練習ですから。

Scroll

タイトル

上品なアニメーションを意識。フロート上死点でクルリと回転。このデザイン、スマホの表示エリアを考慮する、レスポンシブ対応に一苦労

エントリー1

タイトル

ホバーすると表裏が反転するカードをCSSで実装する方法アイコン２種表裏一体。アニメ化は楽しいが、レンダリングは忙しい

エントリー2

タイトル

上死点シェイキングバージョン。読者の視線誘導を強く意識したデザイン。ナニカを訴えかける「注意喚起文」と相性ヨシ

エントリー3

タイトル

ボイ～ン♪ボイ～ン♪ボイ～ン♪ボイ～ン♪ボイ～ン♪ボイ～ン♪ボイ～ン♪ボイ～ン♪ボイ～ン♪ボイ～ン♪ブシュー。へ～んなの

エントリー4

タイトル

で、でたーーーーーーぁ！無限スクロール。コーポレートサイトでよく見るやつ。装飾BOXに仕込むのは「class」の無駄遣いかも

エントリー5

タイトル

ウーウェイブ！ウェーーーイブ！思いのほかよい仕上がりに取り乱しました。CSSで波のようなアニメーションを実装

エントリー6

タイトル

たまに見かけるコレ。Mac（PC）のメニューバー。自サイト動作確認のため、シブシブ購入して気づきました。世間の大半は知らないと思う

エントリー7

タイトル

画面サイズで、BOXの「高さ」がバラバラになるときがありマス（行数差異）ちなみに、整然と横一列に合わせることも可。シナイケド..。

エントリー8

クリエイティブな黒板風

使いどころは限られるが、インパクト大。最初で最後かもしれない。CSSコピペするだけ！ボックスデザイン（囲み枠）25選【色別サンプル62種】

エントリー9

デザイン：吹き出し風（解説レイアウト）

BOXシリーズ最終章。デバイスの画面幅に合わせ、レイアウトが自動シフト（1カラム/2カラム）
これぞレスポンシブデザインの真骨頂♪

デザイン性担保を目的として、文章が一定量超えると「インラインスクロール」する仕様デス。

デハ披露スル。

文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章入力。

披露シマシタ。

短文入力はこんな処理(上端合わせ)

短文入力はこんな処理（PC2カラムで、上端合わせ）

短文入力はこんな処理(中央合わせ)
※キャプション部分も含むので、少しだけズレて見えるかも。

短文入力はこんな処理（PC2カラムで、キャプション含めて中央合わせ）

短文入力はこんな処理(キャプション含めず中央合わせ) ※気になったので調整。

短文入力はこんな処理（PC2カラムで、キャプション含めず中央合わせ）

短文入力はこんな処理(下端合わせ)

短文入力はこんな処理（PC2カラムで、下端合わせ）

閉じる

箇条書きリスト

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

箇条書きリストを詳しく

大義名分

箇条書きリスト

【目的】
読者の理解を助ける。

【狙い】
整理したい項目（結論、疑問、注意喚起、問題提起等）の要点を読みやすくまとめる。

【使いどころ】
解説系説明文、文頭文末付近に「箇条書きリスト」を挿入することが多い。
※説明内容と整合のとれるアイコンをチョイス

デザイン：ナンバリングアイコン＋サブリスト×BOX

項目に順序が発生する場合、ナンバリングを使用。ビフォーはマークアップに「ol・li」タグを使わない“なんちゃって”リスト

Scroll

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

1. 当サイトはリンクフリーにつき「当方への許可」は原則不要です。

⇒ 画像への直リンク行為ご遠慮下さい。

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

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

ビフォー

これは“ほんもの”でフィクション

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

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

アフォー

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

些細ささいなことですが、大事。
えっ？分からない？

デザイン：アイコン+BOX

制作しといてナンです..。2種類もあれば十分かと思うが、バリエーションを拡充。装飾BOXと組み合わせると使いやすい。

バリエーション7種

チェック

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

ん？

ハテナ

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

ほんとに微妙

ビックリ

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

高校生のとき

ナガレボシ

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

カナウカナ..。

オススメ

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

全部集めて豪華景品をゲッツ

マル

マル
マルッ
マール

もしかして、バカなの？

ゾウサンズ若年層構成員

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

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

ロングBOXとの組み合わせ

ご確認下さい

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

カブトムシさん？

ショートBOXとの組み合わせ

ご確認下さい

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

これは私だ

使うかな？短文対応のショートBOXも用意しました。

閉じる

ステップバー

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

ステップバーを詳しく

大義名分

ステップバー

【目的】
読者の理解を助ける。

【狙い】
「時系列」に解説したい要点を読みやすくまとめる。

【使いどころ】
物事を「順序立て」解説したいとき「ステップバー」を挿入することが多い。

デザイン：あらゆるニーズに対応できるニュートラルな解説レイアウト（アニメーション付き）

デザインタイプはいくつか分かれるが、画面左に時系列を示すレイアウトが、直感的に把握しやすい。Webっぽくない？

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

※実在したフィクション

STEP1

美容師の予約

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

情報に誤り無きこと

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

予約はこれでOK。あとは当日に備えるヾ(•ω•`)o

STEP2

自宅から最寄り駅へ

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

STEP3

Scroll

電車で三軒茶屋へ

推奨ルート。

電車経路

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

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

特記事項

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

※時間とお財布に余裕を持ちましょう。

STEP4

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

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

もはやGマップなしでお出かけできません。便利の極み。

GOAL

乙デス

唯一の弱点HTMLの構文が難読難解..。
とはいえ、アメージングなユーザー体験の為にヤルしかない

code

汎用性の高い解説レイアウト

＜備考＞
コピペで簡単！CSSで作るステップフロー4パターン【縦あり】

<! ----- 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="tr cautionary-note fw">※これはフィクション</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="fw">高尾駅</span>
<p class="sub-list">新宿行きに乗車</p></li>
<li>
<span class="fw">北野駅</span>
<p class="sub-list">新宿行き「特急」に乗り換え</p></li>
<li>
<span class="fw">明大前駅</span>
<p class="sub-list">京王井の頭線、渋谷行きに乗り換え</p></li>
<li>
<span class="fw">渋谷駅</span>
<p class="sub-list">田園都市線、中央林間行きに乗り換え</p></li>
<li>
<span class="fw">三軒茶屋</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>

ヤベーゼ +_+

Copy

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

リンク先参照

デザイン：背景にポップな配色を追加した解説レイアウト（アニメーション付き）

カラフル過ぎて、ブラウザバックするかもしれない..。

ハッピーフレーバー

※マネしないで下さい

STEP1

美容師の予約

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

STEP2

自宅から最寄り駅へ

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

下段にも文章を挿入してあげると、デザインが整います。

STEP3

電車で三軒茶屋へ

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

STEP4

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

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

ステップのコンテンツボリュームが多い場合、横にスクロールさせることもデキマス（省スペース化による、ユーザー体験向上）

STEP5

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

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

GOAL

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

GOOLはすぐソコかもしれない。徒歩4分！

スベッたかもしれない。

デザイン：ナニがナンでも整然と整える解説レイアウト（アニメーション付き）

画像の説明でこと足りる場合に最適かと！

「how to」向け装飾手法

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

レベル1

2カラム短文（スマホは1カラム）

ナイスレイアウト！

この画像、54KBでめちゃ軽量。適切な「拡張子/サイズ/圧縮率」を選択すれば、オリジナル品質と遜色ナッシ。

レベル2

2カラム長文（スマホは1カラム）

表示崩れ断固反対

そういえば、アップルのスマフォ。初期状態で「スクロールバー」を表示しない..。

バカなんですかね？OS修正してください。

とはいえ、読者に関係のないこと。あの手この手で対策しなければ..。

この工数はいつかアップルに請求しよう！ガンバレアッポー。

と、長文はこんな感じ。

インテルCPUの見えない劣化問題は大丈夫なのだろうか..。私の鬼スぺPCもいずれ..。
ワルテル。

レベル3

Scroll

2カラム（スマホは1カラム）横スクロール・サブタイトル

➀サブタイトルとか補足

右へスクロール → → →

➁サブタイトルとか補足

右へスクロールシマシタ。

「how to系」でこの機能は欲しいところだが見かけない。合理的レイアウトですのに

➂サブタイトルとか補足

ナニもナイナイ。

配色変更もイージー。

レベル4

Scroll

2カラム（スマホは1カラム）横スクロール・サブタイトル・キャプション

➀サブタイトルとか補足

右へスクロール → → →

➁サブタイトルとか補足

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

➂サブタイトルとか補足

アリガト。

CPUはこれくらいでカンベンしておく。

GOAL

総括

省スペース化も達成しつつ、合理的レイアウト!

閉じる

アコーディオン（AC）

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

アコーディオンを詳しく

大義名分

アコーディオン

【目的】
合理化。

【狙い】
サイトの省スペース。

【使いどころ】
読者全員に「必要とは限らない」コンテンツは格納しておきたい。
※初期状態「開く・閉じる」を精査のうえ設定しないと、煩雑はんざつになるので注意。

デザイン：メインコンテンツのAC（input/labe）

通称AC。当サイトはh2見出し以下のコンテンツをマルッと格納。見たいコンテンツだけ見れる仕組みのほうが、読者さんに親切

理想は思わず操作したくなるデザインと機能。ここでいう機能はアニメーションのこと。視覚的に操作したことが、直感で伝わるようにしておきたい。

あとは戦略に基づき、ACの初期状態（開閉）を設定すればOK！

宇宙船地球号/三男くんテラへ

AC サイコウ

details/summaryタグを積極的に使いたい！※ブラウザの検索機能（Ctrl + F）で、格納中のACでも瞬時に展開、該当箇所へジャンプのうえ、ハイライト表示。スゴ過ぎてビビってしまった..。

つまり、読者に親切設計。SEOの観点でも有利（ほんの少し）と言うこと。

とはいえ、普及率は低くモッタイナイ。アドバンテージともいう！

ところで、ナゼこのACだけinput/labeタグなのか..。

それは「メインコンテンツAC」の模倣品だから。ここは入れ子で使用したせいで、クラス同士が干渉。私では意図した動作にできず断念。無論、本物はdetails/summaryで作成。

実はこんな不幸も..。パフォーマンスバグ？

パララックス風アニメ設置（銀河系アニメ）

パフォーマンスバグスクショビフォアフ設置

調べたところ、inputタグにchecked属性（初期表示開く）を指定したときだけ、ナゼカ発生。

放置もできず、details/summaryタグへリニューアル更新することで対策（open属性へ）

分かる人いるかな..。

閉じる

【コピペだけ！】アコーディオンボタンをCSSとHTMLだけで実装する方法！

デザイン：質疑応答のAC（details/summary/js）

ACといったらコレ。アニメーションはなるたけ動きが重ならないようにしているが、当記事のリクエスト量はエゲツナイ..。カクツキやすい悪条件。

とはいえ、これで品質を担保できるかのチェックも兼ねる！

ブログは毎日投稿が当たり前って本当ですか？

違いMAX。

表示スピードは検索順位に影響するって本当ですか？

ランキング要素における判断材料の1つ。せいぜい同点決勝ゴールで影響するレベルのハズ。つまり、たいしたことナッシ。※異常に遅いのはさすがにダメ！

ブログがオワコンって本当ですか？

はぁ？

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

SEOに強いと言えるテーマはありません(判断基準ナシ)比較的新しい時期に開発されたテーマならば、SEOを意識したコーディングがされているので、どれを選んでも大正解！

ほぼほぼ最適化され、SEOに強いと言い換えることも..。とはいえ、どんぐりの背比べ（よい意味！） SEOに強いと謳うたう製品を見かけたら※景品表示法違反につき、消費者庁に通報して駆逐してもらいましょう！ウェーーーイ！

detailsとsummaryタグで作るアコーディオンUI – アニメーションのより良い実装方法

デザイン：サブコンテンツのAC（details/summary）

汎用。状況により使い分け。アニメーションはカラクリ仕掛けっぽい動きと、レスポンスを意識

多目的用フルワイド！

〇〇の歴史について

格納コンテンツはナンデもOK。画像/動画/文章とか。点線は格納コンテンツの終わりを示唆。デザイン的にもバランスヨッシー。色やアイコン、タイトル変更もベリーイージー！

ボリューム多めに対応！

大義名分

タイトルとか

【狙い】
最初からACを開いておけば、リッチテイストの装飾BOXとしても使えます。

ここ一発に対応！

テヘペロ

プロフィールページから引用

海パンで喜んでる画像:1年目ガリ痩せ時代

プロフィール画像（首長族）:トレーニング2年目後期

このとき4年が経過。完全体だったが、写真はナッシ

ふわっとさせたいに対応！

準備中

code（HTML/CSS/JS）コピペに対応！

code

タイトルとか

＜備考＞
とくにございません。


/* -----HTML----- */
/* -----CSS----- */
/* -----JS----- */

Copy

HTML・CSSのみでつくるアコーディオンメニュー8選

閉じる

表（テーブル）

表は複数のDATAを項目別に並べ、分かりやすく「比較」する装飾。基本は縦横の罫線で構成されるが、見やすく工夫したいところ。

表（テーブル）を詳しく

大義名分

表（テーブル）

【目的】
読者の理解を助ける。

【狙い】
複数DATA比較時における、考察負荷の削減！

【使いどころ】
DATA群を「比較検討」してもらいたいときに使うことが多い。

デザイン：表全体/横スクロール/モダンテイスト

Excelで表作成は簡単。Webは複雑で難解..。ホントに大変だぁぁ

Scroll

Table title

Sub title

	X-axis1	X-axis2	X-axis3	X-axis4
Y-axis1	item	item	item	item
Y-axis2	item	item	item	item
Y-axis3	item	item	item	item

命名。ハッピー4。RWD Table（コードペン） ※コードペンについて注意喚起オッ、いいネタあるじゃん！意気揚々コピペすると悲しい現実に直面します。

デザイン：1列目固定/横スクロール/モダンテイスト

この表、iPhoneだとアベコベに線幅が表示されます..。無理やりCSSを書き足し暫定処置。
こういうのホント多いんだよな～。

ガンバレ！アップル！

Scroll

自分と旅するタイランド・ブラウザサポート情報

Webブラウザシェア「No1」は「Chrome」

モダンブラウザ × OS	Chrome	Edge	Safari	Firefox
Windows
Android
Mac
iPhone

凡例

推奨ブラウザについて

スムーズで正常動作。

及第点きゅうだいてん。ところどころ動きが怪しい。たぶん普通は気にしない。

特定操作でチラツキ/アニメーションのカクツキ。非推奨！

アニメーション動作不全。スクロール時の激しいチラツキ。表示崩れ。
※いずれも「OS」に起因。

デザイン：機能性を担保しつつ、見やすい表の最適解かもしれない（コーポレート風）

うっ、ひょーーっ。3日悩んだ結果こうなった。

PCにせよ、スマホにせよ、限られた画面サイズの中でいかに見やすく表示させるか腕の見せどころ！もはや腕というより思い入れの問題かもしれない..。

とはいえ、ここをおろそかにする人は、コンテンツもおろそかにナルダロウ

驚きを詰め込みました。え、表示崩れ？

Scroll

やりたいこと最短距離

ゾウサンズ三男
mini

次男と大の仲良し♪ちょっと不思議な男の子で、恥ずかしがりや。いつもどこかに隠れてることが多い。

さらに詳しく

出身地

タイ北部ナーン県

性別

オス

年齢

6歳園児
年長

好物

バナナ黄色いやつ。甘くてウマイ！
踏むと滑りMAX

画質とか

4K60fps HDR
120fpsスローモーション

驚異的なパワーを

ゾウサンズ次男
SE

陽気な性格♪とっても弟思いの男の子で、元気いっぱい。お遊戯を三男としていることが多い。

さらに詳しく

出身地

タイ北部パヤオ県

性別

オス

年齢

9歳児童
小学3年生

好物

リンゴ赤いやつ。甘酸っぱい！
人に向かって投げてはイケナイ

環境とか

3Kきつい、きもい
くちゃ～い

その手に大きな可能性を

ゾウサンズ長男
Pro

メルヘンハッピーな性格♪おっちょこちょいだけど、がんばり屋さん。チョウチョが、いつも周りを飛んでいる。

さらに詳しく

出身地

タイ北部ランパーン県

性別

オス

年齢

14歳青年
中学2年生

好物

パパイヤ黄色いやつ
ねっとり甘いがクセがある！
マンゴーには勝てない

間取りとか

2K部屋2つ
キッチン1つ

未来対応のスピード

ゾウサンズ三女
Rabbit

IQがとても高い♪好奇心旺盛な女の子で、目立ちたがりや。ペットの「ブサペガサス」を使役する。

さらに詳しく

出身地

タイ北部チェンライ県
※正しくは、チェンラーイ

性別

メス

年齢

7歳児童
小学1年生

好物

マンゴスチン実は宝石
加藤さんの大好物！

間取りとか

1LDK部屋1つ
キッチン1つ、リビング1つ

うっとりする美しさ

ゾウサンズ次女
White Loli

ちょっとおませな女の子♪クールな性格で、お出かけが苦手。下僕の「ポンちゃん」を使役する。

さらに詳しく

出身地

タイ北部プレー県

性別

メス

年齢

12歳少女
小学6年生

好物

モモピンクのやつ
みずみずしく甘い！
最＆高

間取りとか

2LDK部屋２つ
キッチン1つ、リビング１つ

すみずみまであなたらしく

ゾウサンズ長女
Pro

面倒見のよい優しい性格♪しっかり者で、とっても賢い優等生。実は妹達の下僕とペットがうらやましい。

さらに詳しく

出身地

タイ北部ランプーン県

性別

メス

年齢

15歳大人
中学3年生

好物

メロン緑のやつ
濃厚な甘さ！
冷やすとウマイ

間取りとか

3LDK部屋3つ
キッチン1つ、リビング１つ

Apple「みんなうれしいUSB-C」2023年9月13日発表。はぁ？

閉じる

タブ

タブは格納される複数のコンテンツに、見出しメニューを付け、選択により「表示・非表示」を切り替える装飾。言語化すると、前述のACと似ているが、装飾デザインは大きく異なる。

タブを詳しく

大義名分

タブ

【目的】
合理化。

【狙い】
サイトの省スペース。

【使いどころ】
複数のコンテンツを「比較」してもらいたいときに使うことが多い。

デザイン：使いやすいタブ/シンプルモダン

序盤からチョイチョイ登場。ナニカの比較において、最強クラスの装飾手法♪

アニメーションは、イージングカーブがポイント。

いくつ気づきました？アニメーションは全部で6箇所！メンタル弱人間、最後まで見ないほうがよいかも..。

電動マトリョーシカって知ってます？そろそろ怒られそうだな。

ウ～フォ～。ウ～エフ、オォーーッ！もしかして、中の人バカなんですかね？

故障してないよね？頼むぞ!

画像下に薄っすら怪しい線がチラ見え..。ブラウザのレンダリングが苦しい模様。この手の不具合、will-changeプロパティで解消するパターンが多かったが、今回は敗北。 ※タブ外設置は問題ナッシ。ナント！AC（details/summary）へ移行後、直りました..。今夜は祝杯

デザイン：個性強めのタブ/スライダー追従/シンプルモダン

タブメニュー切り替え時、スライダーが追従。え？だからナンだって？

タイのコンビニでも買える、メジャーなビール5選

SINGHA BEER(シンハービール)

総合評価：8.6

キャプション

キレ（後味が残らない）: 8.0
のどごし: 8.0
ポップ感（苦味・香り・甘味）: 10.0
値段（安い）: 7.0
入手性: 10.0

グラフがあるだけでそれっぽく！こういう「意味のある」演出を大切にしたい。
HTML・CSSで作るレーダーチャートのテンプレート4選

試し飲む？

LEO BEER(レオビール)

総合評価：9

キャプション

キレ（後味が残らない）: 9.0
のどごし: 10.0
ポップ感（苦味・香り・甘味）: 7.0
値段（安い）: 9.0
入手性: 10.0

ウッ、ヒョーーー。私が1番よく飲むビール。薄い味わいだが、水のようにサラリ飲みやすい。コンビニ「5分飲み」がオススメ。

コンチワーーース

CHANG BEER(チャーンビール)

総合評価：9.2

キャプション

キレ（後味が残らない）: 10
のどごし: 8.0
ポップ感（苦味・香り・甘味）: 8.0
値段（安い）: 10
入手性: 10.0

チャーーーン。フルーティーで酸っぱい。初めて飲んだとき「マズッ」と感じたが、慣れるとウマイ！ワインが守備範囲の人、きっと気に入るかと。値段も魅力♪

ヒーーハーー

TIGER BEER(タイガービール)

総合評価：不明（失念）

キャプション

キレ（後味が残らない）: 5.0
のどごし: 5.0
ポップ感（苦味・香り・甘味）: 5.0
値段（安い）: 5.0
入手性: 5.0

TORATORATORA♪分かる人いるかな..。LEOは豹ひょうだが、こちらはTORA。実は購入したことアリマセン。次回渡航でチェック！

ウェーーーイ

HEINEKEN BEER(ハイネケンビール)

総合評価：不明（失念）

キャプション

キレ（後味が残らない）: 5.0
のどごし: 5.0
ポップ感（苦味・香り・甘味）: 5.0
値段（安い）: 5.0
入手性: 10.0

ナニカを期待したあなた、すみません。こちらは飲んだことありますが、記憶にナッシ。値段高いな～..。くらいの印象。

ここはマイクロコピー。ダメ押しのヒトコトが正しい使いかた

現状、この程度のスペースで閲覧できますが、タブ無しでは相当量下へスクロールさせられていたことだろう..。省スペースは正義！

デザイン：メリット×デメリット比較表（バージョンTab）

通称：デリメリ（まぎらわしい？）ここぞ！の訴求ポイントで活用したい。

タイ文字の学習

タイ語学習効率の飛躍的向上
タイ人から尊敬のマナザシ（ビビってる）
旅行が3倍楽しい
めっちゃ簡単（ひらがな、カタカナ、漢字：音読み、訓読マスターの日本人にとって）
文字をマスターすると、自動的にネイティブな発音も習得

参考学習時間：読み書き2週間（5時間/日）+発音ルール2週間（5時間/日）＝約1か月

情報に乏しい（メジャーな英語に比べ）
なんだか難しそう（最初の一歩を踏み出す気がしない）
体系的に作成された「良き」参考書に出会えないと、挫折する可能性が高い

参考書「〇〇〇」があれば、だれでも楽勝！たぶん（´◉◞⊖◟◉｀）

しかしタブ。個人ブログ界隈かいわいで見かけない..。

閉じる

モーダルウィンドウ（ポップアップ）

モーダルウィンドウは背景を一時的に暗くして、コンテンツを「目立つ」ように表示する装飾。モーダル展開時「閉じる」以外の操作を無効にしておくのがセオリー。

モーダルウィンドウを詳しく

大義名分

モーダルウィンドウ

【目的】
合理化。

【狙い】
サイトの省スペース。

【使いどころ】
コンテンツを「集中」して見て欲しい場合に、使用することが多い。
※容易に閉じれる仕組みにしておかないと、読者にとっては大迷惑!

デザイン：使いやすいテキストリンク風モーダル

通称モーダル。闇が深くWebエンジニア泣かせ。そこはさておき、ブログで使いそうなものを準備！

画像：標準サイズ

画像：細長（アスペクト比）

ミニサイズ（PC限定）

アニメーションで登場

ギャラリー

ギャラリー解説レイアウト

テキストオンリー

素のデザインはこんな感じ。

閉じる

スライダー

スライダーは複数の画像等を切り替えて表示する装飾。ここは腕のみせどころ、アメージングな「ユーザー体験」を意識して、操作感と見やすさに配慮したい。

スライダーを詳しく

大義名分

スライダー

【目的】
合理化。

【狙い】
サイトの省スペース。

【使いどころ】
複数の画像等を紹介したいときに使用することが多い。

デザイン：進捗が分かりやいスライド

スライダーはSwiperを導入。概ね良好に動作。ポイントは操作感+進捗見える化+演出の3点。
当たり前ともいう！

スイカでしょ？

マグカップかな

3Dメガネと思われる

デザイン：進捗が分かりやすいフェードイン

ちなみに自動スライドもできます。しないけど..。記事読んでるときイラッとしません？
※TOPページは除く

昼間のビーチ

夕方のビーチ

昼間のビーチ

ヤシの木いっぱいと、コテージ群

イッヌ

貝のお刺身

エビのお刺身

シーフード夢の共演/ピンボケを添えて

島タクシー

モスキート街道

ジャングル道

イッヌ、ストレッチング

ハスの花がいっぱい

ゾウさんのお散歩

コンビニの番犬

ゾウ使いかな？

写真は10～13年前。スマホにoisの補正も無ければ、狙った被写界深度で固定もムリ。iso感度の監視もできないうえ、そもそも私がカメラに無知..。いずれも、ピンアマ、ピンズレ、トンチンカン構図を含む..。

本番は民生機最強カメラ＆撮影スキルでリベンジを果たす！但し、機材はヘビー級..。
取材のフットワークは重い。そして暑い~( ´·︵·` )~

写真は10～13年前。スマホにoisの補正も無ければ、狙った被写界深度で固定もムリ。iso感度の監視もできないうえ、そもそも私がカメラに無知..。

いずれも、ピンアマ、ピンズレ、トンチンカン構図を含む..。本番は民生機最強カメラ＆撮影スキルでリベンジを果たす！

但し、機材はヘビー級..。取材のフットワークは重い~( ´·︵·` )~

デザイン：進捗が超分かりやすいフェードインのサムネイル付き

オウンドメディアでよく見るやつ。ショボイの多数。あっ、失礼！..。

ガイコツかな

棺ひつぎ

会議室

α7S III × GMレンズ

南極かな

アザラシ

シロクマ

サムネは画像が多いとき、ユーザーさんに親切。上のスライダーは不親切な見本よぉ

デザイン：進捗が超分かりやすいスライドのサムネイル付き

ところで「スライダー」と混同される「カルーセル」区別はイージー。ちなみに、この辺はスライダー。当サイトのフッターにあるのが、カルーセル。私にはメリーゴーランドにしか見えへん..。

グーグルさん

グーグル/Gメールさん

グーグル/翻訳さん

グーグル/写真さん

グーグル/ドライブさん

グーグル/ニュースさん

グーグル/マップさん

グーグル/プレイさん

グーグル/広告さん

デザイン：ギャラリー解説レイアウト（スライド）

最後はコレ、解説系！本番記事は「品質第一」必然的にボリュームも増える..。省スペースな装飾手法で対策。妥協などありえナイ ε-(◔д◔;A)

旧ツイッターの鳥さんかな？

現名称「X」旧名称「twitter」デザイン含め、どう考えても旧時代の方がよかった気が..。
それとも、私の感性がおかしいのか？なんだか愛着がわきません。

クリエイティブなナニカのアプリ

めっちゃクリエイティブなんですけど!

これもナニかのアプリ風かと

お化けだね。これもクリエイティブ！

ナニカを訴えかけてきそうなオウム

初めまして。ボクオウム。ジュミョウナガイト 60 ネン。私の余命より長くぴえん。

ペンギン

命名、ペンペン！

タクシー配車アプリ風

おや？これは本番記事で使えるイラストでは？

【タイのタクシーの乗り方】メーター制/定額制（予約）/普通車～ジャンボ/VIP/ぼったくりタクシーの見分け方/おすすめは、配車アプリGrab♪

脱出中のポット

よく見ると、地味にクオリティーが高いイラスト。感心ですわ～。
えっ？こんなに画像をブチ込んでダイジョブなのかって？ A.画像：1ファイル/10KB前後。
ほぼ無いに等しく、心配ご無用ですわ～！

エモン

サイトマスコット「ゾウサンズ」の三男。ナニカ、間違った捉え方をしている模様。

閉じる

ブログカード

ブログカードは自サイト関連記事のタイトルと、アイキャッチ画像を紹介する装飾。TOPページの記事群とデザイン意匠を合わせておくのが吉。

ブログカードを詳しく

大義名分

ブログカード

【目的】
読者の潜在ニーズに応える。

【狙い】
外部サイトへの離脱防止！

【使いどころ】
潜在ニーズが出そうなタイミングでカードを仕込みます。
※顕在ニーズの関連記事を網羅しておかないと、出番はアリマセン。その為に、1つのことをとことん極めてうまくやるのが一番。

デザイン：メルヘンハッピー（ホバー効果：上昇/三男くん）

内部リンクはブログカード1択。第3者へのリンクは●＞＞テクストリンクを使いましょう！

Web

2025.08.29

WordPressで使える装飾手法、省スペースで合理的レイアウトを意識！ブログのあるべき姿を追求してみた♪

観光

2025.08.29

【チェンライ観光スポット23選】タイ最北県のすすめ！バンコクから日帰りも？行き方まで詳しく紹介♪

Web

2025.08.29

WordPressで使えるデザイン手法、省スペースで合理的レイアウトを意識！ブログのあるべき姿を追求してみた♪

Web

2025.08.29

「失敗しない選び方」WPテーマ注目度ランキングTOP10・徹底比較！

Web

2025.08.29

こんなカードを仕込むのもよいかも！これはやり過ぎだが、1匹ならいい感じでは？（マウスオン）

こんなカードを仕込むのもよいかも！これはやり過ぎだが、1匹ならいい感じでは？（ココタップ）

今日も可愛い

閉じる

吹き出し

準備中　| •ω•`) Sorry〜

ボタン

準備中　| •ω•`) Sorry〜

引用

準備中　| •ω•`) Sorry〜

見出し

準備中　| •ω•`) Sorry〜

テキスト装飾

準備中　| •ω•`) Sorry〜

埋め込み

準備中　| •ω•`) Sorry〜

クレジットカード決済（ブログでEC）

準備中　| •ω•`) Sorry〜

さいごに

準備中　| •ω•`) Sorry〜