【muragonカスタマイズ】吹き出しを使った会話風（LINE風）の設置【コピぺするだけ】

2020/06/23 12:32

【追記】2020.6.24 07:51

本記事での設置方法ではスマホで正しく表示されないことが指摘されました…。

こんな感じで表示されてるつもりでした（▼これは画像です）

オレが令和の世にスマホを持ってないので確認もしてませんでした。
大変申し訳ございません。

現在、原因を究明中（←言ってみたかった）ですので、今しばらく設置の方はお控えいただければアレだしナニです。

原因究明いたしましたら、記事を書き換えたりせず【追記】というカタチでお知らせいたします。

【さらに追記】2020.6.24 11:30

吹き出しの設置に関して、オレのPC師匠（原因究明チームリーダー）にも見ていただいたところ、

どうやらmuragonの仕様で、
スマホにはCSSが出力されていないようです。

もう一度言いますね？

muragonの仕様で…

オレのせいじゃなくて。オレのせいじゃなくて。オレのせいじゃなくて。

ホントにお騒がせして申し訳ございませんでした。

師匠からは外部にCSS置く方法や、HTMLの中にCSSの定義を置く方法なんかも提案していただきましたが、こうなってくるとそこそこの知識が必要になるので、今回ご紹介したように「コピペでOK！」ではなくなってしまいます。

オレが今の時代にスマホ持ってないだけで、今やブログは多くの人がスマホから閲覧されていると思われます。

ついでに今日見たらなんと
120万アクセスを頂いておりました＼(^o^)／ﾋｬｯﾎｰｳ
ので、沢山のアクセスへのお礼がてら自慢がてらな次第で大変恐縮ですが、これ見るとPCから70万アクセスでスマホから50万アクセスって感じですもの。

スマホからの閲覧がかなりの数になっております。

スマホで動作しねえモノの設置はオススメできませんので、アップした本記事はそのまま残しておきますが、どうかご了承頂いた上で本記事をお読みください。

いつか、ムラゴン開発チームの皆さんがスマホでもCSSを出力できる方向でアップデートしてくれるのを期待して。

【さらに追記】2020.6.24 18:30

ウチのIT総合戦略本部本部長（PC師匠）がスマホに吹き出しを反映させることに成功した模様。

本記事の設定をした上で、
こちらをお試しください。

誰にも望まれていないような草刈りのどうでもいいバカ話はちょいとおいといて、もしかしたら誰か使ってみたいって人がいるかもしれないので、ウチのブログにしては珍しく誰かのお役に立ちたいって方向の記事をひとつ。

興味ない方は華麗にスルーの方向で調整してください。

muragonの人気ブログくろたかさん（ブログ内ではオレの妄想後輩）からリクエストもあったので、muragonブログ内に「吹き出しを使った会話風（LINE風）の設置」について解説してみます。

会話風の吹き出しってこんなヤツ。

ええい！muragonブログ内に吹き出しを装備したいだと？
認めたくないものだな。自分自身の…若さゆえの過ちというものを…

先輩。お願いしますよ。そこをひとつ。

うっせえ野郎だな…
ウダウダ言ってねえでサッサと教えろよこのやろう…
こちとら時間がねえんだよ。
試験はさておき何より競馬だし競馬だし競馬だし

おい…コラ…
私がニュータイプだというコトを忘れたか？
心の声見えちゃってっから…

なんとなく見たコトありますかね？

何かわからないコトがあってググったトキに、
詳しく解説してくれる神のような親切ブログなんかでよく見かける、
Q&Aとか先生と生徒が会話してるような感じで出てきますよね。

もちろんオレはこのバカブログで誰かに何かを教えたいのではなく、
バカブログにふさわしい悪ふざけとして使うのですが。悪しからず。

そんじゃ長いですが出来るだけ簡単に解説していきます。
（※個人の感想です）

大前提として、
設定はPCからじゃないと無理だと思います。

あと、
一応CSSとHTMLを使います。

わかります。
もうこのCSSとHTMLって単語をみただけでこのページを閉じたくなりましたね？
わかります。

でもCSSとHTMLがなんなのか1mmもわからなくて大丈夫。

オレだってマジで雰囲気しかわかってません。

必要なのは

PCから設定する気がある
コピぺができる

この二つだけ。いやマジで。

参考にしたのはググって

一番トップに出てきた、

こちらのサイトです。

