創作サイト作り方

Rolf Reeves
Oct 30, 2023
17 min read

Word Pressで創作サイトを作った備忘録その7【EASEL編】

CSS及びPHPファイルへの変更は全て子テーマに記載していきます。変えたい記述を本テーマから丸ごとコピペして書き換えたり書き足したりするのが楽かと。どこ変えればいいかわからん！！という人はデベロッパーツールを駆使していきましょう。どのファイルの何行目の記述かまでわかります。使い方はググってください。私の場合はheader系の記述をdisplay:noneに変えまくって全て非表示にしました。人によってはサイト名だけ消したいとか、縦幅を変えたいとか色々あると思うので好きなように調整しましょう。

#○○ ul < list-style-type: none; display: flex; justify-content: center; align-items: center; width: 100%; > #○○ ul li < display: inline-block; margin: auto; vertical-align: middle; color:#67c1ec; list-style: none; list-style-image: none; font-size: 1.0em; >

あとヘッダーとコンテンツの間の空白が気になったので#contentをmargin-top:0にしました。

見出しを変える

基本テーマファイルエディターから編集していますが、うまく反映されないな？ってときはカスタマイズの追加CSSに記述するとうまくいくことがあります。なんで？あとブラウザのキャッシュクリアも忘れずに！

前後の記事ボタンを小さくする

.pagination.single a < padding: 15px 15px 15px 30px; >

いいねボタン改を実装する

『EASEL』の機能ではありませんが、キャラ紹介編でも少しだけ触れたいいねボタン設置プログラムについて少しだけ書かせていただきます。こちらのプログラムも『EASEL』の作者であるガタガタ様によって作られているため……神……？ Word Pressにもいいねボタンを追加するプラグインはありますが、デザインがとてもかわいいのと設置が簡単なためこちらをお借りしております。

と記載されている通り、自己責任でお願いします。現在、筆者のサイトでは問題なく作動しております。

タグを隠しているため全く伝わらないんですが、タグ同士の間隔が狭く感じたためspan.tag aにmargin: 0 5px;を追加しました。

EASELにはほぼ必須な『Classic Editor』簡単にセキュリティ強化できる『SiteGuard WP Plugin』は特におすすめです。

他には字書きなら『Advanced Editor Tools (旧名 TinyMCE Advanced)』絵描きなら『FooGallery』『EWWW Image Optimizer』辺りは入れておいて損はないかと。

夢小説サイトを運営しよう。

私は古の夢女子である。夢小説を読み、夢小説を書く夢女子である。そして今年の三月下旬、私はとある作品に熱烈にハマり、サイト運営を試みることにした。ただ私は、サイト運営を一度『難しいあまり』諦めた身だった。そう。難しいのだ。サイトを作ることが。最初にして最大の難関が、サイトを作ること。それでも私はインターネットを駆使し、夢サイトを運営することに今、成功している。諦めないでよかった。最近では、pixivで夢小説を見れたり、投稿したりする文化が主流になってきた。だけど、自分のサイトを自分で作ってそこに作品をあげることは、凄く達成感があって愛おしいものに感じる。 pixivがダメなんじゃない。それは分かって欲しい。手軽に夢小説に触れることができるのも、いい時代になったなとしみじみ思う。だけど自分好みのテンプレートでサイトを飾ることができ、一生懸命に打ったコードで完成したサイトを見れば、サイトを運営する楽しさを知ってしまう。そうすればもう、戻ることはできない。私がこれまで一生懸命に学んだことをここに記して、これからサイトを作ろうと思っている人の力になることを祈る。

サイトの種類

まずサイト運営をどこでしようかと悩む人もいると思う。私もこれはかなり悩んだ。後々作って分かったことは、あるサイトではできることもあれば、あるサイトではできないこともある、ということ。当たり前やん、と思われるかもしれないが、いやこれが本当に忘れがちだったり分からなかったりするのだ。そういう面では、最初のサイト選びはかなり大事なのかもしれない。だけど今回私が説明したいのは、それとは違ったサイト運営内での用語とかの方で。はっきし言えば、どのサイトで作ろうかな〜と悩んでも、難しいと言われてるところで作れば必ず問題となってくるものは似てくるもの。私はまじに最初、全ての言葉の意味がわけわかめ状態だった。調べても分からない状態な上、夢小説を運営してる人って他人に厳しい(イメージ)せいで、怖がって作るのをやめてしまうこともしばしばな気がする。知らんがな。だからこそ、私がなるべく分かりやすくまとめることにしたってわけなんす。 (あとは私がボケた時に読み返したら、サイト運営も楽だから。)

