湊かなえ『カケラ』を読んだ感想

読書

美容クリニックに勤める医師の橘久乃は、久しぶりに訪ねてきた幼なじみから「やせたい」という相談を受ける。カウンセリングをしていると、小学校時代の同級生・横網八重子の思い出話になった。幼なじみいわく、八重子には娘がいて、その娘は、高校二年から徐々に学校に行かなくなり、卒業後、ドーナツがばらまかれた部屋で亡くなっているのが見つかったという。母が揚げるドーナツが大好物で、それが激太りの原因とも言われていた。もともと明るく運動神経もよかったというその少女は、なぜ死を選んだのか――?
「美容整形」をテーマに、外見にまつわる固定観念や、人の幸せのありかを見つめる、心理ミステリ長編。

出典：Amazon

 

湊かなえさん著の『カケラ』を読みました。

湊さんの書くミステリって気持ちのいい終わり方する作品があんまりなくて、読後にモヤモヤした嫌な気持ちが残っちゃうんですが、一種の中毒性みたいなのがあって、新刊が出るたびに買ってしまいます。

人間のリアルな黒い部分が出ていて、面白くて一気に読み切りましたが、今回も気持ちのいい終わり方はしなかったです（個人的な感想です）。

 

大量のドーナツに囲まれて、部屋の中で死んでいた少女。
少女の名前は「吉良有羽(きら ゆう)」。

 

少女はなぜ死んだのか？物語が進むにつれて次第に真相が明らかになっていくっていうミステリです。

同じ湊さんの『白ゆき姫殺人事件』っぽいなと思いました。この作品が好きな人には、オススメしたい作品です。

 

そしてこの少女がなぜ死んだのか？というのを追っていくのは、美容クリニックの医師である「橘 久乃(たちばなひさの)」という女性。

 

この橘久乃がインタビュー形式で色んな人に、死んだ有羽について聞いていきます。

 

章ごとに語り手が変わります。語り手は全員で8人です（橘久乃を含めれば9人ですが）。それぞれにクセが強めです。いいヤツだなと思う人物もいれば、嫌いだなと思う人物もいました。

当然語り手の主観で少女の印象が語られるので、真実がどこにあるんだろう？という思いは読んでいる最中にありました。

 

 

作中の印象に残ったセリフ

仮に、人間関係の形成に支障をきたすといった問題があるとして、それを改善しなきゃならないのは、見た目が悪い人の方なの？

P139より引用

 

最後に 

なんで『カケラ』っていうタイトルを付けたのだろう。

読んでいる途中はなかなかしっくりこなかったのですが、最後まで読むと納得できました。

人間って結局「認められたい」生き物で、他者からの承認を失ったときの人間の心情が掘り下げられていて面白かったです。

でも、どうしてこの少女はこんなことで死なないといけなかったの？
読み終わったあと、イヤな気持ちになるかもしれません。

興味のある方はぜひ読んでみてください。

カケラ
posted with ヨメレバ
湊 かなえ 集英社 2020年05月14日
楽天ブックス
楽天kobo
Amazon
Kindle
 

湊かなえさんのオススメ作品

告白

2009年に本屋大賞を受賞した『告白』。

愛娘を殺された教師の森口悠子が、犯人である教え子の少年2人に復讐を仕掛ける内容には衝撃を受けました。

個人的には湊さんの作品の中でいちばん好きです。

告白
posted with ヨメレバ
湊かなえ 双葉社 2010年04月
楽天ブックス
楽天kobo
Amazon
Kindle
 

贖罪

僕が湊さんの小説の中で、読んでいて一番嫌な気分になる作品です。
15年前に性的暴行を受け殺された少女。そのとき一緒に遊んでいた4人の少女たちは罪の意識を背負ったまま大人になり、次々と彼女たちに悲劇が降りかかるというストーリーです。

贖罪
posted with ヨメレバ
湊かなえ 双葉社 2012年06月
楽天ブックス
楽天kobo
Amazon
Kindle
 

