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

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

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


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

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


SPONSORED LINK


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

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

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


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


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

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


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


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

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

大半の方がLINEを使っていると思いますが、会話形式だとテンポよく読めますよね?


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


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

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


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


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

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

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

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

あぁっ!確かに!


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

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


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


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


すごい残念なお知らせ……
この方法使えなくなる可能性大です(T_T)

【関連記事】DropboxのPublicフォルダが非公開になるけど代案が見つからない件


ライブドアブログでふきだしを実現するための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 みたいな)で保存してください。


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

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

     
  1. DropboxのPublcフォルダに さきほど作成したCSSファイルを入れる。
  2.  
  3. 対象のファイルを右クリックすると出てくる公開リンクをコピーをクリック。
  4. Dropbox


  5. 公開用のリンクがクリップボードにコピーされている状態なので、とりあえずメモ帳などのテキストエディタに貼り付けておいて……
  6. 例えば、CSS, JavaScript を外部ファイルとして利用する場合、HTML の head 要素内に、以下のように記述する。

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

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


  7. ブログの記事内に、3.で作ったものを貼り付ける
  8. その後 記事内に以下をコピペしてみて。
  9. <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に関しては、ふきだしを使う直前で呼び出すのがいいのかもしれない。


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


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


【オススメ】▶赤ペソ先生が利用しているサービスまとめ


SPONSORED LINK


この記事が気に入ったら
いいね!お願いします♪

最新情報をお届けします

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