でもさ、目次でサイトの種類とか、大口叩いて説明しないのもなんだかな〜って感じがするから、適当に貼っていきますね。まず、初心者向けと呼ばれているサイトから行ってみよい。↓↓↓

私はぶっちゃけて言うとここら辺でも躓きました。フォレスト様だったかな……。とか言うと躊躇う人出そうなので、そこら辺は自分で色々調べてみてね。あくまで私が躓いただけだから！！！！！でも断然HTMLコードを打たなくていいってなると、楽さが半端ないと思います。楽。(多分。) どうやら簡単だけど、割と手を込ませて作ることもできるみたい。あのね…申し訳ないのは全くここら辺のサイトの説明を私は(作ってないから)できないのでね…。自分で調べてみてね。調べると出てくるよ。

で、私は初心者向けのフォレスト様で躓いたくせに、どうしても自分でテンプレートを使って(お借りして)、可愛くしあげたいんや〜〜！！！ってなったんです。だって、自分のサイトだもの！！！！可愛くしたいじゃん〜〜〜！！オタクだけど乙女だもん。夢女子だもん。すげえ語弊ですが、別に上級者向けじゃないからと言って可愛くできないわけではないということは分かって欲しいです。そのサイトサイトによって、できることは本当に変わってくるんですよ。これはもう、やってみるしかないよね。やってみて。

でね、私は私が一番親しみの深い、ナノ様で夢サイトを開設することにしたんです。エロ広告がかなり多いんだけど、私はそういうの読む側の人間なのであんまり気にしないタイプだったのでね…。そう、サイトによっては広告があったりなかったりするから、色々と気になる人はそれも自分で調べてみてね。まじで優しい人は全部ちゃんと説明してくれとるから！私はそこまで優しくない。だって打つのめんどくさい。

では問題の、サイト内の用語について説明していこうと思う。私の都合上、ナノ様限定になってしまうのは、色々と許して欲しいよ。

ナノ内用語説明

1.トップページ編集(内含め)

そもそもトップページってなんやねん。て思ったそこのあなた。ランキングサイトとかで、サイト名がボン！って何個も載っとるやろ？それ押して、いっちゃん最初に飛ぶページあるやん。あれのこと。(エセ関西弁ごめんなさいね)あれですあれ。それがトップページのこと。てか名前でもう分かりそうでもあるよね。トップページ言うとるし。トップのページってこと。そこを編集できるから、トップページ編集。

①基本設定これ、なんか仰々しいなとか思うけど、ただのサイトの名前を打っとくとこ。というか、タイトル名(まあつまりサイト名でいいんだと思います)だからね。うん。多分。私はそうしてるし。基本設定は他のページ設定でも出てくるから、どんどん馴染み深くなってくるよ。小説を乗っけようかねってなった時にも出現するから、そしたら小説名を打っときゃいいんですよ。(長編とかね) はい次。 (※2021/09/06現在の文章付け足しです。全然気付かなくて割と最近『やべえ！』と気付いたことがあるんですが、私は基本iPhoneで作ったりPCで一応確認したりしています。ほとんどiPhoneで確認して執筆、作品をあげたりしているんですが、Safariのタブってありますよね。タブに題名付いてますよね。分からなかったらタブがいっぱい並んでるところを確認してみてください。そこに出される題名がこの基本設定なんですよ。だから自分だけ分かればいいやみたいな感じで適当に名前を書くと、その状態で表示されます。まじで気を付けてください。私はそこまで酷くないにしろやらかしました。大変恥ずかしいしなんで今まで気付かなかったのか…？終了。)

