こちらの記事にいただいた
コメントへお返事しました！
↓↓↓

よろしくお願いします
( ˘ω˘ )ﾍﾟｺﾘ

----------------




前回のおまけです。


実は前回の記事、私にしては頑張ったのです！！
何をがんばったのかというと・・・

１２５－２０

前からなんか憧れたんですよね。
吹き出しの会話形式でブログ書くこれ！！


というわけでいろいろ調べてやってみました。

基本的にはこちらのサイトに書いてあること
をまんまやっただけなのですが、


超初心者の私はこれだけじゃ分からなかったので
追加で調べたこともまとめておこうと思いまして。

要は自分のための備忘録です。

仕込みはややめんどくさいけど
記事作成はサクサクでした＼(^o^)／


事前の仕込み編

ここに私は２時間くらいかかりました。

１．アイコン用の画像をブログにアップロードする

（１）アイコン用の画像をつくる

私はいつものやつを流用しました。

いつものやつ↓
ko-egao1


（２）ライブドアブログの管理画面「画像/フォルダ管理」からアップする

画像を登録する

私は「かお」フォルダを作成してそこにぶち込みました

画像の名前変更


※画像のタイトルは自分が判別しやすいものにしておくのが吉。あと半角英数字で。

（３）画像のURLをコピーする

画像リンクのコピー

画像名を右クリック⇒「リンクのアドレスをコピー」クリックでOK
（画像の枚数分やる！5枚あげたら5枚それぞれのURLをコピーする！）

２．cssファイルを作成する

（１）メモ帳を開いて以下のcssをコピーする

↓枠の中を全部コピペ！

