マジで?コレどうすんだ?

まったくのド素人が小屋らしきものを作ってみた

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

【追記】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からじゃないと無理だと思います。


あと、
一応CSSHTMLを使います。


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


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


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


必要なのは

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

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


参考にしたのはググって

一番トップに出てきた、

こちらのサイトです。


こちらの解説ブログは大変わかりやすいので、多少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の部分をコピーします。


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

ここに画像

なまえ

左からのふきだし



ここに画像

なまえ

右からのふきだし



ここに画像

なまえ

左からのもくもく



ここに画像

なまえ

右からのもくもく

四角の中(引用)を丸ごとメモ帳なり、ブログの下書きなりに丸っとコピーしておいて、


実際ブログ書くトキに使いたい部分だけを抜き出してコピーするのですが、


うっすら気づいて欲しいのは上の四角の中(引用)には、
吹き出しタイプ4パターンの吹き出しが全部入ってます。

  1. 左から吹き出し出て喋る
  2. 右から吹き出し出て喋る
  3. 左からモクモク吹き出しでる
  4. 右からモクモク吹き出しでる

の4つが丸っとコピーの中に入ってるというコト。


それらの使いたいひとつを(コピーする区切りは「」から「

」まで)コピーして、ブログの記事に貼り付けるのですが、



普段PCからブログ書く人はVIEWモードで書いていると思いますが、あそこをポチっとするとHTMLモードになりますので、
ファッキンHTMLモードにしてから(←重要)

コピペします。


そして、

「ここに画像」と書いてある文字を必ず消して、その位置に

さっきアップした画像をいつも通り、記事に画像埋め込む要領でポチっとすると、

VIEWモードだと画像が貼り付けられますが、ファッキンHTMLモードだと、ほぼ暗号か呪文的な何かが貼り付けられたハズです。
もうこれで触らない。


んで、

なまえ
の行の「なまえ」って文字だけを消して、好きな名前に変更しましょう。(置き換える)


したら、最後に、

左からのふきだし
の行から「左からのふきだし」って文字だけを消して、吹き出しの中に入れる本文を書きます。(置き換える)

こんな感じになるハズ。


そしてプレビューしてみると!


オレ・アズナブル

ララァは賢いな…




ほら。これで完成ですってば。


あとは会話風にしたければ、今度は右から吹き出しを貼り付けて同じ要領で「画像」と「名前」と「本文」を書くだけ。


興味のある方は是非試してみてください。


CSSもHTMLもわからなくて出来るはずです。
コピぺさえできれば。


ただし、
面倒くさいのは面倒くさいので普段よりブログ書く時間はかかります。
オレもそのうち面倒くさくて飽きる可能性大…。


あと、
オレが今んトコ採用してるやり方として、
一度作ったコレらファッキンHTMLをブログの下書き保存しておいて、

こんなんは投稿しねえので、日付を2025年とかにしておくと、

記事一覧で探すトキにいつでも一番上にいるんだよ。(埋もれない)


画像も一回150pxの作って使ったら、
その後他の記事書くのに画像アップしまくって埋もれると探すの大変なので、

・・・。


あの下書きに画像貼り付けたまんま保存しておけば、
次に探すのは下書きのHTMLん中からだけでいい。


そんな感じで誠に遺憾です。


もしわからなければコメントで質問してくださいませ。
てか、
これ以上どう簡単に説明すんのか…わかりません…こうですか?


あと、
言うまでもないですが個人の責任においてカスタマイズしてくださいませ。
もし取り返しのつかないコトしちゃったからって、
オレが責任負う気は一切ないので悪しからず。


そしてあくまでもこのプログラム(CSSとHTML)を作ったのは、オレじゃなくて

こちらの方ですので、感謝はこちらの方へひとつ。

×

非ログインユーザーとして返信する