②全体レイアウトこれ一番大事ね。ここにHTMLコードというものを打ち込みます。 (HTMLコードが何かについては自分で調べてね。でも面倒だと思うから簡単に説明すると、私達がサイトに入った時に見るあの構図を作り出してくれるもの、的なやつ) 大体、テンプレをお借りすると思うのであまり自分でする必要はないんだけどね。でもメインページを作ったり、インフォメーションページを作ったり、人によっては色々と作り直すこともあると思うのよ。そういう時は自分で弄るんだよ。大丈夫。コードについても簡単にまとめておくから安心せい。最初はレイアウトを見ても、コードが沢山書いてあって全く意味が分からないかもしれないけど、やっていけば慣れる。これはまじ。私がそう。自分の目で見て、どれが何に通じてるのかをちゃんと見れば分かってくるから。そのために保存しないでプレビューっつーのがあんのよ。慣れるまで確認しとき。で、大体単純なものでよければそんなに難しくないから、安心してね。私は単純なことしかできない。だから難しいことは説明できないししないから！！！！悪いな。でもそれは自分で勉強してみてね。それも楽しいよ。私も頑張ったんだから、みんなも頑張ってくれ。

③テンプレート適用テンプレから探す言葉通りよもう。素敵な方々が用意してくれた素敵なテンプレートをお借りできます。自分好みを見つけなね。

④その他設定 HEAD・HTML詳細これはもう凡人は弄らん方がいいやつ。私はたまにしか弄らない。まじで分からない時は弄らない方がいいよ。触らぬ神に祟りなしだよ。まあ、押してもいいのよ別に。見るのはただだもん。怖がらせてごめんね。押していいよ大丈夫。そしてテンプレートを作ることに目覚めたのなら、素敵なテンプレを沢山世に生み出せばいいんです。そしてここで出てくるのが、HTMLコードと違う存在。 CSS。(アメリカのドラマで出てきそうな) これはあれよ。サイト(ウェブ)内のスクリーンに表示される際の色、サイズ、レイアウトの表示スタイルとかを指定するもの。らしい！！まあ、CSSあってHTMLコードあり。HTMLコードあってCSSありみたいな？多分そんな感じだと思う。(適当) 私は作んないから分かんないもーんという言い訳を添えておこう。ん〜、私がこれを弄る時は、そのページ内の字をもう少し大きくしたいなとか、そういう時だけです。使い方は多分あってると思う。できてるから。(適当) はい次ー。

2.子ページ管理

これさ、実は私もよく分かってないところがある。(まじでごめんなさい) 子ページの存在理由ってなんなの？ぶっちゃけいらなくね…？無くても作れてしまうんだもの… 逆に私が説明して欲しい。まあ、そんなこと言ってる暇はないので説明します。子ページはなんぞや？と思ったあなた。

例えば、あなたが挨拶や注意書きを書くためのページを作りたいなと思ったとします。(夢小説は二次創作なので、そういう注意書きは必須ですよ！！) トップページに『info』だとか『必読』だとかの名前で、よく存在するアレです。それをポチれば、文章が書かれてるページに飛びますよね。それ。それを子ページで作成。的な。ちなみに私はそういうの読まれない率が高いので(ダメだよ！！！)、もうサイトに入った瞬間目に入るところに書いています。だからインフォメーションを来た人は押す必要がないという。つまり子ページ作る必要がないという。そういうのはすごく楽なのでオススメです。 (つまりトップページに注意書きを設けるってことです。皆さんも見かけたことあると思います) あとは、夢小説を載っける際に、◯という作品と×という作品、二つを載っけたサイトにしたい！って思ったとするじゃないですか。三つでも四つでもなんでもいいんですけど。その時に、◯と×の作品を分けるための分岐点として子ページを使ったりします。はい。すごい説明口調。 (それもおそらく皆さん見たことあるんじゃないかな)

私はそういう面倒なことをせずに、思い切り全部一つにまとめているので、子ページを使ったことがないんです。でも、それって人によってどういうサイトの構造にしたいかで変わってくるじゃないですか。私はとりあえずできればそれでよかった。そう。それでよかったんや。自分が作りやすくて、来た人が見やすいのが一番いい気がします。読み側の気持ちとしてはね。それと、サイト内の構成なんて簡単に思いつかないよ！！っていう人は、いつも夢小説でお世話になっているサイト様たちが、一体どんなサイトの作り方にしているのかちょっと見させてもらってください。それをベースに、これいいなあれいいなっていうのを自分のサイトに反映させればいいだけだからね。私はそうしたよ。

