ブログトップページの仕組みについて|Swellテーマ

ブログの見直し計画中

ブログの見直し計画決意

無料の”FC2ブログ”を卒業してドメイン取得し、WordPressブログの開始が2021年7月1日。
WordPress以降後6年目である。思い起こせば、最初にブロックエディタを開いた時は、文章と写真を納める以外にどこをどうしたら見栄え良く読みやすい記事ベージになるのかさっぱり見当がつかず悩んでいた。
そんな中、ブログの成否はテーマしだいという発見があり、数ある中から当時人気絶頂のようだったテーマの｢Swell(スウェル)｣を導入してからは一気に完成に向けて進むことができた。FC2にもテーマ機能はあったが、Swell は圧倒的に洗練されているし機能が段違いに充実し、有用なパーツも満載。しかも機能アップデートで常に進化しており、もう手放せないツールである。
Swellの利用は有料で価格は 17,600円だが本当に買い切り商品なので、安いもんだと購入への抵抗はなかった。

テーマ導入から5年間、基本構成でここまで来たわけだが、最近ブログの顔であるトップページのビジュアルに不満が生まれてきて、試行錯誤の末に思い切ってリニューアルを決意したが･･･

ブログのトップページが見つからない!!

しかし、かんじんのトップページが固定ページ一覧にも投稿ページ一覧にもない !!
固定ページだけでなく、2,000ページ近く(!)ある投稿ページをどんなに検索して見つからないのだ。( ≧Д≦)

まさか、ページをうっかり削除してしまった ??
これ、どうやって作り変えれば良いのか･･･途方に暮れてしまった。
さんざん悩んだ末に、困ったときのClaude頼み。はい、聞いてみたら答え一発でした。(´∀｀)

現在の環境ではトップページの「本体」は存在しません

WordPressの設定により固定ページのトップページ設定ももちろん可能なのだが、その場合はSwellの便利機能｢メインビジュアルのスライダー、過去記事のスライダー、ピックアップバナー｣等がほとんど利用できなくなる。
Swell利用のメリットである専用カスタマイザーによる｢サイト全体設定｣｢トップページ｣｢アーカイブページ｣などの高度なパーツを組み合わせる簡単な設定だけで魅力的なジュアルを構成できないのだ。
それを知って固定ページの設定を解除してカスタマイザーによるトップページ構築を開始していた。
つまり、今さら分かったのではなくトップページ不要になっていたことを忘れていただけ。( ´･ω･`)
そもそも前項のスクショのようなページをWordPressのブロックエディターで各種標準パーツだけで実現するには、HTML/CSS/PHPの中級以上のスキルが必須であり、一般ユーザーにはまずムリ。
それに気づいてテーマを頼ったわけ。で、Swellの設定方法のコツをここでひけらかすつもりはない。
自分などただの一ユーザーであるし、定番人気ツールなので、使い方ノウハウなどいくらでもネット上にある。

メインビジュアルの画像スライダーを改修

そしてブログ改善で当面の課題だったのが｢メインビジュアルの画像スライダー｣。
テキトーなお気に入り写真数枚をサイズを揃えて、カスタマイズメニューの｢メインビジュアル｣として登録するだけで自動スライダーとしてトップページを飾ることができる。本当にカンタン便利である。(´∀｀)
ずっと同じ構成で5年間に渡り疑いもなく使い続けてきたが、最近物足りなさを感じるようになってきた。
｢写真でブログのコンセプトを表現することが難しい｣ことに行き着き、それではと試験的にイラストを使ってみた。
もちろん自分にその才能はない。今どきはAIに任せるのが賢明でしょ、ということで･･･

この特徴的画風(?)はAIユーザーなら誰が描いたかはすぐ分かるだろう。作成者は ChatGPT である。
主役を年齢性別不詳にしたいとの意向を受けてLinuxのアイコンであるペンギンにしてくれた。
毎日がLinuxとの闘いということで武士仕立てにまでしてくれて当初はかなり気に入っていた。
Claudeに依頼しなかった理由はこの時期、アプリ開発などでトークンを大量消費していてセッション中断が頻発していたため、当時余裕のあったGPTにしたのだった。結果は満足できるものだったが、ユニークではあっても見慣れるとやはりこれでは写真と大差ないし、既にLinux移行が最大テーマではなくなっていたため、いつまでもブログの顔にしたくなくなって来たので別の表現手段を模索し始めたのだった。やはり作り直したいと考え始めた。

WebページのデザインなんてAIに頼めばカンタン??

とはいえ、日頃からAIを常用しているのだし、頼めばカンタンにできそうなものだが、もうイラストを頼む気にはならなかった。ブログのカオにあたる部分であり自分のアイデンティティにかかわるテーマなのだから、次のデザインを安直に丸投げするつもりはさらさらなかったのである。プライドが許さない”矜持(きょうじ)”というものである。
とりあえずは｢トップビジュアルの写真をやめて、もうちょっと”スタイリッシュな”ビジュアルにしたい｣というこだわりの発症である。何をもって”スタイリッシュ”というのか定義は知らない(^。^; が、少なくとも

• 余白を活かした余裕あるレイアウト
• 全体の色数を抑える
• ポップでフレンドリーなイメージ
• シンプルで主張しすぎないこと
• カテゴリを絞ってカードイメージでスマートに表現

くらいの感覚でお手本を探すことにした。
上記の条件を自分で撮影した写真で表現することはじゅうぶん可能だろうが、カメラ小僧の修行を断念したセンスの乏しい自分にはとうていムリと断定して、サンプル探しに励んでいた。そして･･･

2週間ほど探していてたどりついたのが｢ポップなイメージのテキストと複数のカード型を一部重ね合わせたレイアウト｣の、とある無料公開講座案内の画像。誰でもAIですぐに作れるような良くあるスタイルである。
とはいえ安易な模倣はしたくないのでイメージだけを参考にして完全オリジナルで作成することにした。
カードのアニメーションの可否が気になっていたが、Claudeにだいたいのイメージを伝えたら、1分程度でプロトタイプが出来上がったのには驚愕した。(@。@;

カードもマウスホバー時に前面で正立。ちゃんと動作する。
あれれ?? プロトタイプとはいえ、ほとんど完成品ではないか ?? このサンプルでは単なる画像なので動作しない
｢さすがや｣と称賛すると｢これくらいHTML/CSS｣ですぐに出来ますよ。と涼しいカオ(?)で返答だった。(^。^;
これなら少し手直ししただけですぐに使えるぞ、と浮かれたのだがやはり甘かった。
新デザインを徹底的にカスタマイズしてトップビジュアルに仕上げるまでSwellの仕様のカベに阻まれ、例によって完成までに苦難の試行錯誤が始まったのだった。
いや、もちろんお世話になっているSwellさまに恨みはないのだが･･･理想を実現するには問題山積だった。

SWELL

SWELL | シンプル美と機能性の両立 – 圧倒的な使い心地を追求するWordPressテーマ シンプル美と機能性の両立させ、圧倒的な使い心地を追求するWordPressテーマ – 『SWELL』の公式販売サイト。 最新のブロックエディター『Gutenberg』にも完全対応。プログ…