「はてなブログ」画像に吹き出しで説明を加える方法と、それを画面幅に応じてレスポンシブ表示にする方法

この記事では、画面の幅に応じて画像と吹き出しの位置を切り替える方法を紹介します。後半では吹き出しのデザインを変更する方法も解説しますので楽しみにしておいて下さい。

切り替えのやり方はたくさんありますが、必要最低限の設定でスマートに表示でき、無料版でも実装できる方法を自分なりに考えたつもりですので、多くの方に使っていただけると嬉しいです。初心者でも自分でカスタマイズ出来るように表現を工夫している所もありますので、詳しい方はツッコミたくなるかもしれませんがご了承下さい!

その前に一応注意点なのですが、css(ブログの設計図) や、html(記事ページの設計図)をいじる際は、必ずバックアップを取るようにしておいてください。バックアップと言っても、cssやhtmlを全部コピペしてメモ帳かそこらに貼り付ければ大丈夫です。

記事ページの簡単なバックアップ方法なら別記事で紹介していたので、ここでも載せておきます。

同じ記事を複製して片方をバックアップ用に保存しておけば大丈夫です。「記事の管理」から、カスタマイズしたい記事をコピーします。

f:id:oyomiyo:20180222164950j:plain

コピーしたら、バックアップの記事だということが分かるようにタイトルを少し変更しておくとわかりやすいと思います。

最後に「下書き保存」するのを忘れないでください。

実際の表示例

イメージとしては、画面の大きいデバイスでは画面左半分に画像、右半分に吹き出しを作り画像が大きくなりすぎるのを避けます。

f:id:oyomiyo:20180203124307j:plainPCでの表示例です。PCでの表示例です。PCでの表示例です。PCでの表示例です。PCでの表示例です。PCでの表示例です。PCでの表示例です。PCでの表示例です。PCでの表示例です。PCでの表示例です。

パソコンや画面幅の大きいタブレットなどで見ている人はこの表示が一番ちょうどよく感じるのではないでしょうか。一方でスマホの画面で見ている人は画像が小さく見にくい印象を受けると思います。それで、スマホでは下のように表示します。

f:id:oyomiyo:20180203124307j:plainSPでの表示例です。SPでの表示例です。SPでの表示例です。SPでの表示例です。SPでの表示例です。SPでの表示例です。SPでの表示例です。SPでの表示例です。SPでの表示例です。SPでの表示例です。

パソコンで見ている人は画像がデカデカと表示され少し気持ち悪いと思いますが、スマホではこの表示がベターでしょう。画面幅に応じてこの2つを切り替えることで見やすい表示にできるはずです。吹き出しのデザインについてもカスタマイズする方法を紹介しますので楽しみにしておいてください。

 

画像を2つ準備してどちらか片方を非表示にする方法もありますが、そうすると表示速度が遅くなってしまう危険性があります。

私の方法は画像を一枚しか使わないためおすすめです。別記事で紹介予定ですが、さらに応用を効かせて様々な表示方法に組み替えることもできるため実用的なだと思います。(自画自賛)

ざっくりと仕組みを説明しておきます。私の場合は記事のhtmlの中に直接cssを書き込む形でカスタマイズしています。

記事ごとにカスタムしやすくなりますし、変更が必要になった時も記事ページの中のコードの書き換えだけで完結してしまいます。ただし、絶対必要となる材料(例えば吹き出しのスタイルを決めるcss)は記事ページの中にではなく、ブログそのもののcssに書き込んだ方がいいでしょう。

そうすれば、いちいち記事の中に同じコードを記述する必要は無くなります。記事の中には、それらの材料をどのように表示するかのみを書き込むことで、記事ごとに応用を効かせて表示を変更しやすくなり、表示速度にも極力影響しないでしょう。

今回は1枚の画像に対して2つの吹き出し(上向きと左向き)をあらかじめ準備しておき、画面幅に応じてどちらか片方を非表示にすることで読みやすくしています。そのため、吹き出しの方は2つ用意しておく必要があります。画像については1枚しか準備していませんが、吹き出しが切り変わるのと同じタイミングで画像の横幅のみを切り替えてあげれば問題ありません。

この説明では良く分からないかもしれませんが、これから説明を交えつつ紹介するので大丈夫です。

吹き出しのCSSを記述する。

始めに吹き出しのcssを準備しておきます。書き込む場所は、管理画面→デザイン→工具マークと進んで記事上の部分に記述します。

f:id:oyomiyo:20180208093550j:plain

以下のコードを書き込みます。コピペして使ってください。レスポンシブテーマを使わず、PC表示とSP表示を分けてカスタマイズしている人は、PC用とSP用のそれぞれに同じコードを追加することになります。めんどくさければ、SP表示の際に記事ページのhtmlをPCから引き継ぐ(「PCと同じHTMLを表示する」に設定する)こともできます。

