アゴ乗せ日記

適当なポジティブ日記

【はてなブログ】会話風吹き出しのやり方【初心者OK】

我がブログにも会話風吹き出しを入れたい!

時は来た。それだけだ。

作るもの

こんな感じ

やること

  1. 画像のアップロード
  2. デザインCSSの反映

画像のアップロード

まずは画像アップロード!とその際に画像のURLをコピーするところまでやっていきます。
画像のURLはCSS設定する時に使います。

『はてなフォトライフ』を開きます。
記事編集画面の以下のボタンから遷移できます。

f:id:agonosetaro:20200209205614p:plain


新しいフォルダを適当に作っておきます。

f:id:agonosetaro:20200209211242p:plain


そこにファイルをアップロードします。 画像のURLが必要になるので、各画像を選択してURLをメモしておきます。

f:id:agonosetaro:20200209213530p:plain


右クリックで『画像アドレスをコピー』。

f:id:agonosetaro:20200209213753p:plain

それぞれの画像URLをメモしておいてください。

URLはhttps://cdn-ak.f.st-hatena.com/images/fotolife/a/ID/~~~~~~
みたいな形になっていると思います。

このフェーズは以上です。

デザインCSSの反映

CSSはこちら。こちらをデザインCSSに追記します。

.entry-content .chat {
    display: block;
    position: relative;
    left: 100px;
    text-align: left;
    padding: 13px;
    border: solid 2px #d5d5d5;
    border-radius: 12px;
    background: #fff;
    width: fit-content;
    word-break: break-all;
    margin-bottom: 50px;
    margin-top: 10px;
    max-width: calc(80% - 100px);
}

.entry-content .chat:before {
    position: absolute;
    top: 10px;
    left: -7px;
    height: 10px;
    width: 10px;
    content: "";
    border-right: 2px solid #d5d5d5;
    border-bottom: 2px solid #d5d5d5;
    background-color: #fff;
    transform: rotate(135deg);
}

.entry-content .chat:after {
    position: absolute;
    content: "";
    width: 80px;
    height: 80px;
    top: -6px;
    left: -100PX;
    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;
}

.papa-default:after {
    background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/a/パパの画像URL);
}
.mama-default:after {
    background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/a/ママの画像URL);
}

今回はパパアイコンとママアイコンの2つを追加したので .papa-default:after{}.mama-default:after{}を用意しました。

それぞれのブロック内のbackground-image: url()にメモしておいた画像URLを貼り付けます。

また、今後画像を追加したい場合は同じ要領で .papa-egao:afterなど写真別にクラス名をつけて、同様にbackground-image: url()の画像URLを設定すればOKです!

以上!

使ってみる

使い方はこんな感じです。

<p class="chat papa-default">どや!</p>
<p class="chat mama-default">どや!</p>


どや!

どや!

クラス名にchatを入れると吹き出しが表示され、
アイコンを表示したい場合はcssで設定した papa-defaultmama-defaultなど、使いたい画像のクラス名を書きます。

スマートフォン対応

スマホページに反映させるにはレスポンシブ対応されているテーマを使うか、 はてなブログPro契約であれば デザイン > スマートフォンからカスタムHTMLを設定できるので、そこに<style></style>タグを追加してその中に上のCSSを追記してあげてください。

f:id:agonosetaro:20200210092420p:plain:h300

おわり

一度やってみたかったんだよなぁ。

以上!