モミジは饅頭

美容・健康・ライフスタイルに関する情報発信ブログ

【はてなブログ】吹き出し会話形式の設定方法【画像で解説】

f:id:seichooa:20200121185750p:image

こんにちは。モミジです!

この記事は、はてなブログ吹き出し会話の設定方法を画像付きで紹介します。

吹き出し会話とは、こんな感じのものです↓

こんにちは!

いい天気だね

 

吹き出し会話の設定方法 (画像を用意)

f:id:seichooa:20200121190627j:image

パソコンのデスクトップに画像を用意します。

f:id:seichooa:20200121190724j:image

はてなブログを開いてHatenaを選択

f:id:seichooa:20200121190948j:image

フォトライフを選択

f:id:seichooa:20200121191031j:image

アップロードを選択

f:id:seichooa:20200121191207j:image

オプションをHatena Blogにする

f:id:seichooa:20200121191344j:image

パソコンのデスクトップに用意した画像を画像をアップロードの所にドラッグ(移動)させる

f:id:seichooa:20200121191714j:image

画像がアップロードされました。

f:id:seichooa:20200121191737j:image

マイフォトを選択

f:id:seichooa:20200121191900j:image

Hatena Blogを選択すると先程アップロードした画像が入っています。

f:id:seichooa:20200121192003j:image

画像の上で右クリック、画像アドレスをコピーを選択

コピーした画像のURLはどこか別のテキストやメモに貼り付けておきます。

ここまでで画像の準備は完了です♪

吹き出し会話の設定方法CSS設定)

f:id:seichooa:20200121192319j:image

ブログの記事管理画面へ移り、デザインを選択

f:id:seichooa:20200121192604j:image

パナマークを選択

f:id:seichooa:20200121192628j:image

デザインCSSを選択

f:id:seichooa:20200121192807j:image

下記のコードを貼り付けて、赤い部分を変更(名前、画像URL)して下さい。

 下記貼り付けコード↓

/* 吹き出し会話*/
.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);}

※名前はローマ字表記で好きな名前を入力して下さい。(覚えやすい名前がオススメです!名前をつけたら忘れないようにメモしておきます)

f:id:seichooa:20200121194146j:image

貼り付け終わったら、変更を保存するで保存します。

スマホでも表示されるように設定するためスマホマークを選択

f:id:seichooa:20200121194227j:image

ヘッダを選択

f:id:seichooa:20200121194313j:image

スマートフォン用にHTMLを設定するを選択

f:id:seichooa:20200121194418j:image

先程のと同じCSSコードを貼り付け

貼り付け終わったら、変更を保存するで保存して下さい。

ここからは実際に記事を書きます!

吹き出し会話の設定方法 (記事作成)

f:id:seichooa:20200121194124j:image

記事を書くを選択

f:id:seichooa:20200121195017j:image

見たままモードで文章を書きます。

f:id:seichooa:20200121195106j:image

HTML編集を選択すると画像のようになっています。

f:id:seichooa:20200121195132j:image

HTML編集で吹き出しにしたい文章に下記のコードを当てはめます。

名前の部分はで考えた名前を入れます。

吹き出し右↓

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

吹き出し左↓

<p class="r-fuki 名前">テキスト</p>

 

吹き出し吹き出しについて見本はこちら↓

吹き出し右だとこんな感じ!

吹き出し左はこうなります♪

f:id:seichooa:20200121200151j:image

プレビューを選択すると吹き出しとして表示されます。

スマートフォンでも表示されているか確認をしてみて、PCとスマートフォンどちらも表示されていたら完成です。

お疲れ様でした

多少手間がかかりますが、完成した時は嬉しかったです。

一度設定してしまえは楽チンなので是非設定してみて下さい。

それでは、ここまで見て下さりありがとうございました。