あちこちのブログでよく見かける、吹き出しで会話方式にするっていうのをやってみたかったので、先日の記事を書く際にちょうどよいタイミングだと思ってやってみた。
ちょっと吹き出しが多すぎて、個人的にはイマイチ感が漂ってるけど、まぁしゃーない。
やっぱり、こういうのは使い所があって、ここぞという場面で使うほうがインパクトがあって良いんだろうな。
吹き出しの利用は超簡単だった
さすがあちこちで見かけるだけあって、いくつも解説しているサイトは見つかったんだけど、実際にいくつかやってみて、一番簡単だったのがこちらの方法。
参考にしたサイトはこちら
大まかな手続きは、こちらのサイトに書かれている通りでOK。
画像URLの指定にひと工夫
最後にCSS内に画像のURLを指定する必要がある。
ここにはてなフォトライフを使ってしまえば、簡単に終わるんだけども、私はこれを使わないようにしているので、ひと工夫が必要だった。
Googleフォトを使いたくない理由
私は画像の保存先を将来Wordpressに移行するときの為に、Googleフォトを使うようにしているんだけども、Googleフォトは画像の直リンクを取得する方法がいまいち確立されていない。 あちこちを調べてみても、情報が錯綜していてどういう仕組みになっているかブラックボックスで明かされていない。
色々と頑張って現状では取得できたと思っても、使っているうちに仕様変更などがあって使えなくなる可能性があり、それではちょっと困ってしまう。現に、そういう報告もいくつか散見される。
はてなブログのサイドバーにあるツールから記事内に貼り付けた際に作成されるURLは結構信憑性が高いので、コレを使うという手もあったんだけど、なんか使い勝手が悪そう。
悩んだ挙句Dropboxを使うことに
ってことで、今回はDropboxを使うことにした。
使い分けのルールとしては、以下のような感じ。
- 記事内の画像に関してはGoogleフォト
右のサイドバーからの使い勝手がそこそこ良いから - サイト内で使うパーツ類の画像はDropbox
パーツ類の画像は試行錯誤を繰り返すのでこちらのが手返しが良い
と、こんな感じで使うつもり。
DropboxをつかうメリットとしてはPC内のフォルダと常に同期しているので、画像の編集作業からURLの取得までをシームレスにできること。 アップロードをする作業が無くなるし、フォルダ管理もPC内の使い慣れたエクスプローラでできるので、やりやすい。
もうこれに尽きる。
なので、今回は吹き出しで使用する画像をDropboxの共有URLで取得して使用した。
Dropboxの直リンク取得方法
肝心なURLの取得方法はちょっとしたテクニックが必要だ。
- Dropbox内の目的のファイルで右クリック→Dropboxのリンクをコピー
- コピーされたURLを次のように書き換える。
- www.dropbox.com → dl.dropboxusercontent.com に変更
- 最後にある ?dl=0 を削除
変更例
https://www.dropbox.com/s/o22sv8blevpc5g4/bunga2.png?dl=0
↓
https://dl.dropboxusercontent.com/s/o22sv8blevpc5g4/bunga2.png
これでできたURLをCSS内で指定すればOK。
この方法は画像だけでなく、あらゆる方法で活用可能で、Greasemonkeyのユーザースクリプトの配布などでも、私はこの方法を利用している。
まとめ
Dropbox便利だよねぇ〜〜
てことで、(^^)/~~~
