Bloggerテーマ「Paper & Bookshelf」を配布します

<blockquote class="bg-[#fcf8f2] border-l-4 border-accent rounded-r p-5 my-6 shadow-sm italic text-ink-main font-serif relative"> 「人間は、自分が思った通りの人間になる。」 <cite class="block text-right text-xs font-sans text-[#8b5a2b] mt-3 not-italic">― 本書 第2章より引用</cite>
</blockquote>

<!-- マーカー風ハイライト -->
読者を引き込むのは、この<span class="marker">運命的な出会いを描いたシーン</span>です。
<!-- キーワード強調 -->
本書で提唱される概念である <code>能動的読書（Active Reading）</code> は必読です。

<!-- メモ・補足情報ボックス -->
<div class="bg-[#f8f4eb] border border-[#e6dec9] rounded-md p-4 my-6 text-sm text-ink-main space-y-2"> <p class="font-bold flex items-center gap-1.5 text-[#8b5a2b]"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> 補足情報・トリビア </p> <p>著者は本作を執筆するにあたり、実際に半年間の海外取材を行っていたと言われています。</p>
</div>
<!-- ネタバレ注意ボックス -->
<div class="bg-[#fcf4f2] border border-[#f0deda] rounded-md p-4 my-6 text-sm text-ink-main space-y-2"> <p class="font-bold flex items-center gap-1.5 text-accent"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg> ！ネタバレ注意！ </p> <p>これより下は、物語の結末および核心部分の考察が含まれています。未読の方はご注意ください。</p>
</div>

<table class="book-spec-table"> <thead> <tr> <th colspan="2">書籍情報スペック</th> </tr> </thead> <tbody> <tr> <td class="spec-label">書名</td> <td>吾輩は猫である</td> </tr> <tr> <td class="spec-label">著者</td> <td>夏目 漱石</td> </tr> <tr> <td class="spec-label">出版社</td> <td>日本文学出版</td> </tr> <tr> <td class="spec-label">発売日</td> <td>1905/10/06</td> </tr> <tr> <td class="spec-label">評価・おすすめ度</td> <td style="color: #9E4738; font-weight: bold;">★★★★★ (星5)</td> </tr> </tbody>
</table>

<div class="grid grid-cols-1 md:grid-cols-2 gap-4 my-6"> <!-- おすすめポイント（メリット） --> <div class="bg-[#f4f7f4] border border-[#dbe4db] rounded-md p-4 space-y-2"> <p class="font-bold text-emerald-800 flex items-center gap-1.5 text-sm"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> ここがおすすめ（魅力） </p> <ul class="list-disc list-inside text-xs text-ink-main space-y-1 pl-1"> <li>登場人物の心理描写が緻密で深く感情移入できる</li> <li>伏線の回収が見事で、後半一気に読み進められる</li> <li>現代社会の人間関係にも通じる普遍的なテーマ性</li> </ul> </div> <!-- 人を選ぶ点（デメリット） --> <div class="bg-[#faf6f6] border border-[#f5e6e6] rounded-md p-4 space-y-2"> <p class="font-bold text-[#b45454] flex items-center gap-1.5 text-sm"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> 購入前に知っておきたい点 </p> <ul class="list-disc list-inside text-xs text-ink-main space-y-1 pl-1"> <li>序盤の展開がスローテンポでやや退屈に感じる</li> <li>古典的な言い回しが多く、慣れるまで読みにくい</li> <li>ハッピーエンドではないため、読後の好みが分かれる</li> </ul> </div>
</div>

<div class="book-timeline"> <!-- タイムライン項目 1 --> <div class="book-timeline-item"> <h4>第1期：事件の始まりと出会い</h4> <p>主人公が古い書物の奥から見つけた一枚のメモ書き。すべてはここから始まり、謎の人物との出会いに繋がる。</p> </div> <!-- タイムライン項目 2 --> <div class="book-timeline-item"> <h4>第2期：対立と深まる謎</h4> <p>登場人物たちの価値観の衝突。いくつかの嘘が暴かれ、物語は急展開を見せる。</p> </div> <!-- タイムライン項目 3 --> <div class="book-timeline-item"> <h4>第3期：真実の解明と結末</h4> <p>クライマックスから伏線回収へ。謎が全て解き明かされた後、主人公が下した決断とは。</p> </div>
</div>

<link href='https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&amp;display=swap' rel='stylesheet'/>

 <b:skin><![CDATA[ /* <Variable name="paper.bg" description="Main Background Color" type="color" default="#FAF6EE" value="#FAF6EE"/> <Variable name="paper.card" description="Card Background Color" type="color" default="#FFFFFF" value="#FFFFFF"/> <Variable name="ink.main" description="Main Text Color" type="color" default="#2D2926" value="#2D2926"/> <Variable name="ink.sub" description="Sub Text Color" type="color" default="#736B63" value="#736B63"/> <Variable name="accent.color" description="Accent Color (Ribbon)" type="color" default="#9E4738" value="#9E4738"/> */

 <!-- ① トップページ（インデックスページ）の場合は最新記事の画像を無視し、ブログの共通画像を優先 --> <b:if cond='data:view.isMultipleItems'> <!-- ================================================================== 【トップページ用シェア画像URL】 ※ブログのロゴや、トップページ共有時に表示したいご自身の画像URL（https://...）に書き換えてください。 ================================================================== --> <meta content='https://images.unsplash.com/photo-1507842217343-583bb7270b66?auto=format&amp;fit=crop&amp;w=1200&amp;h=630&amp;q=80' property='og:image'/> <meta content='https://images.unsplash.com/photo-1507842217343-583bb7270b66?auto=format&amp;fit=crop&amp;w=1200&amp;h=630&amp;q=80' name='twitter:image'/> <b:else/> <!-- ② 個別記事・固定ページの場合は記事内の画像を優先表示 --> <!-- (中略...記事画像抽出処理) --> <b:else/> <!-- ================================================================== 【画像なし記事用デフォルト画像URL】 ※お好きなデフォルトアイキャッチの画像URL（https://...）に書き換えてカスタマイズ可能です。 ================================================================== --> <meta content='https://images.unsplash.com/photo-1507842217343-583bb7270b66?auto=format&amp;fit=crop&amp;w=1200&amp;h=630&amp;q=80' property='og:image'/> <meta content='https://images.unsplash.com/photo-1507842217343-583bb7270b66?auto=format&amp;fit=crop&amp;w=1200&amp;h=630&amp;q=80' name='twitter:image'/> </b:if> </b:if>