主婦投資家の家計術

子供3人+専業主婦の家計管理と株式投資

MENU

コピペした吹き出しをはてなブログの定型文貼り付けで使う方法

f:id:gonengomogenki:20200520172113j:plain

 

f:id:gonengomogenki:20200518100523j:plain

こんにちは。ぴぐみです

 

今回はこのブログで使用している吹き出しの簡単な使い方についてお伝えします。

 

HTMLやデザインCSSがさっぱり不明なぴぐみは、もちろん人様の力をお借りしてコピペで吹き出しを作りました(;'∀') 

 

定型文貼り付けを使うとこんなに簡単な吹き出し

はてなブログでは定型文貼り付けという機能があります。

よく使う文章やHTMLをここに登録しておくだけで、編集画面で一瞬で貼り付けられる優れものです👇

f:id:gonengomogenki:20200520173805j:plain

 

 

f:id:gonengomogenki:20200518100535p:plain
ぴぐ娘

ここにコピペした吹き出しのHTMLを登録しておけばいいのね

 

f:id:gonengomogenki:20200518100523j:plain

いつの間にHTMLの単語知った( ゚Д゚)?

 

登録した吹き出しの使い方

使い方はとても簡単!!

登録した吹き出しHTMLを選んで..

f:id:gonengomogenki:20200520195722j:plain

 

クリックすると..

f:id:gonengomogenki:20200520200122j:plain


編集見たまま画面では吹き出しになっていませんがプレビュー表示すると..

f:id:gonengomogenki:20200520200341j:plain

 

このように吹き出しで表示されています!


コピペさせて頂いた記事

www.chankome.com

こちらのKomeさんのCSSとHTMLをコピペさせて頂きました。

Komeさんありがとうございます<(_ _)>

吹き出し作成の手順

Komeさんの記事の手順に沿って以下の4まで終わらせます

  1. 吹き出し用のアイコン画像を用意する
  2. はてなフォトライフにアイコン画像をアップロードする
  3. CSSコードをコピペする
  4. CSSコードをカスタマイズする(お好みで)

ぴぐみが行った手順1から4

f:id:gonengomogenki:20200520212705j:plain

 

Komeさんの記事の手順1と2の吹き出し画像を用意して、はてなフォトライフにアイコン画像をアップロード

ぴぐみとぴぐ娘の画像2つを用意しました

 

 

f:id:gonengomogenki:20200520213457j:plain

 

デザインCSSにコピペして貼り付け

 

f:id:gonengomogenki:20200523164628j:plain

 

CSSコードをカスタマイズ
背景色や枠線を変更しました

 

ぴぐみが行った手順「HTMLをコピペ・保存する」

CSSコードのカスタマイズが終わったら、ここでKomeさんの記事の以下の2つを同時に行います。

「ステップ3:HTMLをコピペ・保存する」
「吹き出しを使う」

 

 

★ Komeさんの記事の「見たままモードの場合」の手順に従い進めます

 

先ほどはてなフォトライフに準備したアイコン画像を「見たまま編集」で画像を選んで貼り付けます。

f:id:gonengomogenki:20200523171645j:plain


ぴぐみは練習用のサブブログを作っています。

(下書きの編集画面で同じことができるので練習用は特に要らないです)

 

f:id:gonengomogenki:20200523184324p:plain

 

続いてKomeさんの左からの会話風吹き出しのHTMLをコピペします

f:id:gonengomogenki:20200523184049p:plain

 

画像のHTMLの下に<br>で改行してからコピペすると見やすいです

 

f:id:gonengomogenki:20200523184100j:plain

 

後はKomeさんの記事に従って名前やテキストを入力して、始めに貼り付けた画像のHTMLを消します

 

f:id:gonengomogenki:20200523183449j:plain

 

テキストに「あいうえお」と入力して編集見たまま画面に戻ると..

 

f:id:gonengomogenki:20200523182630j:plain

 

画像の下に「あいうえお」と表示されています

 

f:id:gonengomogenki:20200523182731j:plain

 

プレビュー画面できちんと表示されているのを確認したら、ブログの「定型文を作成する」に完成したHTMLを登録します

 

f:id:gonengomogenki:20200523184714j:plain

 

タイトルは自分がわかりやすいように付けておきます。

テキストには頻繁に使う挨拶を入れておいてもいいですし、空白にしておいてその都度入力でもいいと思います。

 

ぴぐみは全部で8パターンと冒頭の挨拶用に1つの吹き出しを9個作りました(^^;)

 

f:id:gonengomogenki:20200523185258j:plain

 

f:id:gonengomogenki:20200523185918j:plain


 

全部作るのは大変でしたが、Komeさんの記事の説明がとても丁寧で迷うことなく作る事ができました(*^^*)

 

はてなブログProではこの定型文貼り付けが100件まで登録可能です。

※無料版では15件の登録ができます

 

ぴぐみのブログはまだ4記事の投稿ですが、既に15件の登録をしています。

このような囲み枠も登録しておくとホント便利です👇

 

 

まとめ

以上、コピペした吹き出しをはてなブログの定型文貼り付けで使う方法でした。
一度登録しておくと簡単に吹き出しを使えるので、本当にラクチンです!!

このCSSとHTMLを提供して下さったKomeさんに感謝致しますm(_ _)m

 

 

◆関連記事◆ はてなブログ Pro「wwwなしのネイキッドドメインで運用」お名前ドットコム設定&アドセンス申請がラクに❗ 

 

 

 

f:id:gonengomogenki:20200518100535p:plain

主婦投資家ランキングバナーを押してあげて('ω') 

\\ ランキングバナー // 

 にほんブログ村 にほんブログ村へ
にほんブログ村