Wordpressを使って個人サイト作成中
タイトルの通りです。
作成するに至った理由としては、現在メインで使っているとあるサーバーさんの管理に不安を抱いたからです。
前々からなんですけど、問い合わせしても返事がない、更新が止まってるとか。いつ消えられても文句は言えないので、データだけでもどこかによけておこうかなと思いまして。
絶対に、mono spaceの二の舞だけは避けねばならんのだよ！！！
……ということで、次の移転先はスマホからの更新がしやすいところという条件で探してWordpressにしました。
2024.04.11
Wordpressで同人サイトを作る話をまとめています。
次点・フォレストページ+
むかーしむかしのイタイ時期にお世話になっていたフォレストページの進化系。というかスマホ対応版。
かつて使っていたこともあるし、クセも知っているのでサイトの基盤づくりは１時間もしないままにあっという間に完成しました。本当に簡単。
スマホからの更新もまあまあ楽……だけどアプリ版が対応していないので（対応しているAndroid OSもあると思われる）、文章を書くとなると入力画面がちょっと手間で面倒に感じます。
私の場合、更新はほぼPCからなのであまり関係はないけど、やっぱ文章入力画面は別画面（１画面丸ごとエディタ画面）になってくれればスマホだけで更新しやすくなるのでそうなればいいなーって思います。
トーク系作品が作れるのもいい。まあ、でもこちらの機能に関しては正直今借りてるところでもできるしなぁ…という印象。
ただ、今から作るならサービスも安定しているし絶対ここだろうなぁ。無料だし。
Wordpressはじめてみた
皆が口をそろえてイイって言うってことはカンタンなのではないだろうか。カンタンだからこそ、現在のスタンダードになっているのでは？ だとすれば、HTML全盛期を生き、なんちゃってながらもCSS時代の波にも乗ってきた私ならよくわからん状態でも持ち前の感性で全然余裕で行けるのでは？？？
……そう思っていた自分を殴りたい。マジで甘く見過ぎていた。
なんかもう、よくわからない。
そもそもわからないことがわからないレベル。どう調べていいのかすら見当が付かない。……ので１年間くらい放置してた（というか数日で挫けて以降存在を忘れていた）。
数日前、『Wordpress 同人サイト』で検索していたらこんなサイトを発見しました。
神だ！ 神はいたんだ！！
いのりさん、本当にありがとうございます。
おかげで第一歩を進むことができました。
テーマは「Cocoon」を選ぶぜ！
サーバーを借り（スターサーバーフリー）、Wordpressをぶちこみ、いよいよサイトの中身をいじるぜ！ って時に私の悪い性格が発動しました。
上記サイト様で解説して下さってるテーマは「First」なのですが、なんかこう……変わったことしたいなーって思っちゃって。
よし！ この「Cocoon」というテーマ使ってみよう！！
かっこいいし！（注意：カスタム次第です）
オシャレだし！（注意：カスタム次第です）
……まあ、どうなるかなんて言わずもがなですわな。
右も左もわからないド初心者が、親切な解説を無視して進めれば悲惨な結果にしかならないなんてちょっと考えればわかることなのに、変わったことをしたいとかいう浅ーーーい考えで自分の首を絞めたわけです。
当然、２時間では終わりませんでした。
わかんないよぉぉぉ！！ って叫びながら２週間くらいかかりました（自業自得）。
うん。わからないことはわからないのだから、まず最初はちゃんと書かれているとおりにしようっていう教訓を得ましたね。
ただ、Cocoonの特徴として管理者画面が既にある程度整えられており、かつ分かりやすいことが挙げられます。
最初こそ○○のテーマと違うよ～～！！ と泣いていた私ですが「Cocoon設定」という独自の管理画面からイジっているだけである程度〝サイトっぽいなにか〟ができてしまう、めちゃくちゃ優秀なテーマです。
ここをこうしたい、ああしたいっていうこだわりがなければマジで冗談抜きでCSS要らず。
慣れればこれほど楽なものもないと感じます。慣れれば、ね。
あと、公式マニュアルが存在するのがいい。
フォーラムもあります。
自分が困っていることはだいたいこのフォーラムに存在しています。
むしろ無い問題が無いレベルだと思うので、単語でググって似た質問を探すことをおすすめします。
また、投稿時（記事を書く際）のバリエーションが豊富ですね。
なんかどういう仕組みわかんないけどボックスが使えるのがすごい！
見た目を同人サイトっぽくしていく
ブログっぽい見た目からの脱却
正直、どうやったか覚えていない……。Cocoonの場合、元よりフロントページが存在していたのでそれをTOPページにしたような。違ったかなー。
Cocoon設定→スキンから好きな見た目を選ぶだけでもうなんかそれっぽい感じになります。
あとは必要な固定ページやカテゴリーを作って、それらをメニューにぶち込んでヘッダーメニューに表示させるだけ。すごく簡単！
とは言え、最初に目指したのは現行サイトに似た作りなのであえてカテゴリではなく、固定ページ経由カテゴリ毎にしました。
決してカテゴリーをメニューに入れれるって気づいたのが完成してからとかでは……！ うそです。ある程度サイトが出来上がってから気づきました。泣きました。
複数ジャンルある人は、作品Aや作品Bのカテゴリを作ってメニューに入れる方がラク……かも（いちいちURLを組み込むよりかは）。
作品Aの中でも○▲と■◎……と細かく取り扱いがあった場合は固定ページ挟んでもいいし、作品Aを大カテゴリにして○▲を作品Aという大カテゴリに含まれる小カテゴリに属させて、作品Aという大カテゴリのページ飛んだ後にも○▲や■◎の取り扱いをソートするってやり方もありかなぁと思ったり。
……多分できるとは思うけど、後者はやったことないからなぁ。
フロントページの注意書き
それなりな見た目になってきて完成が見えてはくるのですが、私としては上記の「２時間で同人サイトを作る方法」にもあったように入り口が作りたい派。
そうなると注意書きが必要なのだけれど、サイト概要に注意事項にプライバシーポリシーやら何やら………長い！ 長すぎる！ 大事なことしか書いてないんだけどもっとスマートにしたい！！
というわけで、アコーディオンボックスを使用します。
アコーディオンボックスとは、なんかしらのQ＆Aとかでよく見かけるタップ（クリック）したら答えがにょきっと下に出てきて、もう一回タップするとQのみに戻る折りたためるアレのことです。
これに関しては完全にCSSの領域ですが、今はググればコピペするだけお手軽CSSが転がっているのでそれらを参考にします。
また、Cocoonのエディタにはアコーディオンボックスが挿入できるツールが備わっています。
私の画面ではタグ→トグルボックスではなく、タグ→アコーディオンボックスになっています。……なんでだろう。
また、プラグインで「Classic Editor」を導入（有効化）している場合とそうじゃない場合とでは若干やり方というか画面が異なる模様です。
ちなみに私は自サイトで使っていたものを使い回しました。
なんか変な挙動するけど致し方ない。
フロントページのみメニュー削除
注意書きもキレイに出来て余は満足じゃ……って思っていたけど、どうにもフロントページのヘッダーメニューが邪魔。
このままでは入口のリンクを踏まず、ヘッダーメニューから行き来し放題の激緩TOPページになってしまう。
ということでフォーラム検索。
フロントページ編集→カスタムCSSにコピペしたCSSを入れれば完成！
ついでに、フロントページやらその他の部分のタイトルも非表示にしました。
固定ページ用タイトル非表示CSSを追加CSS欄に貼ったり、＜H1＞等見出し非表示用CSSをテーマ→テーマファイルエディタ→スタイルシートに貼り付ければ全体的に＜H1＞タグの見出しは見えなくなります。
私はどうしてもカテゴリのタイトルを消したかったのでやってますけど、H1隠しのデメリットも当然あるので気になる方は「H1 見出し 非表示 デメリット」とか「H1 隠し SEO」とかで検索してみてください。
個人的にはぐーぐる先生にお世話になるつもりもないので、なんもデメリットもないかなと判断していますが自己責任ですねぇ。
パンくずリストのアイコンを消す
現在のページに至るまでの道筋が見える〝 パンくずリスト〟。
Cocoonでは、このパンくずリストのテキストリンクの左横にアイコンがあるのがデフォルトです。……が、なんか気に入らない。
それじゃあ、さっそく消しましょう！！！
パンくずリストとはなんぞや、どこに書けばいいかも丁寧に説明してくれています。
私がお借りした非表示方法。
ちなみに私はFont Awesome 4、Font Awesome 5両方をスタイルシートに入れています。
どちらか一方だけ書いて、何らかの不具合出たときにいちいちCocoon設定でFont Awesome 4や5を選ぶのが手間だったのでもう最初から入れてしまえーってやってます。影響はわかりません。
カテゴリー・タグのアイコンを消す
いでよ！ フォーラム！
パンくずリストでのアイコンを消した方法と似ていますね。
カテゴリー名の非表示
同じカテゴリでも問題はこっちなんだよなぁ。
現在の私の場合、作品Aという大カテゴリに、小カテゴリとしてＢ×Ｃや他×Ｃ、Ｄ+Ｅ、企画などいくつかの取扱いを入れています。で、個別ページからそれぞれの小カテゴリに飛ぶようにしました。
……のはいいんですけど、右の方にいちいち「カテゴリ：Ｂ×Ｃ」とか「カテゴリ：Ｄ+Ｅ」とかカテゴリ名が表示されるんですね。もうここはＢ×Ｃしか見えないページだと言うのに！！
よし、消すか。
さっそくフォーラムで検索………したのすが探し方が悪いのか、違う文言で質問しているのか全然見つからない。
マジで１時間くらい探したんだけど見つからない。そんなにカテゴリ消したい人間っていないのか……？
ので、独学でやってみた。
非表示のやり方は<H1>から応用すればいいとしても、肝心のH1みたいな対象となる名前（class名？）が全くわからないこと。
ソースを見たり、上記のアイコン消したときの文字列見たり、検索した上で関連しそうなワードっぽいものを全部試していってコレっぽい感じがするものを載せときます。
.entry-card-categorys e-card-categorys{
color:#fffff ;
font-size: ;
display: none ;
}
.entry-category{
color:#fffff ;
font-size: ;
display: none ;
}
※color:#fffff は、whiteでもいける……？
合ってるかはわからん。でもなんか消えた。
.entry-card-categorys e-card-categorysはエントリーカードだけでテキストリンク関係なさげなんだけど、なんか出たり消えたりするので一応入れている感じです。
一番の根幹は.entry-category{以下ry の方で、ドットがないと機能しない。なぜかは知らない。
必要に迫られた人だけ上記の方法を自己責任でやってみてもいいけど、時間がある人はフォーラムを頼る方が間違いないと思う。有識者が多いし、Cocoonを作った神のわいひら氏も回答してくれたりするみたいだから絶対利用した方が後悔はしない。
その他のCocoon設定
設定してるもので大きく変わるのがCocoonの大変なところであり、魅力であり、すっげぇしんどい部分。面白さでもあるんだけどね。慣れるまで心が何度も折れそうになった。
「スキン」 natural（グリーン）
「全 体」 フォント：Rounded Mplus 1c／16px
「ヘッダー」 センターロゴ（スリムメニュー）
「コンテンツ幅」650
「インデックス」
投稿関連情報の表示：スニペット（抜粋）の表示（スマホ端末✓）
「投 稿」
カテゴリー・タグ表示：カテゴリーもタグも表示しない
関連性：カテゴリー
投稿関連情報の表示：スニペット（抜粋）の表示（スマホ端末✓）
カテゴリー：同一カテゴリーのものを表示する
パンくずリスト設定：フッター手前
記事タイトル：パンくすリストに記事タイトル含める
「固定ページ」
パンくずリスト設定：フッター手前
「本文」
投稿情報表示設定➡投稿関連受法：✓全部外す
投稿情報表示設定➡記事を読む時間：✓全部外す
「目次」
目次の表示➡目次を表示する：✓外す
「ＳＮＳシェア」
トップシェアボタン設定➡トップシェアボタンを表示：✓外す
表示切替：✓全部外す
「アピールエリア」
アピールエリアの表示：表示しない
「カルーセル」
カルーセルの表示：表示しない
スマートフォンで表示（480px以下）：✓を外す
最後に
ここまでやっても全然まだまだ終わりじゃないです。
今後はどんどん作品を移植していって、お問い合わせフォーム作って、可能なら拍手も置いて……ってやっていきたいですね。「てがろぐ」というのも気になっているのでやってみたい、とは思っているけどどうなることやら。
あとスターサーバーフリーの更新が地味に面倒で、だったら有料サーバー借りようかなぁって思っているところ。
時代とともに消えて行ったサービスを思えば尚更、月200前後くらいでブログサービスもつけれるならそれがいいのでは？ みたいな気分になっています。
また、何かあったら追記していきます。
この記事が気に入ったらサポートをしてみませんか？