どうも、きゃんでぃです。

何らかの手段でこのサイトがダメになってしまった時、どうやって作ったっけ…と宇宙猫にならないように、自分のためにもこのサイトを作った時のあれこれを記録したいと思います。

今後色々追加したり変更したり…という部分はあるかもしれませんが、私が行った大まかな手順はこの3工程です。

そんで、①の前準備の中にぎゅぎゅっとやるべきことが詰まってる感じです。③に関してはどうせwebなんてちまちまとマイナーアップデートしていくものだし、公開直後からいじりたいところが発生するに決まっているのでそのように書きました。

前提として、一度wordpressで失敗をしていること、基礎的なhtmlとcssのプログラミング知識があることでスムーズに進んだ部分がありますので、たぶん完全なる初心者の方に向いたやり方ではないです。

今回は①について書いておこうと思います。

なお、これらの記事はつねに気づき次第加筆修正され、唐突に動画解説など大掛かりな改変がはさまってくる可能性もあります。あくまで書いてる私自身のための記録であることをご了承ください。

①外堀を埋める

考えてた構造は、こんなん。

コンテンツ自体が少なく、TOPに大事な情報を集めたのでシンプル。

ていうか、前まで作ってたものの模倣である。

ヘッダーとフッターは確実に全ページ共通に入ることにし、フロントページ（TOP）以外の固定ページは今の所profileとBlogのみ。

画像青字にあたる部分は外部サイトへのリンクや外部からの埋め込みにあたるけど、別に重要ではない。wordpressで用意してないというだけです。

大事なのは「どんなページを作るか」というゴールを決めたことですね。

もちろん、こんな図が最初から頭にあったわけじゃなく…（あれば最高なんだけど）途中から増えたものもたくさんある。Blogにはてなのリンク足しとくか〜とかは完全に公開後のテコ入れですからね。今後はてなも活発になるならRSSを使って投稿一覧もどこかオプションでつけるかもしれんし。

そして、前回の失敗をふまえて私が絶対にやりたかったのは以下。

wordpress導入からすぐにデザインは作り込まず、慎重に動作確認を行いながら制作を進めました。

---

〜外堀が埋まるまで〜

1.サーバー契約

ずっとネットオウルにお世話になっていたので、今回もお世話になりました。（スターサーバーやスタードメインなど同社サービスを総括して管理できるぜ）

前まで無料のスターフリーサーバーをつかっていたのですが、これだと私が導入したいもの（主にCGI）が使えなかったので、いっそのこと長期運用を考えてスタードメインを年間契約し、ドメインにお金を払うことにしました。

ドメインも使いたい文字によりけりで料金がかわるのですが、私の場合は年間1,700円ほどだったので、現状はドメイン分の年1,700円＋無料サーバーで動いていて、月額の有料サーバーに切り替えてもおそらく大きな負担にはならずに済みそうだなぁというところ。

2.wordpressの導入とテーマ適用

スターサーバーには少なくともwordpressのかんたん導入ガイドがあるはずなので、それに従うだけのおはなしである。導入のみで躓いては何も成せぬ。（一応インストール方法のヘルプページ貼っとく）

テーマについては非常に悩んだ。前回はレイアウトの好みからJaxonという海外製のフリーテーマを利用。（リンク先は制作会社の紹介ページになっているが、実際はwordpress内のテーマ検索ですぐに出てくる）

しかし日本人はおろか海外でもあまりこのテーマを使用したtipsなどがない。子テーマの作り方もわからぬ…ということで、有名どころの日本製フリーテーマをさぐったが、アフィリエイトブログやECサイトをやるわけでもないし、知識のない人向けのエディターのカスタムが私には合わなかった。ちょうどいい拡張性ではなく…。

結局私は今回もJaxonを選んだ。あんまり余計な機能がついてないから。なんとかなるやろ！な！と。

このテーマの注意点はデフォルト？というか、同社で作ってるotterという装飾に関するプラグインのDLをくっそ勧められることくらいです。なんなら私は無料版をこき使ってます。あとはフォントとかかな。アルファベットが特徴的。そんくらいです。

wordpressから直接ダウンロードしたものなので、子テーマ作成にはプラグインを使いました。

導入に際してはこちらで紹介されている通りの手順で行いました。

子テーマができた事が確認できたので、適用して操作終了。

できればこの時点でデフォルトの「スタイル」をきめておくといいかも。Jaxonは背景が黒・文字が白をデフォルトとしているので、ブログページの背景を白にしたとて記事の作成ページではデフォルトのほうが適用されちゃうので。

こちらは一度子テーマを作ってしまえば一旦削除していいと思います。デザインに響かない・継続して使わないなら余計なプラグインはないに越したことはない。

3.必要な機能の確認、プラグインの整備

画像周りの処理

lightboxはざっくりいうと画像クリックしたらその場でポップアップして拡大されたりするやつです。

このように。

私はスライドにもそういう機能をくっつけたかったので、以下の無料プラグインの組み合わせで対応しました。

こちらのサイトを参考にさせていただきました。

当たり前ですがここでlightbox自体のプラグインを入れたことにより通常の画像にもポップアップが適用できます。ブロックエディタ上での適用の仕方はめっちゃ簡単で、画像のリンクを「メディア」に選択するだけです。

まさに上の画像にはリンク設定をしていないのでポップアップなしです。

拡大されたくない画像にはなにもしなければいいだけ。楽ですね…。

EasyFancyBox側の設定でポップアップまわりの装飾や機能を設定すればスライドの画像もそれ以外の画像も統一した演出で拡大されます。やり方わかんなかったら調べな！

