今回はこのブログで使用している吹き出しの簡単な使い方についてお伝えします。
HTMLやデザインCSSがさっぱり不明なぴぐみは、もちろん人様の力をお借りしてコピペで吹き出しを作りました(;'∀')
定型文貼り付けを使うとこんなに簡単な吹き出し
はてなブログでは定型文貼り付けという機能があります。
よく使う文章やHTMLをここに登録しておくだけで、編集画面で一瞬で貼り付けられる優れものです👇
ここにコピペした吹き出しのHTMLを登録しておけばいいのね
登録した吹き出しの使い方
使い方はとても簡単！！
登録した吹き出しHTMLを選んで．．
クリックすると．．
編集見たまま画面では吹き出しになっていませんがプレビュー表示すると．．
このように吹き出しで表示されています！
コピペさせて頂いた記事
こちらのKomeさんのCSSとHTMLをコピペさせて頂きました。
Komeさんありがとうございます<(_ _)>
吹き出し作成の手順
Komeさんの記事の手順に沿って以下の４まで終わらせます
- 吹き出し用のアイコン画像を用意する
- はてなフォトライフにアイコン画像をアップロードする
- CSSコードをコピペする
- CSSコードをカスタマイズする（お好みで）
ぴぐみが行った手順１から４
ぴぐみとぴぐ娘の画像２つを用意しました
ぴぐみが行った手順「HTMLをコピペ・保存する」
CSSコードのカスタマイズが終わったら、ここでKomeさんの記事の以下の２つを同時に行います。
「吹き出しを使う」
★ Komeさんの記事の「見たままモードの場合」の手順に従い進めます
先ほどはてなフォトライフに準備したアイコン画像を「見たまま編集」で画像を選んで貼り付けます。
ぴぐみは練習用のサブブログを作っています。
（下書きの編集画面で同じことができるので練習用は特に要らないです）
続いてKomeさんの左からの会話風吹き出しのHTMLをコピペします
画像のHTMLの下に<br>で改行してからコピペすると見やすいです
後はKomeさんの記事に従って名前やテキストを入力して、始めに貼り付けた画像のHTMLを消します
テキストに「あいうえお」と入力して編集見たまま画面に戻ると．．
画像の下に「あいうえお」と表示されています
プレビュー画面できちんと表示されているのを確認したら、ブログの「定型文を作成する」に完成したHTMLを登録します
タイトルは自分がわかりやすいように付けておきます。
テキストには頻繁に使う挨拶を入れておいてもいいですし、空白にしておいてその都度入力でもいいと思います。
ぴぐみは全部で８パターンと冒頭の挨拶用に1つの吹き出しを９個作りました(^^;)
全部作るのは大変でしたが、Komeさんの記事の説明がとても丁寧で迷うことなく作る事ができました(*^^*)
はてなブログProではこの定型文貼り付けが１００件まで登録可能です。
※無料版では１５件の登録ができます
ぴぐみのブログはまだ４記事の投稿ですが、既に１５件の登録をしています。
このような囲み枠も登録しておくとホント便利です👇
まとめ
以上、コピペした吹き出しをはてなブログの定型文貼り付けで使う方法でした。
一度登録しておくと簡単に吹き出しを使えるので、本当にラクチンです！！
このCSSとHTMLを提供して下さったKomeさんに感謝致しますm(_ _)m
