![モノノケ姫のコダマの真似をするサイトマスコットのゾウさんの三男のアニメーション](https://self-traveling-thailand.com/wp-content/uploads/princess-mononokes-kodama.webp)
いや~。長かった..。WordPressを始めた頃 「編集画面で改行」 プレビュー 「変化なし」 Excel感覚で挑んだ結果、玉砕していた頃が懐かしい
そこから他者との差別化を目的に、サイト全体のレイアウト、機能、デザインのカスタムに加え「オリジナル装飾」の制作に勤しんだ結果、メルヘンファンタジーなサイトに..。
※99パ~ セルフカスタム
イソガバ マワレ
Webサイト運営理念
【目的】
読者の目に留まりやすい「SEO検索流入上位表示」をブログの根幹とし「読者さんとGoogle先生」も好む、高品質で健全なサイトを目指す!
【狙い】
ズバリ! 指名検索 「セルフトラベリングタイランド」で、Re検索されること!
これぞまさにブロガーの誉。
【対策と方法】
高品質なWeb制作を可能とする、各種スキルの習得 ⇒ インプットとアウトプット!
ってなわけで、ブログ運営において必要と思われる、デザイン装飾やアニメーションネタをアウトプットしていきます。
これは動作確認を兼ねた練習記事。すべて独り言。今後運営していく「ブログのネタ帳」と言ったところでしょうか。閲覧自由ですが、中毒性があります。 自己責任でどうぞ。
Contents
ToggleBOX
まずコレ。ブログの必須アイテム。BOXは文章とか囲む装飾枠。 Web制作と無縁の会社員時代でも、〇〇サイトの「BOX」デザインはいい感じだな~..。とか思っていたので、読者の印象に残る大切なパーツ。
BOX
【目的】
読者の目を留め印象づける。
【狙い】
ナニがナンデモ読んでもらう!
【使いどころ】
ここぞ!ってところで要点をまとめ、読者へ猛烈アピール。一般的に「文章」を挿入することが多いが、お好きなコンテンツの挿入も可。※多用は厳禁、読者の集中力が削がれマス
ボックス Type-1(シンプル型:背景色レス・枠線アリ)
当サイトで使用する装飾BOXのデザインを、どーするか悩んでいたところ、タマタマ覗いたカッコウの許嫁
(アニメ公式サイト)で発見! パクこちらのデザインを参考とさせて頂き、ありがたく独自カスタム。
タイトル
シンプルながら使い勝手の良い洗練されたデザイン! 自分で言うと「自画自賛」になるらしい。中には「文章・画像・箇条書きリスト・表・動画・リンク」お好きなものをブチ込めばOKです。
開けゴマ
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>
/* -----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;
}
※コピーボタン ⇒ コチラをお手本にカスタム 【jQuery】ワンクリックでコピーするボタンを作る
※マウスドラッグスクロール ⇒ コチラをお手本にカスタム jQueryを使わずにマウスドラッグスクロールを実装する
※コピーボタン ⇒ コチラをお手本にカスタム 【jQuery】ワンクリックでコピーするボタンを作る
※マウスドラッグスクロール ⇒ コチラをお手本にカスタム jQueryを使わずにマウスドラッグスクロールを実装する
カラー7種
タイトル
①ここはコメント挿入欄。文章とも言う。サイズ感・余白・色・文字間・行間・配置とかチェック。もう少し入力しておく。
This is ピーチレッド
タイトル
②ここはコメント挿入欄。文章とも言う。サイズ感・余白・色・文字間・行間・配置とかチェック。もう少し入力しておく。
This is ライトパープル
タイトル
③ここはコメント挿入欄。文章とも言う。サイズ感・余白・色・文字間・行間・配置とかチェック。もう少し入力しておく。
This is ブルー
タイトル
④ここはコメント挿入欄。文章とも言う。サイズ感・余白・色・文字間・行間・配置とかチェック。もう少し入力しておく。
This is ライトブルー
タイトル
⑤ここはコメント挿入欄。文章とも言う。サイズ感・余白・色・文字間・行間・配置とかチェック。もう少し入力しておく。
This is ダークパープル
タイトル
⑥ここはコメント挿入欄。文章とも言う。サイズ感・余白・色・文字間・行間・配置とかチェック。もう少し入力しておく。
This is シルバー
タイトル
⑦ここはコメント挿入欄。文章とも言う。サイズ感・余白・色・文字間・行間・配置とかチェック。もう少し入力しておく。
This is ゴールド
英語で言えました
ボックス Type-2(シンプル型:背景色アリ・枠線ボトムのみ)
タイトルアイコンは汎用性の高いデザインをチョイス。Font Awesomeなら、お好きな物に変更可。
無論、スマホ ~ PCデカモニターまで、狭く広くカバーする「レスポンシブ」コーディングです。たぶん。
タイトル
シンプルながらも配色が功を奏し、堂々たる存在感! これも自分で言うと「手前味噌」になるらしい。中には「文章・画像・箇条書きリスト・表・動画・リンク」お好きなものをブチ込めばOKです。
カラー7種
タイトル
⑧ここはコメント挿入欄。文章とも言う。サイズ感・余白・色・文字間・行間・配置とかチェック。もう少し入力しておく。
桃赤
タイトル
⑨ここはコメント挿入欄。文章とも言う。サイズ感・余白・色・文字間・行間・配置とかチェック。もう少し入力しておく。
紫
タイトル
⑩ここはコメント挿入欄。文章とも言う。サイズ感・余白・色・文字間・行間・配置とかチェック。もう少し入力しておく。
紫陽花
タイトル
⑪ここはコメント挿入欄。文章とも言う。サイズ感・余白・色・文字間・行間・配置とかチェック。もう少し入力しておく。
青
タイトル
⑫ここはコメント挿入欄。文章とも言う。サイズ感・余白・色・文字間・行間・配置とかチェック。もう少し入力しておく。
葡萄
タイトル
⑬ここはコメント挿入欄。文章とも言う。サイズ感・余白・色・文字間・行間・配置とかチェック。もう少し入力しておく。
鼠
タイトル
⑭ここはコメント挿入欄。文章とも言う。サイズ感・余白・色・文字間・行間・配置とかチェック。もう少し入力しておく。
金
読めない漢字
2つありました
ボックス Type-3(リッチ型:背景色アリ・枠線ボトムのみ・アニメーションicon)
これらのBOXシリーズは、HTMLの構文に1行書き足すことで、カラーチェンジ、アニメーション、アイコン変更に加え、背景画像も追加できる着せ替え方式。気分次第でコロコロ変更できます。つまり普通。
タイトル
欲しいもの全部付き!豪華フル装備♪もっとド派手にすることも出来るが、これくらいに留めるのがベター。せっかくなので、アイコンアニメを複数パターン制作してみマス。
カラー ・ 背景パターン ・ iconアニメーション10種
タイトル
⑮アイコンをチェックマークに変更のうえ、フロート上死点でクルンと回転♪いたって現実的。このデザインはスマホで見たときの違和感をとるのに一苦労です。
タイトル
⑯アイコン2種のフュージョン! 「backface-visibility: hidden」プロパティで、裏表切り替えアニメーションの「@keyframes」がスマートに。もっと早く試せばよかった!
タイトル
⑰ボイ~ン♪ボイ~ン♪ボイ~ン♪ブシュー。ツン。レンダリングエンジンから悲鳴が聞こえる。fpsが落ちてきた気が..。気のせいか?気のせいですね。たぶん。
マネッコ三女
⑱アイコンアニメはココまで。続きは「WP装飾見本」制作終盤頃、新しいネタを追加するかもシレマセン。
タイトル
⑲お隣の⑱から文頭文末上下余白が広くなっているが、これは横スクロールの高さを整然と合わせる為で、ミスったわけではありません。
タイトル
⑳ここはコメント挿入欄。文章とも言う。サイズ感・余白・色・文字間・行間・配置とかチェック。もう少し入力しておく。
タイトル
㉑ここはコメント挿入欄。文章とも言う。サイズ感・余白・色・文字間・行間・配置とかチェック。もう少し入力しておく。
タイトル
㉒観光情報系ブログを想定した対策の一環「BOX」はそろそろお腹一杯。他者との差別化も問題ナシ。とは言え、実際使うのは3種類くらいかも。
タイトル
㉔ここはコメント挿入欄。文章とも言う。サイズ感・余白・色・文字間・行間・配置とかチェック。もう少し入力しておく。
アレ? ナニカ
期待しました?
ボックス Type-4(選択切り替え型)
BOXシリーズ最終章。ちょっと一工夫でいろんな見せ方が。Webは楽しい♪
![CPU](https://self-traveling-thailand.com/wp-content/uploads/CPU.webp)
インテルCoreiシリーズ終了します。
![CPU](https://self-traveling-thailand.com/wp-content/uploads/CPU.webp)
インテルCoreiシリーズ終了します。
タイトル
㉗ゾウサンズアニメーション..。 今はググってもヒットしないが、そのうち当サイトがヒットする。たぶん。
タイトル
㉘この選択切り替え型は「CSS」で管理しているが、同一記事内「複数設置時」における「label」タグの管理がメンドイ。参考にしたサイトに情報が無かったので補足しておく。「JS」併用が効率的。
タイトル
㉙これでフィナーレ。オープニングアニメーション付き! チョークにもナニカ仕込むか迷ったが思いとどまる。無論、他所でありがちなチョークの表示崩れなど皆無。「BOXデザイン」 全25種、クラスの無駄遣いでアル!
箇条書きリスト
積極的に使いたいパーツ。箇条書きリストは、項目ごとに文章を整理して、文頭に見やすく記号やアイコンを含む装飾。遥か昔、上司から「箇条書きを使え」と注意された記憶がヨミガエル。
箇条書きリスト
【目的】
読者の理解を助ける。
【狙い】
記事中の整理したい項目(結論、疑問、注意喚起、問題提起等)の要点を読みやすくまとめる。
【使いどころ】
長くなりがちな説明文の文頭文末付近に「箇条書きリスト」を挿入することが多い。
※説明内容とリストアイコンの整合性に注意
箇条書きリスト Type-1(ナンバリングとBOXの連携)
これ、ナンバリングタイプ。項目リストに順序が発生する場合に使用。下のビフォーは、マークアップに
「ul ・ ol ・ li」タグを使わない比較用の”もどき”
【ビフォー】
これは“もどき”でフィクション
はい、ブサイク
次、ホンモノ
【アフォー】
これは“本物”でフィクション
整いました
Webにおける箇条書きリストのルール
「文頭記号の後ろで文章を折り返す」自動整形のこと。
Webにおける箇条書きリストのルール「文頭記号の後ろで文章を折り返す」自動整形のこと。
箇条書きリスト Type-2(アイコンとBOXの連携)
制作しといてナンです..。2種類もあれば十分だと思うが、ブログの練習がてらバリエーションを追加。それと、短文にも対応するショートBOXも用意。
標準サイズ
ご確認下さい
- リンゴ食べたい
- メロン食べたい
- スイカ食べたい
アリよりのナッシ
ショートサイズ
ご確認下さい
- ウナギ食べたい
- ブリ食べたい
- ホタテ食べたい
誰かご馳走して下さい
アイコンバリエーション
チェック
- 趣味コピペ
- 特技コピペ
- それダメな人
ん?だれ?
ハテナ
- リンゴ硬くて微妙
- スイカ種多くて微妙
- イチゴ酸っぱくて微妙
スムージーの方が好き
ビックリ
- 軽油:60円
- ハイオク:100円
- レギュラー:90円
高校生のとき
ナガレボシ
- 筋肉モリモリになりますよ~に
- 頭が良くなりますよ~に
- ずっと健康でいられますよ~に
カナウカナ..。
オススメ
- ワンカトー!
- ニカトー!
- サーンカトー!
君も全部集めて豪華景品をゲッツ
マル
- マル
- マルッ
- マール
もしかして、バカなの?
ゾウサンズ若年層構成員
- 三男です
- 三女です
- 次男です
- 次女です
ゾウサンズ! みんな仲良し♪
ご紹介が遅れました。上の選択切り替え型は「タブ」と言います。詳細は後ほど。
ご紹介が遅れました。上の選択切り替え型は「タブ」と言います。詳細は後ほど。
ステップバー
![ステップバー](https://self-traveling-thailand.com/wp-content/uploads/stepbar.webp)
ステップバーは時系列を分かりやすく説明する装飾。いくつかデザインタイプはあるが目的は同じ。
ステップバー
【目的】
読者の理解を助ける。
【狙い】
記事中で「時系列に説明したい要点」を読みやすくまとめる。
【使いどころ】
物事を順序立て説明するとき「ステップバー」を挿入することが多い。
ステップバー Type-1(装飾BOX・Gマップの連携)
デザインタイプを少し悩んだが、すぐ解決。当サイト採用のデザイン一択。直感的に時系列を把握しやすくベリーグッド。まさに「Webサイト」向けのデザイン!
【how to】 とある美容室の予約からお店までの行きかた
※実在するフィクション
STEP1
美容師の診察予約
LINEで担当美容師と直接コンタクトを図り、要望を伝える。
情報に誤り無きこと
-
コースを伝える。
例)カット or カラー or パーマ
-
希望日時を伝える。
例)〇月〇日の〇時~〇時に仕上がる時間帯で
-
美容師からの返答確認後、予約確定の正式依頼をする。
例)では、〇月〇日の〇時に伺います!
- 美容師からの正式回答を確認する。
予約はこれでOK。 あとは当日に備えるヾ(•ω•`)o
予約はこれでOK。 あとは当日に備えるヾ(•ω•`)o
STEP2
自宅から最寄り駅へ
高尾駅(京王線)まで歩きましょ。 ~所要20分
STEP3
電車で三軒茶屋へ
推奨ルート。
電車経路
-
高尾駅
新宿行きに乗車 ★5番ホーム
-
北野駅
新宿行き「特急」に乗り換え ★3/4番ホーム
-
明大前駅
京王井の頭線、渋谷行きに乗り換え ★4番ホーム
-
渋谷駅
田園都市線、長津田行きに乗り換え
-
三軒茶屋
降車駅
高尾から三軒茶屋まで、 ~所要60分チョイ。
特記事項
- 「北野駅以外」行き先を確認のうえ、入線してきた電車ならばどれでも乗車OK(特急・準急とか指定なし)
- 明大前駅の渋谷方面は常時激込み..。 乗れない時もあるので注意(速やかに列に並び待つ)
- 渋谷駅での乗り換えは、一度駅構外(地上階)へ出て、地下道から田園都市線に向かいます。
STEP4
三軒茶屋駅から美容室へGO!
GOOLはすぐソコ。 南口から徒歩7分!
しかし、Gマップ操作時の変な青枠をどうにかしたい..。誰か教えて下さい
しかし、Gマップ操作時の変な青枠をどうにかしたい..。誰か教えて下さい
GOAL
乙デス。
文頭にアイコンを添えると整います。たぶん。
文頭にアイコンを添えると整います。たぶん。
開けゴマ
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 Trigger54 Trigger55">【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 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><!-- ↑1段目ステップEND --> <!-- ↑1段目ステップ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><!-- ↑2段目ステップライン-->
<span class="partition-line"></span><!-- 見切り装飾-->
</div><!-- ↑2段目ステップ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">高尾駅</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 Trigger50"></span><!-- ↑3段目ステップライン-->
<span class="partition-line"></span><!-- 見切り装飾-->
</div><!-- ↑3段目ステップ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>
ヤベーゼ +_+
/* -----CSS----- */
ステップバー標準搭載のWP「デザインテンプレート」を使えば、ブロックエディタ上で簡単に編集できると思うが、私が愛用するサイトの雛形は、10年前に開発されたオールドテーマ。 無論、そんな機能あるわけナッシ ≡(▔﹏▔)≡。
上は基本の型。やはり順序が発生する説明はステップバーが分かりやすい。だが、コードがヤバイ。ごちゃついてしまう。未熟者が「カスタム」した結果、HTMLの構文が難読難解でアル。
ステップバー カラーサンプル
思いのほか良いポッピー。これも着せ替え方式で、背景、各所カラー変更等、自由自在。いわゆるステップバーの追加オプション♪ ポッピー?
【色見本】 ポッピーフレーバー
※マネしないで下さい
STEP1
美容師の診察予約
LINEで担当美容師と直接コンタクトを図り、要望を伝える。
STEP2
自宅から最寄り駅へ
高尾駅(京王線)まで歩きましょ。 ~所要20分
STEP3
電車で三軒茶屋へ
高尾駅から三軒茶屋まで、 ~所要60分チョイです。
STEP4
三軒茶屋駅から美容室へGO!
GOOLはすぐソコ。 徒歩4分!
STEP5
三軒茶屋駅から美容室へGOGO!
GOOLはすぐソコ。 徒歩5分!
STEP6
三軒茶屋駅から美容室へGOGOGO!
GOOLはすぐソコ。 徒歩6分!
ポッピーでした!
ステップバー 解説レイアウトサンプル
閲覧負荷を軽減するコンテンツの見せ方に「重きを置けば」おくほどcodeが複雑に..!
【デザインサンプル】 ステップバーと「how to」向け装飾手法
※時系列と関係ありません
レベル1
2カラム 短文表示
2カラム 短文表示(小型タブレットは1カラム)
1カラム 短文表示
![CPU](https://self-traveling-thailand.com/wp-content/uploads/CPU.webp)
インテルCoreiシリーズ終了します。
↑このレイアウト、キッカケは「サルワカ」さんのサイト美しいフラットデザインの作り方で見かけ、当サイトも導入。PCでは2カラム、スマホ1カラム自動可変のレスポンシブデザイン!
レベル2
2カラム 長文表示
1カラム 長文表示
表示崩れ断固反対! 「レスポンシブレイアウト」最適解を意識した結果がコレ。
インラインスクロール。どんだけ長文ぶち込んでも美しく表示。
スクロールまで文章が足りないので、もう少し入力しておきマス。もう少し。もう少し。あともう少し..。ま、まだかな~。
これぐらいで勘弁しておく。
ところで、CPUの見えない劣化問題は大丈夫なのだろうか..。
ところで、CPUの見えない劣化問題は大丈夫なのだろうか..。
レベル3
2カラム 並列スクロール ・ サブタイトル付き
1カラム 並列スクロール ・ サブタイトル付き
1.ここはサブタイトル挿入欄。ナニがナンでも表示崩れ絶対させない !
![CPU-2](https://self-traveling-thailand.com/wp-content/uploads/CPU-2.webp)
右へスクロール → → →
2.サブタイトル挿入欄
![CPU-2](https://self-traveling-thailand.com/wp-content/uploads/CPU-2.webp)
右へスクロール シマシタ。
「how to系」だとこの機能は欲しいところだが、あまり見かけない。合理的だと思うんですがね~。
3.サブタイトル挿入欄
![CPU-2](https://self-traveling-thailand.com/wp-content/uploads/CPU-2.webp)
特にナニもアリマセン。
解説系の記事で活躍するレイアウト
レベル4
2カラム 並列スクロール(ポッピー)
1カラム 並列スクロール(ポッピー)
1.サブタイトル挿入欄
![CPU-3](https://self-traveling-thailand.com/wp-content/uploads/cpu-3.webp)
右へスクロール → → →
2.サブタイトル挿入欄
![CPU-3](https://self-traveling-thailand.com/wp-content/uploads/cpu-3.webp)
マタ 右へスクロールしました。
3.サブタイトル挿入欄
![CPU-3](https://self-traveling-thailand.com/wp-content/uploads/cpu-3.webp)
ダークモードにナリマシタ。
バカフォン対策で、スマホはいつもダークモード。
背景白だと何故かスクロールバーが表示されません..。困ったもんです。
フィナーレはポッピー。パステル系はWebと相性ヨシ。
フィナーレはポッピー。パステル系はWebと相性ヨシ。
レベル5
ステップバー総括
ベリーゴッド
アコーディオン
アコーディオンは格納されているコンテンツを、読者の選択により「表示・非表示」を切り替える装飾。当サイトは積極採用。
アコーディオン
【目的】
合理化による、コンテンツ閲覧時間の削減(UX向上)
【狙い】
欲しい情報は取り出せ、不要な情報は非表示にしておくことで、読者の有限な時間の確保。
【使いどころ】
記事タイトルに対し「読者全員」が対象でない、コンテンツの一部を含む場合「アコーディオン」を使用することが多い。上から下に配置のうえ、読者を誘導するのがセオリー。
※デザイン依存度が高いので、納得できるものを選ぶべし
アコーディオン Type-1(h2見出し以下、格納コンテンツ用)
「Q&A」1問1答コーナーでよく見かけるが、当サイトでは「H2見出し以下」のコンテンツを丸ごと格納。そもそも読者が見出しを見て、読むか否か判断のうえ、表示できるようにすべき。それが見出しの役割。
アコーディオン Type-2(Q&A用)
はいコレ。よく見るやつ。上から下に並べて使うのがセオリー。当サイトでも使うかな?
上位表示は1記事でも可能。ゴミ100記事投稿サイトと、高品質な記事1投稿のサイト。あなたがグーグルさんなら、どちらを表示しますか? ※ポイントは「タイトル負け」しないコンテンツ制作です。
いいえ、実力です。コンテンツのクオリティーとドメインパワーに準じます。
いいえ、違います。ブログは高品質な記事(サイト)を、読者に提供できるまで、投稿(公開)するべきではありません。一度ゴミを公開すると、そのドメインに紐づく運営者もゴミ扱いされかねません。※練習には「捨てドメイン」を活用しましょう!
どちらとも言えません。グーグルさんのアルゴリズム進化により、読者の求めるコンテンツを訴求した結果、企業ドメインが優先され表示されるようです。※他者を圧倒する、高品質なコンテンツで対抗しましょう!
はい。影響します。せいぜい20位と21位の順位が入れ替わる程度でしょう。効果の検証も簡単です。
もし自分のサイトを検索して「表示が遅い..。イライラする..。」と、感じないのであれば、表示スピードを気にするのは止めましょう。
注意喚起
SEOに強いテーマはありません。
学習を怠った素人、又は悪意を持つ人がテーマを開発しない限り「有料 ・ 無料」テーマ各社、ほぼ一緒。何れの開発者も、自分のところのデザインテーマを使って欲しいと思うのが人情。
SEOに「最適化」となるよう、最初から設計されています。
SEOに「最適化」となるよう、最初から設計されています。
とは言え、テーマ構成における、PRG作成記法に基づく総量、デザイン性(機能を含む)の差で、間接的には影響。
失敗しないテーマ選びは「テンション爆上がり」するワードプレス「デザインテンプレート」を選ぶだけ。ヤル気があれば、高品質なコンテンツの提供に向け、自 ずと努力スルモノ。ある意味SEO「最強」と言えるカモ?
闇が深いこのWeb業界、無知な素人を言葉巧みに誘導し、粗悪なテーマを高額で売りつける、悪質な会社もあるので油断大敵。さらに、コレに群がるアフィカス軍団。※景品表示法違反の行政指導を受けてもなお、一部の文言変更のみで販売を継続する根性。キモイは。
闇が深いこのWeb業界、無知な素人を言葉巧みに誘導し、粗悪なテーマを高額で売りつける、悪質な会社もあるので油断大敵。さらに、コレに群がるアフィカス軍団。
※景品表示法違反の行政指導を受けてもなお、一部の文言変更のみで販売を継続する根性。キモイは。
1問1答シリーズ、癖になりそう!
この1問1答シリーズ、癖になりそう!
アコーディオン Type-3(汎用)
汎用タイプは入れ子前提のデザイン。「表示・非表示」の切り替えは、読者さまの任意でございます。
ポスターやチラシ、コーポレートサイトを意識して、どんな「要素の構成」でデザインが成り立っているのか考察することで、そこそこ身に付きます。 たぶん。
ググると企業ドメインが上位にどっさり。個人ブログで戦うなら、圧倒的クオリティーで「一泡吹かせて」ヤルしかない。フカシーマークリヤーー! はい。
![テクノロジーイメージの背景](https://self-traveling-thailand.com/wp-content/uploads/technology-sign.webp)
文章、画像、その他なんでも挿入可「格納コンテンツ」ベリーグッド!
![宇宙](https://self-traveling-thailand.com/wp-content/uploads/cosmos.webp)
![超新星](https://self-traveling-thailand.com/wp-content/uploads/supernova.webp)
![宇宙ガス](https://self-traveling-thailand.com/wp-content/uploads/floating-gas.webp)
このロケット、Web界隈でよく見かけますよね~。 カワ(・∀・)イイ!!
![レンガの背景](https://self-traveling-thailand.com/wp-content/uploads/brick-background.webp)
電動マトリョーシカって知ってます? そろそろ怒られそうだな。
![どこかの惑星の背景](https://self-traveling-thailand.com/wp-content/uploads/some-planet.webp)
ウ~フォ~。ウ~エフ、オォーーッ! 中の人バカなんですかね?
![浮かび上がるお月さん](https://self-traveling-thailand.com/wp-content/uploads/moon.webp)
![怪しいお城](https://self-traveling-thailand.com/wp-content/uploads/castle.webp)
画像って、サイトの雰囲気に大きく影響するので、安易な物は避けたいですね~。
![宇宙の背景](https://self-traveling-thailand.com/wp-content/uploads/universe.webp)
ナニカを期待したあなた。すみません。ネタ切れです。
ACのラベルは「カラクリ」モーションを意識
ACのラベルは「カラクリ」モーションを意識
このロケット、Web界隈でよく見かけますよね~。 カワ(・∀・)イイ!!
タブ
タブは格納されている「複数」のコンテンツを、読者の選択により「表示・非表示」を切り替える装飾。この機能を標準搭載する デザインテンプレートが極端に少ない。ナンデ?
タブ
【目的】
合理化による、コンテンツ閲覧時間の削減(UX向上)
【狙い】
欲しい情報は取り出せ、不要な情報は非表示にしておくことで、読者の有限な時間の確保。
【使いどころ】
前項と基本的な考えは同様だが、左から右(並列)にタブを配置のうえ、読者を誘導するのがセオリー。※タブ機能非搭載のテーマでも、プラグインやカスタムコーディングで、機能拡張は可能
- menu1
- menu2
- menu3
初期表示のタブです。
2枚目のタブです。
3枚目のタブです。
Excel感覚でブログを始めると、たぶん挫折します。
Google Mapの無い。
![モノノケ姫のコダマの真似をするサイトマスコットの三男](https://self-traveling-thailand.com/wp-content/uploads/princess-mononokes-kodama-i.webp)
このサイトが気に入ったらブックマーク
Recommend関連記事
関連記事は見つかりませんでした。
Website owner
![美しいエラワンの滝](https://self-traveling-thailand.com/wp-content/uploads/erawan-waterfall.webp)
![サイト運営者の顔](https://self-traveling-thailand.com/wp-content/uploads/the-face-of-the-site-operator.jpg)
![ワット・パクナム](https://self-traveling-thailand.com/wp-content/uploads/wat-pak-nam.jpg)
Mr.
Shiro Kato
・・・ 運営理念 ・・・親日国タイへ日本人を誘致するべく立ち上げたサイト! 観光大国タイの魅力を正しく伝える、ポップなコンテンツ制作がコンセプト「きっとあなたの行ってみたいが」見つかります。 読者の「記憶」に残り「行動」につながる、高品質で「指名検索」される「有益記事」をモット~に♪情報の確からしさを追求。タイ王国「1都76県制覇」に向け、粛々と自己研鑽に励む日々..
Recommended articles
![quality-check-sample](https://self-traveling-thailand.com/wp-content/uploads/stuffed-bear.webp)
![quality-check-sample](https://self-traveling-thailand.com/wp-content/uploads/statue-dressed-as-an-astronaut.webp)
![quality-check-sample](https://self-traveling-thailand.com/wp-content/uploads/parrot-chick.webp)
![quality-check-sample](https://self-traveling-thailand.com/wp-content/uploads/a-baby-dragon-that-shines-like-glass.webp)
サイドバーおすすめ記事の表示テスト。やっぱりサイトは「手作り命! 愛情一番!」
Recommended articles
![quality-check-sample](https://self-traveling-thailand.com/wp-content/uploads/baby-penguin-wearing-a-hat.webp)
![quality-check-sample](https://self-traveling-thailand.com/wp-content/uploads/giraffe-in-a-spacesuit.webp)
![quality-check-sample](https://self-traveling-thailand.com/wp-content/uploads/colorful-parrot-chick.webp)
![quality-check-sample](https://self-traveling-thailand.com/wp-content/uploads/pegasus-child-shining-like-glass.webp)
タイトルが指定行数を超えたら「…省略記号」が出るようにカスタムしたので、その確認のため文字を入力。できてるかな?もう少し、あと少しだけ文字を入力しておく!
Recommended articles
![quality-check-sample](https://self-traveling-thailand.com/wp-content/uploads/fluffy-chick.webp)
![quality-check-sample](https://self-traveling-thailand.com/wp-content/uploads/goat-wearing-an-astronaut-suit.webp)
![quality-check-sample](https://self-traveling-thailand.com/wp-content/uploads/blue-colored-parrot-chick.webp)
![quality-check-sample](https://self-traveling-thailand.com/wp-content/uploads/a-fairy-that-shines-like-glass.webp)
これらは動作確認の一環の為、記事へのリンクは貼り付け未。