ふきだし会話

こんにちは。赤ペソ先生(@spinf60 )です。

ライブドアブログでLINE風の『ふきだし会話』を実現したくて、以前…こんな記事を書きました。


この記事を書いた時『ふきだし』は実現できたんですが、アイコンを付けることができてませんでした(;´Д`)

しかし…………ブログにいただいたコメントから、アイコン付きのLINE風ふきだし会話が実現できましたよ!!

やりましたね!

そんなわけで今回は、ライブドアブログでアイコン付きのふきだし会話を実現する方法についてのお話です。


SPONSORED LINK


ふきだし会話にアイコンが実装できそう

わたしが書いた「livedoor BlogでLINE風ふきだし会話を作ろう!」の記事に、卯月廿六さんからコメントをいただきました。

コメント原文は上にある記事リンク先で見ることができますが、ザックリいうと……

はてなブログでアイコン付きの吹き出しを実装する方法で、ライブドアブログにも実装しようとしたけど行き詰まっている

というものでした。

ちなみに……はてなぶろぐでアイコン付きふきだし会話を実現する元記事はこちら↓


その後……、わたしが返信する前に卯月廿六さんは自己解決されていました(;´Д`)

んで、書かれた記事がこちら!!


記事を読ませていただいたんです。

、ホントにライブドアブログでアイコン付き吹き出し会話が実現できてるんですよ(*_*)すげぇ。

そんなわけで、卯月廿六さんの記事を参考にちょこっとだけアレンジしてやってみますね。


ライブドアブログでアイコン付きのLINE風ふきだし会話を実現する手順

それでは実装する手順を書きますね。


アイコン画像を準備

アイコン入れたいんだからそりゃそうですよよね。

わたしのアイコンはコレ。

赤ペソ先生

それ以外のアイコンは『いらすとや』からダウンロードしました。


吹き出しの横に表示されるアイコンは丸くなります。自分で加工する必要はありません。


画像ファイルをアップロード

[ 記事を書く ]画面で画像をアップロードして、記事の中に画像を貼り付けます。

画像アップロード

htmlエディタで画像のURLをコピーして、メモ帳などに貼り付けておいてください。

画像の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;
  }
}
.ajyupon01::after {background-image:url(http://livedoor.blogimg.jp/uzuki9071/imgs/f/a/fa66596f.jpg);}
.uzuki01::after {background-image:url(http://livedoor.blogimg.jp/uzuki9071/imgs/2/e/2ecb48e2.jpg);}
.doku01::after {background-image:url(http://livedoor.blogimg.jp/uzuki9071/imgs/5/b/5baf28fa.jpg);}

上のCSSの黄色の部分にアイコン名、水色部分には先ほどコピーしたアイコン画像のURLを貼り付けます。

アイコン名は自分がわかればいいので適当にわかりやすいものを。

で、このCSSに適当な名前(fukidashi.css など)をつけて保存。


※ここからちょっと注意

上のCSSでは

右から左へのふきだしを、l-fuki(left fukidashi)

左から右へのふきだしを、r-fuki (right fukidashi)

と設定してあります。


ただ……これだとわたしの頭が混乱するので、私が使うCSSでは……

左の人の吹き出しを、l-fuki

右の人のふきだしを、r-fuki

という感じに変更しました。


あと…………元のCSSでは左右どちらの人の吹き出しもグレーの縁取りです。

わたしはLINE風にしたかったので、右側(r-fuki)のふきだしは緑色に設定しています。

そんなわけで、わたしが使っている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 .r-fuki {
	margin: 20px 20% 40px 0;
	background-color: GreenYellow;
}
.article-body .l-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 .r-fuki::before {
	right: -7px;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	background-color: GreenYellow;
}
.article-body .l-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 .r-fuki::after {
	right: -110px;
}
.article-body .l-fuki::after {
	left: -110px;
}
@media screen and (max-width: 620px) {
	.article-body .l-fuki,
	.article-body .r-fuki {
		width: 70%
	}
	.article-body .r-fuki {
		margin-right: 30%;
	}
	.article-body .l-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 .r-fuki::after {
		right: -84px;
	}
	.article-body .l-fuki::after {
		left: -84px;
	}
}


.akapeso01::after {background-image:url(http://livedoor.blogimg.jp/akapeso/imgs/2/1/215ef3fa.png);}
.sensei01::after {background-image:url(http://livedoor.blogimg.jp/akapeso/imgs/9/6/966df04f.png);}
.man01::after {background-image:url(http://livedoor.blogimg.jp/akapeso/imgs/f/c/fc875b70.png);}
.what01::after {background-image:url(http://livedoor.blogimg.jp/akapeso/imgs/1/3/132d672f.png);}


CSSファイルをアップロード

管理メニューの 『画像/ファイル』の『ファイル管理』でCSSをアップロードします。

画像はこのつぶやきでご確認ください↓


アップロードしたCSSをクリックすると、ブラウザのアドレスバーにURLが表示されますので、それをコピーしておいて下さい。


記事内に貼り付け

先ほどコピーしたCSSのURLを下の赤い部分に貼り付け。

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

ふきだしを使いたい記事の中に、これを記述することでふきだしが使えるようになります。


実際にふきだし会話を使ってみよう

それでは実際にやってみたいと思います。


赤ペソさん。お体の調子はいかがですか?

そうですね。
チョット喉が痛くって本調子じゃないですね。

え?一昨日ブログ更新してませんでしたっけ?

ちょっっ。
それ秘密。。。

お元気そうですね。それでは、お帰り下さい。


実際にはこのように記述しています。

<link href="http://akapeso.info/styles/fukidasi00.css" type="text/css" rel="stylesheet" />

<p class="l-fuki sensei01">赤ペソさん。お体の調子はいかがですか?</p>

<p class="r-fuki akapso01">そうですね。<br />チョット喉が痛くって本調子じゃないですね。</p>
<p class="l-fuki sensei01">え?<a href="http://akapeso.info/archives/20170323/1065130026.html" >一昨日ブログ更新してませんでしたっけ?</a></p>

<p class="r-fuki akapso01">ちょっっ。それ秘密。。。</p>

<p class="l-fuki sensei01">それなら大丈夫ですね。お帰り下さい。</p>

classで r-fuki 、 l-fuki を指定して、その後にアイコン名を記述する感じです。

<p class="r-fuki akapso01"></p>


まとめ

やったーー、これでちゃんとしたふきだし会話が使えるようになったね。。

卯月廿六さんに感謝!


そんなわけできょうの備忘録はここまで。
最後までご覧いただきありがとうございます。
またどこかの備忘録で(^_^)/~ 赤ペソ先生(@spinf60 )でした。


読者登録すると、ブログ更新した時にLINEでお知らせします♪


↓↓赤ペソ先生が利用しているサービスまとめ

おすすめ

SPONSORED LINK


「この記事がいいね!」と
君が言ったから
3月 25 日は
赤ペソ記念日♪

最新情報をお届けします

Twitterで赤ペソ先生をフォローしよう!