たかはい、こんにちは。名刺を渡すときうまく取り出せなくてあたふたしてしまう「にじいろのたか」です。
さて。
実はこのブログ「にじいろオンライン」にSNSリンクページなどの機能をもったイントロページを追加したいなーと考えておりまして。
その過程をブログにしようかなとこの記事を書き始めました。
考えて、記事にして、作って、記事にして、その繰り返しで・・・・
みたいな流れで３部ぐらいの構成に出来たらなと考えています。
今回は仕様をまとめる回です。
よろしくお願いします。
なぜイントロページを作ろうと思ったのか
最近よく見かけるリンクまとめサービス。
SNSへのリンクやブログのコンセプト紹介、自己紹介に便利そう！と思ってました。
今の「にじいろオンライン」は、フロントページには記事一覧が並んでいるだけ。
SNSとのつながりや、このサイトの世界観を紹介する場所として、リンクまとめページはあってもいいかもなと
ただ、便利そうに思う一方で、できれば自分のブログの中だけで完結させたいという気持ちもあって。
外部サービスに頼らず、自分で設計し、育てていけるページにしたいという思いがあったんですね。
とはいえ、フロントページにそういった情報を載せるのも、少し冗長に感じてしまう……。
毎回見る必要のある要素ではないですからね。
コンセプトや自己紹介は見せたいけど、常に目立たせたいわけではない。
そんな微妙なバランスにずっと悩んでいました。
そこで、モーダルウインドウを「サッと渡せる名刺のようなイントロページ」にすることにしました。
SNSプロフィールにも貼れるし、出先でブログを紹介したいときにも便利。
このイントロページさえあれば、「このブログはこんなブログだよ！」と伝えることができる、そんな案内板のような存在を目指しています。
コンセプト
このブログを訪れてくれた人に、まずは「どんな人が書いているのか」「どんな世界観なのか」を、さっと伝えられるページがあったらいいなと思っていました。
そこで、自己紹介・SNSリンク・ブログへの導線を1つに集約した“モーダル風の自己紹介ページ”を用意しました。
名刺のように気軽に渡せて、ちょっと立ち寄った人にも雰囲気が伝わるような、そんなページです。
SNSプロフィールにこのページへのリンク（/intro）を貼っておけば、ブログに初めて訪れた人にもやさしい導入になるのではないかと思っています。
仕様概要
このイントロページ(モーダル)は次の条件の時に表示されます。
- 固定ページ /introにアクセス
- URL?intro=trueのとき
- js-modal-introをクリックしたとき
表示は wp_footer フックを使って、HTMLとJavaScriptを出力するかたちで実装。
モーダルの中には、以下のような要素をまとめています。
- ブログのロゴ（ブランド認知）
- SNSリンク一覧（X［旧Twitter］、Instagramなど）
- 自己紹介（名前や一言コメント、アイコン画像）
- QRコード（ブログトップやイントロページのURL）
- 「ブログを読む」ボタン（トップページやおすすめ記事への導線）
HTML部分は template-parts/modal/intro.php に分離し、テンプレートファイルとして管理。
出力の制御は functions.php 側で条件分岐を設け、is_page(‘intro’) のときはモーダルを常時表示する。
スタイルは position: fixed で画面全体にパネルを表示し、背景には backdrop-filter や半透明のカラーを活用。スマートフォンやタブレットでも見やすいように、レスポンシブにも対応させる予定です。
今後の流れ
次回は、今回まとめた仕様をもとに、実際の実装へと進んでいきます。
具体的には以下のような内容を予定しています：
- wp_footer を使って、モーダルを特定の条件下で差し込む方法
- モーダル内に表示するHTMLの構成と、スタイル（CSS）の調整ポイント
- 最終的に完成した /intro ページのスクリーンショットもご紹介する予定です
おわりに
「普通のモーダルじゃ飽き足りない！」
「SNSリンクサービス使いたいけど、ブログとの一体感もほしい！」
みたいに思っている人がいたら、ぜひ次の記事も読んでみてください。
そして一緒に実装までこぎつけることが出来たら嬉しいです。
次回もよろしくお願いします。
コメント