吹き出しＣＳＳ

数年前、真似て作った「吹き出しＣＳＳ」なる小技･･･スッカリ忘れてたので･･･再度、忘備録。

表示結果一覧

<p class="r-fuki kawa">吹き出し投稿テスト</p>

吹き出し投稿テスト

<p class="l-fuki hige">吹き出し投稿テスト</p>

吹き出し投稿テスト

<p class="r-fuki wakamono">吹き出し投稿テスト</p>

吹き出し投稿テスト

<p class="l-fuki jyoshi">吹き出し投稿テスト</p>

吹き出し投稿テスト

<p class="r-fuki tuiki">吹き出し投稿テスト</p>

吹き出し投稿テスト

<p class="l-fuki nayamu">吹き出し投稿テスト</p>

吹き出し投稿テスト

<p class="r-fuki tereru">吹き出し投稿テスト</p>

吹き出し投稿テスト

<p class="l-fuki kakkoi">吹き出し投稿テスト</p>

吹き出し投稿テスト

<p class="r-fuki eee">吹き出し投稿テスト</p>

吹き出し投稿テスト

<p class="l-fuki byby">吹き出し投稿テスト</p>

吹き出し投稿テスト

<p class="r-fuki kininaru">吹き出し投稿テスト</p>

吹き出し投稿テスト

<p class="l-fuki onegai">吹き出し投稿テスト</p>

吹き出し投稿テスト

<p class="r-fuki inoru">吹き出し投稿テスト</p>

吹き出し投稿テスト

<p class="l-fuki safe">吹き出し投稿テスト</p>

吹き出し投稿テスト

<p class="r-fuki okoru">吹き出し投稿テスト</p>

吹き出し投稿テスト

<p class="l-fuki cub">カブ乗りイラスト作った</p>

カブ乗りイラスト作った

追加方法

・ピクセル200ｘ200／透過png or jpg／画像を作る

・「はてなフォトライフ」にインポート

⭕https://cdn-ak.f.st-hatena.com/images/fotolife/i/intertechtokyo/20180909/20180909100***_***.jpg
❌https://cdn-ak.f.st-hatena.com/images/fotolife/i/intertechtokyo/20180909100***_***.jpg
※アドレスコピー取得画面を間違えると「年月日」項目が抜けるので･･･要注意

・メモ帳等にペースト

・.byby::after{background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/i/intertechtokyo/20180909/20180909100***_***.jpg);}

赤 ⇒ 固定文（先頭のドット必須）
青 ⇒ ネーミングを付ける ⇒ クラス名
黄 ⇒ 前述コピペ

・はてなデザインを開いて「デザインＣＳＳ」の文章の該当行に追加ペースト

ＣＳＳ追加方法

こちらの教示サイトにコピペ全文があります。
未登録の方は、真似して下さい。

全文最後の行（説明図では２件分）を書き換えるだけです。

一度、ＣＳＳ登録しておけば、消えません。では･･･再見❗