ぶろぐライフ~パソコン苦手なブログ初心者さんを全力でサポート~

パソコンは苦手だけどブログを始めたい人を全力で応援!15年間パソコン講師を勤めた私が苦手克服のお手伝いをします♪

【はてなブログ】コード有!定型文機能を使って読みやすいブログ作成

f:id:maysun:20211103184646p:plain

【はてなブログ】を使っていてコレは便利!と思う機能の1つが【定型文貼り付け】というもの。
たとえば【囲み枠】は、ブログ記事を分かりやすくしてくれる1つなので、登録しておくことでサクッと登場するのです。

この記事の通りにすることで、今日からサクッと読みやすいブログになると思いますよ。

 

 

- スポンサーリンク -  

 

【はてなブログ】定型文機能で読みやすいブログ作成

文字ばかり並ぶブログよりも、大事な個所を【囲み枠】でポイント!としてある方が読み手には分かりやすいよね。

その【囲み枠】のボタンが【はてなブログ】には見当たらない。

定型文機能】を利用するとサクッと挿入できるようになるってお話。

 

【定型文貼り付け】貼り付け方

では、まず【定型文貼り付け】の使い方の説明をしますね。

 

①右側に縦に並んでいるアイコン【定型文貼り付け

②【定型文を作成する

f:id:maysun:20211103203702p:plain

 

③【定型文作成】ウィンドウ

タイトル:分かりやすいタイトルにする
コードを入れるー【保存する】

f:id:maysun:20211103203829p:plain

 

【定型文貼り付け】貼り付けと編集と削除

【定型文】を作成すると、【定型文一覧】に付けたタイトルで並びます。

まず、作った【定型文】を貼り付けてみましょう。

 

■貼り付け■

①【定型文一覧】より選択

②【選択した定型文を貼り付け

f:id:maysun:20211103204753p:plain

 

次に作った【定型文】のコード編集と削除してみましょう。

■編集と削除■

①編集・削除したい定型文の右の【・・・】を選択

②【編集か削除】

f:id:maysun:20211103205000p:plain

 

ココまでは【定型文貼り付け】の方法から編集削除までの説明です。

次に実践してみましょうね。

 

【定型文貼り付け】囲み枠・読者登録・アフィリエイト

【はてなブログ】を書く上で、あったら便利かなと思うコードを用意しました。

色の変更の仕方も説明しますね。

 

■囲み枠3サンプル■

このブログでもあちこちのページで使ってる【囲み枠】から説明します。

 

この【囲み枠】があることで要点を見つけやすくなりますよね。

気に入ったものがあれば【囲み枠】の中に<コード>を記載しますね。

お気に入りを見つけたらコードをコピーしちゃってOK!

 

タイトル

【左上内ピンクBOX】

  • 【タイトル】部分は貼り付けた後に、変更
  • 【囲み枠】内は改行できます。
  • ピンク変更は赤文字部分変更

 

■コード■

<div style=" position: relative; padding: 1.8em 1em .5em; margin: 2em 0; border: solid 3px #ffcce6; background: #ffffff;"><span style=" position: absolute; display: inline-block; top: -1px; left: -3px; padding: 0 9px; height: 25px; line-height: 25px; font-size: 17px; background: #ffcce6; color: #ffffff; font-weight: bold;">タイトル</span> <p style=" margin: 0; padding: 0;">内容</p></div><p></p>

 

 

タイトル

【左上外オレンジBOX】

  • 【タイトル】部分は貼り付けた後に、変更
  • 【囲み枠】内は改行できます。
  • オレンジ変更は赤文字部分変更

 

■コード■

<div style=" position: relative; padding: .5em 1em; margin: 2em 0; border: solid 3px #faab36; background:#ffffff ;"><span style=" position: absolute; display: inline-block; bottom: 100%; left: -3px; padding: 0 9px; height: 25px; line-height: 25px; font-size: 17px; background:#faab36; font-weight: bold; border-radius: 5px 5px 0 0;color: #ffffff;">タイトル</span> <p style=" margin: 0; padding: 0;">内容</p></div><p></p>

 

 

【薄っすら影付きBOX】

  • 【囲み枠】内は改行できます。

■コード■

<div style="padding: .5em 1em; margin: 2em 0; background: #ffffff; box-shadow: 0px 0px 10px 0px #cacaca;"> <p style=" margin: 0; padding: 0; ">内容</p></div><p></p>

 

赤文字部分をお好みのカラーコードに変更しましょう。

 

色コードは、Webカラーで選ぶのが間違いないです。

WEB色見本 原色大辞典 - HTMLカラーコード

 

 

■読者登録■

【はてなブログ】には【読者登録】というシステムがありますよね。

その<HTML>を毎回貼り付けるのは、ちょっと大変。

 

ならば、それも【定型文貼り付け】してしまいましょう!

 

①【設定】ー②【詳細設定

f:id:maysun:20211103213021p:plain

 

③【読者になるボタン】枠内の<HTML>コードをコピー

f:id:maysun:20211103213120p:plain

 

めいさん
ちょっと便利なお話
枠内で素早く3回クリックすると全文選択なるよ
3回なので【トリプルクリック】って言います
 

 

④【定型文貼り付け】ー【定型文作成】ー【貼り付ける

 

■アフィリエイトコード■

ココまでくるとお気づきかと思いますが、同じ要領で【アフィリエイト】コードを貼り付けるんですね。

そうする事で、サクッと貼りつけれますから手間が省けますよ。

 

めいさん
毎回、同じ文章をブログに書いているのであれば、
それも定型文作成しておけば、サクッと貼りつけれますね
私は【アドセンスコード】や文末に入れるものなど作ってますよ
 

 

- スポンサーリンク -  

 

定型文機能を使って読みやすいブログ作成まとめ

ワードプレスではプラグインを利用して定型文作成しますが、【はてなブログ】はサクッと簡単に【定型文】が作れるのは大変ありがたいですね。

【定型文機能】をまだ使った事のない人がこの機会にサクッと作成出来るお手伝いが出来たのなら嬉しいです。


読者になってもらえると嬉しいです

PVアクセスランキング にほんブログ村

★応援クリック大感謝★

人気ブログランキング