/* 吹き出しのCSS　*/
.article-body .l-fuki,
.article-body .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;
}
.article-body .l-fuki {
margin: 20px 20% 40px 0;
}
.article-body .r-fuki {
margin: 20px 0 40px 19%;
}
.article-body .l-fuki::before,
.article-body .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;
}
.article-body .l-fuki::before {
right: -7px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.article-body .r-fuki::before {
left: -7px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.article-body .l-fuki::after,
.article-body .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;
}
.article-body .l-fuki::after {
right: -110px;
}
.article-body .r-fuki::after {
left: -110px;
}
@media screen and (max-width: 620px) {
.article-body .l-fuki,
.article-body .r-fuki {
width: 70%
}
.article-body .l-fuki {
margin-right: 30%;
}
.article-body .r-fuki {
margin-left: 30%;
}
}
@media screen and (max-width: 478px) {
.article-body .l-fuki::after,
.article-body .r-fuki::after {
width: 60px;
height: 60px;
border-radius: 30px;
}
.article-body .l-fuki::after {
right: -84px;
}
.article-body .r-fuki::after {
left: -84px;
}
}
.アイコンの名前::after {background-image:url(画像URL/〇〇/〇〇.png);}
.アイコンの名前::after {background-image:url(画像URL/〇〇/〇〇.png);}


こんな感じで↓
メモ２



（２）一番下の赤文字部分を自分用にカスタマイズする

この部分↓

.①アイコンの名前::after {background-image:url(②画像URL/〇〇/〇〇.png);}

①②それぞれこの部分をコピペします

①アイコンの名前＝画像の名前（任意の半角英数字）
画像の名前変更２

②画像URL＝手順１－（３）でコピーしたやつ
画像リンクのコピー２


私の場合はこんな感じ↓

【ちゃんこの例】①赤文字、②青文字
.ko-egao1::after {background-image:url(https://livedoor.blogimg.jp/chanko/imgs/5/9/592b108c.png);}


私はチャンポンとちゃんこのいろんな表情のアイコンを追加したのでこんな感じになりました。
ここが一番地味な作業でした。

メモ最終形態

しかし完成したところでこのまま保存すると拡張子が「.txt」のテキストファイルになってしまう・・・

メモ１

なので、ファイル名の末尾に「.css」を追記して保存する

メモ名前をｃｓｓにする

拡大↓
メモ名前をｃｓｓにする - コピー

そうすると自動的にcssファイルになる！！

メモがｃｓｓファイルになった！

これびっくりした！！


３．cssファイルをブログにアップロードする

（１）ライブドアブログの管理画面「画像/フォルダ管理」から

cssファイルをアップする

こんな機能があったのね・・・(´･ω･｀)

（２）アップロードできたら、ファイル名前をクリックする

（３）すると新しいウィンドウでこんな画面がでてくるので、ここのURLをコピー

cssファイルのリンクをコピー


４．記事に貼り付けるHTMLを作成する

手順３－（３）でコピーしたURLを下の赤い部分に貼りつける

<link href="http://〇〇/〇〇.css" type="text/css" rel="stylesheet" />


私の場合はこうなります↓↓
<link href="http://chanchanko.blog.jp/fuki3.css" type="text/css" rel="stylesheet" />

記事作成編


５．ふきだしを使いたい記事で事前準備で仕込んでおいたHTMLを貼る


（１）ふきだし付きの記事を書くときは毎回、手順４で作成したHTMLを貼る（HTMLタグ編集画面にて）

HTMLタグ編集画面はこんな感じ


（２）ふきだしを使いたい場所で下のHTMLを使う

【右ふきだし（アイコンは左）】
<p  class="r-fuki ①アイコンの名前">ここにセリフを記入</p>

①アイコンの名前＝手順２－（２）で作ったcssファイルと同じ名前

■例：
<p  class="r-fuki ko-nga">こんにちは</p>

そうすると表示はこうなる↓

こんにちは




【左ふきだし（アイコンは右）】
<p  class="l-fuki ①アイコンの名前">ここにセリフを記入</p>

①アイコンの名前＝手順２－（２）で作ったcssファイルと同じ名前

■例：
<p  class="l-fuki ko-egao1">すごーい！！</p>

表示はこうなる↓

すごーい！！



HMTLタグで記入した内容はブログ記事編集画面では反映されません。
必ずプレビュー画面で確認すべし。


HTMLタグ編集画面で書いた内容↓
HTMLタグ編集画面はこんな感じ


ブログ記事編集画面では変化が分からないものの
編集画面では文字のみ


プレビュー画面を見ると・・・
プレビュー１
ちゃんとできてる！！！＼(^o^)／

プレビューで狙い通り表示されたときめっちゃ気持ちよかったです(笑)

※注意：
ふきだしの中に入れたいセリフは必ず</p>の前に収めること。
この</p>が「ふきだしの範囲はここまでです」って意味なので。

■失敗例：
<p  class="l-fuki ko-egao1">毎朝Siriにその日の天気予報を教えてもらってるんだけど、</p><br/>ここ４日連続で予報が外れてるのはどういうことかしら
↓↓↓
ｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰ

毎朝Siriにその日の天気予報を教えてもらってるんだけど、


ここ４日連続で予報が外れてるのはどういうことかしら
ｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰ
↑改行したとこがふきだしからはみ出てる・・！

■成功例：
<p  class="l-fuki ko-egao1">毎朝Siriにその日の天気予報をおしえてもらってるんだけど、<br/>ここ４日連続で予報が外れてるのはどういうことかしら</p>
↓↓↓
ｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰ

毎朝Siriにその日の天気予報をおしえてもらってるんだけど、
ここ４日連続で予報が外れてるのはどういうことかしら

ｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰ

（３）ちなみにこの方法だとスマホ版でも自動的に反映してました！便利！



以上です！



こうして作られたのが昨日の記事になります！！
↓↓↓

なんかすごく、それっぽく見えますよね！(*‘∀‘)
自己満かもですが(笑)

仕込みさえやっちゃえば記事作成はそんなに難しくないしうまくできるとめっちゃ気持ちいいので！

参考までに！


おしまい

----------------

LINEで読者登録できます！
どうかこのボタン押してください！
↓↓↓


よろしくお願いします( ˘ω˘ )

---------------