はてなブログをカスタマイズする。会話形式を作る、画像をDropboxから取得する
ブログをカスタマイズする。会話をどう表現するのか
はてなブログのカスタマイズについての記事になります。できるだけブログを読みやすい形にして、皆さんにうつ病について知ってもらいたい、理解してもらいたいという強い思いで行なっています。
今回は、会話について何かいい方法がないかということで色々と調べてみました。また画像データを外部のサービスから取得して表示させる方法として、Dropboxを使ってみました。結果として結構うまく行きました。
会話について
僕のブログの中で、2週間に1回心療内科に通院をしています。その時にお医者様との会話を残すようにしているのですが、ブログに書く時にどのように書くのか結構迷うというか、上手く描く方法がありません。
なんかいい方法がないかなと思って調べてみるとありました。ブログで会話形式の吹き出しなどを効果的に使って会話を表現しているものが。
こちらには、CSSファイルとHTMLが記載されているのでその通りにすれば、最近のブログでよくみる会話形式が表示されることになります。
僕はこんな感じの形にしました。
会話で使用されているアイコンをどうする？
この会話形式では、会話の主体をアイコンで表示しています。アイコンは画像ですので、画像データを使用するのですが、画像ファイルのURLが必要になります。
サイトによっては、はてなフォトライフに画像をアップロードしてその画像のURLを取得す流ということをされていますが、僕はちょっと違う方法で画像のURLを取得しようと思います。
DropboxでURLを取得する
僕は、今ブログで使用している画像をDropboxに入れています。目的はバックアップのためというのがメインです。 でも、よく考えたらこのDropboxから共有リンクでURLを取得することができるので、これで、はてなブログの会話のアイコンを使用したらいいんじゃないだろうかと。
DropboxでURLを取得する方法
さて、DropboxでURLを取得する方法ですが、これは簡単です。Dropboxのサイトに行くか、すでにローカルにDropboxのフォルダがある場合はそちらにいきます。そして対象となるファイルを選択し、右クリックで「Dropboxリンクをコピー」を選びます。それで、URLが取得されます。
結果としてはこのURLではブログには画像として表示されなかった
取得されたURLはこういった形式です。 https://www.dropbox.com/s/osa6lgux51m237v/utublogpic.jpg?dl=0
ただこれでは、うまくブログに画像ファイルが表示されません。これって何故なんでしょうか。ちょっと僕のスキルではわかりませんでした。
調べてみると同じ悩みを持って解決した人がいた
わからなければ調べればいいということで、インターネットで調べてみると、いろんな人がいますね。
DropboxのPublicフォルダが終了したので共有リンクに切り替える - FOXISM
このサイトの下の方のメージに、Dropboxの画像をwebページにアップする方法として、画像のURLを「https://https//www.dropbox.com」から「https://dl.dropboxusercontent.com」に帰ることでimgタグを使ってwebページにあげるというものです。
同じやり方をしたらできた
当たり前ですが、うまくいきました。この記事の上の方にある会話形式の画像はその方法で行いました。
終わりに
Dropboxを使用してブログの画像データを表示させるという手は、ブログ自体が重くならないようにするための手としては有効だと思います。 またサーバーをレンタルしている場合はその容量に限りがありますので、画像をたくさんアップするブログをしている人は気になるところだと思います。
なので、Dropboxを活用してうまくサーバーの容量を管理されてみてはどうでしょうか。
