ライブドアブログで『LINE風ふきだし会話』を作ろう!

2 min
ライブドアブログでLINE風ふきだし

ブログでLINEみたいにふきだしで会話表示するのって憧れますね~。

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

会話形式だと、すごくわかりやすいじゃないですか?

けど……ライブドアブログのスマホ表示だとふきだしを実現するのが難しいんです。

※より完成度を高めた記事を書いています♪

ライブドアブログはスマホにCSSが適用できない問題

ライブドアブログは、PC版のデザインにはCSSが適用できるんですが、スマホ表示だと全クリアされます(;´Д`)

今読んでいるこの記事は見出しの部分が青になっていると思いますが、ライブドアブログの標準仕様だと文字が太くなるだけです。

それがどうにも気に食わないので、何度か試行錯誤した結果、見出しに色がついています。

この記事を書いたときは、ブログ記事の冒頭にCSSを記述してるんだけど、最近は個別タグに直接スタイル指定をしているという有様(;´Д`)

まあ、これならスマホでもパソコンでも同じように見えますけど……ぶっちゃけめんどくさい。

ただ……この方法では実現できない野望があったんです。

それは……

ライブドアブログのスマホ表示で『LINE風ふきだし』を実現したい

冒頭にも書きましたが、会話形式って見やすいじゃないですか?

大半の方がメッセージアプリのLINEを使っていると思いますが、会話形式だとテンポよく読めますよね?

また記事の途中でツッコミが入ると、話のテンポを変えることもできるのでどうしても実現したかったわけです。

その情熱で調べることおよそ1ヶ月……

とあるブログ記事をきっかけに、実現できそうだということがわかったのであります。

参考にさせていただいたブログはこちら

こちらのブログによると……

ウェブサイトによっては、JavaScritp, CSS を定義したファイルをアップロードできない。特にブログサイトでは、自由にファイルをアップロードできないことが多い。その場合、

  1. 外部サイトにファイルを置き、
  2. HTML の head 要素内で、上記ファイルを指定する。

その際、外部ファイルの置き場として、Dropbox の Public フォルダを利用する方法がお手軽で良い。

あぁっ!確かに!

DropboxにはPublic フォルダという公開専用のフォルダがあります。

そのフォルダに入れたファイルは外部からアクセスすることができるんです。

わたしは以前、DropboxのPublicフォルダにアニメーションGIF画像を置いて公開した事があります。

基本的にはコレと同じで、ふきだしのスタイルを指定するCSSをDropboxに入れればイイのだ!

残念なお知らせ……
Dropboxでは使えなくなりました(T_T)
DropboxのPublicフォルダが非公開になるけど代案が見つからない件

改善策見つけました♪【追記:2017-02-23】
【完成版】ライブドアブログのスマホ・PCに、共通のCSSを適用する方法

とりあえず、ライブドアブログで吹き出し会話を実現するためにやってみよう!

ライブドアブログでふきだしを実現するためのCSS

CSSに関してはこちらのブログを参考にさせていただきました!

