ワードプレス装飾見本(備忘録)

モノノケ姫のコダマの真似をするサイトマスコットのゾウさんの三男のアニメーション
モノノケ姫:コダマ×三男(ファンタジー仕様)
ファンタジーを間違った捉え方をしてしまった三男の顔 ファンタジーを間違った捉え方をしてしまった三男の体
コダマの顔 コダマの体
コダマの顔 コダマの体
コダマの顔 コダマの体
怪しいトビムシ
怪しいトビムシ
怪しいトビムシ
MIYAZAKI × STUDIO GHIBLI

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

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

イソガバ マワレ

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

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

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


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


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

BOX

開いた箱 キラキラ装飾 キラキラ装飾 キラキラ装飾 キラキラ装飾 キラキラ装飾 キラキラ装飾 キラキラ装飾

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

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

【使いどころ】
ここぞ!ってところで要点をまとめ、読者へアピール。一般的には「文章や箇条書きリスト」を挿入することが多い。※多用は厳禁、読者の集中力ががれマス。


Type-1(シンプル型:背景色レス・枠線アリ)

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

タイトル入力欄

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

カラーバリエーション

タイトル入力欄

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

赤紫

タイトル入力欄

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

タイトル入力欄

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

紫陽花

タイトル入力欄

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

タイトル入力欄

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

葡萄グラデーション

タイトル入力欄

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

鼠グラデーション

タイトル入力欄

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

金グラデーション

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

   

Type-3(リッチ型:背景色アリ・枠線ナシ・アニメーションicon)

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

タイトル入力欄

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

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

タイトル入力欄

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

タイトル入力欄

⑯アイコン2パターンのフュージョン! 「backface-visibility: hidden」プロパティのおかげで「@keyframes」短く済みました。backface-visibilitynよ、アリガト。

タイトル入力欄

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

マネッコ三女

⑱アイコンアニメーションはココまで。続きは「装飾見本」がある程度進んだら、ネタを考えて実装します。

タイトル入力欄

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

タイトル入力欄

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

タイトル入力欄

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

タイトル入力欄

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

タイトル入力欄

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

タイトル入力欄

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

  

Type-4(選択切り替え型)

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

タイトル入力欄

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

タイトル入力欄

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

タイトル入力欄

㉗ところで、ゾウサンズアニメーションって..。ナンダロ。

タイトル入力欄

㉘以上。選択切り替え型でした! 応用次第で高い戦闘力を発揮してくれる頼もしいやつ。


  

箇条書きリスト

サークル
リスト キラキラの装飾

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

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

【狙い】
記事中の整理したい項目の要点を読みやすくまとめる。

【対策と方法】
想定シーンに対応する「箇条書きリスト」制作。

【使いどころ】
長くなりがちな説明文(結論、疑問、注意喚起、問題提起等)の文頭文末に「箇条書きリスト」を挿入することが多い。
※説明事項とリストアイコンの整合性に注意(伝える事とつじつまの合う記号をチョイス)


Type-1(ナンバリング記号とBOXの連携)

箇条書きリストを分かりやすく、最初に「もどき」をお披露目。

【ビフォー】

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

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

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

3. 専用クラス追加で、箇条書きリストのカラーデザイン「12色」をご用意させて頂きました。※HTMLをコピペのうえ、ご使用下さい。

はい。ブサイク。

次は本物。細かい話をすると「サブリスト」も追加したスペシャル。コードをカスタムしないと無理。
Excel感覚でブログを始めると、たぶん挫折します。

【アフォー】

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

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

    画像の無断使用(無断転載)は著作権法に基づきお断りします。

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

  2. 低スペック、又は古いデバイスで()当サイトを閲覧時、アニメーション、及びスクロール動作の一部に滑らかさが欠ける場合があります m(_ _)m。
  3. 専用クラス追加で、箇条書きリストのカラーデザイン「12色」をご用意させて頂きました。※HTMLをコピペのうえ、ご使用下さい。

整いました。

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

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

Type-2(記号とBOXの連携)

2種類の記号(アイコン)があれば満たされる気はするが、せっかくなのでバリエーションを追加。箇条書きの性質上、短い文章にも対応できるよう、BOXを自動可変させる必要アリです。たぶん。

自動可変ナシ

ご確認下さい

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

アリよりのナッシ。

自動可変アリ

ご確認下さい

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

どっちでもいい~😂

                   

記号(アイコン)バリエーション

アイコン変更可。アニメーション追加可。一貫性デザインを意識。

チェックマークicon

  • 趣味コピペ
  • 特技もコピペ
  • コピペは正義

ハテナマークicon

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

ペンソーマークicon

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

高校生のとき。

ビックリマークicon

  • ビックリっす。
  • またビックリっす。
  • もうビックリマンっす。

ヤジルシマークicon

  • こんなアイコン。
  • 初めて
  • だって記号ですもん。

