ワードプレスに慣れてくると、デザインが気になってきますよね。
私もその内の一人です。
ワードプレスは無料のブログソフトみたいなものですので、どうしてもデザインがブログに偏りがちです。
（ホームページ風にも出来ますが、やはりブログっぽさは拭えません）
とはいえ、やはりワードプレスで小説サイトを作れるならば、その方が楽です。
なので、小説サイトとして最適なオリジナルテーマを作ることにしました。
私と同じくオリジナルのテーマを作りたい方のお役に立てるといいなと思い、備忘録的に書きました。
目次
「Wordpressオリジナルテーマの作り方」で検索し、複数のサイトを調べる
何をすればテーマが完成するのか？ を全体的に把握しておきましょう。ざっくりでもいいです。
行き止まりかもしれない先の見えない洞窟よりも、宿屋のある村に抜け出せる大きな森に冒険に行く方が断然いいです。ゴールが見えますし。
ですので、何をするかを調べておきましょう。
そして、何をしなくていいかも知っておくといいです。
やらなくていいこと（人に任せた方がいいこと）は、どんなことでも存在します。
それを知るだけでもかなり効率はいいです。基礎力がついたら、あとはそぎ落とすって感じですね。
最初の基礎力をつけるということで、1つポイントです。
最低でも5つのサイトは調べてみて下さい。
1つのサイトを参考に進めていき、途中でどうしてもわからない部分や（PCなどの）環境の違いで手詰まり状態になることもありますので、複数のサイトを参考にしましょう。
web上だけでなく、本もとても有益です。
本は下手なことが書けないので、最新のもので自分に合ったものを一冊持っておくことをおすすめします。
参考にしているサイト
書籍
本は少し古いのですが、こちらと一番最初にご紹介したサイトをメインに参考にさせてもらっています。
調べてわかった全体的なやることリスト
- WordPressをローカルで動かせる状態にする
- ローカルで動かせるソフトをインストール、設定する
- オリジナルテーマの元となるWordpressをインストールする
- 簡単にかつキレイにコードを打ち込めるソフト（エディタ）のインストール
- どんなサイトデザインにするかネット検索し、紙に書く
- テーマカラー（アクセントカラー）を決める
- htmlとcssの知識
- htmlとスタイルシートの作成
- PHP（WP仕様）にコードを変えていく
- デザインをカスタマイズする
一つずつ簡単に説明します。
WordPressをローカルで動かせる状態にする
例えるなら、「写真の出来上がり具合をいちいち現像しないとわからないカメラではなく、スマホのカメラで撮影すればいいですよね」ってことです。
テーマをカスタマイズするのに、FFFTPソフトでサーバーへアップロードし、ネット上で更新しながら確認するなんて作業ははっきり言って面倒くさいし手間です。時間もかかります。
それならばFFFTPにアップせずとも、コードを変更した後、ブラウザの更新で確認できればそちらの方がいいですよね。
これがWordpressをローカルで動かす状態ということです。
ローカルで動かせるソフトをインストール、設定する
Macなら『MAMP』、Windowsなら『XAMPP』というソフトを利用しましょう。
（本来はローカルサーバーと言うのですが、こちらでは敢えてツールやエディタも「ソフト」と表現します）
私は『XAMPP』を利用しています。こちらの説明は、別記事でお伝えしますね。
オリジナルテーマの元となるWordpressをインストールする
WordPressの原本みたいなものです。
初めてインストールした状態みたいになります。
簡単にかつキレイにコードを打ち込めるソフト（エディタ）のインストール
メモ帳ではないテキストエディタならそちらでも十分ですが、コードというのは、ある程度整頓されていないと修正する時に非常に面倒くさいです。
|
1 2 3 4 5 6 7 |
<html> <head> </head> <body> <h1>タイトル</h1> </body> </html> |
↑↑こんな風に段落分けされていた方がマトリョーシカのような構図みたいでわかりやすいですよね。
そのためのソフトです。
私は『ATOM』を利用しています。
どんなサイトデザインにするかネット検索し、紙に書く
頭使って疲れていると思いますので、ここでテンション上げましょう。
私はやっぱり「どんな演出にしようかな～？」とデザインを考えている時間が好きです。
どんなデザインにするかは「かっこいいサイト」など検索すればたくさん出てきます。色々と調べてみるのもいいですよ。
デザインを見るだけなら『pinterest』のようなデザインサイトでイメージを掴むのもありです。私はよく参考にさせてもらってます。
こんなサイトにしたい！と思ったら、まず紙にラフ画を描きましょう。メインカラーを決めてもいいですよね。
テーマカラー（アクセントカラー）を決める
小説サイトなので基本は『白』が鉄則です。文字は『黒』
よく『黒』などの暗い色を背景にされている方もいらっしゃいますが、はっきり言って読みにくいです。
ファンが既にいらっしゃる作家さんならいいのですが、やはり読者さんに負担はかけないようにするのがサイト運営では大切なことになります。
好きな色を3色ほど選んでおくといいですね。
もし白黒以外でないという方は、以下のカラーサイトを参考にするといいと思います。（私もよく利用しています）
https://www.palettable.io/FFFFFF
html&cssを学ぶ
先にhtmlでページを作り、後からPHP形式（Wordpress仕様）にするイメージです。
サイト作成やデザインをカスタマイズするには、やはりこの知識は必須です。
私は15年くらい前に数年間、ホームページを作成していたのですが、仕様が変わってくると知識不足で手詰まります。
行き詰まってからネット検索してもいいし、プログラミングが学べるサイトでスキルアップしてもいいし、本を買ってもいいと思います。
私は『プロゲート』というサイトでプログラミングを学び、わからないところはネット検索しています。
ゲーム感覚で進められるので楽しいです。
（本も買いましたが、長いコードの場合は電子書籍でない限りかなり厳しいです）
あとは『ドットインストール』というプログラミング学習サイトも有名ですよね。こちらのサイトでは『ATOM』（コードエディタ）を利用するので、『ATOM』にも慣れてプログラミングも学べるならこちらの方がいいかもしれません。
3分くらいの動画を見ながら一緒にコードを打ち込んでいく感じです。
オリジナルテーマを作る時は、まず自分は何をやらなきゃいけないか、を考えてみましょう！
