写真家がウェブサイトを自作した時につまずいた件

このウェブサイトを作るにあたって、他の写真家さんがどのように作ってるのか参考にしようと思い、ネットで「写真家が自作したウェブサイト」と検索してみたのですが、写真家さんのサイトを紹介するサイトがたくさんヒットするだけで、どうやって作ったのか、自作しているのか、誰かに発注しているのか、などなど、全くわからない感じでした。そんな状況で実際に作ってみると、様々な壁にぶち当たってパソコンを放り投げそうになることも多々ありました。そこで、今後、自作しようと考える人の参考になればいいなあと思い、自分がつまずいた部分を書いておきます。

つまずいた点、その１。　サイトが表示されない。

このサイトは、Wordpressというソフトを使って作っていますが、これはサーバーにインストールするというちょっと変わったソフトです。私が契約したサーバーは「簡単インストール」とうたっているサーバーでしたので、インストール自体は簡単にできましたが、サーバー内のフォルダの階層構造に罠が仕掛けられていました。

このサーバーには、あらかじめウェブサイトのデータを入れる「home」というフォルダがあり、その中に任意のフォルダを作ってそこにWordpressをインストールする流れになっていました。

さて、インストールが終わってWordpressを立ち上げ「設定」のページで設定をしていると、サイトアドレスが表示されている部分が２箇所ありました。上段は、インストール時に任意で作ったフォルダまでのアドレスです。つまり、「https://ドメイン名/任意のフォルダ名」ということです。（「/」は、ウェブサイトを記述するコードで、「/」以下のフォルダやファイルに導くためのものです。）そして下の段には、当初同じアドレスが書かれていたのですが、サイトのアドレスとして上記のアドレス以外を指定したい場合は、書き換えるように書かれています。私の場合は、独自ドメインを設定していますので、アドレスの最後がドメイン名で終わるように記述を変えました。「https://ドメイン名」ということです。

これが、間違いでした。

私はてっきり、システム上は上の段（任意のフォルダまでのアドレス）が使われ、外に出る部分が下の段（ドメインまでのアドレス）になるのだと理解してしまったです。実際には、下の段に書いたドメインまでのアドレス（「home」フォルダまでのアドレス）が使われているようで、その下の階層に作った任意のフォルダが認識されていないようなのです。この間違いに気がつくのに半日くらいかかりましたが、ウェブサイトのアドレスは変えたくありません。ネットを探し回って見つけた解決策は、Wordpressをインストールした任意のフォルダと同じ階層（「home」の下の階層）に「index.php」というファイルを作り、任意のフォルダまでの案内をするためのコードを記述する方法でした。

だが、しかし！

ここにもさらに落とし穴がありました！私は以前にもHTMLとCSSを使ってウェブサイトを作ったことがあって、コードを書くためにMacに最初から入っている「テキストエディット」を使い、保存形式を「UTF-8」に設定して使っていました。今回も同じようにコードを書いて「index.php」に書き込んでいたのですが、これも間違いでした。保存形式を「UTF-8 BOMなし」という形式で保存しなければいけなかったのです。自分の使っている「テキストエディット」には、そんな形式はありませんでしたので、「Brackets」というフリーソフトをダウンロードして使いました。
この２点を直したところ、ようやく表示されるようになりました。

全く、もう。

つまずいた点、その２。サイトのデザインが思い通りにならない。

WordPressは、コードを書いて作る方法もあるようですが、そのためにはHTMLとCSSも理解しないといけませんから、素人にはハードルが高すぎます。そこであらかじめ用意されたテンプレート（Wordpressでは「テーマ」と呼ばれています。）を選んでそれを改造してゆく方法をとりました。ただ、数千個もあると言われるテーマの中でどれを選べば良いのかわかりませんでしたから、ネットでの評判も良く、本でも解説されていた「Lightning」というテーマでやってみることにしました。ブログ機能にあまり重きをおいていなかったこともあり、写真に関するページばかりを作りながらテーマのデザインをいじっていました。

この進め方も間違いでした。

WordPressには、ブログのようにどんどん新しい記事を追加してゆく「投稿ページ」とプロフィールやギャラリーなどあまり更新しないものに使う「固定ページ」という２種類のページがあるのですが、私の選んだ「Lightning」では、それらのデザインフォーマットが違っていたのです。色々デザインをいじった後で投稿ページを作ってみたら、その後、いくらデザインをいじっても自分の思い通りにならないばかりか固定ページとの統一感もなくなってしまったのです。

もし、これから作るのであれば、投稿ページ１枚と固定ページ２〜３枚だけ作り、それらをいろいろなテーマ（テンプレート）に当てはめてしっくりくるものを探した方が効率がいいようです。テーマを入れ替えるのは、とても簡単ですが、テーマを自分なりに改造するのは、とても大変です。自分の考えたデザインに１００％フィットするテーマは無いかもしれませんが、自分の写真をデザイナーさんがデザインしてくれたと考えれば、面白いと思いますよ。

ちなみに私の場合は、最終的にWordpressに最初から入っている「Twenty Seventeen」というテーマを使っています（笑）アレンジしたのは、以下の点です。
・デフォルトでは、トップページの写真の上にウェブサイトのタイトルとキャッチコピーがフローティングで表示されるのですが、これを画像に書き込む方法に変えました。デフォルトで表示される文字の雰囲気がなんだかしっくりこなかったからです。これは、非表示にする設定が用意されているので、ボタンを押しだけで済みます。ただ、Twenty Seventeenでは、画面の大きさによってトリミングが変わってしまいますので、文字を書き込む位置は、何度も試す必要があります。
・フッター（サイトの一番下の部分）に表示されていた文字列を、自分の著作権表示に書き換えました。これは、ちょっとめんどくさいのですが、ネット上にやり方がアップされているので、すぐに探せると思います。
・メニューに「HOME」ボタンを設置しました。メニューを編集するページの中にある「固定ページ」の欄には「HOME」という選択肢が無かったので、「カスタムリンク」というところで設定しました。これは、ネット上に記事が見つかりませんでしたが、自力でなんとか探し当てました。

つまずいた点、その３。細かなことにつまづく。

作る過程では、細かなことにいちいちつまづいて時間がかかります。

写真家さんがサイトを作ろうと思ったらギャラリーコーナーを設置したいと思います。ただ、Wordpressに備わっている機能だけでは、ちょっと寂しい。そこで、本などを見て「FooGallery」というプラグイン（機能を追加するソフト）を使ってみることにしました。このソフト、概ねいい感じに使えるのですが、解説文を改行しようと思うと、そこに<br/>というHTMLと同じコードを入れないと改行しません。実際にアップすると<br/>は、表示されなくなります。

なんじゃ、その仕様。

ちなみにこれを書いているWordpressの「投稿ページ」を製作する機能では、改行する時は「shift +enter(return?)」です（笑）

それから、画像をクリックすると別ページに飛ぶ構成にしたいと思うこともあるでしょう。がっ！Wordpressには、そのような機能はありません。これもプラグインをインストールしなければいけないのです。

はあ〜、思い出しただけで疲れるわ。

さてさて、こんな感じで、素人がウェブサイト作るのは、めちゃくちゃ大変でした。ただ、自分で作ったやつですので、好きな時に改造できるのがいいですね。この記事が正しいかどうかは、保証しませんが、「そんなこともあるんだ。」という程度に参考にしていただければ、ありがたく思います。

以上、写真家　西澤丞の悪戦苦闘でした！