3.機能管理

①機能作成これは本当に、いろんな機能を作成できるのよ。機能って言ってるだけあって。私達が普段夢小説サイトにお邪魔する時、色々と夢小説以外のコンテンツ(?)が設置されてたりすると思うんだけどね。

例えば、執筆状況のブログだとか、アンケートだとか、拍手だとか、メールを送れるフォームだとか。勿論、小説もね。そういうものを全部作れてしまうのが、機能作成なんですよ。はい。お分かりだね。

私はこれの機能で全部、夢小説の短編も長編もページを作ってるよ。私のサイト内の説明をするならば、機能作成で作った小説機能で、とりあえず夢小説の集合場所を作る。そこで名前変換をできるようにして、短編小説を置いて読めるようにしてるんだけど、じゃあ長編小説とかはどうするん？ってなった時に、また機能作成で小説機能を作るわけよ。で、そのリンクを貼り付けるというわけね。（多分、意味分からないと思うから、ちゃんと後で説明するね）小説機能を何個も作って、個別に長編機能を作成するのを私はオススメします。その方が、長編に合わせてテンプレを変えられるのでオススメ。一々可愛くできます。別に変えなくていいよめんどくせえって思う人は、全部まとめて一つの小説ページに載せちゃうのもありだと思う。まじで、その人の好みだからね。でも、私は前者で作っとりますのでね。後者については面倒なので説明はしません。一応私も疑問に思ったので、ググってみました。出てきたので、後者のやり方で小説をまとめたい方は自分で調べてみてね。大体、章を作るで分けることができるよ。

なんだそのまどろっこしいやり方は！もっといい方法があるぜ！って方がいたら、ぜひ教えてください。お願いします。

あとね、ここでもタイトルを基本設定（出てきたな）から変えることができるから、変えた方がいいよ。どれがどの機能なのか分かんなくなったりするからね。（初回は全部、小説とかブログとか、機能名のまま保存されるからね）

で、全体レイアウトは#novel#って恐らく書いてあると思うんだけど、それはそのままにしておいてね。もしあなたが、誰かのテンプレートを提供してくれているサイトからHTMLとCSSをコピって来た際に、全体レイアウトに#novel#って書いてなかったら、打っておいてね。

②表紙レイアウトこれは、そのページに飛んだ時に一番最初に目に入るところのレイアウトね。一番ミソの部分よ。

③目次画面、文章画面レイアウトここは凡人が弄らない方がいいところっす。また文字の大きさとか、文章が載る部分の左右幅を開けたりしたいなとか、自分で弄りたいなってなった時に、やってみるのもよろしいと思う。見りゃ分かると思うが、文字の大きさはfont-sizeとか書いてある近くの数字弄っとけばなんとかなるよ。多分。まあ、保存しないでプレビュー押せば、保存されないから（当たり前）やべえミスったとか思ったら全部ブラウザバックすりゃいいのよ。

④コメント設定ごめん。コメント設定はやったことないから分かんないけど、多分簡単に設定できると思うよ。あんまりこれ使ってる人をそもそも見かけないというか。大体の人は、フォームからメッセージを受け付けると思うんだよね。まあ、全部人によります。

⑤夢(ドリーム)小説設定これ、いっちゃん大事なやつですよね。ちゃんと説明しますね。まず、変換設定を作成するを押すと、変換されるタグっていうものが出てきますよね。このタグ、ナノ様で夢小説を作成するなら夢小説内に出てくる夢主の名前とかは全部このタグを使用して書くことになりますから、気をつけてね。タグってなんだよって思ったあなた。簡単に言えば#で囲んだもののことだよ。多分。とりあえず小説内で夢主の名前を「ももこ」に設定するとしますよね。（まあ大体は「名前」とかだけど）そうしたら、その夢小説内で「ももこ」の表記は「#ももこ#」にしておいてください。

変換されるタグに、「#ももこ#」と入力し、変換後の名前に「ももこ」と入力します。（説明は、なんか説明したいこととかあれば書いてもいいと思います）そうすると、小説内では「#ももこ#」が「ももこ」と表記されることになります。これで自動的に読み手が名前変換した際に、その人が入力した名前になります。すごーい。

