ホワイト心理学って何?

ホワイト心理学とは、日常生活をより良いものにしてくれる心理学知識のことです。当ブログでは、よりわかりやすいに心理学を噛み砕いて説明しています。時間が5分とあれば立ち寄って損はしませんので、上記をクリック!

吹き出しで会話をカスタマイズって実は超簡単!たった5分設定でできる【はてなブログ】

 

シバくん、私たちこんな風に吹き出しで会話してるけど、これってやっぱ難しいの?

吹き出し式会話に目が行くとは、ブログを勉強してる証拠だね

実は、最初の設定さえ終われば、たった数秒で作れるようになるんだよ

えっ!たった数秒で!設定はどうしたらいい?

とにかく何回かコピーして貼り付けるだけで終わるよ。だいたい5分くらいで終わるから下記の説明を見てみよう

 

たった5分で終わる吹き出し会話の設定

 

f:id:ruichaosmyth:20190616223625p:image

まずは、流れを説明すると

  1. 吹き出しにしたいアイコン画像をはてなフォトライフに保存
  2. こちらが用意したコードの指定したところを編集
  3. 2のコードをCSSに貼り付け
  4. HTML編集でいつでも使用可能になります

 

たったこれだけの手順を踏むだけでできます。画像付きで流れを説明していきましょう。

 

吹き出しにしたいアイコン画像をはてなフォトライフに保存

 

まずはこちらをクリックして、はてなフォトライフを選択します

f:id:ruichaosmyth:20190616223654p:image

 

 

次に、右上のアップロードを選択

f:id:ruichaosmyth:20190616223706j:image

 

 

最後に、アップロードボタンを押して吹き出しアイコンにしたい画像をアップロードして下さい

f:id:ruichaosmyth:20190616223740p:image

先ほどのはてなフォトライフのページに戻れば、アップロードされているかどうかを確認できます。

 

 

画像のURLの保存

はてなフォトライフのページで、上記でアップロードした画像を選択して下さい

 選択したら、画像の上で右クリックをして、コピーを選択。

f:id:ruichaosmyth:20190616223807j:image

コピーしたURLはメモ帳などに貼り付けといて下さい。

 

 

2 CSSコードを編集

まずはこちらのコードをコピーして下さい!

 

/* 吹き出しCSS */

.entry-content .l-fuki,

.entry-content .r-fuki {

position: relative;

width: 80%;

box-sizing: border-box;

-webkit-box-sizing: border-box;

padding: 20px;

border-radius: 6px;

border: 2px solid #999;

box-shadow: 1px 1px 5px #aaa;

background-color: #fff;

z-index: 1;

}

.entry-content .l-fuki {

margin: 20px 20% 40px 0;

}

.entry-content .r-fuki {

margin: 20px 0 40px 19%;

}

.entry-content .l-fuki::before,

.entry-content .r-fuki::before {

position: absolute;

content: "";

top: 16px;

width: 10px;

height: 10px;

border-right: 2px solid #999;

border-bottom: 2px solid #999;

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: 80px;

height: 80px;

top: -10px;

border-radius: 40px;

border: 3px solid #fff;

background-size: cover;

background-position: center center;

background-repeat: no-repeat;

box-shadow: 1px 1px 5px #aaa;

}

.entry-content .l-fuki::after {

right: -110px;

}

.entry-content .r-fuki::after {

left: -110px;

}

@media screen and (max-width: 620px){

.entry-content .l-fuki,

.entry-content .r-fuki {

width: 70%

}

.entry-content .l-fuki {

margin-right: 30%;

}

.entry-content .r-fuki {

margin-left: 30%;

}

}

@media screen and (max-width: 478px){

.entry-content .l-fuki::after,

.entry-content .r-fuki::after {

width: 60px;

height: 60px;

border-radius: 30px;

}

.entry-content .l-fuki::after {

right: -84px;

}

.entry-content .r-fuki::after {

left: -84px;

}

}

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

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

 

コード引用先 https://www.notitle-weblog.com/entry/fukidashi

 

1番下のコード引用先はコピーしなくていいですからねw

コードをコピーしたら、メモ帳か何かに貼り付けます。そして少し編集です。

 

1番下の方にあるこれを編集します。変えるところをオレンジにしました。

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

 

クラス名と書いてあるところには、クラス名という文字を消して、半角英数字で自分がわかる名前をつけて下さい。

 

そして、画像のURLと書いてあるところには、画像のURLという文字を消して先ほどコピーしたURLを貼り付けて下さい。

 

キャラを3人以上にしたい場合

キャラを増やしたい時は、コードの1番下の方にあります、先ほど編集した下記のコードを、増やしたいキャラの量だけ追加してください。

 

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

 

追加する場所は、先ほどコピーしたコードの1番下で大丈夫です。

 

3 編集したらCSSに貼り付け

デザイン→カスタマイズ→デザインCSS

f:id:ruichaosmyth:20190616223856p:image

 

 

このデザインCSSをクリックして、1番下にコードを貼り付けます。

f:id:ruichaosmyth:20190616223903p:image

 

 

スマホ版も編集したい場合

【ここからははてなブログPROの方のみです】

 

先ほど編集したCSSコードを、下記の「この中」と書いてある場所に張り付けます。

「この中」という文字は消して下さい。

<style>

この中

</style>

 

張り付けたらこういう状態になると思います

<style>

CSSコード

</style>

 

これをコピーして

デザイン→スマートフォン→ヘッダ

を選択してこちらに貼り付け

 f:id:ruichaosmyth:20190616223920p:image

 

これで設定は終わりです。

 

4 HTML編集に貼り付け

あとは記事のHTML編集の際に、こちらをコピーして貼り付けしていただければ完了です。

 

右アイコンの吹き出し

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

 

左アイコンの吹き出し

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

 

f:id:ruichaosmyth:20190616224011p:image

ちなみにクラス名のところは先ほど編集した名前に変えて下さい。

 

 

プレビューで確認すると

f:id:ruichaosmyth:20190616224112j:image

こんな感じになります。堅苦しくなく、導入に持ってこいのカスタマイズですね。

 

上記のコードは、今後ずっと使えるので、メモ帳か何かにメモって置いて、コピー貼り付けができる状態を作るのをお勧めします。

 

ちなみにHTML編集は

記事を書く→HTML編集 です。

 

まとめ

理想の吹き出しアイコンでの会話はできたでしょうか?

もしできなかった場合は、手順が飛んでいたり、コード編集がちゃんとできてなかったりしてる場合があります。

落ち着いて、1つ1つの手順をやって見て下さい