CSS

<style type="text/css">

.ball01-top { /*吹き出し上向き*/
    position: relative;
    display: inline-block;
    text-align: left;
    margin-top: 17px;
    color: #555; /*文字色*/
    font-size: 95%; /*文字サイズ*/
    box-sizing: border-box;
    border-radius: 0px; /*角を丸くする*/
    background: #fff; /*背景色*/
    border: solid 3px #ccc /*枠線の色*/
}

.ball01-top:before{
    content: "";
    position: absolute;
    top: -24px;
    left: 50%;
    margin-left: -15px;
    border: 12px solid transparent;
    border-bottom: 12px solid #fff; /*背景色*/
    z-index: 2;
}

.ball01-top:after{
    content: "";
    position: absolute;
    top: -30px;
    left: 50%;
    margin-left: -17px;
    border: 14px solid transparent;
    border-bottom: 14px solid #ccc; /*枠線の色*/
    z-index: 1;
}

.ball01-top p {
    margin: 0;
    padding: 0;
}


.ball01-left { /*吹き出し左向き*/
    position: relative;
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    color: #555; /*文字色*/
    font-size: 95%; /*文字サイズ*/
    box-sizing: border-box;
    border-radius: 0px; /*角を丸くする*/
    background: #fff; /*背景色*/
    border: solid 3px #ccc /*枠線の色*/
}

.ball01-left:before{
    content: "";
    position: absolute;
    top: 50%;
    left: -24px;
    margin-top: -12px;
    border: 12px solid transparent;
    border-right: 12px solid #fff; /*背景色*/
    z-index: 2;
}

.ball01-left:after{
    content: "";
    position: absolute;
    top: 50%;
    left: -30px;
    margin-top: -14px;
    border: 14px solid transparent;
    border-right: 14px solid #ccc; /*枠線の色*/
    z-index: 1;
}

.ball01-left p {
    margin: 0;
    padding: 0;
}

</style>

以上が吹き出しのコードです。

記事中にコードを記述する

次は記事のhtmlの中にコードを書き込みます。

まずはhtmlの書き換えができるように「見たままモード」に切り替えてから編集してください。やり方が分からない人は以下を参考にして下さい。

「設定」を選択して編集モードを「見たままモード」に変更します。

f:id:oyomiyo:20180222164940j:plain

最後に一番下までスクロールして「変更を保存する」をクリックするのを忘れないでください。(←これ結構忘れます汗。)

では記事画面でコードを貼り付けていきましょう。

「見たままモード」には「見たまま編集」と「html編集」の2つが用意されていますが、コードを張り付ける際は「html編集」に切り替えて下さい。

以下がコードです。

CSS

<style type="text/css"><!--
.balloon-box { display: inline-block; text-align: center; }
.balloon-box img.hatena-fotolife { width: 50%; vertical-align: middle; }
.ball01-top { display: none; padding: 7px 5px; }
.ball01-left { width: 48%; margin-left: 2%; padding: 7px 5px; }
@media only screen and (max-width: 599px) {
.balloon-box img.hatena-fotolife { width: 100%; }
.ball01-top { display: inline-block; }
.ball01-left { display: none; }}
--></style>

先程少し触れましたが、このコードで吹き出しと画像をどのように並べるかを決めていることになります。記事そのものに書き込んだコードはその記事内でのみスタイルが適応されるため、記事ごとに様々なカスタマイズができるというメリットがあります。

コピペする場所は、html編集画面の一番上がいいと思います。

f:id:oyomiyo:20180312125218j:plain

*コードが違いますが、貼り付ける場所は同じです。

上のコードは実際の画面上では表示されなくなります。プレビュー画面でちゃんと非表示になっているか確認していおいてください。

画像と説明文のコード

最後は、画像と吹き出しの説明文を書き込むコードです。

HTML

<div class="balloon-box">ここに画像のimgタグ<span class="ball01-left">ここにPC表示用の説明文</span><span class="ball01-top">ここにSP表示用の説明文</span></div>

これが型となるコードです。使いたい記事中の場所にコピペしてください。

画像のimgタグについては、画像を記事に張り付けた後htmlを確認すると表示されます。(「見たまま編集」で画像を貼り付けた後、「html編集」でコードを確認します。)そのうちの<img/>で囲まれた部分が画像のimgタグです。

画像のコード

<p><img class="hatena-fotolife" title="f:id:oyomiyo:20180203124307j:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/o/oyomiyo/20180203/20180203124307.jpg" alt="f:id:oyomiyo:20180203124307j:plain" /></p>

赤で表示されている部分全体のことです。皆さんの画像のこの部分を先程のコードの中にコピペすれば画像が表示されます。

私の場合だとこんな感じになりました。

