本WEBサイト ( eizo-gak.com ) を開設してから、まもなく1年となります。この場所で記事を真面目に書くようになったのは最近のことですから、「意外に早いな」と思われるかもしれません。いまだにYouTubeのほうで「新しいサイトになったよ！」と告知をしていないのですが、その割にはいつもたくさんの方に訪れていただいており驚いています。
今日は、このサイトの技術面についてのお話です。
まず、このサイトの基本的な構造について。
eizo-gak.comは、本質的には個人ブログやアフィリエイトブログなどと大差ありません。WordPressというサービスをレンタルサーバーの上で動かすことで、みなさんのブラウザに記事を表示させています。
いずれ古いドメインは捨ててしまおうかなと考えています。現在は旧ブログのURLを踏むと、自動的にeizo-gak.comへつながるようになっているはずです。昔のURLしか知らない方でもeizo-gak.comへやって来られるように設定しています。
昨年の、ちょうど今ぐらいの季節に頑張っていたのが、WordPressのテーマ選びです。
WordPressには「テーマ」という概念があります。テーマによってサイトの大枠のデザインが定義されており、世界中の様々なWebデザイナーさんが、このテーマを有償無償問わず配布してくれています。いろいろな用途向けにたくさんのテーマが作られており、ブログ用のもの、企業LP用のものから、写真家用のものまで、探せば何でもあります。
このテーマに頼ることで、HTMLやCSSの知識がなくても、デザインの整ったサイトを作ることができます。
日本で売っているWordPressテーマにも有名どころがいくつかあります。まぁ本来ならそれを選んでおくのが無難なんですが、私はあえて避けることにしました。日本のテーマはどうしても「ジャパニーズ・アフィリエイトブログ」感が抜けないし、どれも定価が1万円ほどと高価です。私はHTMLもCSSも得意ではないのですが、だからといって1万円もかけて、それでありふれたものしか手に入らないというのは、少し面白みに欠けるような気がしました。
それに映像学区は「趣味で安くそれなりのモノを創作しましょう」というポリシーを抱えているので、課金ルートに愚直に従うのも微妙だなぁと思いました。
結局国産テーマにいまいち馴染めなかった私は、英語圏のおしゃれなWordPressテーマを修正することで、映像学区新ブログを制作すればいいんじゃないかという結論に至ります。
「日本語サポートよりも自由度を優先したい。コードはある程度自分で書き直せばいい」
いろいろと悩んだ末に「Envato Market」というデジタルコンテンツ販売サイトを探し回り、汎用的に使えそうでデザインの良いWordPressテーマを買うことにしました。日本で見かけたテーマとは違い、価格も7000円程度。さらにブラックフライデーセールで5000円でした。なんと安いこと。
手順はもちろん英語でしたが、eizo-gak.comにWordPressテーマを認証させるのはすんなり行きました。ここからは頑張ってデザインをカスタマイズします。
まず苦労したのがフォントの設定です。
日本語の「游ゴシック」と「Noto Sans CJK」を使うことにします。しかしフォントを変えるだけではいいデザインに仕上がりません。プレビューを繰り返しながら、字間行間余白の設定を追い込んでいきます。スマホ表示時とPC表示時で理想のフォントサイズは異なるのですが、元のテーマではうまく調整できなかったので一から実装しました。もちろん誰も日本語向けサポートなんてしてくれないので、頑張ってWEBデザインについて調べます。
次に苦労したのがトップページ周りです。トップページでは、「Elementor」というプラグインを「固定ページ」上で走らせています。トップページに手をつけた当初は、何がどこで機能しているのかさっぱり分からずたいへんでした。
どう設定してもデモどおりにならなかったんです。サイトの要であるヘッダーが、なぜか変な動きをしたり2つ表示されたりして、本当に挫けそうになりました。とにかく管理画面のボタンをon/offしながら、トラブっている箇所を特定しつつデザインを改善していきます。そんな試行錯誤の繰り返しです。
色々試して分かったのは、購入した海外テーマでは「WordPressにもとから備わっているカスタマイズ機能」「テーマ独自のプラグイン」「Elementorプラグイン」という3つの土俵で、サイトデザインの設定が絡みあっているということです。
なんだかめんどくさい構造にも見えますが、ある意味では合理的な作りといえます。3つの土俵を組み合わせることで、私のようなWEBに無知な人間でも、デザインに奥行きがあるサイトを実現できるのです。とはいえ、もちろんメリットばかりではありません。まれに3つの土俵が干渉しあうことがあります。たとえば写真を拡大表示してくれる「Lightbox」という機能を実装した際にも、なぜか動かなかったり、逆に2回も拡大されたりして大層困りました。
つづいて苦労したのが（カテゴリ）記事一覧のページです。
テーマに付属してきた記事一覧のデザインが気に食わなかったので、トップページで学んだElementorと固定ページを使って「カテゴリ記事一覧ページ」を作りなおすことにしました。本来の記事一覧に飛ぶはずのURLから、作りなおした固定ページに無理やり飛ばす必要があるため、しかたなく「Redirection」という外部WordPressプラグインを導入しました。
ところが肝心のElementorに欠陥が見つかったんですよね。ページ送りをElementorでやろうとすると、どういうわけか次ページへ進んでも、ページ上部に戻ってくれないのです。このままでは記事一覧の閲覧性が最悪です。Elementorは有名なプラグインのはずなんですが、なんと有償版でもこの問題は修正されていないようです。
しかたなく、記事一覧だけは「Post Grid」という外部WordPressプラグインで組み立てることにしました。しかしこの外部プラグインでも、今度は「レスポンシブ表示がまともに表現できない」という問題がありました。
そこでしかたなく、「visibility」という外部プラグインを導入しました。「スマホ用の記事一覧ブロック」と「PC用の記事一覧ブロック」の2つを用意して、それぞれみなさんの環境によって、見せたり見せなかったりしています。
HTMLもCSSもPHPもなんにもできない私ですが、このような迷走を1年つづけて満足のいくデザインを手に入れました。万人にはおすすめできないですが、自分だけのWEBサイトを持つ喜びというのは、何物にも代えがたいものがありますね。
