みなさんこんにちは！たまのこです。
このブログに新しい仲間ができました。
命名：たまくん
これまでブログを書いている中で、ひとりでボケてひとりでツッコんでを繰り返してきましたが、まあ〜寂しいんですよ。。
なので今回から相方を用意しました。
これからちょこちょこ吹き出しで協力して貰おうと思いますので、よろしくお願いします。
おいコラ！おめーらよろしくな！
こんな感じでとっても口が悪いので、あとで説教しておきます。
こっちは僕です。遺影ではありません。
あまり出ることはないと思いますが、解説時などに使おうと思い念のために作りました。
実物と同じぐらいのイケメンに仕上がってますね！
・・・・・
と、まあ『たまくん』の紹介はこの辺にしておいて、吹き出しを作るのってPCが不慣れな方だとちょっとだけ難しいんですよね。
僕も不慣れな方なので、ちょっと苦戦しました💧
なので今回は吹き出しの作り方を、出来るだけ分かりやすく共有していこうと思います。
デザインCSSに貼り付け
まずはてなブログをご利用であれば、デザインCSSに記述していきます。
デザイン→カスタマイズ→デザインCSSの順番に開きます。
デザインCSSの中に下記のコードをコピペして貼り付けます。
コピぺは右クリックでコピーを選択します。
デザインCSSにいき、右クリックで貼り付けを選択して貼り付けます。
/* 吹き出しのCSS */
.entry-content .l-fuki,
.entry-content .r-fuki {
position: relative;
width: 80%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 20px;
border-radius: 6px;
border: 2px solid #999;
box-shadow: 1px 1px 5px #aaa;
background-color: #fff;
z-index: 1;
}
.entry-content .l-fuki {
margin: 20px 20% 40px 0;
}
.entry-content .r-fuki {
margin: 20px 0 40px 19%;
}
.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
position: absolute;
content: "";
top: 16px;
width: 10px;
height: 10px;
border-right: 2px solid #999;
border-bottom: 2px solid #999;
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: 80px;
height: 80px;
top: -10px;
border-radius: 40px;
border: 3px solid #fff;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
box-shadow: 1px 1px 5px #aaa;
}
.entry-content .l-fuki::after {
right: -110px;
}
.entry-content .r-fuki::after {
left: -110px;
}
@media screen and (max-width: 620px) {
.entry-content .l-fuki,
.entry-content .r-fuki {
width: 70%
}
.entry-content .l-fuki {
margin-right: 30%;
}
.entry-content .r-fuki {
margin-left: 30%;
}
}
@media screen and (max-width: 478px) {
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
width: 60px;
height: 60px;
border-radius: 30px;
}
.entry-content .l-fuki::after {
right: -84px;
}
.entry-content .r-fuki::after {
left: -84px;
}
}
.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}
この中で書き換えるのは、下のクラス名と画像のURLだけです。
クラス名はアルファベットか半角英数字・ハイフン（ – ）、アンダーバー（ _ ）で記述していきます。
冒頭から数字や記号で始めるとエラーが出るので、アルファベットから始めて下さい。
「クラス名って何を入れたら良いの？」と思われる方もいるかもしれませんが、管理できるのであれば正直なんでも良いです。
a、b、cだけでも大丈夫です。
ただ実際に利用する際に「aってなんだっけ？」となる可能性もあるので、分かりやすいクラス名にする事をお勧めします。
僕は〈.tamakun5::after〜〉などで、バリエーションを分けて管理してます。
画像のURLリンクをコピー
画像のURLリンクをコピーして、デザインCSSの〈画像のURL〉へ貼り付けていきます。
貼り付け方は、上記の赤丸で囲んであるどちらかを押すと画像が保管されているフォトライフに移動します。
吹き出しにしたい画像を選択すると、こんな画面になると思います。
この画面になれば画像を選択して右クリックで〈画像アドレスをコピー〉を選択。（MAC利用なら指2本にして選択すると画像アドレスをコピーを選択できます。）
コピーできればデザインCSSに戻り、〈画像のURL〉の部分に貼り付けます。
サンプル
.tamakun5::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/t/tamagonokodomo/20191125/20191125002750.jpg);}
同じ用途で下に書き足していけば、吹き出しの種類はいくらでも増やせます。
これで一旦更新すれば準備OKです。
ここまで出来れば実際に記事の方に吹き出しを入れていきます。
吹き出しを記事に入れる方法は、〈HTML編集〉と〈Chrome拡張〉から貼り付ける2種類の方法があります。
HTML編集に貼り付け
まずはHTML編集に貼り付ける方法です。
編集ページのHTML編集を選択します。
HTML編集の中で吹き出しを入れたい場所に、下記コードを記載します。
<p class="l-fuki クラス名">テキスト</p> →吹き出し左・画像右
<p class="r-fuki クラス名">テキスト</p> →吹き出し右・画像左
サンプル
<p class="l-fuki tamakun5">たまごクラブ、ひよこクラブ、こっこクラブ</p>
上記のコードを入力すると、この様に記載する事が出来ます。
たまごクラブ、ひよこクラブ、こっこクラブ
一旦プレビューで確認してみて下さい。
Chrome拡張から貼り付け
HTML編集に貼り付けでも吹き出しは出来るのですが、Chrome拡張からやる方が圧倒的に簡単です。
まずChrome拡張を追加していない方は下記サイトから追加登録して下さい。
追加登録できれば、上記画面の様に鉛筆マークが表示されます。
表示されている事が確認できれば、吹き出しにしたい文章を選択します。
文章を選択したら 鉛筆マークをクリックします。
鉛筆マークをクリックすると、この様な見慣れない画面が表示されます。
表示されれば上記の様に入力し、《Add Class》を押せば吹き出しになります。
あともうひと頑張りでやんす☆
入力コードは下記参照
r-fuki クラス名 →吹き出し左・画像右
l-fuki クラス名 →吹き出し右・画像左
クラス名にはデザインCSSに登録しているクラス名を入力します。
因みに[ l ]は小文字の[ L ]です。
スマホの設定
ここまでくれば終了〜という訳でもありません。
あと最後にもうひとつだけ設定しなくてはいけない事があります。
まずスマホにも吹き出しが表示されるかを確認します。
確認し表示されていなければ、下記手順で設定が必要となります。
上記の画像の手順で、デザイン→１→２→３の手順で進めていきます。
３の〈スマートフォン用にHTMLを設定する〉を選択すると、コードを入力出来る画面が表示されますので、そこにデザインCSSで記述したコードを貼り付けます。
スマホに貼り付ける場合は〈style〉で囲む必要があります。
<style>
ここにデザインCSSに貼ったコードと同じコードを貼り付ける
</style>
最後にPCとスマホどちらも確認し、吹き出しが設定されているか確認してみて下さい。
表示されていれば完成です！
お疲れ様でした✨
ちょっと大変でしたが吹き出しがあるだけで、ブログの雰囲気も変わりますし伝えたい部分もより明確に伝える事が出来ると思います。
吹き出しを設定してみたいと思われた方は、ご参考に！
おまけ
『たまくん』の様なキャラクターを無料で作られたいと思われた方へ。
こちらの記事を参考にさせて頂きました。
色々な似顔絵メーカーが載ってますので、おすすめです☆
今回はこれで以上となります。
それでは本日も最後まで読んでいただきありがとうございました！
また次のブログでお会いしましょう(´ω｀)／