【はてなブログ初心者必見】キャラと吹き出しを入れる！
この記事を読むと「ブログ初心者」でも、簡単に「吹き出し」の設定ができます！
ポイントで、キャラクターの顔と「吹き出し」で会話みたいにできると、わかりやすかったり、親しみが持てたりしますよね。
勿論、見栄えも良くなります！
このページでは【ブログ初心者】が「はてなブログ」などで、かんたんに「吹き出し」の設定をする方法について記載します。
この記事は↓この方の情報をもとにしております！感謝！
はてなブログで吹き出しを使った会話形式を作るカスタマイズ - Random Life Blog
吹き出しを話すキャラクター画像をアップロードする！
「ダッシュボード」から、右上にあるタイル状のボタンを押すとメニューが出てきます。
そこから「はてなフォトライフ」を選びます。
画面が切り替わって画面右上に【アップロード】とあるのでそちらをクリック
「クリックしてファイルを選択するか、ここにファイルをドラッグしてください」
と表示されるので、ファイルを選択してそこへ画像をアップロードします。
アップロードした画像は、「クリックしてファイルを選択するか、ここにファイルをドラッグしてください」のすぐ下に並んでいくので、写真を右クリックします。
一番下の「プロパティ」を選ぶと、URLが出てくるのでコピーしてメモ帳かどこかに保存しておきます。
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);}
書き換えるのは最下段にある部分
.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}
で、クラス名の部分と画像のURLの部分を、先ほどコピペしておいたものも使って書き換えます。
クラス名はアルファベットで先頭に数字や記号以外の文字を使えば、自分で自由に決めてOKです。
ブログでの記入！
HTML編集で、<p>の部分を
<p class="l-fuki クラス名">、<p class="r-fuki クラス名">
に書き換えます。
<p class="l-fuki クラス名">テキスト</p>
<p class="r-fuki クラス名">テキスト</p>
「クラス名」を先程指定したものに書き換えて、入力したい文章を「テキスト」の部分に書きます。
実際の表示は、プレビューで確認します。見たまま編集では表示されません。
私の場合、HTML編集への記載は以下で記入すると、
<p class="l-fuki sg">がんばるぞ！</p>
<p class="r-fuki ms">わーい！</p>
実際の表示は↓
がんばるぞ！
わーい！
いくつか表情を登録しておけば！
ちょっと大変だけど、いくつかの表情をアップロードしておけば、
いろんな表情で会話できますよ！
・・・・
寝るんかい！
なんだっけ！？
覚えてないんかい！
わいはダメ人間や！
あんた、サルやないけ
！
でけた、でけた！！！(^^)
まとめ
いかがでしたか？
私は結構、時間と労力がかかりました。。。
でも、表示されたときは、かなり嬉しいです！是非、お試しください！
初心者ブログ術のまとめはこちら↓
それでは、また！
■登録まだの方のために念のため：
↓誰もが推奨、まずは最大手のA8.net
↓Amazon、楽天とか直アフィリより簡単お得、もしもアフィリエイト
↓その他アフィリエイト老舗の２社
↓モバイルアプリのアフィリエイトなら！
もし未登録でしたらぜひ登録を！
