トップ > ブログ > 【はてなブログで吹き出しを導入】会話形式にして記事を読みやすくしましょう

【はてなブログで吹き出しを導入】会話形式にして記事を読みやすくしましょう

ブログ

 

 

はてなブログで吹き出しを導入する

【はてなブログで吹き出しを導入】会話形式にして記事を読みやすくしましょう

みなさんこんにちは、jです。

 

はてなブログで吹き出し風のデザインを出したい！

 

こんな悩みを解決していきます。

 

本記事の読者理想

・はてなブログで吹き出しを導入したい

・WordPressのようなデザインにしたい

・CSSは分からないけど吹き出しを利用したい

 

ブログやサイトでよく見かける吹き出しデザイン。

自分も実装したいけど、どうしているか疑問に感じますよね。

 

そこで本記事では、はてなブログで吹き出しを導入・設定する方法をまとめていきます。

 

みなさんが想像している以上に簡単で、6割がたコピペで完了します。

時間もそこまでかかりませんので、ぜひ実践してみましょう！！

 

< 今ならPro利用で独自ドメインを無料でゲット >

はてなブログProはこちら

 

参考にさせていただいた記事

今回の記事を作成・導入するにあたって、アラフィフママのあやぞうさんの記事を参考にさせていただきました！

 

ブログ関係だけでなく

・ライフスタイル

・子育て

など、役に立つ情報を多く発信しています。

 

本当に為になる記事だらけです。

ぜひ読んでみてください！！

mamazakki.hatenablog.com

 

はてなブログで吹き出しを導入するための前準備

はてなブログで吹き出しを導入するための前準備

はてなブログで吹き出しを導入するための前準備

さっそく本題に入りましょう。

 

とその前に、はてなブログで吹き出しを導入するにあたっていくつか前準備をする必要があります。

 

前準備で行うことは以下の３つです。

・吹き出しで利用する画像の作成

・作成した画像をはてなフォトライフにアップロード

・アップロードした画像のURLをメモしておく

 

１つずつ解説していきます。

 

吹き出しで利用する画像を作成する

まずは吹き出しで利用する画像を作成しましょう。

 

吹き出しで利用する画像は何でも構いません。

まだ決まっていないよ

という方はかぶりっこメーカーで作成してみてはいかがでしょうか。

 

かぶりっこメーカーは無料で簡単に可愛いアイコンを作れるサイトです。

本サイトで使用しているキャラクターは全てかぶりっこメーカーで作成しています。

 

5分もあれば簡単に作成できますので、ぜひ作成してみて下さい！！

かぶりっこメーカー | Iconpon

 

 

作成した画像をはてなフォトライフにアップロードする

次に作成した画像をはてなフォトライフにアップロードしましょう。

 

はてなフォトライフとがはてな様が提供しているウェブアルバムサービスをいい、はてなユーザーであれば誰でも利用できます。

 

ここで１つ目のポイントです。

はてなブログで吹き出しを利用する場合、はてなフォトライフにアップロードした画像でないと使用ができません。

 

でも

はてなフォトライフを使用したことが無い...

という方、大丈夫です。

 

ここでは画像とともにアップロードの仕方をまとめていきます。

 

Google・Safariで「はてなフォトライフ」と検索

はてなフォトライフを検索

いろいろ開く方法はあるのですが、ここではGoogleやSafariで「はてなフォトライフ」と検索しましょう。

 

検索すると赤丸で囲んだ表示が出てくるのでクリックして入ります。

 

アップロードをクリックし、吹き出しで使用する画像を選択する

はてなフォトライフのアップロード

 

はてなフォトライフに入ると、画面右上に赤丸で囲んだ”アップロード”というワードが出てくるのでクリックします。

 

はてなフォトライフのアップロード2

すると”クリックしてファイルを保存するか、ここにファイルをドラッグしてください”という画面がでてきます。

そこをクリックして吹き出し用の画像を選択すればアップロードは完了です。

 

アップロードした画像のURLをメモしておく

はてなフォトライフの画像URLをコピー

アップロードした画像を使用するために、画像のURLをメモしておきましょう。

 

先程アップロードした画像は、はてなフォトライフの右上にある”マイフォト”という部分に入っています。

 

マイフォトをクリック後、

吹き出しで使用する画像を右クリック → ”画像アドレスをコピー”

をクリックします。

 

コピーしたアドレスは消さないように、Windowsのメモ帳やテキストエディタに貼りつけておきましょう。

 

これで前準備は完了です。

 

< 今ならPro利用で独自ドメインを無料でゲット >

