👆読者登録してくれると嬉しいです!!
こんにちは!ひゃくまんさんです。
随分前に吹き出しができるようになったと報告しました。
この記事を書いて吹き出しのやり方を紹介すると書いたんですが。。。
面倒で全然書いてなかった問題。
今回はネタがないので吹き出しのやり方を紹介します。
吹き出しの手順
最初は吹き出しの手順から紹介します。
1つずつ紹介していこうと思います!!
ざっくり書くとこんな感じ👇
- 画像を準備する
- 画像アドレスをコピー
- 吹き出し用のCSSコードを貼る
- 定型文でコードを入れる
ざっくりとした説明はこんな感じです。
1画像の準備
まずは画像の準備からしましょう。
画像の準備ははてなフォトライフから準備します。
赤い枠のキューブみたいなのを押すと👆のように出てくると思います。
それではてなフォトライフを押しましょう。
はてなフォトライフを選択したら次はアップロードを押します。
アップロードを押すと写真を選択できます。写真は2枚選択してください!!
僕はいつも使っている写真にします。
このこの2枚でいつも吹き出しを作っています!
であとはサイズを変更します。
自分が吹き出しを作るアイコンを用意したら次は画像サイズを変更します。
変更の仕方は右下の画像を編集を押しマス。
150程度がおすすめです。大きすぎると多分うまく表示されないかもですw
僕は150にしています。
画像アドレスをコピー
次は画像アドレスをコピーします。
画像アドレスはパソコンのマウスの右クリックで行います。
右クリックで画像アドレスをコピーします。
コピーができたら画像準備はOKです。
画像アドレスは後で使うので何かにメモするかとしておきましょう。
吹き出し用の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);}
今のコードはここに貼ります。
少しわかりにくいですがデザイン→スパナマークを押します。
そしたら次はこれ👇
あともう少しの辛抱!!
簡単ですか?
デザインCSSを押して一番下に貼ります。
既に編集で貼っているコードがある場合は一番下に貼ってください。
コードを貼ったら一番最後の行の2行を自分で編集します。
.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}
クラス名は自分がわかりやすい名前に。(なんでもOK!
画像のURLには先ほどコピーした画像アドレスを貼り付けます。
定型文にコードを貼る
これでカスタマイズが最後!!
最後は定型文というところにコードを貼ります!!
ちなみに。。。僕はこの作業までに30分程度かかりました(最初)
( ゚Д゚)
吹き出しってやっぱ難しいもんです。できている人は結構すごいんです。
まあそんな話は置いておいて!定型文の説明!!
まずはブログ記事編集画面の+ボタンを押しマス👆の写真。
これを押すと。。。
編集サイドバーというのが出てきます。
その下の方に定型文貼り付けというのがあるのでそれをONにしてください!!
これで定型文は完了です。
次はコードを貼り付けていきます。
コードは以下の通りです。
※これを貼ると吹き出しが画像左に表示されます。
次は定型文を作成するを押しマス。
これを押すとこういう画面になると思います。
ここの空白にさっきコピーしたコードを貼ります!!
クラス名のところはCSSのカスタマイズした名前です。
テキストは自由に書き込んで結構です。
テキストのところを変えると吹き出しの喋る言葉が変わります。
👆こちらが右版です。
こちらも同じ手順でOKです!
これでいつでも吹き出しを使えるようになります!お疲れさまでした!👍
この記事を参考にしてくれた人!
最後はこの記事を参考にしてくれた人を紹介します!!
最後に
今回は吹き出しのやり方を紹介しました!!
説明が地味に難しかったですがなんとか説明できてよかったですww
吹き出しは1回やればもう簡単にできるのでおすすめです👍
吹き出し神!!
それでは今回はこの辺で!
ばいばい!
励みになるのでブログ村クリックお願いします!