ここまで読んでいただき、ありがとうございました

禁煙を始めたけどなかなか辛い

読書 禁煙 30代

「いつかは禁煙しようと思ってる」

 

タバコを吸う方で、こう思っている方も多いのではないでしょうか。

僕が軽い気持ちで禁煙を始めて1週間がたちました。

直近では、1か月のタバコ代は12,000円くらいです。吸わない人から見ると、バカみたいな金額だと思われるかもしれません。

今やめられなければ、もしかすると一生禁煙できないかもと思っています。

禁煙して1週間たちましたが、なかなかしんどいです。

何がしんどいかというと、

たばこの禁断症状

これに尽きます。

別にイライラしているつもりはないのですが、なんか気分が落ち着かないです。

ただ禁煙を始めて2~3週間くらいが辛いピークらしいので、これを越すまでなんとか頑張ろうと思っています。

ブログに晒すことにより、もしかしたら禁煙のモチベーションが上がるのではないかと思って書いてみました。
禁煙するメリットやデメリットのことや、禁煙のために現在実践していることを書いていきたいと思います。

 

タバコをやめるメリット

  • 他人に迷惑がかからない（受動喫煙やにおいの問題で）
  • タバコ代を資産運用や他の趣味などに回せる
  • 健康にいい
  • 周りの目を気にしなくてもいい

まだ禁煙1週間なので何とも言えませんが、明らかに息切れはしなくなりました。

タバコを吸い続けるメリット

  • 多分ないです

僕も以前からこれは感じていましたが、思っていてもなかなかやめられないものです。

タバコを吸えないことで発生するイライラは、ニコチンが切れた禁断症状であって、

タバコの禁断症状を緩和するためにタバコを吸っている

という負のループに陥っています。

 

自分でもアホなことをしている自覚はあったのですが、なかなかこの負のループから抜け出せませんでした。

 

禁煙のために買った本

『禁煙セラピー』という本をAmazonで買いました。

アレン・カー『禁煙セラピー』

「読むだけで絶対にやめられる」と書いてありますが、おそらく全員には当てはまりません。僕の感想をいえば、しんどいものはしんどいです。簡単ではありません。

ただ禁煙の本としては有名らしいので、これを読んで禁煙に成功した人もおそらく多くいるのでしょうし、これから先、禁煙に成功する人もいるのだと思います。自分もその中の一人になれればいいなと思っています。

「タバコを吸うデメリット」と「やめることのメリット」が書き綴ってあり、「読み終わるまでタバコをやめないでください」「内容に納得してから禁煙を始めてください」みたいなニュアンスのことが書いてあるので、そこまで禁煙を強制されている感はないです。作者も33年間ヘビースモーカーだったとのことで、非喫煙者の禁煙本よりは説得力があると思います。

興味がある人は買って読んでみてください。お値段はタバコ2箱分くらいです。

 

禁煙セラピー
posted with ヨメレバ
アレン・カー/阪本章子 ロングセラーズ 1996年06月01日
楽天ブックス
楽天kobo
Amazon
Kindle
 

禁煙アプリ

『禁煙アシスタント』という無料アプリを、スマホにインストールしました。

play.google.com

 

禁煙の継続期間や節約できた金額が表示されるので、モチベーションになります。

禁煙アシスタント1


また、最初の診断で今までに吸った本数や使った金額が分かります。

改めて数値化されると、自分が吸ってきた本数にドン引きしました。

禁煙アシスタント2

 

最後に

禁煙して1週間しか経っていませんが、もしかしたら禁煙のモチベーションが上がるのではないかと思ってブログに書いてみました。

 

タバコを「吸っている」のではなく、「吸わされている」と多少思えてきたのはいい兆候だと思います。

せっかく始めた禁煙なので、このまま継続していきたいと思います。

ここまで読んでいただきありがとうございました。

 

 

【Google Chrome】デベロッパーツールでブログの蛍光マーカー色を直感的に決める方法

はてなブログ

