機械音痴向け！はてなブログで吹き出し会話の設定方法！完全版！～調べ疲れたあなたへ～
はてなブログでアイコンと吹き出しを使う方法をシェアしたいと思います！
機械音痴の私が約10日間も理解できずに混乱したので覚書として残します。
正直言ってあきらめようとも思いました。
本気でしんどかったです。
ここにたどり着いたということは、お疲れですね！
ややこしいし、面倒ですが何とかラスト1回やってみませんか？
そもそもこの用語って何？な方にも詳しく機械音痴目線で書いていきます。
それではスタート！
- デザインCSSって何？
- HTMLとは？
- 吹き出し作りの準備！
- デザインCSSをコピーした！
- デザインCSSを自分用にカスタマイズする
- 画像アドレスって何？
- 画像アドレスを取得しよう！
- クラス名と画像のURLをコピペしてHTMLを作成
- 吹き出しを使えるように設定する
- 吹き出しを使ってみよう！
- あれ？スマホで反映されない
HTMLとは？
機械音痴向けに説明すると、httpsやwww等から始まるHPなどのアドレスのようなものです。
皆さんのブログのページにも割り振られています。
吹き出し作りの準備！
まず、デザインCSSというものをコピーします。
色んな方が提供してくださっているので、お好きなデザインをコピーします。
（ご自由になどがブログに書いている方のデザインがいいと思います。またコピーをさせていただいたらコメントでお礼報告することをおススメします。）
私はこの方のデザインを参考にさせていただきました。
デザインCSSを自分用にカスタマイズする
新規記事作成ページの一番下まで移動してください。
このようなCSSがあると思います。
ここに必要な情報を入れます。
画像のURLって何？
→ここに使用するアイコンの画像アドレスをコピペします
何人か分の吹き出しを作りたいな…
.クラス名::after {background-image:url(画像のURL);}
↑これを先に人数分コピペして貼っていくとそのあとが楽です！
画像アドレスって何？
画像をコピぺするために必要なものです。画像の住所のようなものですね。
画像アドレスを取得しよう！
赤で囲んだところを左クリックしてください
次に画面左側のフォトライフを左クリック
画面右上のマイフォトを左クリック
HatenaBlogを左クリック
さらに編集を左クリック
画像の左下の四角を左クリック
右クリックでコピー
私の画像アドレスを例にあげます。
先ほどコピーした画像アドレスを新規記事作成ページに貼り付ける
この画像アドレスの前後を削除して下のHTMLの形にする
↓
htttps://cdn-ak.f.st-hatena.com/images/fotolife/k/kurukuruu13/20191108/20191108102937.jpg
削除が済んだものを新しくコピー
これを画像のURLに貼り付ける
.クラス名::after {background-image:url(画像のURL);}
これが画像アドレスになります。
クラス名と画像のURLをコピペしてHTMLを作成
構成はこんな感じになっています（当てはめてコピペしていく作業です）
.クラス名::after {background-image:url(画像のURL);}
クラス名も入力するとこんな感じのHTMLができます
.mama::after {background-image:url(htttps://cdn-ak.f.st-hatena.com/images/fotolife/k/kurukuruu13/20191108/20191108102937.jpg);}
これで吹き出しとアイコンのHTMLが作成できました。
先ほどのデザインCSSの一番下のクラス名と画像のURLを自身のものに置き換えてください。
