💡【はじめに】小説のメタデータをCSSで彩ることのメリット
ブログで自作小説を公開する際、本文の前に「あらすじ」や「登場人物」「目安読了時間」などの情報を載せている方は多いと思います。
しかし、それらをただの箇条書きで済ませてしまっていませんか？
読者がページを開いた瞬間に目にする「導入部分（メタデータ）」のデザインを作り込むことで、読者を一瞬で物語の世界観へと引き込むことができます。
今回は、当ブログで連載中の短編小説『怪人・ウツボ男爵の誤算』で使用している、**「設定資料・あらすじボックス」**のCSSカスタマイズ術を大公開します！Cocoonユーザーの方ならコピペですぐに実装可能です。
🎭 デザインのコンセプト：昭和特撮 × 純文学
『怪人・ウツボ男爵の誤算』は、「昭和の特撮ヒーローと怪人のパロディ」を、あえて「重厚な純文学風」の筆致で描くという少し変わったコメディ小説です。
この絶妙なギャップを表現するために、以下のようなデザインコンセプトでメタデータボックスを作成しました。
- 重厚感とレトロさの融合： 背景は深いダークグレーにし、昭和のブラウン管テレビのテロップや、極秘の怪人設定資料ファイルを彷彿とさせる外観に。
- 純文学の品格： フォントを明朝体に指定し、読者に「これは真面目な文学作品である（※内容はコメディですが）」という錯覚を与えます。
- 情報の整理： 項目名（ジャンルや登場人物など）と内容が綺麗に揃うように、CSSのグリッドレイアウトを活用して美しく整列させています。
実際の表示イメージは、以下の第1話のページからご覧いただけます。
👇短編小説『怪人・ウツボ男爵の誤算１』～孤独な悪党～
🛠️ 実装手順
設定方法は非常にシンプルです。
- CSSの追加： WordPressの管理画面から「外観」⇒「カスタマイズ」⇒「追加CSS」を開き、後述する【CSSコード】を貼り付けて保存します。
- HTMLの配置： 小説記事の編集画面で「カスタムHTML」ブロックを追加し、そこに後述する【HTMLコード】を貼り付けます。文字の部分をご自身の小説に合わせて書き換えてください。操作手順は次の通りです。
① ブロック追加の「＋」ボタンをクリックする。
② 検索欄に「カスタムHTML」と入力し、出てきたメニューを選択する。
③ 記事内に四角い入力エリアが表示されるので、そこに後述するHTMLコードを貼り付けます。
💻 コピペ用 HTMLコード
記事の冒頭（カスタムHTMLブロック）に貼り付けるコードです。
【HTMLコード】
💡 【解説】HTMLコードの書き換えポイントと仕組み
上記のコードをコピペした後は、ご自身の小説に合わせて文字の部分を自由に書き換えてください。ここでは、編集時のポイントとHTML構造のちょっとした工夫を解説します。
① 変更するのは「黒文字」の部分だけ
<div class="..."> などのアルファベット部分は枠組みを作るための命令（タグ）なのでそのまま残し、「第1話」や「約4分」「あらすじの文章」など、画面に表示させたい日本語の部分だけを打ち換えてください。
② ハッシュタグを増やしたい・減らしたい場合
一番下の <div class="utsubo-meta-tags"> の中にある <span class="utsubo-tag">#〇〇</span> の行を増やしたり消したりするだけでOKです。いくつ並べても、スマホの画面幅に合わせて自動的に綺麗に折り返されるようにCSSで設計しています。
③ 箇条書きになぜ <dl> タグを使っているのか？
「目安読了時間」などの項目を並べる部分には、よくあるリストタグ（<ul> や <li>）ではなく、あえて <dl> <dt> <dd> というタグを使っています。
これは**「項目名（dt）と、その内容（dd）」をセットで定義するためのタグ**です。小説の設定資料のような構造に最も適しており、検索エンジン（Googleなど）に対しても「ここは小説のデータが綺麗にまとまっているよ」と正確に伝えることができる、見栄えだけでなく中身（SEO）にもこだわった設計です。
④ クラス名についている「utsubo-」って何？
コードの中にある utsubo-meta-box などの名前は、WordPressやCocoonに元々入っているデザインと名前が被ってしまい、意図せず画面が崩れてしまう事故（CSSの競合）を防ぐための**「オリジナルのお守り（プレフィックス）」**です。今回はサンプルとして私の小説名（ウツボ男爵）から取っていますが、ご自身のブログの略称などに一括置換（例：myblog-meta-box など）していただいても全く問題なく動作します。
💻 コピペ用 CSSコード（解説コメント付き）
「追加CSS」に貼り付けるコードです。ご自身のサイトのテーマカラーに合わせて、色などを自由にカスタマイズしやすいようにコメント（注釈）を入れています。
【CSS】
※コードのバージョン管理と見やすさを考慮し、ソースコードは『GitHub Gist』にて公開・管理しています。
枠内のコードをそのまま選択してコピーするか、右下の『view raw』をクリックして表示される画面から全選択（Ctrl+A）でコピーし、Cocoonの『追加CSS』にそのまま貼り付けてお使い頂けます。
🎨 応用編：あなたの小説ジャンルに合わせたカラーカスタマイズ術
今回ご紹介したCSSは「ダークな特撮・純文学風」ですが、カラーコード（色の指定）を少し書き換えるだけで、全く別のジャンルに合わせることができます。ご自身の小説の世界観に合わせて、以下の部分をカスタマイズしてみてください。
パターン1：爽やかな「青春・恋愛小説」風
背景を明るくし、アクセントカラーにパステル調のブルーやピンクを入れると、一気に爽やかな印象になります。
- 背景色 (background-color): #ffffff (白) または #f8f9fa (薄いグレー)
- 文字色 (color): #333333 (濃いダークグレーで読みやすく)
- アクセントカラー (border-top など): #ffb6c1 (ライトピンク) や #87cefa (ライトブルー)
- フォント (font-family): 明朝体（serif）ではなく、ゴシック体（sans-serif）にするとポップになります。
パターン2：緊迫感のある「SF・サスペンス」風
ベースは今回のダークテーマのまま、アクセントカラーをサイバーな色に変更します。
- アクセントカラー (border-top など): #00ffcc (ネオンシアン) や #ff0033 (警告の赤)
- フォント (font-family): 等幅フォント（monospace）を混ぜると、無機質なシステム感が出ます。
CSSコード内の /* 〜 */ で書かれたコメントを参考に、ぜひあなただけのオリジナルカラーを見つけてください。
💡 技術解説：なぜ表（Table）ではなく「display: grid」なのか？
項目と内容を綺麗に並べる際、昔のHTMLでは <table> タグを使うのが一般的でした。しかし、今回のCSSでは <dl>（定義リスト）に対して display: grid; という比較的新しいテクニックを使用しています。
なぜ Grid を使うのか？
それは、**「スマートフォンで見たときの美しさと、修正のしやすさ」**が段違いだからです。
表（Table）は画面幅が狭いスマホだとレイアウトが崩れやすいですが、Gridを使えば、文字の長さに合わせてブラウザが自動的に最適な幅を計算してくれます。また、HTMLの記述もシンプルになるため、執筆時のテンプレートとして使い回す際に非常に管理が楽になります。
小説ブログにおいて「スマホでの読みやすさ」は最重要項目です。デザインの美しさだけでなく、こうした裏側の仕組み（レスポンシブ対応）も意識して設計しています。
📝 ご紹介したCSSカスタマイズまとめ
いかがでしたでしょうか。今回は、ブログ小説の入り口を彩るメタデータの「世界観ボックス」の作り方を解説しました。
本記事の要点は以下の通りです。
- メタデータ（あらすじや登場人物など）の装飾は、読者を一瞬で世界観に引き込む強力なフックになる。
- Cocoonの「追加CSS」と「カスタムHTML」を使えば、美しいボックスデザインをコピペで簡単に実装できる。
- CSSのカラーコードやフォント指定を少し変えるだけで、恋愛、SF、ファンタジーなどあらゆるジャンルに応用可能。
- display: grid を活用することで、スマホから見ても崩れない美しいレイアウト（レスポンシブデザイン）が実現できる。
小説の本文を執筆することはもちろん一番大切ですが、Webという媒体を通して作品を届ける以上、「UI（ユーザーインターフェース）」にこだわることで、あなたの作品の魅力は何倍にも膨らみます。
ぜひ今回のカスタマイズを取り入れて、読者にとって「居心地の良い、没入できる小説ブログ」を作ってみてください！