【1秒】はてなブログの定型文機能7つの活用例!囲み枠・吹き出し・マーカーペン


石黒の顔に文字
今回は、こんな人への記事!

  • キレイなブログを作りたいけど、デザインCSSとか難しいし。。。
  • 作業がめんどくさいと、カスタマイズしなくなる。
  • 記事下に毎回、同じ定型文を入れたい

さらには、こんな人へも。

  • アフィリエイトリンクを一瞬で入れたい
  • 囲み枠をかんたんに作りたい
  • マーカーペンをかんたんに入れたい
  • 吹き出しをかんたんに入れたい!

はてなブログの定型文機能を使うと、1秒クリックで、かんたんに誰でも文章のカスタマイズができてしまうんです。
解決できるんです。

はてなブログの、最新の便利機能です。

HTML編集を使わないで、定型文機能だけ使えば上記の作業ができてしまうので、時間短縮になるんです。

圧倒的な時間短縮して、キレイなブログを作りたい人は、最後までご覧ください。

そうしないと損をしてしまうでしょう。

はてなブログの稼ぎ方のサポートをしている、ブログサポート60の石黒です。

はてなブログの定型文の機能が便利すぎ!活用例7選と削除方法

動画で、はてなブログの定型文の活用方法を見たいかたはこちら。

はてなブログの定型文の機能は、2020年04月30日に、はてなブログの開発ブログで公開されていました。
記事編集画面で「定型文」を保存して繰り返し使えるようにしました

こんな表記があります↓

定型文はブログごとに15件(はてなブログProをご利用の場合は100件)まで登録可能です。

はてなブログの有料版(PRO)であれば、定型文を100件まで入れられます。

はてなブログに新機能として、以下が追加されています。

はてなブログ「編集画面」→「追加」→「定型文貼り付け」→「タブに追加(青いスライド)」
記事編集画面にのサイドバー編集

 

「定型文貼り付け」が、サイドバーに追加されます。↓
定型文貼り付け追加(編集画面に)

 

「定型文を作成する」をクリック→「タイトルに任意の分かりやすいタイトル」をいれます。
「定型文を作成する」をクリック→タイトル
タイトルの下に定型文を入力します。

作った「定型文」は右側のサイドバーに、表示されます。
定型文のサイドバー表示

この定型文をダブルクリックすれば、かんたんに定型文を挿入できてしまうんです。

「たかが、定型文。文字入力ソフトの定型文の辞書機能でよくね!?」

最初は、そう思ったのですが、そんなことはなかった。

これ何が画期的かというと、「HTML」も定型文にも入れられるということなんです。

はてなブログのHTMLって、挿入するときに時間かかりますよね。

HTMLのコードを、文章中に入れる場所を探すのがとても大変じゃないですか。

それが、このはてなブログの定型文機能で解決するんです。

はてなブログに、どんな定型文をいれたら便利なの!?

そんな疑問にお答えします。

はてなブログの定型文の活用例【1】囲み枠

例えば、はてなブログで文章を書いているときに、囲み枠をつけたいときってありますよね。

そんなときに、囲み枠のHTMLコードを、はてなブログの定型文に入れておけばいいんです。

例えば、こんな囲み枠です↓

 

「文」というところに、任意文字を入力すれば、囲み枠内に文章を入れることができます。

 

わたしは、はてなブログの定型文にこんなコードをいれています。
定型文挿入の画面

タイトルはわかりやすい「囲み枠黄色」としています。

囲み枠のコードはこちらを、定型文に貼って使用してください。


<div style="border-radius: 5px; padding: 1em; background-color: #fffacd; box-shadow: 3px 3px 3px #888888; border: 5px double #000080;">文</div>

 

定型文に貼ったら、青い「保存ボタン」をクリックしてください。

そして、あなたのはてなブログの文章中に、囲み枠をいれたいところで「囲み枠の定型文」をダブルクリックすれば、かんたんに挿入できます。

はてなブログの定型文の活用例【2】黄色マーカー

はてなブログに、黄色マーカーをかんたんに入れたいときってありますよね。

はてなブログの太字「B」をマーカーペンにカスタマイズしている人も多いと思います。

でも、Googleは太字を「重要な文章」と認識します。

そのため、むやみに使いすぎてはいけません。

Googleに重要と認識させるために使うというのが正しい使い方です。

そのため、それ以外で 強調したい文字は、マーカーペンを使うほうがいいですね。

わたしは、はてなブログにこんな黄色マーカーのHTMLコードを定型文に入れています。


<span style="background: linear-gradient(transparent 60%, #ffff00 60%);">文</span>

 

↑この「文」の後から、文字入力して、最後に「文」を消してあげれば、マーカー文を作成が完了です。

はてなブログの定型文の活用例【3】吹き出し