というか丸々コピーさせていただきます(;´Д`)

詳しい解説はこちらのブログをご覧下さい。

/* talk */
.talk {
padding: 20px 15%;
}
.talk:after {
content: "";
display: block;
clear: both;
}
.talk .left,
.talk .right {
clear: both;
position: relative;
max-width: 80%;
padding: 10px 20px;
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
}
.talk .left:before,
.talk .right:before {
z-index: 1;
content: "";
position: absolute;
top: 10px;
width: 0;
height: 0;
border-top: 2px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid transparent;
}
.talk .left {
float: left;
background-color: WhiteSmoke;
}
.talk .left:before {
border-right: 10px solid WhiteSmoke;
left: -14px;
}
.talk .right {
float: right;
background-color: GreenYellow;
}
.talk .right:before {
border-left: 10px solid GreenYellow;
right: -14px;
}

コレをまるまるコピーして、お好みのファイル名(fukidashi.css みたいな)で保存してください。

ライブドアブログでふきだしを表示する設定

Dropboxが使えなくなりましたのでここからは、改善版の方法で行きます♪

それでは、合体させた手順をご紹介

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

ライブドアブログの画像/ファイルファイル管理でCSSファイルをアップロードして下さい。

画像はこちらのつぶやきを参照ください。

2.CSSのURLをコピー

アップロードしたCSSファイルをクリックすると、アドレスバーにURLが表示されるので、それをコピーして、以下の場所に貼り付ける。

例えば、CSS, JavaScript を外部ファイルとして利用する場合、HTML の head 要素内に、以下のように記述する。

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

上の赤い文字部分を先ほどコピーしたリンクと差し替えます。

3.ブログの記事内に、2.で作ったものを貼り付け

ふきだしを使いたい記事の中に先ほど作成したものを貼り付けます。

4.ふきだし実装

記事内に以下のサンプルをコピペしてください。

ふきだし会話ができている……はず。

<div class="talk">
<p class="right">長くないですか
<p class="left">コピペすれば済みますので
<p class="left">次に、吹きだしを置きたいところに下のようなマークアップを書きます
</div>

talkクラス指定したdiv の範囲内で

左のふきだしにleftクラス

右のふきだしにrightクラスを指定すればOKっぽいよ!

唐突ですが……LINE風のふきだしテスト

こんにちは、謎の男です。

あ、どうも赤ペソ先生です。

ライブドアブログでは実現できないと思ってましたが、とうとうやりましたね!

ですね。答えを見つけるまでが長かったですわ。

それはともかくですよ……

ぶっちゃけこの記事……需要ありますかね?

それは言わないでくれたまえ。

私が満足しているからそれでいいのだよ。

banzai_boy

本人が納得しているならいいんですけど……

ていうかコレ、アイコンありませんね?

お、おう……。

まとめ

私にスキルがないので、ふきだしの横にアイコン画像をつけることはできなかったので、誰か実現してくれると嬉しい(笑)

ただLINEって、右の緑のふきだしが自分で左が相手と決まっているので、相手が誰かを最初に説明しておけば画像無くてもなんとかなりそうな気がする。

ちなみに、この記事を書いている途中に気づいたんだけど、この方法を活用すれば見出しなどのデザインも設定できます。

ただしページ数が2ページ以上で表示される長文記事の場合、最初CSSの読み込みをしたら、2ページ目以降ではCSS適用できないです。

ふきだしのCSSに関しては、ふきだしを使う直前で呼び出すのがいいのかもしれない。

ライブドアブログのカスタマイズ方法を色々まとめてみたので、こちらもご覧ください(*^_^*)

そんなわけできょうの備忘録はここまで。

最後までご覧いただきありがとうございます。

またどこかの備忘録で(^_^)/~

関連記事

6 件のコメント

  1. はじめまして。
    こちらの記事を参考に、ライブドアブログで吹き出しを実現したくてトライしています。
    つい先日まで、はてなブログで運用していましたが諸事情で移ってきました。
    はてなブログでは、下記の記事を参考に画像アイコン付の吹き出しを実装していました。
    http://shiromatakumi.hatenablog.com/entry/fukidashi
    この記事に記載のCSSの「.entry-content」の部分を全て削除して、アイコン用の画像はライブドアの画像アップロードで対応してみました。
    あとは、赤ペソ先生さんの記事の通りCSSファイルとしてアップロードして、実際の記事編集の際にクラスを指定して記述すれば…
    確かに表示ができるのですが、困ったことに下記の現象で躓いています。
    左アイコン+右吹き出しのクラス名「r-fuki」が左によりすぎていてアイコンが半分以上切れてしまうのです。
    右アイコン+左吹き出しのクラス名「l-fuki」は問題ないのですが…
    イマイチ、マージン指定とかの使い所がわからなくて解決に至りません。
    もし、分かるようならご教授願えたら幸いです。
    宜しくお願いいたします。

  2. こんばんは。
    一昨日のコメント後、更に試行錯誤の末、CSSの「.entry-content」の部分を「.article-body」に全て置き換えてみたら、ちゃんと本文エリアの中央に配置されてアイコンが切れるなどの不具合がなくなりました。
    後日、当方のブログでもこちらの記事も引用して、手順の詳細を紹介しようと思います。
    なんとか自己解決に至りました。
    また何かあったらお知恵を拝借することもあるかもしれません。
    その時は、宜しくお願いいたします。

  3. > 卯月廿六
    コメントありがとうございます。
    返信遅くなってすみません。解決したようで良かったです!
    それにしても……アイコン画像実装できるんですね!
    記事楽しみにしてます!
    書いたら教えてください。

  4. >赤ペソ先生
    ありがとうございます。
    是非、お知らせもしますし、記事内でこちらの記事の紹介と、トラックバックもしますね。
    まだ、移転して諸々の調整作業が続いているので、記事にまとめるのは1週間程度の時間を頂くと思います。
    ではまた。

  5. >赤ペソ先生
    記事公開しました♪
    結構、表現が難しくて解りづらい部分も有ると思いますが、良かったら御覧ください。
    トラックバックもしています。

  6. > 卯月廿六さん
    ありがとうございます!
    わたしも早速やってみたいと思います(笑)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA