Cocoonカスタマイズ in 千柳亭書房

WordPressで小説サイト
闇に在りて

テーマ変更に際して柳が行ったカスタマイズその2。前段の続き、どっちかというと小ネタ集。

扉絵としてのアイキャッチ画像

 「Scribe」では、各ページ冒頭に大きな画像をどん!と置いて、そこへタイトルも被さるというスタイルでした。柳としてはこの画像に言わば小説の扉絵的な役割を振っていたのです。
 この画像は「Scribe」においては「背景」という位置づけでしたので、最初はプラグイン「XO Post Background」、WordPress5.5以降にそれが機能しなくなってからは「Full Background Image Manager」でページごとに背景を設定してきました。

そのあたりの詳細はこちら

 「Cocoon」は、アイキャッチ画像が扉絵として丁度良い感じでした。キャプションを挿入するよう設定する(【Cocoon設定】→【画像】タブ)こともできるようです。「アイキャッチ」というものの機能も勘案すると、どうやらこれが便利だという結論に落ち着きました。
 アイキャッチ使用画像の至適サイズとして、公式サイトから幅1200×高さ630ピクセルという数字が提示されているので、ここは素直に従うことにしました。具体的には画像管理プラグイン「Imsanity」の設定を上記に揃えて一括リサイズ。これで見た目が整った上に画像分の容量も圧縮することが出来ました。
 これで、以降は背景変更用のプラグインを切ることができます。

ショートコード“new_list”

 今まで小説の目次を作るのに利用していた子ページを一括表示するプラグイン「Child Pages Shortcode 」「CC Child Pages」…これも、「Cocoon」に装備されているショートコード“new_list”で代用できそうです。具体的にはコード“new_list”で新着記事がリスト表示されるわけですが、表示のオプションとして

count=”20″     //表示アイテム上限数
type=”border_square ” bold=1 //囲みの指定
cats=”4″     //カテゴリ指定…カテゴリIDを一覧から拾う
post_type=”page”  //表示対象となるコンテンツを指定(page/post/カスタム投稿タイプのスラッグ)を入力
order=”asc”    //並び順が昇順か降順(asc/desc)
snippet=0     //抜粋文を載せる=1、載せない=0
offset=1     //読み飛ばすアイテム数、デフォルトは0
arrow=1      //矢印表示をさせるか

などがあります。それでもって、表示としては

INNOCENT SOUL Ⅰ
INNOCENT SOULⅡ~Knight of Light~
INNOCENT SOULⅢ ~闇に在りて導く者~
INNOCENT SOULⅣ ~Existance of Even~
INNOCENT SOULⅤ ~The End of the Innocence~

てな感じになる訳です。(例はNovel-Ex.の「INNOCENT SOUL」シリーズ)
 offsetというのは一覧の中に表示中のページがよみこまれてしまわないようにするためのもののようですね。
 抜粋(説明文)は場合によって入れてみたり入れなかったり。表示にしておくと、手動抜粋文か、それが入力されていなければ自動抜粋文が表示されます。
 概ね、目次用としては便利に使えそうなので…これで子ページ表示用のプラグインも整理できます。

タグクラウドの利用法について

 タグという仕組みに関しては柳、実のところ今までかなり管理がルーズでした。そもそも、本稿「WordPressで小説サイト!」以外、タグが機能しそうなコンテンツってありませんからね。それにしたってプラグインの名前をカタカナとアルファベットで別々に書いていたり、略称と正式名称で書いていたりという始末。その上どこにどういうタグを設定したかというのをあまり気にしていなかったのです。
 ところが「Cocoon」を導入してみると、タグクラウドというモノがいとも簡単にサイドバーへ設定できる。

 こんなやつですね。
 タグクラウドとは、有り体に言えばサイト内で使用されているタグ一覧がざらっと表示される仕組みです。記事を最初から全部読まなくても、上記のように並んでいるタグの中で気になるワードをポチってそのタグを持つ投稿一覧を読み出せるという仕組み。…こりゃ便利。なるほど、タグってこういうふうに使うんだ!と今更な発見をしたのでした。
 そんなわけで、今回投稿ページはサイドバー有の仕様にして、サイドバーにタグクラウドを表示させています。どっちかというと、タグの重複がみつかって整理できたのでサイト管理者側からしても非常に助かるシロモノでありました。

ボックスいろいろ

