💡【はじめに】文字をCSSで彩ることのメリット
丹精込めて書き上げた自作の小説。それをただブログの真っ白な背景に黒文字で掲載するだけでも、もちろん物語は伝わります。しかし、文字をCSSで彩ることで、読者の物語への没入度を格段に高め、作者が思い描く「世界観」をより正確にダイレクトに伝えることができると私は考えています。
今回は、当ブログで完結を迎えた連載小説『感情の忘れ物４ 秋葉原・影山リアム編』で実際に実装した、「ターミナルデザイン」のCSSカスタマイズ術を大公開します！
緑色のコンソール文字、点滅するカーソル、エラーの赤文字、そして必殺技のような「七色に光るゲーミング文字列」まで。ブログの表現力をもう一段階引き上げたい、カスタマイズ好きのCocoonユーザーの方は必見です。
それでは、さっそく行ってみましょう！
🛠️ 準備編：Cocoonの「追加CSS」と「カスタムHTML」の使い方
WordPressのCocoonで小説記事を投稿する際、記事編集画面の下部にある「カスタムCSS」欄にコードを書くこともできます。しかし、全10話などのシリーズ物の場合、この方法だと「文字の色を少し変えたい」と思った時に、すべてのページを1話ずつ開いて修正しなければならず非常に非効率です。
そこで、サイト全体で共通のCSSを登録し、各記事からはそれを呼び出すだけのスマートな運用をおすすめします。
1. 共通のCSSを登録する
WordPressの管理画面から、**「外観」⇒「カスタマイズ」⇒「追加CSS」**と進み、一番下の入力欄にこの記事の最後で紹介するCSSコードをコピー＆ペーストして保存します。
2. 記事の中で呼び出す（カスタムHTMLブロック）
各話の記事編集画面（ブロックエディタ）では、以下の手順でHTMLタグを記述します。
① ブロック追加の「＋」ボタンをクリックする。
② 検索欄に「カスタムHTML」と入力し、出てきたメニューを選択する。
③ 記事内に四角い入力エリアが表示されるので、そこに後述するHTMLコードを貼り付けます。
これで準備は完了です！
💻 実装編１：世界観を表現する「緑・赤・灰」のコンソール文字
『感情の忘れ物４ 秋葉原編』の主人公、影山リアムは、他人の感情が「緑色のプログラミングコード」として視認できる特異体質『電子視覚（デジタル・ヴィジョン）』を持つ天才ハッカー高校生です。
そこで、彼が見ている景色を、黒い背景に浮かび上がるターミナル風の文字で表現しました。
① 通常の視界（緑色のコンソール文字）
まずは基本となる緑色のコード表現です。
連載小説『感情の忘れ物４ 秋葉原・影山リアム編』第1話 より
while (true) {
Notice_Me();
Love_Me();
if (Like_Count < 1000) { Anxiety_Level++; }
}
【HTMLコード】
【解説】
一番外側を <div class="liam-terminal"> で囲むことで、背景を黒（#121212）にし、文字フォントをプログラミング用の等幅フォント（Consolasなど）に指定しています。文字色はハッカーの定番、鮮やかな緑色（#20C20E）です。
② 警告とエラー（赤色のコンソール文字）
次に、彼が視認する強い負の感情「エラー」や「警告」の表現です。
連載小説『感情の忘れ物４ 秋葉原・影山リアム編』第3話 より
>Error: Self_Inferiority is too high. (自己劣等感が高すぎます)
>Warning: Jealousy overflow. (嫉妬がオーバーフローしています)
【HTMLコード】
【解説】
赤く強調したい部分を <span class="alert-red"> で囲みます。CSS側で !important を使って強制的に文字色を赤（#FF3333）に上書きし、視覚的な危険度を演出しています。
③ 心の声やバックグラウンド処理（灰色のコンソール文字）
自己否定や嫉妬など、暗く沈んだ感情の表現です。
連載小説『感情の忘れ物４ 秋葉原・影山リアム編』第5話 より
while (Idea == NULL) {
Self_Doubt++; //自己否定が増加
Compare_With_Others(); //他人と比較
Despair(); //絶望
}
【HTMLコード】
【解説】
目立たせたくない部分や、システム側の注釈（コメントアウト）などは <span class="system-gray"> で囲み、グレー（#888888）に落とすことで、画面全体に奥行きを持たせています。
💻 実装編２：リアルな鼓動を生む「点滅するカーソル」
CSSに「アニメーション」の要素を加えると、物語の臨場感がさらに跳ね上がります。
第6話で、リアムが今まさにワクチンプログラムを実行しようとする緊迫したシーンを、「点滅するカーソル」で表現しました。
連載小説『感情の忘れ物４ 秋葉原・影山リアム編』第6話 より
>Deploy_Vaccine_Ver1.0…
>Target: Infinite_Malice_Worm
【HTMLコード】
【解説】
<span class="blinking-cursor"></span> という空のタグを置くだけで、緑色の四角いブロックが表示されます。CSSの @keyframes blink を使って、1秒間隔で透明度（opacity）を1と0に切り替えることで、チカチカとリアルに点滅するカーソルを再現しています。
💻 実装編３：奇跡を演出する「七色（レインボー）の文字」
CSSの文字色は、単色だけでなく「七色（レインボー）」にして、さらにグラデーションをヌルヌルと動かすことも可能です！
第7話、リアムが最後に放つ起死回生の一撃を、ド派手なゲーミング仕様で表現しました。
連載小説『感情の忘れ物４ 秋葉原・影山リアム編』第7話 より
> Execute: World_Clean_Up
【HTMLコード】
【解説】
<span class="rainbow-text"> で囲んだ部分が七色に光ります。
仕組みとしては、背景に巨大な七色のグラデーション（linear-gradient）を引き、それを文字の形に切り抜き（background-clip: text）、背景そのものを横にスライドさせる（animation: rainbow-flow）という高度なテクニックを使っています。無機質な黒い画面に突如現れる七色は、読者に強烈なインパクトを与えます。
💻 実装編４：Mac風の「ターミナルウィンドウ外観」
文字だけでなく、外枠そのもののデザインも作り込むことができます。
各話の最後にある「IT用語解説コーナー」は、あたかもMacのターミナルウィンドウが開いているかのような外観に仕立てました。
連載小説『感情の忘れ物４ 秋葉原・影山リアム編』第8話（最終話）より
【影山リアムのIT用語解説コーナー】
- ……さてと。リアルワールドはやっぱりバグだらけだけど、まあ、自分の足で歩くしかないみたいだね。
- > リダンダンシー（冗長性）
システムの一部が壊れても全体が止まらないよう、あえて予備を持たせる設計のこと。人間もバグだらけだけど、その分、誰かが誰かを補える“冗長性”を持ってるってことだね。 - > リブート（Reboot）
システムを再起動すること。エラーをリセットして、新しい状態で動かし直す。……さあ、僕の新しい日常も、リブート完了だ。 - > フィルムカメラ
プレビューもCtrl+Zも効かない、非効率極まりないレガシーデバイス。ノイズだらけで後から修正もできない不便な仕様だけど……その不完全さが、僕たちの泥臭い感情をセーブ（記録）するには、案外ぴったりなのかもね。……ほら、こっち向いて。三秒以内に笑わないと、そのままシャッター切るよ。 - >
【HTMLコード】
【解説】
ウィンドウ上部のグレーのバー部分を <div class="liam-terminal-header"> で作成しています。CSSの ::before 疑似要素を使って「● ● ●」という3つの点を左上に配置することで、Mac風の閉じる・最小化・最大化ボタンを表現しています。
📝 ご紹介したテクニックまとめ
いかがでしたでしょうか？
今回は以下のテクニックをご紹介しました。
- 「追加CSS」と「カスタムHTML」を使ったスマートな運用方法
- 色分け（緑・赤・灰）による感情や状況の視覚的表現
- CSSアニメーションを活用した「点滅カーソル」と「七色グラデーション」
- 擬似要素を使ったMacターミナル風のウィンドウ装飾
これらのCSSを活用することで、『感情の忘れ物４ 秋葉原・影山リアム編』のサイバーパンクな世界観を、より深く読者に体験してもらうことができました。
小説は「文字」だけの芸術ですが、ブログというWebメディアだからこそできる「デザインの魔法」があります。ぜひ、あなたが作成した大切な自作小説もCSSで彩り、その魅力をさらに引き出してみてください！
🎁 おまけ：コピペ用CSSコード一式
実際に当ブログで使用しているCSSコードをすべて公開します。
Cocoonの『追加CSS』にコピペして、自由にお使いください！
【CSS】
※コードのバージョン管理と見やすさを考慮し、ソースコードは『GitHub Gist』にて公開・管理しています。
枠内のコードをそのまま選択してコピーするか、右下の『view raw』をクリックして表示される画面から全選択（Ctrl+A）でコピーし、Cocoonの『追加CSS』にそのまま貼り付けてお使い頂けます。