これから個人サイトを作る人のためのサイト開設備忘録

日々いろんな人の備忘録にお世話になっているので、とりあえず使ったもの＆やったことあたりを残しておきます。
引用ボックスがガチ格言向けなデザインで引用符ついててちょっと恥ずかしいけど、よくわからなくて直せませんでした。

サーバー

FC2
たまにページ表示完了までにちょっと時間がかかるときがあるかな、くらい。結局WordPressを使うことにしたのでFTP的な面倒くさいあれは一切使っていない。

WordPress テンプレート

使用したもの：EASEL

  • CSSテンプレでいじったのは、「個別投稿ページ(page.php)」のページ名表示を消すために下記のタグ周りを削除したくらい。あれ邪魔よね。
    本当はちゃんとタグにしようと思ったけど文字コード的なあれ引っ張ってくるのめんどくさかったので、下記は中身の一部だけです。それっぽいやつを消せばヨシッ。
    不安なら ! – – のあれで消してもいいと思う。伝われ。

header class=”article-header”

  • CSSテンプレをいじるには 外観 > テーマファイルエディタから触りたいテンプレを選択する。
    「個別投稿ページ(page.php)」が固定ページで、「個別投稿(single.php)」が作品ページだと思う。たぶん。作品ページのほうは結局触っていないはず。
  • メニューは当初使う予定がなかった（古き良きシンプルなfirst main bbs linkにしたかった）ものの、レスポンシブテンプレなので、スマホで見たときにメニューボタン真っさらはかっこ悪いと思い泣く泣く追加した。メニューボタンを消せるだけのCSS力もなかった。結果としてはまあ追加してよかったかなという気持ち。メニュー機能を使ってポチポチするだけで勝手にサイト上にも出てくる。便利。
  • 各小説置き場は、昔みたいに作品投稿都度マニュアルで更新しなくていいように、EASEL独自のタグで投稿記事名（小説タイトル）を勝手に一覧で表示するようにした。便利。記事を増やすと小説置き場にもリンク付きで増える。これは革命よ。（本当に？）
    代わりに古き良きR18マークとかは自分ではつけられないので、記事タイトルで明記するしかない。
    というわけで今後の管理としては基本的に投稿だけしていけば良いはず。
    更新履歴もEASELタグで更新履歴モードみたいなのがあって、あの囲い枠線とかも全部勝手に出てくる。すごい。更新履歴は作品タグの「更新履歴」と「小説」を新→旧の日付順で両方拾うようにしているため、今後は投稿すればそのリンクが更新履歴の一番上に出てくる。はず。
  • 作品タグは「小説」を親タグとして「五伏長編」「五伏短編」等を設定した。当初は作品タグではなく分類タグ？のほうでCPや長編短編を分けたけれど、小説を作品タグ「小説」でカテゴリソートをすることはないだろうなと思って作り直した。吉と出るか凶と出るかはわからない。
  • いにしえのオタクなので各固定ページのスラッグ？はmainとかlinkとかにした。小説ページは上記の作品タグ設定のときにカテゴリ単位でつけられるので、satmeg-shortとかsatmeg-longとか適当にそれぞれ設定した。作品ページはランダムに番号付与されていると思う。つけようと思えば作品ページも自分でスラッグ設定できそうだったけれど、試したもののうまくいかなかった。よくわからない。
    その前に 設定 > パーマリンク からパーマリンクの設定をする必要がある。ここはカスタム構造で「/%category%/%post_id%/」にしている。これで作品のURL末尾が/satmeg-short/15/とかになる。

SNSシェアボタン

使用したもの：AddToAny
参照したもの：
FAQ https://wordpress.org/plugins/add-to-any/#faq
カスタマイズについて https://www.addtoany.com/buttons/customize/wordpress/templates

基本的な設定はラジオボタンから選んでいくだけでできる。いろいろと遊んでみるのが吉。
このサイトでの設定は「作品の下部で表示」、ユニバーサルボタン「なし」。
FLOATINGは縦横ともに「なし」。試したけど、別に浮いてなくていいやと思ったので。
あとは設定 ＞ AddToAny から追加CSS欄に下記コードを入力した。これでシェアボタンが右下に寄る。ここまでたどり着くのに小一時間かかった。（CSS力が低いので。）

.addtoany_content { text-align:right; }

設定 ＞ AddToAny から追加JavaScript欄に下記コードを追加した。これで自分のHP名がシェアツイートに含まれるようになる。hashtagでハッシュタグも設定できるけれど私は不要だったので入れなかった。
ここまでたどり着くのに別途小一時間かかった。（ 〃 ）

a2a_config.templates.twitter = {
   text: “${title} – 寧寧大厦 ${link}”,
related: “AddToAny,Twitter”,
};

メールフォーム

使用したもの：Contact Form7、Flamingo

上記のリンクを踏む必要は全然なく、普通にプラグインページに行けば最上位くらいに出ているはず。私は添付ファイル受信の設定でちょっと苦労したものの、一般にあまり使用予定もないと思うので割愛。メールタブの添付ファイル欄に入れるタグは[file file なんちゃら]じゃなくて[file なんちゃら]だからね、という話。よく見たらちゃんと使い方マニュアルに書いてあった。
Flamingoという同じ開発者の別プラグインを入れないとWordpress上でメッセージは見られず、受信したメールはストレートに管理者メールアドレスに飛ぶ。それでいいならFlamingoまで入れる必要は全くない。

Twitter summary card

TwitterにURL投稿すると出てくるカードっぽいやつの出し方

参考：https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary
  https://cards-dev.twitter.com/validator

あれはTwitter summary cardと言うらしい！→いやOGPか！？→でもOGPでもTwitter summary cardって出てくる→よくわからんけどOGPのTwitter summary cardということにしよう！！！
という経緯があった。EASELのOGP設定を一度試したもののうまくいかず、CSSテンプレのテーマヘッダー(header.php)のheadに上記リンク先のmetaタグを入れてみたもののうまくいかず、消してからもう一度EASEL設定のOGP設定をいじったところうまくいった。初めにOGP設定したときにうまくいかなかったのはちゃんとセーブできていなかったか、セーブしたあとにページ更新をしなかったせいかもしれない。したと思ったんだけどな。
ちなみにOGPとはOpen Graph Protocolといって、TwitterにURL投稿すると出てくるカードっぽいやつの中にブログ記事の本文までチラ見せしてくれるやつのことらしい。またひとつ賢くなった。

6/14追記：作品ページのOGP上手くいかんなと思っていたけれど、日を置いたらちゃんとサマリーカードが作成されるようになっていた。よくわからんし何もしていないけれど解決した。万歳。

以上。
何かあれば気が向いたときに修正したり追加したりします。
2022/6/10 neica

ちなみに先述のSNSシェアボタンこれです↓
自動表示は作品ページのみにしているので、
これはWordPressのタグを置いています。


Posted: 06/10/2022
Last updated:06/14/2022