出ることはないと思いますが、解説時などに使おうと思い念のために作りました。実物と同じぐらいのイケメンに仕上がってますね!・・・・・と、まあ『たまくん』の紹介はこの辺にしておいて、吹き出しを作るのってPCが不慣れな方だとちょっとだけ難しいんですよね。僕も不慣れな方なので、ちょっと苦戦しました💧なので今回は吹き出しの作り方を、出来るだけ分かりやすく共有していこうと思います。デザインCSSに貼り付け画像のURLリンクをコピーサンプルHTML編集に貼り付けサンプルChrome拡張から貼り付けスマホの設定おまけwww.tamagonokodomo.comデザインCSSに貼り付けまずはてなブログをご利用であれば、デザインCSSに記述していきます。デザイン→カスタマイズ→デザインCSSの順番に開きます。デザインCSSの中に下記のコードをコピペして貼り付けます。コピぺは右クリックでコピーを選択します。デザインCSSにいき、右クリックで貼り付けを選択して貼り付けます。{background-image:url(画像のURL);}この中で書き換えるのは、下のクラス名と画像のURLだけです。)で記述していきます。冒頭から数字や記号で始めるとエラーが出るので、アルファベットから始めて下さい。「クラス名って何を入れたら良いの?」と思われる方もいるかもしれませんが、管理できるのであれば正直なんでも良いです。a、b、cだけでも大丈夫です。実際に利用する際に「aってなんだっけ?」となる可能性もあるので、分かりやすいクラス名にする事をお勧めします。僕は〈.tamakun5::after〜〉などで、バリエーションを分けて管理してます。画像のURLリンクをコピーして、デザインCSSの〈画像のURL〉へ貼り付けていきます。貼り付け方は、上記の赤丸で囲んであるどちらかを押すと画像が保管されているフォトライフに移動します。吹き出しにしたい画像を選択すると、こんな画面になると思います。この画面になれば画像を選択して右クリックで〈画像アドレスをコピー〉を選択。(MAC利用なら指2本にして選択すると画像アドレスをコピーを選択できます。)コピーできればデザインCSSに戻り、〈画像のURL〉の部分に貼り付けます。{background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/t/tamagonokodomo/20191125/20191125002750.jpg);}同じ用途で下に書き足していけば、吹き出しの種類はいくらでも増やせます。これで一旦更新すれば準備OKです。ここまで出来れば実際に記事の方に吹き出しを入れていきます。吹き出しを記事に入れる方法は、〈HTML編集〉と〈Chrome拡張〉から貼り付ける2種類の方法があります。HTML編集に貼り付けまずはHTML編集に貼り付ける方法です。編集ページのHTML編集を選択します。HTML編集の中で吹き出しを入れたい場所に、下記コードを記載します。tamakun5">たまごクラブ、ひよこクラブ、こっこクラブ</p>上記のコードを入力すると、この様に記載する事が出来ます。たまごクラブ、ひよこクラブ、こっこクラブ一旦プレビューで確認してみて下さい。Chrome拡張から貼り付けHTML編集に貼り付けでも吹き出しは出来るのですが、Chrome拡張からやる方が圧倒的に簡単です。Chrome拡張を追加していない方は下記サイトから追加登録して下さい。ウェブストア追加登録できれば、上記画面の様に鉛筆マークが表示されます。表示されている事が確認できれば、吹き出しにしたい文章を選択します。鉛筆マークをクリックします。鉛筆マークをクリックすると、この様な見慣れない画面が表示されます。Class》を押せば吹き出しになります。→吹き出し右・画像左クラス名にはデザインCSSに登録しているクラス名を入力します。スマホの設定ここまでくれば終了〜という訳でもありません。あと最後にもうひとつだけ設定しなくてはいけない事があります。スマホにも吹き出しが表示されるかを確認します。確認し表示されていなければ、下記手順で設定が必要となります。上記の画像の手順で、デザイン→1→2→3の手順で進めていきます。3の〈スマートフォン用にHTMLを設定する〉を選択すると、コードを入力出来る画面が表示されますので、そこにデザインCSSで記述したコードを貼り付けます。スマホに貼り付ける場合は〈style〉で囲む必要があります。<style>ここにデザインCSSに貼ったコードと同じコードを貼り付ける</style>最後にPCとスマホどちらも確認し、吹き出しが設定されているか確認してみて下さい。表示されていれば完成です!お疲れ様でした✨ちょっと大変でしたが吹き出しがあるだけで、ブログの雰囲気も変わりますし伝えたい部分もより明確に伝える事が出来ると思います。吹き出しを設定してみたいと思われた方は、ご参考に!www.tamagonokodomo.comおまけ『たまくん』の様なキャラクターを無料で作られたいと思われた方へ。こちらの記事を参考にさせて頂きました。色々な似顔絵メーカーが載ってますので、おすすめです☆mamazakki.hatenablog.com今回はこれで以上となります。はてなブログPro訪問ありがとうございます!ひとり旅とひとりグルメをこよなく愛するアラサー男子のたまのこです。基本19時〜20時にブログを更新しています。最新記事フィリピン留学でのおすすめの持ち物。短期・長期もこれだけあれば安心です!リゾバ・留学・旅程フィリピン留学はメリットだらけ!体験談をもとに費用やおすすめエージェントを解説。旅して稼ぐなら1週間から始められるリゾートバイト!リゾバするメリット・デメリットとは?リゾバ・留学・旅程もっと見る関連記事Googleアドセンスで収益を上げるならAMPは廃止にすべき?AMPの必要性について共有・報告みなさんこんにちは...【アクセスアップ】にほんブログ村もやり方次第!参加カテゴリーを工夫してランキングを上げる方法!共有・報告みなさんこんにちは...ここ最近、当ブログに起きている状況について。(1)月別アーカイブリンクはてなブログブログをはじめる週刊はてなブログはてなブログProこのサイトについてプライバシーポリシーお問い合わせ《お問い合わせフォーム》スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。