Google Chromeディベロッパーツールで直感的に色を決める

蛍光マーカ―の色、どんなのがいいのかな？

コードを書き換えて、いちいち色を確認するのが面倒。

 

ブログの本文に蛍光マーカーを引けるようにしたけど、「どんな色がいいんだろう？」って悩むことありませんか？

 

僕は線の色を決めるとき、カラーコードの一覧表が載っているサイトを参考にしてました。

でもいざ自分のブログで見てみると、実際にイメージしていたものと違っていたので何度もコードを書き換えた経験があります。

 

そんな時に便利なのが、［F12］キーを押すと出てくるGoogle Chromの「デベロッパーツール」。

 

下の動画のように、プレビューしながら直観的に色を決めることができます。

ディベロッパーツールで色を確認

また、「この色はちょっと目がチカチカするな」とか「ちょっと色が薄くて目立たないからやめておこう」とかも分かると思います。

僕が実際に試してめちゃめちゃ便利だったのでご紹介したいと思いました。

 

今回はchromeのデベロッパーツールを使って、蛍光マーカーの色を確認する方法を書いていこうと思います。

 

なおこの記事の説明画像は、「はてなブログ」のものを使っています。

 

 

はてなブログ本文に蛍光ペン風のマーカーを引く方法

おそらく多くの方がすでに使われていると思いますが、一応蛍光ペン風のマーカーが引ける方法を書いておきます。

すでに実装している方は飛ばしてください。

 

やること

蛍光ペン風のマーカーを引くためにやることは以下のとおりです。

  • CSSを、はてなブログの「デザインCSS」に書く（コピペOK）
  • 「HTML編集」画面で、HTMLを書く 

 

CSSをコピペする

はてなブログの管理画面から［デザインデザインアイコン］→［カスタマイズカスタマイズアイコン］→［デザインCSS］を選択して、下のCSSをコピペします。

 

とりあえず蛍光マーカーの色は黄色にしています。