というか、私もどれがどれを意味するの？というのを含め失敗前提で初期のうちに試してました。教科書通りに作ってるうちにどうせ自分の色出したくなるんだからツールの使い方の理解は深めておくにこしたことはないぜ。

スライダー系で一番つよいのはたぶんSmartSlider3だと思いますが、lightbox適用は課金プランです。課金できるんだったら、3つもプラグイン入れる必要なさそうな気するのでそれがいい。本当にUIも使いやすいし…そもそもスライドにlightboxを使わなくていいなら普通に無料のSmartSlider3を使おうぜ、と個人的には思う。

ちなみに検証をどうおこなったかというと、適当にTOPに設置してみたりダミーの投稿ページに設置してプレビューで確認してみたりしました。

あとね、もう一点あります。

入れておくだけで安全にSVG形式の画像が使えますよ〜ってやつ。

私はIllustratorのベクターデータを愛用しておりますので、サイトのロゴとかどうしても拡大縮小に負けず綺麗に見せたい画像に関してはSVGを使っております。

wordpressではセキュリティの脆弱性を考慮してデフォルトでSVGを使えない仕様になっているので、その辺加味した上でSVGを使うか使わないかは判断すればいいと思います。

まあ、ベクターデータを使わないなら関係ない話です。

なんで脆弱性？っていうと、SVGファイルはピクセルで構成された画像ではなく、プログラミングのテキストで構成されているデータだから、ハッキングして情報書き換えるのが容易とかそういう話だったと思います。劣化しないデータなのが強みだけどその分そういう弱さもある。

ヘッダー・フッターパーツの作成

どうあがいても必要になるので先に作っちゃいました。

この辺はブロックエディタと和解しろ。難しくないと思うし…。

理解すると楽になるのはテンプレートパーツの概念でしょうか。一個作っておけば同じレイアウトのパーツをいろんなページに置けるわけです（パーツの変更内容もすべて共有されるよ）

ヘッダーフッターをサイト内の全ページに固定させたかったら、それはシステムが一括でそうしてくれるのではなく、自分の意思で手動で逐一差し込んでいくってことなんだわ！

フッターはクレジットだけなので省略。

ヘッダーについては私は前作（前作？）のレイアウトを引き継いで左アイコン（TOPリンク付き）、右メニューでやっていきました。直接エディターで編集できるのでこれもあまり言う事ないです。まあ、強いて言うなら最初にファビコンとかサイトの顔になる画像用意しとこうね♪くらいです。

注意事項として、メニューブロックの中で画像やfontawesomeのアイコンみたいなのを入れると崩れたりするっぽくて諦めました。そのかわり最近のwebの傾向としてガンガン絵文字とか特殊記号つかう雰囲気があるので、私の場合は「➕」をくっつけてメリハリを出しましたとさ。

Twitterカードをつくる

いわゆるリンクカードってやつ。これはまあまあ申請が楽でした。ちょっとムカつくので他の方法あったらそれをやってください。私のは妥協案です。

SEO対策特化プラグインの、機能の一部って感じ。

色々見せたいフォーマットを作ったら、Twitter公式の申請サイトで晒してもいいTwitterアカウントと連携させれば結構すぐ反映されます。

操作に関してはこちらを参考にしました。

ただ、マジでなんか、ブログの記事一個一個に頼んでもない採点をして文句つけてくるし、いらん通知いっぱいくるし、プレミアム課金誘導うぜえし、こいつのせいでサイトヘルスの基準が厳しくなるしで節々でムカつくのですげー嫌です。だからもっといい方法探しといてください。私はせっかちなのでこれで妥協しました。逆にSEOも気にしてるならこのお節介に身を委ねていいのではないでしょうか。

申請後に自分でURLをツイートしてみて確認（私はフォローフォロワー0の鍵垢を複数持っているので…）、OKならもう、放置。プラグインは消すと設定ごともってかれそうな気がしないでもないので一応残しています。

これに関してはもう少し掘り下げれば自分でphp書いたりで対応できそうなのですが、私は面倒回避を優先したのでしゃーなしです。

エディターに関するプラグインを決める（だいじ）

私はこのへん無頓着なので、ブログを書く時あらかじめアラートやふせんや吹き出しの装飾があるプラグインを入れておきたいなと思って以下2点入れました。

日本発の無料プラグインで優秀かつ、けっこうこまめにアップデートしてくれているものなので、長く使えそうかなあという判断です。

こちらは先述の通りテーマ側が推奨しているもので、まあ入れといてもいっか、で使ってます。

Editorのほうはアコーディオンとか、そういうパーツ部分で重宝しています。

この辺は自分と相性がいいもの、自分の作ってるサイトのカラーに合っているか、扱いやすさも含め試すしかないでしょう。途中でイラネ！つって消したりするとさ、過去の記事とかで使ってたら困るので…増える一方にならないようにしたい。だから外堀を埋めるのです…

ここまで色々設定したことでようやくスタートラインに立てた感じ。

プラグインは最終的にこちらが残っています。

プラグインの数はなるべく必要最低限を心がけたほうが良い。wordpressというシステムが更新され続ける一方でこういった拡張機能を作っているのは一個人や一企業になってくるから急に更新停止・開発中止で使えなくなったりする可能性もあるため…

見切り発車で細かいところをおろそかにして作り始めてしまうと途中で引き返せなくて困ることがあるため、こうやってガッッッッッッチガチに基盤を固めましたとさ。

次回は実制作について書きたい。しばし待たれよ。