ワードプレス装飾見本（備忘録）| Self-Traveling-Thailand（予備の非公開テストサイト）

映画モノノケ姫のコダマの真似をするサイトマスコットのゾウさんの三男のアニメーション

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

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

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

大義名分

Webサイト運営理念

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

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

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

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

イソガバマワレ

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

Contents

BOX（ボックス）

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

BOXを詳しく

大義名分

BOX

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

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

【使いどころ】
ここぞ！ってところで要点をまとめ、読者へ猛烈アピール。一般的に「文章」を挿入することが多いが、お好きなコンテンツの挿入可。
※多用は厳禁、読者の集中力が削そがれマス

Type-1（シンプル）

どーするか悩んだ結果これ。メルヘンよりの造形。いわゆるシンプルモダン♪たぶん。

タイトル

BOX ⇒ こちらをお手本にカスタム【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30

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

※コピーボタン ⇒ コチラをお手本にカスタム【jQuery】ワンクリックでコピーするボタンを作る

デザインバリエーション

Scroll

タイトル

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

This is ブルー

タイトル

スクロールスナップ知ってます？「モバイル」表示で導入！使うがよろしい

This is パープル

タイトル

こちらを導入！【jQuery】を使わずにマウスドラッグスクロールを実装する

This is レッド

英語で言えました

Type-2（リッチ）

ファンタジー感が強くなりました。それはさておき、タイトルアイコンは、Font Awesomeが初心者でも扱いやすく無難。ブログの練習を始めた頃、CDNの読み込みに悩んでいた自分が懐かしい..。

タイトル

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

デザインバリエーション

Scroll

タイトル

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

#9fcaff × #e5f0ff

タイトル

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

#ada6ec × #ffe6f3

タイトル

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

#f1b6b6 × #fff5f5

This is カラーコード

Type-3（スーパーリッチ）

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

タイトル

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

デザインバリエーション

Scroll

タイトル

上品なアニメーションを意識。フロート上死点でクルリと回転♪ このデザインは、スマホ閲覧時の違和感をとるのに一苦労

エントリー1

タイトル

アイコン２種表裏一体 ⇒ こちらをお手本にカスタムホバーすると表裏が反転するカードをCSSで実装する方法アニメ化は楽しい

エントリー2

タイトル

上死点シェイキングバージョン♪ 想像できる動きであれば、アニメーション可能。この動きは「注意喚起文」と相性よさげ

エントリー3

タイトル

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

エントリー4

マネッコ三女

さらりと使い始めたSVG背景。Illustratorで自作もできるが、素材配布サイトを活用のうえ効率UP

エントリー5

タイトル

で、でたーーーーーーぁ！無限スクロール。コーポレートサイトでよく見るやつ。装飾BOXに使用するのは当サイトだけかな

エントリー6

タイトル

ウーウェイブ！ウェーーイブ！思いのほか良い仕上がり♪ こちらをお手本にカスタムCSSで波のようなアニメーションを実装

エントリー7

タイトル

たまに見かけるコレ。ナニをパクったのか気にはなったがスルー。しかし、自サイト動作確認のため、Mac（PC）購入に伴い判明。ブラウザのメニューバーでした。

エントリー8

タイトル

低スペック！高価格！ハイブランド！そしていつも表示崩れ！CSSを理解しない！バグも放置！その名は！..。対策にどんだけ悩んだことか..。それも今では懐かしい

エントリー9

メンヘラボード

個性強め。使いどころは限られるが、アリです。こちらをお手本にカスタムCSSコピペするだけ！ボックスデザイン（囲み枠）25選【色別サンプル62種】

エントリー10

　　コピペプロ

Type-4（吹き出し）

BOXシリーズ最終章。横スクロールは一旦お休み。タブ（選択切り替え）でフィナーレ。ちょっと一工夫でいろんな見せ方が。Webは楽しい

メルヘングレーメルヘンブラック

コレ、なかなかの優れもの。
× ⇒ レイアウト自動シフト！

このネタは、サルワカさんの記事から着想を得てカスタムした結果、こんなテイスト♪

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

つまり普通。

短文入力はこんな処理。
※吹き出しは、任意の位置へ変更可

閉じる

箇条書きリスト

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

箇条書きリストを詳しく

大義名分

箇条書きリスト

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

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

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

Type-1（ナンバリングとBOXの連携）

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

Scroll

【ビフォー】

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

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

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

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

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

はい、ブサイク

【アフォー】

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

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

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

整いました

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

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

Type-2（アイコンとBOXの連携）

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

ロング

ご確認下さい

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

カブトムシ？

ショート

ご確認下さい

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

ご馳走して下さい

デザインバリエーション

●

チェック

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

ん？だれ？

ハテナ

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

スムージーにするとウマイ

ビックリ

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

高校生のとき

ナガレボシ

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

カ、カナウカナ..。

オススメ

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

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

マル

マル
マルッ
マール

もしかして、バカなの？

ゾウサンズ若年層構成員

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

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

閉じる

ステップバー

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

ステップバーを詳しく

大義名分

ステップバー

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

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

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

基本レイアウト

デザインタイプを悩んだが、すぐ解決。当サイト採用のデザイン一択。直感的に時系列を把握しやすくベリーグッド。まさに「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

乙デス。

文頭にアイコンを添えてあげると整います。たぶん。

code

ヒラケ・ゴマ

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

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

<! ----- HTML ----- >
<div style="height:5px" aria-hidden="true" class="wp-block-spacer"></div>
<p class="lead-lines-on-both-sides Trigger52 ">【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 Trigger19">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 Trigger52"></span><!-- ↑1段目ステップライン-->  
<span class="partition-line"></span><!-- 見切り装飾-->  
</div><!-- ↑１段目ステップEND -->                                     <!-- ↑１段目ステップEND -->

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

<div class="stepbarwrap">
<div class="steplabel">
<span class="stepcircle"></span>
<p class="stepnumber Trigger19">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">高尾駅</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 Trigger52"></span><!-- ↑３段目ステップライン--> 
<span class="partition-line"></span><!-- 見切り装飾--> 
</div><!-- ↑３段目ステップEND -->                                                   

<div class="stepbarwrap">
<div class="steplabel">
<span class="stepcircle"></span>
<p class="stepnumber Trigger19">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 Trigger52"></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