⑥名前変換画面レイアウト名前変換されるところのレイアウトですね。大体は、テンプレ使用した際はここおかしなことになったりしてるので、レイアウトを直してあげてください。とか、言っても分かんねえよ！て感じだよね。説明しよう。でもね、このレイアウト設定するページの下に、ナノ様の独自タグっていうものがありますよね。これをコピってペーストしときゃいいんですよ。コピペ。タグっていうのは、URLとかを打たなきゃいけなかったりした時に、役に立つんですけど、それはまたあとで説明しますね。でもさ、見てみたらナノ様全部説明してくれてるんだよね……。これ以上私がどう説明すればいいのか分かんないよ……。

簡単に説明するね。私達はここまでに来る間で、「#ももこ#」って変換設定を作成したでしょ？それでレイアウトにはそもそも#formInput_#ほにゃらら##っていうのがあると思うのよね。（無かったとしたら自分で打て。コピペしろ！）それをね、ほにゃららの部分をももこに変えるのよ！つまり、#formInput_#ももこ##ってことね。おそらく名字もあるだろうから、同じように作ればいいだけ。おっけー？次行くよ！あ、保存しないでプレビューで確認してね！

4.素材管理

素材管理ってなんなんだよって、私も最初思ったから安心して欲しいよ。そもそも素材ってなんなんだよ？ってね。でもね、言葉通りだった。素材だった。サイト内に画像を貼っつけた構図を作りたいなって、思ったとするじゃん。例えばだよ？長編の題名に「うさぎ」って文字を入れたから、その長編のページにうさちゃんの画像を貼っつけとこうって思ったとするじゃん。可愛いから。そうしたら、まずここで素材アップロードを押して、自分のパソコンだかスマホだかなんだかに入ってるうさちゃん画像をアップロードする。そしたら勝手に機械がアップロードしてくれるわけよね。ここで素材のタイトルは別に変えても変えなくてもどっちでもいい。数字の羅列になるか、「うさちゃん」って変えたら、うさちゃんって表示されるからね。タイトル変えるメリットは、素材が並んだ時にどれがどの素材なのかっていうのがすぐ分かるところね。デメリットはない。メリットしかない。それを使いたい小説機能の表紙画面レイアウトとかに貼っつけるんだけど。何を貼っつけるんだよって思ったよね。あのね、その素材を押したら貼り付け用タグっていうものがあると思うんすよ。それをコピーして、起きたい場所に貼っつけとくんよ。もうそれだけ。それだけなんです。はい。それだけだからそれ以上の説明ができない。レイアウトをどこかのサイトからお借りして、そのテンプレ内に使われている画像を自分で保存しなきゃいけない、とかなった時によく使います。多分。

5.ホムペ設定

これなんか説明することあるかなって思ったんだけど、あった。めちゃくちゃ大事なことがあった。夢小説サイトって、絶対絶対絶対に、検索避けをしなきゃいけないんです。もうなんでとか言われても、これがルールだから従えとしか言いようがないよね。

ホムペ設定を押した時に、「アクセス禁止・検索避け」ってのがあるよね。で、一番上に検索ロボット（検索避け）ってあるでしょ？それをポチって保存しておいてね。絶対忘れないでね。あとは必要に応じて自分で色々と見てみてね。基本ここら辺を抑えてれば、やっていけると思うよ。

終わりに

こんなものかな〜と思います。分かり難かったらごめんなんだけど、頑張って解読してみてほしい。覚えておくべきだったり、覚えておくとはちゃめちゃに便利なHTMLコードはまた記事を作っておくから、そこから見て欲しいよ。きっと、他のサイトも少し違えど大体似たような作りになってると思うんです。だから、これを見ながらナノ様以外で作るのも、ワンチャン可能なんじゃないかな？って思います。少しでも多くの人に、夢小説サイトを開設して欲しいから！！私の願い！！！みんな少し大変でも、頑張って作ってみて欲しい。古の夢女子としては、やっぱりサイト文化が廃れていくのは悲しさがあるから……。今まで読む専だった人も、これを機に夢小説を書こうかな！て思ってくれたら、とても嬉しい。勿論、pixivにあげてくれてもとっても嬉しいよ。この記事が誰かの役に立つことを祈って、とりあえず締めようと思います。一緒にサイト運営、頑張っていこー！！！