はてなブログProはこちら

 

はてなブログに吹き出しを実装する３つの手順

はてなブログに吹き出しを実装する３つの手順

はてなブログに吹き出しを実装する３つの手順

さて、前準備を終えたところでちゃちゃっと吹き出しを実装してしまいましょう。

 

ここからははてなブログに吹き出しを実装する３つの手順をまとめていきます。

 

吹き出し用のCSSをコピーする

まずは吹き出し用のCSSをコピーします。

 

今回使用するCSSはこちらです。

/* 吹き出しのCSS　*/
.entry-content .l-fuki,
.entry-content .r-fuki {
  position: relative;
  width: calc(100% - 82px);
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding: 20px;
  border-radius: 6px;
  border: 2px solid #ddd;
  box-shadow: 0 3px 8px -2px rgba(0,0,0,.16);
  background-color: #fff;
  z-index: 1;
  box-sizing: border-box;
}
.entry-content .l-fuki {
  margin: 20px auto 36px 0;
}
.entry-content .r-fuki {
  margin: 20px 0 36px auto;
}
.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
  position: absolute;
  content: "";
  top: 16px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  background-color: #fff;
  z-index: 2;
}
.entry-content .l-fuki::before {
  right: -7px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.entry-content .r-fuki::before {
  left: -7px;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
  position: absolute;
  content: "";
  width: 60px;
  height: 60px;
  top: -6px;
  border-radius: 50%;
  border: 3px solid #fff;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: 1px 1px 5px #aaa;
  box-sizing: border-box;
}
.entry-content .l-fuki::after {
  right: -82px;
}
.entry-content .r-fuki::after {
  left: -82px;
}
@media screen and (min-width: 478px) {
  .entry-content .l-fuki::after,
  .entry-content .r-fuki::after {
    width: 80px;
    height: 80px;
  }
  .entry-content .l-fuki,
  .entry-content .r-fuki {
    width: calc(100% - 106px);
  }
  .entry-content .l-fuki::after {
    right: -106px;
  }
  .entry-content .r-fuki::after {
    left: -106px;
  }
}
.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}

 

コピーしたら一旦メモ帳に貼り付けましょう。

 

吹き出し用画像URLの添付・クラス名の書き換え

メモ帳に貼りつけた理由、それは吹き出し用画像URLの添付とクラス名の書き換えを行うからです。

 

先程コピーしたCSSの一番下を見てみると

.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}

となっていると思います。

 

修正する部分は以下の２つです。

・”クラス名”部分を適当な名に変える

・”画像のURL”部分にはてなフォトライフでコピーしたURLを添付する

 

クラス名は何でも構いません。

私は作成したアイコンがリンゴとライムをモチーフにしているため、

.apple::after {background-image:url(画像のURL);}
.lime::after {background-image:url(画像のURL);}

としています。

 

英語であれば何でも大丈夫ですので、気軽に決めましょう。

 

はてなブログに設定する

URLやクラス名の変更が終わったら、はてなブログに設定していきましょう。

 

書き換えたCSSをコピーして

はてなブログ→デザイン→カスタマイズ→デザインCSS

部分に貼り付けます。

 

貼りつけたら保存もしっかり行いましょう。

 

これで吹き出しの実装は完了です！！

 

< 今ならPro利用で独自ドメインを無料でゲット >

はてなブログProはこちら

 

実際に記事で反映されているか確認

最後に記事で実際に反映されているか確認しましょう。

 

いつも通りの記事編集画面で”HTML編集”を開き、吹き出しにしたい<p>タグに下記コードを貼り付けます。

<p class="l-fuki クラス名">テキスト</p>

 

クラス名には先程適当に付けたクラス名を入れましょう。

 

上記コードで表示すると

こんな感じです！

 

また、吹き出しを右にしたいときは

"l-fuki" → "r-fuki"に！

変更するとなります。

 

どうでしょうか、表示されましたか？

 表示されれば吹き出しの導入は完了です。

 

お疲れ様でした！！

 

まとめ：吹き出しを利用して記事を読みやすくしましょう

吹き出しを使うと

・デザイン性が高まる

・記事が読みやすくる

と良い子ことが沢山あります。

 

記事が読みやすくなるとブログの離脱者が減り、滞在時間も少しずつ伸びてきます。

本当に良いことづくしです。

 

ちょっとしたCSSの取入れでブログは大きく変わります。

その第一歩として吹き出しを入れて記事を読みやすくしましょう！！

 

以上、はてなブログで吹き出しを導入・設置する方法でした。

合わせて読みたい記事

www.j-lifestyle.work