Web
Analytics

ゲームと柴犬は神!!

小5から始めているブログです。毎日更新続けてます

はてなブログで吹き出しを作る方法!!1回やればもう簡単!!すぐできる!!

当ブログではアフィリエイト広告を利用しています


ⓘスポンサードリンク


👆読者登録してくれると嬉しいです!!

 

こんにちは!ひゃくまんさんです。

随分前に吹き出しができるようになったと報告しました。

shiyuzevo.hatenablog.com

 この記事を書いて吹き出しのやり方を紹介すると書いたんですが。。。

面倒で全然書いてなかった問題。

今回はネタがないので吹き出しのやり方を紹介します。

吹き出しの手順

最初は吹き出しの手順から紹介します。

1つずつ紹介していこうと思います!!

ざっくり書くとこんな感じ👇

  1. 画像を準備する
  2. 画像アドレスをコピー
  3. 吹き出し用のCSSコードを貼る
  4. 定型文でコードを入れる

ざっくりとした説明はこんな感じです。

1画像の準備

まずは画像の準備からしましょう。

画像の準備ははてなフォトライフから準備します。

f:id:shiyuzevo:20210811201255j:plain

赤い枠のキューブみたいなのを押すと👆のように出てくると思います。

それではてなフォトライフを押しましょう。

f:id:shiyuzevo:20210811201526j:plain

はてなフォトライフを選択したら次はアップロードを押します。

アップロードを押すと写真を選択できます。写真は2枚選択してください!!

僕はいつも使っている写真にします。

                     https://cdn.profile-image.st-hatena.com/users/shiyuzevo/profile.png?1601470272f:id:shiyuzevo:20211122202320p:plain

このこの2枚でいつも吹き出しを作っています!

であとはサイズを変更します。

f:id:shiyuzevo:20211123190537j:plain

自分が吹き出しを作るアイコンを用意したら次は画像サイズを変更します。

変更の仕方は右下の画像を編集を押しマス。

f:id:shiyuzevo:20211123190724j:plain

150程度がおすすめです。大きすぎると多分うまく表示されないかもですw

僕は150にしています。

画像アドレスをコピー

次は画像アドレスをコピーします。

画像アドレスはパソコンのマウスの右クリックで行います。

f:id:shiyuzevo:20210811202104j:plain

右クリックで画像アドレスをコピーします。

コピーができたら画像準備はOKです。

画像アドレスは後で使うので何かにメモするかとしておきましょう。

吹き出し用の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);}

今のコードはここに貼ります。

f:id:shiyuzevo:20210811203739j:plain

少しわかりにくいですがデザイン→スパナマークを押します。

そしたら次はこれ👇

あともう少しの辛抱!!

簡単ですか?

 

f:id:shiyuzevo:20210811204000j:plain

デザインCSSを押して一番下に貼ります。

既に編集で貼っているコードがある場合は一番下に貼ってください。

 

コードを貼ったら一番最後の行の2行を自分で編集します。

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

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

クラス名は自分がわかりやすい名前に。(なんでもOK!

画像のURLには先ほどコピーした画像アドレスを貼り付けます。

定型文にコードを貼る

これでカスタマイズが最後!!

最後は定型文というところにコードを貼ります!!

ちなみに。。。僕はこの作業までに30分程度かかりました(最初)

( ゚Д゚)

吹き出しってやっぱ難しいもんです。できている人は結構すごいんです。

まあそんな話は置いておいて!定型文の説明!!

f:id:shiyuzevo:20211122203027j:plain

まずはブログ記事編集画面の+ボタンを押しマス👆の写真。

これを押すと。。。

f:id:shiyuzevo:20211123191228j:plain

編集サイドバーというのが出てきます。

その下の方に定型文貼り付けというのがあるのでそれをONにしてください!!

これで定型文は完了です。

 

次はコードを貼り付けていきます。

コードは以下の通りです。

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

※これを貼ると吹き出しが画像左に表示されます。

次は定型文を作成するを押しマス。

f:id:shiyuzevo:20211123192820j:plain

これを押すとこういう画面になると思います。

f:id:shiyuzevo:20211123192948j:plain

ここの空白にさっきコピーしたコードを貼ります!!

f:id:shiyuzevo:20211123193136j:plain

クラス名のところはCSSのカスタマイズした名前です。

テキストは自由に書き込んで結構です。

テキストのところを変えると吹き出しの喋る言葉が変わります。

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

👆こちらが右版です。
こちらも同じ手順でOKです!

これでいつでも吹き出しを使えるようになります!お疲れさまでした!👍

この記事を参考にしてくれた人!

最後はこの記事を参考にしてくれた人を紹介します!!

mameiyulog.hatenadiary.com

 

最後に

今回は吹き出しのやり方を紹介しました!!

説明が地味に難しかったですがなんとか説明できてよかったですww

吹き出しは1回やればもう簡単にできるのでおすすめです👍

吹き出し神!!

それでは今回はこの辺で!

ばいばい!

 

 

励みになるのでブログ村クリックお願いします!

にほんブログ村 中学生日記ブログへ
にほんブログ村