ワードプレスで作っている個人サイトのテーマ（テンプレート）をFukasawaに変更しました。なぜなら、フルスクリーンで左側にメニューがあるレイアウトにしたかったから。
ただ、このFukasawaのカスタマイズ方法はこれまで扱ってきたテーマ、cocoonほど多く掲載されているわけではないのですね。だから欲しいカスタマイズ方法を知るために、とっても苦労したから、自分のための覚書としてブログに書いておこうと思います。
Fukasawaについて
Fukasawaはこの通り、わたしが希望した、フルスクリーンの左メニューのレイアウトとなっているテーマです。見てわかる通り、画像をおしゃれに掲載できるテーマです。
わたしの個人サイトは文字メインだから向いてないテーマなのかな、とも考えましたが、このおしゃれなデザインに強く惹かれたのです。公式ページのFAQにある通り、自由にアレンジしてもいいとあるのだから、好みのサイトになるよう変えていこう、と考えました。
そうしてWordPressの＜外観＞から＜テーマ＞を開いて、このテーマを検索して、入手してアレンジしていきました。そうして出来上がった個人サイトはこちらです。
基本的に全体の色合いを変えていません。サイトのロゴを作成してロゴを入れ替え、トップページを作成しておいた固定ページに設定しただけです。左に設置できるメニューも以前のサイトで設定したまま。それだけでもイメージ通りの個人サイトを作ることができました。
サイトロゴをCanvaで作る。
今回、作成したサイトロゴはこちらです。こちらはどこで制作したのかと申しますと、Canvaというサイトで制作しました。
Canvaは無料でも使えるデザインツールです。さまざまなテンプレートがあり、それをアレンジする形でロゴを制作することができます。
わたしは「ロゴ」という単語で検索し、出てきたテンプレートからイメージに近いテンプレートを選びました。ただ、そのままではオリジナル色が出ないから、「書籍」というキーワードで素材を検索し、出てきた素材とテンプレートを組み合わせ、ロゴを作成しました。
このCanvaというデザインツールは有料会員になると、使用できる素材が増えます。この有料会員には無料期間もあるから、試しに使ってみるのもいいかもしれません。
Fukasawaをカスタマイズ
そうして用意したサイトロゴをWordPressの管理画面で使用していきます。まずサイトロゴをWordPressの＜メディア＞というところから、アップロードしておきます。そうしてアップロードしておいたサイトロゴをサイトで表示できるようにしていくのですね。
具体的には、WordPress管理画面の一覧に登場する項目を、＜外観＞→＜カスタマイズ＞→＜サイト基本情報＞という順序でクリックしていきます。この＜サイト基本情報＞にて、ロゴファイルをメディアファイルから選択します。そうしたら左メニューの上のスペースにサイトロゴが表示されるようになります。
続いて、サイトタイトルとサイトのキャッチフレーズも入力します。ただ、サイトのキャッチフレーズはのちに消しました。サイトを表示されたときに、サイトタイトルと一緒に表示されるのですが、ちょっと気恥ずかしくなったのですよ。
それから、お気に入り登録した際に表示されるサイトアイコン（ファビコン）も用意しました。こちらも、サイトロゴと同じく＜メディアファイル＞にアップロードしておいた素材を＜サイト基本情報＞にて選択します。
今回用意してたサイトアイコンの素材は、「ハンコでアソブ」というサイトの素材です。個人サイトはわたしの書いたオリジナル小説を掲載するサイトですから、書籍をテーマに選んだ素材を選びました。
他に、＜外観＞→＜カスタマイズ＞→＜色＞という順序でクリックしたところ、リンクやアクセントの色も変更できるから、サイトロゴに使用した色（緑系）に変更しました。
続いて、＜外観＞→＜カスタマイズ＞→＜ホームページ設定>という順序でクリックしたところで、ホームページの表示を＜固定ページ＞に選択し、その固定ページをあらかじめ作っておいた固定ページ「Home」に指定しました。投稿ページも選択できるようになっていましたが、ここはいじらないままにしています。
そうして上の画像通りの個人サイトが出来上がりました。
ところが実際に見て回ったところ、困った点がふたつ浮かび上がってきました。
投稿ページのナビゲーションをカスタマイズ
そのひとつは各投稿ページの下にある、ナビゲーションです。物語を読み終えて、次の物語に進んだり、前の物語に進んだりできる便利なナビゲーションなのですが、初期設定では全ての記事に繋がるようになっていたんです。
つまり具体的にいうなら、「廃園遊戯」という物語を読んでいるのに、この「次の投稿へ」という箇所をクリックすることによって、「24時間、料理の注文承ります」という物語のページが開いてしまう、となったのです。
どうしたものか、と考え込みました。
同じ物語内に移動できるようにしたいと考えて、方法を探しました。
ところでわたしは各物語をカテゴリで分類していたのです。だから同じカテゴリ内で移動できるようにしたいと考え、ネット世界で方法を検索したのです。そうして見つけた方法は、WordPress内の＜外観＞→＜テーマファイルエディター>からテーマのファイルをいじる方法でした。
具体的にいじったファイルは、「Sigular.php」というファイルの145行目と146行目。
デフォルトでは空欄の、（）内に true という文字を入れたのです。
これによって、同じカテゴリ内の投稿に限定されるようになるんですね。結果、同じ物語の次のページ、前のページに移動することができるようになったのでした。
カスタマイズの課題は残っている。
さて、こんな感じで個人サイトは出来上がりました。
トップページにはサイトに関する説明を日本語と英語で書いています。無断転載禁止を表す英語も、ネットで検索したところ、いくつかの表現が出てきました。そうしてそれらの表現を見比べたところ、わたしにいちばんしっくりきた「Please do not share with any third party」を掲載しておきました。
や、わたし程度の文章を無断で転載する人なんているのかな、という気持ちもあったのですが、むかし、二次創作を書いていた時代に物語を活用（登場キャラクターの名前だけを変えた物語を自作として公開されていた）されたことがありましたから、せめてもの意思表示で書いておくことに決めたのです。
同様に、困った点の残りコピーライトの表示もなんとかしたいなあと考えています。
現在、個人サイトのコピーライトは「更新年＋サイト名」で表示されています。これはそもそものテンプレートで自動的に表示されるようになってるんです。合わせて、WordPress、テーマ作成者の名前も表示されるようになってます。
そちらはそのまま表示させておこうと考えているのですが、ただ、わたしはコピーライトの表示を「開設年＋深谷みどり（サイト管理者の名前）」に変更したいのですよ。なぜならコピーライトには正しい表示方法があるから。詳細はこちらのサイトに書かれています。
だからコピーライトの表記を正しく表示させたいと考えたのですが、難しいのです。
現在、テンプレートで表示されるコピーライトを消去する方法は見つかりました。
＜外観＞→＜カスタマイズ＞→＜追加CSS＞という順序でクリックして開いた場所に、特定のCSS、つまり、
.credits {
display: none;
}を入力したらいいのです。
ただ、この方法は、すべてのコピーライトを消去する方法ですから、抵抗があります。WordPressやテーマ作成者のコピーライトまで消そうと考えてないから。
ただ、わたし自身のコピーライトを変更したいだけ。
残る方法は、Fukasawaのファイルから直接、クレジット表示を指示している部分を見つけて変更する方法です。なんですけれど、該当箇所を見つけてないんですね。
だから今後への課題として残っています。
おわりに。
かくして、個人サイトの改装は終了しました。
や、いくつかの課題は残っているのですけれど、とりあえずこんな感じです。カスタマイズはどれもこれも簡単な内容です。でも実際にカスタマイズするときは検索に時間がかかりましたね。しっかりメモっておこうと考えて、PHPファイルの変更箇所は、Macのメモに保存しておきました。
それというのも、大きな問題がありましてね……。
実はわたし、テーマの子テーマを作らずにカスタマイズしちゃったんですよ……。子テーマとは使用するテーマのファイルを保存して作る、カスタマイズ用のファイルです。テーマはしばしばアップロードされます。このアップロードによってせっかくのカスタマイズが消える可能性があるから、多くの人は子テーマを作ってカスタマイズするんですよね。
が、わたしがその方法に気づいたのは、ほとんどのカスタマイズを終えたあとでした。
そういえばそういうやり方があったなあと気づいて、しまったーと思ったのですけれど、時は戻らない。まあ、いざとなったら公式から元のファイルをDLして１からカスタマイズし直すしかないなあ、と考えているところです。そのためにカスタマイズ箇所もメモにコピーしておいたから、なんとかなると思いたいところ。
以上です。長文、読んでくださり、ありがとうございました。
コメント