「Cocoon」には装飾のためのボックスがたくさん準備されています。囲みだけでなく、POINT、TIPS、CHECKなどのタブをつけられるので、統一感を出すにはいいかもしれませんね。それとは別にラベルボックスというラベルを自由に定義できる囲みもあるので、結構使いでがありそうです。

アイコンボックス…10種類ほどのアイコンをトップにしたボックス。メモ、コメント、OK、NG、Good、Bad、プロフィールなどのアイコンがあります。

案内ボックス…背景色&文字色で目立たせるボックス

シンプルに囲みボックス…ボーダー、囲み、文字色がエディタから設定出来ます

付箋風ボックス

見出し

アイコン+見出しの囲みボックス

見出し

タブ風の見出しがつけられるボックス

見出し

大きなボックス見出し

選択出来る見出しタブのボックス

O&Aのフォーマット

Q
質問のボックス
A

答えを入力するボックス

タイムラインのフォーマット…手順書に使えそう、ということは本稿「WordPressで小説サイト!」でも今後出番がありそうです。

タイムラインのタイトル
  • ラベル
    タイトル

  • ラベル
    タイトル
千柳亭春宵
千柳亭春宵

吹き出しフォーマット。インフォメーションにも使えそうですが、対談ってのもアリかも。

???
???

え、いいの?出てきても?

テンプレート機能

 テンプレートという機能があります。概ね再利用ボックスに似た機能と思われますが、段落ボックスの中からでも呼び出せるという利点があります。これを何とかショートコードの呼び出し(要は註釈)に使えないかと考えているのですが…未だ思案中。

CocoonでのCSS

 一番面白いと思ったのは、ページごとにカスタムCSSが設定出来ることです。
 エディタ画面を開くと【SEO】の下に【カスタムCSS】というボックスがありまして、そのページにだけ適応させるCSSを入力することが出来るのです。柳がこれを何に使ったかというと、「アイキャッチの非表示」「記事タイトルの非表示」です。

アイキャッチを非表示にするCSS
.eye-catch {
display: none;
}
記事タイトルを非表示にするCSS
.entry-title {
    display: none;
}

 演出上、タイトルやアイキャッチ画像をトップではなく少し下げた位置に掲示したい場合、本来のアイキャッチや記事タイトルを表示させないということが出来るのは有難いです。コレを援用すれば、特定のページだけ黒モードに切り替えるということもできそうです。まだトライしてませんが。

まとめ!

 テーマ変更をしたことで、懸案事項がいくつか片付いたのですが、まだまだ課題はあります。

ブロックエディタ…もうちょっと使いやすくならないのか?

よく使うブロックを優先的に表示する、ないし使わないブロックを非表示に出来ないか?

使いたいブロックを探すのにひたすら下へスクロールしなければならないというのは難儀なものです。実直に、使わないブロックが多すぎて邪魔でしょうがない。検索ボックスもあるのですが、どうにも一手余計に踏む感じがあるのです。何か良い方法ないもんでしょうかね。

段落ブロック内にショートコードを差し込むのに、もっと簡単な方法はないか?

いまだに手間だなぁと思っているのがショートコードの挿入。註釈をいれるためのショートコードは現在、再利用ブロックに登録してコピペ、という手段をとっていますが…どうにも迂遠です。いっそブロックエディタに任意のショートコード挿入のためのボタンでも組み込めないもんでしょうか。ルビが出来るんだから、やってやれなくはないような気がするのですが。

なあんて…まあ、やりたいことが次々と出てくるから楽しいんですけどね。
でもまあ、そろそろ本腰入れて小説を…(笑)

20230213

20230221追記(宿題)

 「よく使うブロックを優先的に表示する、ないし使わないブロックを非表示に出来ないか?」…ちょっと調べたらあっさり出てきました。

よく使うブロックを優先的に表示する

 ブロックエディタの右肩、三点リーダの【オプション】→【設定】(一番下)→【ブロック】(中段)→【ブロックの操作】で「よく使用されるブロックを表示」にチェックします。

使わないブロックを非表示にする

 ブロックエディタの右肩、三点リーダの【オプション】→【設定】(一番下)→【ブロック】(中段)→【ブロックの操作】→【表示ブロック】から、表示したくないブロックのチェックを消します。(ご親切にもいくつ非表示にしているかちゃんと表示が出ます)

 ちなみに上記設定は別に確定ボタンのようなモノはないので、チェックする、ないしはチェックを外したらそのまま戻ってもらってOKです。(【設定保存】的なボタンを探しまくった莫迦がここに…)
 これで随分とすっきりしました。よかったよかった。

コメント