こちらの解説ブログは大変わかりやすいので、多少CSSとかHTMLがわかる方なら上記ブログだけで完結しますが、リンク先は【はてなブログ】用ってコトで諦めてしまいそうでしたら、実はなんら改変するコトなくそのままmuragonで使えましたYOってコトをご報告いたしてみたい歌丸です。

まずは…
上記ブログ（リンク先）のCSSの部分を丸ごとコピーします。

え？どこ？それ？なに？こうですか？わかりません…って方は

/*---------------
◆ ふきだし ◆
---------------*/

/*=== 共通設定 ===*/

/*全体の上下左右の余白*/
.fuki {margin: 20px 0 ;}
/*テキスト回り込み解除*/
.fuki:after,.fuki:before {clear: both; content: ""; display: block;}

/*アイコン画像の設定*/
.fuki figure {margin: 0; display: block;}
.fuki figure img {
width: 100%;
height: 100%;
border-radius: 50%;
margin: 0;
vertical-align: middle;
border: 1px solid #ccc; /*★アイコン画像の枠線の太さと色の調整*/
}
/*アイコン画像の設定*/
.fuki-img-left {margin-left: 10px; margin-top: 1px; float: left;}
.fuki-img-right {margin-right: 10px margin-top: 1px; float: right;}
.fuki-img-left,.fuki-img-right {width: 90px; height: 90px;}

/*アイコン画像の名前*/
.fuki-img-name {padding: 0; margin-top: 3px; font-size: 10px; line-height: 1.2em; font-weight: 400; text-align: center; display: block;}

/*=== 会話風ふきだし ===*/
.chat-text-left,.chat-text-right {
position: relative;
margin: 0 100px 16px;
padding: 16px;
box-shadow: 1px 1px 5px #aaaaaa90; /*★ふきだしの影*/
border-radius: 10px; /*★ふきだしの丸さ調整*/
}
.chat-text-left p,.chat-text-right p {
margin:0 !important;
font-size: 16px;
color: #; /*★ふきだし内テキスト文字色*/
}

/*左からのふきだし*/
.chat-text-left {
background-color: #f0f0f0; /*★①左ふきだし背景色*/
border: 1px solid #aaa; /*★②左ふきだし枠線の色*/
}
/*左からのふきだしの三角部分*/
.chat-text-left:after {
position: absolute;
top: 16px; left: -22px; content: '';
border: 12px solid transparent;
border-right: 12px solid #f0f0f0; /*★①ふきだし背景色*/
}
.chat-text-left:before {
position: absolute;
top: 16px; left: -24px; content: '';
border: 12px solid transparent ;
border-right: 12px solid #aaa; /*★②左ふきだし枠線の色*/
}

/*右からのふきだし*/
.chat-text-right {
background-color: #99ff99; /*★③右ふきだし背景色*/
border: 1px solid #00ff00; /*★④右ふきだし枠線の色*/
}
/*左からのふきだしの三角部分*/
.chat-text-right:after {
position: absolute;
top: 16px; right: -22px; content: '';
border: 12px solid transparent;
border-left: 12px solid #99ff99; /*③右ふきだし背景色*/
}
.chat-text-right:before {
position: absolute;
top: 16px; right: -24px; content: '';
border: 12px solid transparent;
border-left: 12px solid #00ff00; /*★④右ふきだし枠線の色*/
}

/*=== もくもくふきだし ===*/
.mkmk-text-left,.mkmk-text-right{
position: relative;
margin: 0 100px 16px;
padding: 16px;
box-shadow: 1px 1px 5px #aaaaaa90; /*★もくもくの影*/
border-radius: 30px; /*★もくもくの丸さ調整*/
}
.mkmk-text-left p,.mkmk-text-right p {
margin: 0 !important;
font-size: 16px;
color: #555; /*★もくもく内テキスト文字色*/
}
/*左からのもくもく*/
.mkmk-text-left {
background-color: #ffaadd; /*★⑤左もくもく背景色*/
border: 1px solid #ff66aa; /*★⑥左もくもく枠線の色*/
}
/*左もくもくの丸い部分*/
.mkmk-text-left:before {
position: absolute;
content: ''; top: 16px; left: -16px;
border-radius: 50%; width: 12px; height: 12px;
background-color: #ffaadd; /*★⑤左もくもく背景色*/
border: 1px solid #ff6699; /*★⑥左もくもく枠線の色*/
}
.mkmk-text-left:after {
position: absolute;
content: ''; top: 26px; left: -26px;
border-radius: 50%; width: 8px; height: 8px;
background-color: #ffaadd; /*★⑤左もくもく背景色*/
border: 1px solid #ff6699; /*★⑥左もくもく枠線の色*/
}