例→LINE風の吹き出し
「LINEみたいな吹き出し」を入れたいときにも、定型文を使うと圧倒的に時間短縮になります。

吹き出しを利用するときは、定型文だけではできません。

事前に、デザインCSSに、吹き出しのコードを入れないといけません。

吹き出しの画像の設定もしないといけません。

その作業をした上でのやり方になりますので、ご注意ください。

はてなブログの吹き出しのカスタマイズ方法は、こちらの記事が分かりやすく参考になりました。
はてなブログでの「吹き出し」の作り方を、どこよりも丁寧に解説!(これで出来なかったら逆にあきらめましょう)

一度、吹き出しのデザインCSSを設定して、定型文に吹き出しのHTMLを入れておけば、1秒の操作だけでかんたんに挿入できます。

わたしは、吹き出しのカスタマイズコード、こちらを定型文に入れています。
吹き出しのカスタマイズコード

はてなブログの定型文の活用例【4】ブログ村

例えば、はてなブログの文章の最後に、こんなふうにブログ村の定型文を入れている人も多いかもしれません。

ブログ村のクリックお願い

このブログ村ボタンも、定型文に登録して、ワンクリックで入れることができるんです。

なんでもかんでも、HTMLのコードを、定型文にコピペしておきましょう。
ブログ村HTMLコード

これを応用して、いろいろな定型文をはてなブログ入れることができます。

はてなブログの定型文の活用例【5】読者登録ボタン

はてなブログの読者登録ボタンもかんたんに文章にいれることができます。
こんなやつですね。↓

文章中に、「読者登録をお願いします!」と、はてなブログの読者登録を入れることもできるんですね。

これHTMLを挿入しなければいけなかったので、「めんどくさくてやらなかった」というかたも多いと思うんです。

これがかんたんにできるようになれば、はてなブログの読者登録ボタンの設置をする人も多くなると思います。

はてなブログの読者登録ボタンは、「設定」→「詳細設定」→「読者になるボタン」のコードをコピペして、定型文に貼り付けしておきましょう。。
「設定」→「詳細設定」→「読者になるボタン」のコード

これで、定型文をダブルクリックするだけで、はてなブログの「読者登録ボタン」を挿入できます。

はてなブログの定型文の活用例【6】表を登録しておく

変換しちゃうくんというので作った表を、はてなブログの定型文にいれておくと、表も比較的かんたんに作れます。

変換しちゃうくんで、あらかじめ表のHTMLをつくっておきます。

表の定型の文章作り方

↑「このAB abc 12345」と書いている部分に、上書き入力していけば表が作れます。

表3行2列などあらかじめ、表の構成を複数用意しておくといいですね。

はてなブログの表作成はこちらの記事をご覧ください↓
【動画】はてなブログに表を載せる3選!エクセル変換でスクロール(スマホレスポンシブ)

表はめんどくさくても、読者が見やすくなるので使ったほうがいいですね。

はてなブログの定型文の活用例【7】アフィリエイトリンク用に使う

アフィリエイトリンク用として活用すれば、はてなブログに一瞬でアフィリエイトリンクを入れることができます。

例えば、カエレバやもしもアフィリエイトのアフィリエイトリンクを貼るときに、はてなブログの「HTML編集」から貼っていたと思います。

でも、一度「定型文」にアフィリエイトリンクコードを入れて、定型文経由でアフィリエイトリンクを貼ると簡単に貼れるんです。

HTML編集を使わなくても、アフィリエイトリンクを入れられます。

具体的なやり方は動画で解説しています。

 

はてなブログの定型文の削除方法

削除したい作った定型文の右の「…」をクリックして、削除をクリックします。
削除したい定型文の右「…」をクリック

はてなブログの定型文は、いつでも削除できるので、気軽に作成してください。

まとめ(はてなブログの定型文の活用例)

はてなブログで、いつも使っている文章があれば、いろいろと定型文に入れてみましょう。

「HTMLコードをいれるのに手間なくなる」というのがメリットです。

これがめんどくさい作業だったから。

かなりの時間短縮になると思います。

よく使うアフィリエイトリンクなども、いれておくこともできそうですね。

1記事で何回も同じアフィリエイトリンクを入れる場合は、一時的に定型文を作っておいて、あとで削除するというやり方もできます。

はてなブログの定型文は便利な機能。

使わないともったいないです。


2 Comments on 【1秒】はてなブログの定型文機能7つの活用例!囲み枠・吹き出し・マーカーペン

  1. とても実践的な記事、ありがとうございます。
    早速試します!

  2. コメント、ありがとうございます。
    はてなブログ、なかなかの機能を提供してくれましたよね。
    活用してみてください。
    よろしくお願いいたします。

コメントを残す

あなたのメールアドレスは公開されません。