/* 蛍光マーカー */
.marker{background: linear-gradient(transparent 60%, #ff0000 0%)}

 

最初のクラス名の「.marker」は名前を変えても大丈夫です。
たとえば keikou-y とか marker-kiiro とか分かりやすい名前をつけた方がいいかもしれません。

ただし名前の頭の「 . 」は必ずつけてください。（『.keikou-y』とか『.marker-kiiro』とか書いてください。）

 

コードの中の「#ff0000」は色を表しています。

 

また「transparent」のすぐ後ろのパーセンテージは、線の太さを表しています。
0％が一番太く、100％だとなにも見えなくなります。よろしければ下の線の太さを参考にしてください。

 

蛍光マーカーの太さ0%

.marker{background: linear-gradient(transparent 0%, #ff0000 0%)}

 

蛍光マーカーの太さ40%

.marker{background: linear-gradient(transparent 40%, #ff0000 0%)}

 

蛍光マーカーの太さ60%

.marker{background: linear-gradient(transparent 60%, #ff0000 0%)}

 

蛍光マーカーの太さ80%

.marker{background: linear-gradient(transparent 80%, #ff0000 0%)}


マーカーをひくときのHTML

はてなブログの見たままモードで書く時は、HTML編集画面で下記のように書きます。

<span class="marker">ここに文字が入ります。</span>

ここに文字が入ります。


「class=」のあとの「” ”」の中には、CSSコードで決めた名前を入れます。HTMLを書くときは、CSSで決めたクラス名の頭の「 . 」は入れないでください。

 

Chromeのデベロッパーツールでマーカーの色を確認する

 Google Chromeで自分のサイトを開き、画面上のなにもないところで右クリック⇒［検証］をクリックします。

「検証」を選択

 

デベロッパーツールがひらきました。

ディベロッパーツールを開く

※［F12］キーが、デベロッパーツールを開くショートカットキーになっています。

 

ディベロッパーツールの画面上での位置変更

 ※右上の［ボタン］をクリック→「Dock side」と書いてある右側のアイコンをクリックすると、画面上でのウィンドウの位置を変えることができます。

 

①左上の［ 選択アイコン ］のアイコンをクリック→②記事内のマーカーが引いてあるところをクリックします。

 

「styles」と書いてある項目で、該当部分をさがして、矢印の四角いところをクリックします。

カラーピッカーを表示させる



※補足　見つけられない方は、下の動画で確認してみてください。



カラーピッカーがひらきます。

四角のパレットと2種類のカラーバーを動かして色を決めます。

カラーピッカー

 

色が決まったらスポイドのとなりのまるい部分をクリックすると、色のコードがコピーできます。

カラーコードのコピー

 

それをCSSの色のところに貼りなおします。

上で紹介したCSSの場合、「#ff0000」のところをコピーしたコードに書き換えます。

 

.marker{background: linear-gradient(transparent 60%, #ed6bff80 0%)}

 

まとめ

Google Chromeのデベロッパーツールをつかえば、直感的に色をきめることができます。

本文の文字色を変えたい場合なども、イメージを確認することができて便利です^^

どんな色にしようかなーなんて迷っている方は使ってみてはいかがでしょうか。

ここまで読んでいただき、ありがとうございました。

はてなブログで本文のテキストにルビ（ふりがな）を振る方法

はてなブログ 読書

はてなブログ　本文のテキストにルビ（ふりがな）を振る方法

ブログを始めて数か月。最近「HTML」とか「CSS」に興味が湧いてきて、この本を購入しました。

HTML&CSS全事典の画像

 

数日前から、入浴中にこの本を読んでいます。

しかしほとんど知識のない僕にとっては、内容の80％以上が理解できません。ある程度知識がある人向けの本のような気がします。「初心者向けの本を買えばよかったな」と、若干後悔しているところです。

でも中には理解できる内容もあり、「これは面白そうだな」と思う機能も意外とたくさん載っています。

その中で、どうしても試してみたいHTMLがあったので試してみました。

それが「テキストにルビを振る」

いわゆる本文の漢字などに、ふりがなを付けることができる機能です。

 

この記事以外で、本文中でルビを振る機会があるかどうかは分かりません。ただ単純に試してみたかっただけです。

そして試してみたらできました。

聖闘士星矢セイントセイヤ

 

僕自身の備忘録的な記事になるので、これを読んでいただいた方のお役に立つかどうかは分かりません。

テキストにルビを振る方法をご紹介させていただきますので、もし興味がある方は、よろしければ読んでみてください。

 

 

ルビとは

ルビ（英語: ruby）は、文章内の任意の文字に対しふりがな／説明／異なる読み方といった役割の文字をより小さな文字で、通常縦書きの際は文字の右側／横書きの際は文字の上側に記されるものである。

出典：Wikipedia

いわゆる「ふりがな」のことです。余談ですが、「ルビ」は宝石の「ルビー」が語源らしいです。

 

 テキストにルビ（ふりがな）を振る方法

ルビを振るHTMLです。はてなブログの見たままモードの場合は、「HTML編集」画面で入力します。

<ruby>テキスト<rt>ふりがな</rt></ruby>
  •  <ruby>と<rt>の間に本文のテキスト（漢字など）を入力
  • <rt>と</rt></ruby>の間に、ふりがなを入力します。

 

HTML編集画面で、下のように記述した場合

<p>抱きしめた心の<ruby>小宇宙<rt>コスモ</rt></ruby></p>

抱きしめた心の小宇宙コスモ

 

このように表示されます。

ただし、上のHTMLの場合、対応していないブラウザではふりがな（上の例では『コスモ』）が表示されないようです。

 

ふりがな表示に非対応のブラウザでも、『小宇宙(コスモ)』のようにふりがなテキストを表示させたい場合は、下のように記述します。

<ruby>テキスト<rp>(</rp><rt>ふりがな</rt><rp>)</rp></ruby>

非対応ブラウザでもふりがなテキストを表示させたい方は、こちらのコードを使用してください。

 

最後に

ブログの本文テキストに、ルビを振る方法をご紹介させていただきました。

僕自身はこの先、使いどころがあるかどうかは分かりません。

もし興味がある方がいらっしゃれば、一度試してみてください。

ここまで読んでいただき、ありがとうございました。

 

Web制作必携HTML＆CSS全事典改訂版
posted with ヨメレバ
加藤善規/できるシリーズ編集部 インプレス 2020年02月
楽天ブックス
楽天kobo
Amazon
Kindle
 

【はてなブログ】同じページ内の指定した場所にジャンプ（リンク）する方法（HTML）

はてなブログ

ページ内ジャンプ_アイキャッチ

テキストをクリックしたら、指定した場所に飛べるようにしたいなー

長文の記事を作っているときに、

「ここは知っている人にはいらない情報だから、読み飛ばしができた方がいいな」

って思うことがよくありました。

そんなときに役立つのが「ページ内ジャンプ（リンク）」です。

 

ページ内ジャンプ（リンク）とは？

ページ内ジャンプを使うと、同一ページ内で指定の場所に飛ぶことができます。

実際に触ってみてもらった方が分かりやすいと思うので、下のテキストをクリックしてみてください。

ここをクリックしてね          

 

このように、テキストをクリックすると指定の場所へジャンプすることができます。

 

同じ要領で、画像をクリック → ジャンプなんかもできちゃいます。

ひよこクリックしてね

 

ページ内ジャンプ（リンク）をつくる方法

ページ内ジャンプは

  • 出発地点
  • 目的地

をワンセットとして書きます。たとえば下のようなかんじです。

ページ内ジャンプ

はてなブログの見たままモードで記事を書く場合、「HTML編集画面」でコードを書きます。

 

STEP1.　目的地を決める

最初に目的地を決めます。

たとえば大見出し（h3見出しタグ）を目的地にする場合は、下のようにコードを書きます。

 

目的地のHTML

<h3 id="id名">大見出しです</h3>

「id名」の部分は好きな名前を付けてください。 
たとえば「 id="midasi"」 のように書きます。

HTML編集画面で見ると分かるのですが、大見出しのHTMLは『<h3>〇〇〇</h3>』になってますよね。
頭の「h3」の後ろに「id="id名"」を追記します。
（『h3』と『id』の間には半角スペースを空けます。）

他にも中見出し（h4タグ）や小見出し（h5タグ）、pタグやdivタグなども、目的地として指定することができます。

 

STEP2.　出発地点を決める

次に出発地点を決めます。

 

出発地点のHTML

<a href="#id名">ここをクリックしてね</a>

コード内の「id名」の部分は、目的地で決めた名前と一緒にします。
また、名前の前には［#］を付けないといけません。
（出発地点だけ#を付けます。）

 

上のHTMLを、見たままモードの「HTML編集」で貼り付けると、下のようになります。

 

↓出発地点

ここをクリックしてね

 

 

↓目的地

 

また、出発地点のコードを書くのが面倒くさい人は、リンクボタンを使う方法もあります。

テキストをリンク元にする

上の動画のように、

  1. 出発地点にしたい部分を選択
  2. リンクボタンをクリック
  3. 「#id名」を入力
  4. HTML編集画面で「https://」だけ削除

という方法でも出発地点をつくることができます。

 

最後に

ページ内の指定した場所にジャンプする方法をご紹介させていただきました。

長文の記事で
「ここは飛ばして読みたい」
なんていう読者の方のために設定しておくと、親切かもしれません。

ここまで読んでいただき、ありがとうございました。

 

参考にさせていただいた記事

下記のサルワカさんの記事を参考にさせていただきました。
いつも大変助かっています。ありがとうございました。

saruwakakun.com

 

ここが目的地です

ここをクリックすれば元の場所に戻れます

『むかしむかしあるところに、死体がありました。』のあらすじと感想　昔ばなし×ミステリが新鮮でした

読書

表紙絵が好きだなー
おもしろそうなタイトルだなー

青柳碧人さんの「むかしむかしあるところに、死体がありました。」

「むかしむかしあるところに、死体がありました。」表紙

前から気になっていたこの本をジャケ買い？してしまいました。

 

この本には、5つの短編ミステリが載っています。

  • 一寸法師の不在証明
  • 花咲か死者伝言
  • つるの倒叙がえし
  • 密室龍宮城
  • 絶海の鬼ヶ島

話の元ネタは、どれもみんな知っているであろう日本の昔ばなし。
この「昔ばなし×ミステリ」という組み合わせが、僕にとっては新鮮でした。

話の元ネタを知っているだけに、頭の中に話が入ってきやすく、一気に読んでしまいました。

「むかしむかしあるところに、死体がありました。」かんたんなあらすじと感想をご紹介します。

 

以下ネタバレを含みます

 

「むかしむかしあるところに、死体がありました。」かんたんなあらすじと感想

 

①一寸法師の不在証明

元ネタは「一寸法師」。

ある村でひとりの男が殺されました。容疑者として浮かんだのが一寸法師。江口景末と謎の男「黒三日月」は、一寸法師のアリバイを崩せるのでしょうか？

一寸法師は悪いやつでした。

 

②花咲か死者伝言

元ネタは「花咲かじいさん」。
おじいさんが何者かに殺されました。その手に握られたぺんぺん草。これはダイイングメッセージなのでしょうか？飼い犬の「次郎」はおじいさんの敵討ちを決意します。

序盤で犯人の目星は付きましたが、次郎が犯人に復讐するためにとった手段は、伏線も張られてておもしろかったです。
欲望に目がくらんだ人間は怖いです。

 

③つるの倒叙がえし

元ネタは「鶴の恩返し」。話がよくできてるなーと思いました。これはぜひ読んでほしいです。

「警部補 古畑任三郎」みたいに、話の最初から犯人が分かっている、いわゆる倒叙ミステリってやつです。

弥兵衛という男が、村の庄屋を殺害するシーンから始まるこの話。罠にかかった自分を助けてくれた弥兵衛に恩返しするために、「つう」は人間の女性に姿を変え、弥兵衛の家を訪ねます。

三人称視点で進んでいくこの話、ナレーターが2人いたり、読んでいると、ところどころに微妙な違和感が…

最後まで読んで「そういうことだったのか！」と違和感の原因がわかったときはスッキリしました。
こういう読者へのトリック大好きです。

 

④密室龍宮城

元ネタは「浦島太郎」。浦島太郎が助けた亀に連れられて行ったのは龍宮城。そこで密室殺人が起こります。浦島太郎は犯人を見つけ出すことができるのでしょうか。
「乙姫犯人じゃないの？」

 

⑤絶海の鬼ヶ島

元ネタは「桃太郎」。

鬼ヶ島には現在13頭の鬼が住んでいます。ある日「鬼茂」が何者かに殺される事件が起きました。その後も次々と殺されていく鬼たち。犯人は桃太郎とその仲間たちなのでしょうか。

「鬼太」とか「鬼郎」とか、登場する鬼の名前の頭に「鬼」が付くので、ちょっと分かりづらかったかな、という印象です。意外な犯人で話がおもしろかっただけに、ストーリーに集中できなかったのは少し残念でした。

 

最後に

昔ばなしを元ネタにしたミステリ「むかしむかしあるところに、死体がありました。」

今までに読んだことがない組み合わせが新鮮で、最後まで一気に読みました。

僕のおすすめは「つるの倒叙がえし」。興味のある方はぜひ読んでみてください！

ここまで読んでいただき、ありがとうございました。

むかしむかしあるところに、死体がありました。
posted with ヨメレバ
青柳碧人 双葉社 2019年04月16日
楽天ブックス
楽天kobo
Amazon
Kindle
 

【はてなブログ】吹き出しを表示させて会話形式にする方法を詳しく解説してみた

はてなブログ

はてなブログ　吹き出しを使って会話形式にする方法

はてなブログで、吹き出しを使って会話形式にする方法にチャレンジしてみました。

 

A：「吹き出しってどうやってつくるの？」

B：「いまから詳しく説明しますね！」

って書くより、

 

吹き出しってどうやってつくるの？

いまから詳しく説明しますね！

って吹き出しを使って、会話形式にした方が目を引きませんか？

 

僕は文章を書くのが下手なので、読んでいただいた方の目にとまるように、吹き出しを使ってみました。

参考にさせていただいたのは、SHIROMAさんのこちらの記事です。

www.notitle-weblog.com

 

かんたんにできました。ありがとうございます！

 

今回僕がやったことは、以下のとおりです。

  • 吹き出し用の画像を準備する
  • 画像を［はてなフォトライフ］にアップロードする
  • 吹き出しのCSSをコピー → ちょっとだけ書き換える
  • 書き換えたCSSを［デザインCSS］に貼り付ける

 

最後に見たままモードの［HTML編集］画面で編集すれば、吹き出しを使った会話形式の記事が作れます。

 

 

STEP1. 吹き出し用の画像を準備する

最初に吹き出しのアイコンとして使う画像を準備します。

僕は無料でイラストがダウンロードできるサイト「イラストAC」を利用しています。

ひよこの画像サラリーマンの画像

Windows10の無料アプリ「ペイント3D」を使って、ダウンロードした画像を切り抜けば、かんたんにアイコン用の画像が作れたりします。
 

よろしければ下の記事もご覧ください。

www.matsutarou.com

www.matsutarou.com

 

STEP2. 画像をはてなフォトライフにアップロードする

画像が準備できたら、はてなフォトライフにアップロードします。

上部のメニューから［アップロード］をクリック → 破線の四角の中に画像をドラッグ＆ドロップします。

はてなフォトライフにアップロード

 

STEP3. CSSをコピーして書き換える

CSSをコピーする

まず下のCSSをコピーして、テキストなどに貼り付けてください。

/* 吹き出しのCSS　*/
.entry-content .l-fuki,
.entry-content .r-fuki {
  position: relative;
  width: calc(100% - 82px);
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding: 20px;
  border-radius: 6px;
  border: 2px solid #ddd;
  box-shadow: 0 3px 8px -2px rgba(0,0,0,.16);
  background-color: #fff;
  z-index: 1;
  box-sizing: border-box;
}
.entry-content .l-fuki {
  margin: 20px auto 36px 0;
}
.entry-content .r-fuki {
  margin: 20px 0 36px auto;
}
.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
  position: absolute;
  content: "";
  top: 16px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  background-color: #fff;
  z-index: 2;
}
.entry-content .l-fuki::before {
  right: -7px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.entry-content .r-fuki::before {
  left: -7px;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
  position: absolute;
  content: "";
  width: 60px;
  height: 60px;
  top: -6px;
  border-radius: 50%;
  border: 3px solid #fff;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: 1px 1px 5px #aaa;
  box-sizing: border-box;
}
.entry-content .l-fuki::after {
  right: -82px;
}
.entry-content .r-fuki::after {
  left: -82px;
}
@media screen and (min-width: 478px) {
  .entry-content .l-fuki::after,
  .entry-content .r-fuki::after {
    width: 80px;
    height: 80px;
  }
  .entry-content .l-fuki,
  .entry-content .r-fuki {
    width: calc(100% - 106px);
  }
  .entry-content .l-fuki::after {
    right: -106px;
  }
  .entry-content .r-fuki::after {
    left: -106px;
  }
}
.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}

 

コードを書き換える 

コードの一部分を書き換えます。
書き換えるのは、いちばん下の

  • クラス名
  • 画像のURL

の部分です。たとえば下のように書き換えます。

.matsutarou::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/m/matsutarouu/20200406/20200406204204.png);}
.hiyoko::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/m/matsutarouu/20200426/20200426142741.png);}

 

まず［クラス名］を半角英数字で書き換えます。分かりやすい名前がおすすめです。

［クラス名］を［hiyoko］に書き換えました

 

クラス名で使用できるのは、半角英数とアンダーバー（ _ ）、ハイフン（ - ）だけのようです。名前はアルファベットで始めてください。

 

 

つづいて［画像のURL］の部分を書き換えます。
先ほど、はてなフォトライフにアップロードした画像のURLを使用します。

上部のメニューバーから、［マイフォト］をクリック → アイコンにしたい画像をクリックします。

はてなフォトライフ_マイフォト

 

画面が変わるので、画像にカーソルを合わせて右クリック → ［画像アドレスをコピー］ をクリックします。

画像のアドレスをコピー

画像のアドレスがコピーされた状態になりました。
このURLを、コードの［画像のURL］部分にペーストして書き換えます。

 

ちなみに吹き出し用の画像は、何個でも追加できるので便利です。

CSSの記述

 

STEP4. はてなブログのデザインCSSにコードを追加する

先ほど書き換えたコードを、はてなブログのデザインCSSに追加します。
コードを追加する前に、デザインCSS内のコードをコピペして、バックアップすることをおすすめします。


まず最初に、先ほど書き換えたコードをコピーします。

次に管理画面のサイドバーから、［デザイン デザインアイコン ］ → ［カスタマイズ カスタマイズアイコン ］ → ［デザインCSS］の順番でクリックします 

はてなブログ管理画面

 
デザインCSSの記述欄に、
コードをペースト → 変更を保存します。

吹き出しCSSの追加

 

STEP5. スマホ用のコードを追加する

僕はPCとスマホを別デザインにしているので、スマホ用のコードも追加する必要がありました。

参考にさせていただいた記事のやり方とちょっと違うのですが、この方法で正常に表示されています。

なおレスポンシブルデザインの場合は、この設定は必要ありません。

 

管理画面のサイドバーから、［デザイン デザインアイコン ］ → ［スマートフォン スマホアイコン ］ → ［記事］の順番でクリックします 。

スマホのCSS設定1

 

下にスクロールして［記事上］の下の記述欄をクリックします。

スマホのCSS設定2


以下のコードを追加します。

<style type="text/css">
先ほどのCSS
</style>

 

下の画像のようなかんじです。
コードを追加したあと、［変更を保存する］をクリックして、内容を保存します。

スマホの吹き出しのコード


これでスマホにも、吹き出しが反映されました。

 

STEP6. 吹き出しを表示させる

記事内に吹き出しを表示させる方法です。

見たままモードの［HTML編集］画面で、以下のコードを入力します。

 

吹き出しが右側、画像が左側の場合

  • <p class="r-fuki クラス名">テキスト</p>

 

「クラス名」は先ほど決めた名前に書き換えます。
「r-fuki」と「クラス名」の間には半角スペースをいれます。
「テキスト」の部分が吹き出しの中の文字です。
仕上がりはプレビュー画面で確認してください。

 

吹き出し内で改行する場合
［Shift］+［Enter］で改行してください。

 

吹き出しが左側、画像が右側の場合

  • <p class="l-fuki クラス名">テキスト</p>

 

「クラス名」は先ほど決めた名前に書き換えます。
「l-fuki」と「クラス名」の間には半角スペースをいれます。
「テキスト」の部分が吹き出しの中の文字になります。
仕上がりはプレビュー画面で確認してください。

 

吹き出し内で改行する場合
［Shift］+［Enter］で改行してください。

 

最後に

今回は吹き出しの会話形式にする方法をご紹介させていただきました。

 

「ブログを読んでほしい！」っていうときに、吹き出しがちょっとしたアクセントになって目を引きますよね！

 

吹き出しを使った記事を書いたことのない方は、挑戦してみてはいかがでしょうか。

 

読みづらい部分もあったかと思いますが、最後まで読んでいただき、ありがとうございました。