以下の記事を拝見致しました。
なるほど……文章中に吹き出しのレイアウトを使ったところ、平均ページ滞在時間が伸びたらしい……
ぜひ、うちのブログでも活用したい……どうにか無料ブログでも実装できないものか……
ご覧の通りです。
livedoorブログでも実装できました。
サンプルを探そう
今回は、以下のサイトに紹介のサンプルを使用させて頂きました。
検索キーワード「css 吹き出し」で探しました。「この技術でこういうことやりたい」と検索すればだいたいヒットする世の中万歳。
css定義に追記しよう
livedoor Blogの場合、以下の手順でcss定義の書き換えができます。
あとは、編集画面内に、先のページから自分が使いたい吹き出しのcssを書き足せばOK。
私の場合、追記の開始位置に、コメントアウトでサンプル取得元のURLを記述したりしています。あと、cssの変更の前後には、ローカル環境にバックアップを取得しておくと安心です。
編集画面では吹き出しレイアウトが適用されていないので注意
さて、吹き出しレイアウトを使う準備が整ったので、早速記事を書いてみましょう。
このように、編集画面では吹き出しレイアウトのcssが効いていないのですが、
プレビュー画面で完成予定ページを見てみると、ちゃんと吹き出しになっています。
ご安心ください。
本当は編集画面でも吹き出し表示して出来栄えを逐一確認したいのですが、ちょっとそこまではやり方がわかっていません……情報お持ちの方がいらっしゃればシェアしていただけると……！
[2018.4.2追記]スマホから閲覧した時にcssが効いていない……！？
あとで自分のブログをスマホから見返して驚愕したのですが、上記までの方法だと、スマホで見た時に正しく吹き出しが実装されていません……！
慌てて、以下のサイトを参考に、
このページだけは吹き出し実装されるように、応急処置を施しました。
これで吹き出しはどうにかスマホ版画面でも実装できました。
ついでに見出しのcssも効いていないので適用したのですが、
ちゃんと当たってる気配が無いんだよなー……
このあたりのノウハウがちゃんと溜まったら、改めて報告差し上げます。
* * *
そんな感じで、本ブログにも吹き出し機能が実装されましたとさ。
今後も気が向いたら使っていこうと思います。
使用頻度がそんなに無い場合、
「ああ、実装だけして満足したんだろうな」「飽きたんだろうな」と思っていただければ。