ゾウサンズ若年層構成員icon

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

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


  

ステップバー

キラキラの装飾 ステップバー1 ステップバー2 ステップバー3

比較的新しい「ワードプレスデザインテンプレート」搭載機能の一つ。ステップバーは時系列を分かりやすく説明する装飾。いくつかタイプはあるが、目的は同じ。ところで、ステップリストと名付ける方が適切かと思うのは私だけ?

【目的】
時系列の理解を助ける。

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

【対策と方法】
直感的に伝わるデザインと機能美を備えた「ステップリスト」制作。

【使いどころ】
時系列に物事を順序立て説明するとき「ステップリスト」を挿入することが多い。


Type-1(ステップリストとBOX・Gマップの連携)

ステップバー導入に際し、デザインを悩んだが一瞬で解決。当サイト採用のデザイン一択。直感的に時系列を把握しやすくベリーゴッド。Webサイト向けのデザインである。

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

※実在するフィクション

STEP1

美容師の診察予約

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

情報に誤り無きこと

  1. コースを伝える。

    例)カット or カラー or パーマ

  2. 希望日時を伝える。

    例)〇月〇日の〇時~〇時に仕上がる時間帯で

  3. 理容師からの返答確認後、予約確定の正式依頼をする。

    例)では、〇月〇日の〇時に伺います!

  4. 理容師からの正式回答を確認する。

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

STEP2

自宅から最寄り駅へ

高尾駅(京王線)まで歩きましょ。 ~所要20分

STEP3

電車で三軒茶屋へ

推奨ルートは下記です。

電車経路

  1. 高尾駅

    新宿行きに乗車

  2. 北野駅

    新宿行き「特急」に乗り換え

  3. 明大前駅

    京王井の頭線、渋谷行きに乗り換え

  4. 渋谷駅

    田園都市線、中央林間行きに乗り換え

  5. 三軒茶屋

    降車して駅構外へ

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

特記事項

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

STEP4

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

GOOLはすぐそこ♪ 徒歩7分!

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

GOAL

乙デス。

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

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

— 開けゴマ —

Type-1(ステップリストとBOXの連携)

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


<! ----- HTML ----- >
<div style="height:15px" 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-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-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-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>

<p>
<i class="fa-solid fa-location-dot fa-fw"></i>Gマップの枠線はHTMLの構文にちょっと細工。</p>

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

キャッチーな2カラム(短文表示)

CPU

Coreiシリーズ終了します。

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

レベル2

キャッチーな2カラム(長文表示)

CPU-2

表示崩れ断固反対! 当サイトのモット~。「レスポンシブレイアウト」最適解を意識した結果コレ。インラインスクロール。どんだけ長文ぶち込んでも美しく表示。だが、インラインスクロールに気づかず「スルー」してしまう「たわけ者」も一定数発生する見込み。 課題を整理し仕様を決め「スクロールヒント」自作のうえ対策!

次から難易度上昇。できるといいな~ (•_•)。

次から難易度上昇。できるといいな~ (•_•)。

レベル3

キャッチーな2カラム(並列スクロール)

1.キャプション挿入欄
CPU-2

表示崩れ断固反対!

2.キャプション挿入欄
CPU-2

表示崩れ断固反対!ちなみには不要だが、ちなみに..。文章量関係なく、BOXの高さを揃えることも可。

3.キャプション挿入欄
CPU-2

表示崩れ断固反対! 当サイトのモット~。「レスポンシブレイアウト」最適解を意識した結果コレ。インラインスクロール。どんだけ長文ぶち込んでも美しく表示。だが、インラインスクロールに気づかず「スルー」してしまう「たわけ者」も一定数発生する見込み。 課題を整理し仕様を決め「スクロールヒント」自作のうえ対策!

できました。(途中)

できました。(途中)

レベル4

キャッチーな2カラム(並列スクロール ・ ポッピー)

1.キャプション挿入欄
CPU-3

表示崩れ断固反対!

2.キャプション挿入欄
CPU-3

表示崩れ断固反対!ちなみには不要だが、ちなみに..。文章量関係なく、BOXの高さを揃えることも可。

3.キャプション挿入欄
CPU-3

表示崩れ断固反対! 当サイトのモット~。「レスポンシブレイアウト」最適解を意識した結果コレ。インラインスクロール。どんだけ長文ぶち込んでも美しく表示。だが、インラインスクロールに気づかず「スルー」してしまう「たわけ者」も一定数発生する見込み。 課題を整理し仕様を決め「スクロールヒント」自作のうえ対策!

フィナーレはポッピーでした。(途中)

レベル5

ステップリスト総括

GOOLはすぐそこ♪ 徒歩6分!


  
  • menu1
  • menu2
  • menu3

初期表示のタブです。

2枚目のタブです。

3枚目のタブです。

モノノケ姫のコダマの真似をするサイトマスコットの三男

FOLLOW

このサイトが気に入ったらブックマーク