/*右からのもくもく*/
.mkmk-text-right {
background-color: #88ddff; /*★⑦右もくもく背景色*/
border: 1px solid #55aaff; /*★⑧右もくもく枠線の色*/
}
/*右からのもくもくの丸い部分*/
.mkmk-text-right:before {
position: absolute;
content: ''; top: 16px; right: -16px;
border-radius: 50%; width: 12px; height: 12px;
background-color: #88ddff; /*★⑦右もくもく背景色*/
border: 1px solid #55aaff; /*★⑧右もくもく枠線の色*/
}
.mkmk-text-right:after {
position: absolute;
content: ''; top: 26px; right: -26px;
border-radius: 50%; width: 8px; height: 8px;
background-color: #88ddff; /*★⑦右もくもく背景色*/
border: 1px solid #55aaff; /*★⑧右もくもく枠線の色*/
}

/*=== レスポンシブ設定 ===*/
@media (max-width: 767px){
/*スマホ表示の時は横幅いっぱいに広げる*/
.chat-text-left,.mkmk-text-left {margin-left: 90px; margin-right: 0;}
.chat-text-right,.mkmk-text-right {margin-left: 0; margin-right: 90px;}
/*スマホ表示の時はふきだし画像サイズを小さくする*/
.fuki-img-left,.fuki-img-right {width: 80px; height: 80px;}
}

/*-- ふきだしここまで --
------------------------*/

上の四角（引用）の呪文みてえなあの中身を、何も考えなくていいですから
丸ごとコピーしてください。

この時点で脱落する人は先に進まないようにひとつ。
ムリだと思いますんで…。

んで、
muragonのダッシュボード（タイムライン）から

デザイン変更をポチッとな。

そうすっとこんな画面になるので、

一番下のCSSカスタマイズをポチッとな。

そうすっと、

こんなん出てきますので、あのスタイルシートの中にさっきコピーした呪文をペーストしましょう。

こんな感じに。

呪文をコピーしてこのスタイルシートにペーストしたら、

一番上のメニューの「保存」が点滅してますので保存します。

CSSの設定はたったこれだけ。

CSSとHTMLの死ねばいいのにツートップの一匹はやっつけたりました。

残すはHTMLのやろうだけ。
HTMLのやろうは難しくはないんだけど面倒臭いんだよね。

そんじゃそのHTMLを駆使した記事の書き方（吹き出しの設置）を解説します。

まず、
吹き出しを使いたいんなら画像を用意しませう。

仕事できる系ジジイの出張の際の自撮りを勝手に拝借して、

正方形か正円で切り抜く。
どっちにしても吹き出しで使うトキには四角い画像でも勝手に円になります。

んで、解説ブログに説明されていたように、

150ピクセルの大きさにして保存して、

ブログに写真をアップするように、いつも通りmuragonにアップ。

そしたら、いよいよHTMLの野郎ですが、
上記解説ブログの中からHTMLの部分をコピーします。

例によってこうですか？わかりません…って方は、

<div class="fuki">
<figure class="fuki-img-left">
ここに画像
<figcaption class="fuki-img-name">
なまえ
</figcaption></figure>
<div class="chat-text-left">
<p class="chat-text">
左からのふきだし
</p></div></div>


<div class="fuki">
<figure class="fuki-img-right">
ここに画像
<figcaption class="fuki-img-name">
なまえ
</figcaption></figure>
<div class="chat-text-right">
<p class="chat-text">
右からのふきだし
</p></div></div>


<div class="fuki">
<figure class="fuki-img-left">
ここに画像
<figcaption class="fuki-img-name">
なまえ
</figcaption></figure>
<div class="mkmk-text-left">
<p class="mkmk-text">
左からのもくもく
</p></div></div>


<div class="fuki">
<figure class="fuki-img-right">
ここに画像
<figcaption class="fuki-img-name">
なまえ
</figcaption></figure>
<div class="mkmk-text-right">
<p class="mkmk-text">
右からのもくもく
</p></div></div>