HTML

<div class="balloon-box"><img class="hatena-fotolife" title="f:id:oyomiyo:20180203124307j:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/o/oyomiyo/20180203/20180203124307.jpg" alt="f:id:oyomiyo:20180203124307j:plain" /><span class="ball01-left">ここにPC表示用の説明文、ここにPC表示用の説明文、ここにPC表示用の説明文、ここにPC表示用の説明文、ここにPC表示用の説明文</span><span class="ball01-top">ここにSP表示用の説明文、ここにSP表示用の説明文、ここにSP表示用の説明文、ここにSP表示用の説明文、ここにSP表示用の説明文</span></div>
f:id:oyomiyo:20180203124307j:plainここにPC表示用の説明文、ここにPC表示用の説明文、ここにPC表示用の説明文、ここにPC表示用の説明文、ここにPC表示用の説明文ここにSP表示用の説明文、ここにSP表示用の説明文、ここにSP表示用の説明文、ここにSP表示用の説明文、ここにSP表示用の説明文

画面幅に応じてどちらか片方の吹き出しだけが表示されていれば正解です。

皆さんも、書き込み終わったら正しく表示されているか確認してください。プレビュー画面では正しく表示されない場合もあるので、可能であれば実際に画面幅の違うデバイスで確認するようにしてください。

これで完成です。記事の後半では、細かい設定や吹き出しのデザインを変更する方法を紹介します。

ブレークポイントを調節する

今まで説明してきた通り、これは画面幅に応じて画像と吹き出しを切り替えています。ただ、ブログのレイアウトや記事幅については人それぞれですから、切り替える丁度いいタイミングも人それぞれでしょう。

ブレークポイントは記事の一番上側に貼り付けたコードの中にあります。

CSS

<style type="text/css"><!--
.balloon-box { display: inline-block; text-align: center; }
.balloon-box img.hatena-fotolife { width: 50%; vertical-align: middle; }
.ball01-top { display: none; }
.ball01-left { width: 48%; margin-left: 2%; }
@media only screen and (max-width: 599px ) {
.balloon-box img.hatena-fotolife { width: 100%; }
.ball01-top { display: inline-block; }
.ball01-left { display: none; }}
--></style>

赤表示の部分がブレークポイントということになります。

つまり、画面幅が599px以下になるとSP表示に切れ変わるように設定されているということです。小型のタブレットでもこれを下回る機種はおそらくないと思われますから、ざっくりと「スマホとそれ以外」を分けるのに適切な値と考え設定しています。

変えたい人は自由に変更して使ってください。

吹き出しのデザインを変更する

デフォルトのまま使ってもらっても構いませんが、自分のブログの雰囲気に合ったスタイルにカスタマイズしたい人は多いはずです。簡単にカスタマイズ出来るのでぜひチャレンジしてみて下さい。

ちなみに、デフォルトのままで良いという人は私と「おそろ」になりますから注意してください(笑)。

皆さんが好きなようにアレンジできるよう、丸角、枠線の色、背景の色の変更方法を紹介します。これさえできれば、好みのものにカスタマイズできると思います。

基本的には、吹き出しのコードそのものに直接書き込む形でカスタマイズすることをお勧めします。記事内に書き込むこともできますが、記事ごとに吹き出しのデザインを変えたい場合を除いてあまり実用的な方法ではないからです。

それでは説明に入ります。冒頭で紹介した吹き出しのコードをもう一度載せますが、重要な部分だけ色分けをしています。

CSS

<style type="text/css">

.ball01-top { /*吹き出し上向き*/
    position: relative;
    display: inline-block;
    text-align: left;
    margin-top: 17px;
    padding: 7px 5px; /*吹き出し内の余白*/
    color: #555; /*文字色*/
    font-size: 95%; /*文字サイズ*/
    box-sizing: border-box;
    border-radius: 0px; /*角を丸くする*/
    background: #fff; /*背景色*/
    border: solid 3px #ccc /*枠線の色*/
}

.ball01-top:before{
    content: "";
    position: absolute;
    top: -24px;
    left: 50%;
    margin-left: -15px;
    border: 12px solid transparent;
    border-bottom: 12px solid #fff; /*背景色*/
    z-index: 2;
}

.ball01-top:after{
    content: "";
    position: absolute;
    top: -30px;
    left: 50%;
    margin-left: -17px;
    border: 14px solid transparent;
    border-bottom: 14px solid #ccc; /*枠線の色*/
    z-index: 1;
}

.ball01-top p {
    margin: 0;
    padding: 0;
}


.ball01-left { /*吹き出し左向き*/
    position: relative;
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    padding: 7px 5px; /*吹き出し内の余白*/
    color: #555; /*文字色*/
    font-size: 95%; /*文字サイズ*/
    box-sizing: border-box;
    border-radius: 0px; /*角を丸くする*/
    background: #fff; /*背景色*/
    border: solid 3px #ccc /*枠線の色*/
}

.ball01-left:before{
    content: "";
    position: absolute;
    top: 50%;
    left: -24px;
    margin-top: -12px;
    border: 12px solid transparent;
    border-right: 12px solid #fff; /*背景色*/
    z-index: 2;
}

.ball01-left:after{
    content: "";
    position: absolute;
    top: 50%;
    left: -30px;
    margin-top: -14px;
    border: 14px solid transparent;
    border-right: 14px solid #ccc; /*枠線の色*/
    z-index: 1;
}

.ball01-left p {
    margin: 0;
    padding: 0;
}

</style>

角を丸くする

吹き出しの角を丸くするには青表示の部分を変更します。上向き用と左向き用の2か所ありますから、それぞれ探して書き換えてください。

初期値は0pxで丸くありませんが、試しに10pxと指定してみます。

border-radius: 0px; /*角を丸くする*/の部分を、border-radius: 10px; /*角を丸くする*/と書き換えてください。

f:id:oyomiyo:20180203124307j:plainpxの値が大きくなればなるほど丸っこくなります。丸角にするとやわらかい印象になりますし、ポップな印象を与えたいときにももってこいです。pxの値が大きくなればなるほど丸っこくなります。丸角にするとやわらかい印象になりますし、ポップな印象を与えたいときにももってこいです。

背景色を変更する

背景色を変更するには緑表示の部分を変更します。合計で4か所ありますから、書き換え忘れがないように注意してください。

ちなみに初期値は#fffで白ですが、試しに#f0f8ffと指定してみます。。

background: #fff; /*背景色*/のコードを例にとると、background: #f0f8ff; /*背景色*/このような感じになります。

f:id:oyomiyo:20180203124307j:plaincssカラーチャートなどと検索すればたくさんヒットするはずです。カラーコードだけでなくカラーネームで指定できる色もあります。cssカラーチャートなどと検索すればたくさんヒットするはずです。カラーコードだけでなくカラーネームで指定できる色もあります。

枠線の色を変更する

枠線の色を変更する場合も背景色と同じで4か所書き換えが必要になります。コードの中では赤表示にしている部分です。

ちなみに初期値は#cccでグレーですが、試しに#3382c3と指定してみます。

border: solid 3px #ccc /*枠線の色*/のコードを例にとると、border: solid 3px #3382c3 /*枠線の色*/このような感じになります。

f:id:oyomiyo:20180203124307j:plain枠の色もcssカラーチャートを検索して調べてみてください。また枠の色と背景色を同じにすれば枠なしの吹き出しのように表示できます。枠の色もcssカラーチャートを検索して調べてみてください。また枠の色と背景色を同じにすれば枠なしの吹き出しのように表示できます。

角を丸くする方法、背景色、枠線の色と説明しましたが、後は組み合わせて自分好みにカスタマイズするだけです。これがカスタマイズの醍醐味でもありますから、自分が気に入るものができるまで頑張っていじってみてください。

画像と吹き出し上下の余白設定。

気になった方もおられると思うので説明しておきます。

画像上下の余白が必要な時は記事のhtmlの上部に書き込んだコードに書き足すこともできますし、記事内に書き込んだコードに直接書き込むこともできます。記事内のすべての画像と吹き出しに同じ余白を付けたいのであれば記事の上部に書き込むことをお勧めしますが、特定の画像だけ余白を大きくとりたいなどがあれば、画像ごとに直接書き込む方法がお勧めです。

CSS

<style type="text/css"><!--
.balloon-box { display: inline-block; text-align: center; margin-top: 20px; margin-bottom: 20px; }
.balloon-box img.hatena-fotolife { width: 50%; vertical-align: middle; }
.ball01-top { display: none; }
.ball01-left { width: 48%; margin-left: 2%; }
@media only screen and (max-width: 599px ) {
.balloon-box img.hatena-fotolife { width: 100%; }
.ball01-top { display: inline-block; }
.ball01-left { display: none; }}
--></style>

margin-top: 20px;が上側の余白で、margin-bottom: 20px;が下側の余白になります。値は自由に変更して使ってください。

記事内のコードに直接書き込む方法も紹介します。

HTML

<div class="balloon-box" style="margin-top: 20px; margin-bottom: 20px;">ここに画像のimgタグ<span class="ball01-left">ここにPC表示用の説明文</span><span class="ball01-top">ここにSP表示用の説明文</span></div>

こうすることで、画像と説明文を追加したコードに直接書き込むことができます。

記事の見やすさは記事の質と直結します。せっかくの良記事を表示見にくさのせいで台無しにするのはもったいないですから、少し大変かもしれませんがチャレンジしてみてください。