定型文貼り付けを利用して「囲み枠」を簡単に利用しよう

f:id:squarecat:20210105174608j:plain

こんにちは。

猫飼よしのです。

先日、ウィッシュリストの話を書きましたが、

このブログのPV数もウィッシュリストに野望として書かなくちゃ♪

なんて思います。

ブログをはじめた2020年の11月、12月の目標は、月間1000PVでしたが

残念ながらたどり着けず。

今年は地道にコツコツ上げていきたいと思います。

さて、今回は

■定型文貼り付けを利用して「囲み枠」を簡単に利用しよう

です。

これですね！

よくブログ様を見ていると、文の途中で囲み枠が出てきてとても読みやすいです。

「それ使いたい！」

ということで、早速マネしたのですが、イチイチHTML編集を開いて貼り付けるのは面倒。。。

私には向かないかも？

と思っていましたが、

はてなブログ編集（PC用）のツールを利用すれば簡単でした。

ということで、具体例を書いていきます。

良ければお付き合いください。

◆　流れ　◆

１．使いたい囲み枠を表示するHTMLをコピーします

２．PC用のはてなブログ管理画面から、新規記事作成画面を開きます

３．右のサイドバーを開いて「定型文貼り付け」を選択します

　＊もしなければ、＋プラス「追加」を押して、編集サイドバーの一番下の方にある「定型文貼り付け」をクリックすると表示されます

４．「定型文を作成する」をクリック

５．タイトルに分かりやすい名称（囲み枠など）、タイトル下の空欄に１でコピーしたHTMLを貼り付け保存します。

これで、定型文に囲み枠のHTMLを保存することができました。

使うときは、

６．はてなブログの「編集（見たまま）」で記事を書いて囲み枠を入れたい場所にカーソルを置きます

７．右のサイドバーから「定型文貼り付け」を選び、定型文一覧の中から登録した囲み枠のタイトルをクリック、下の「選択した定型文を貼り付け」をクリックすると、記事内に囲み枠が表示されます。

ちなみに、

私の場合、囲み枠の線の色をピンク色に指定していますが、色コードを変更することで、希望の色の囲み枠に変更できます。

定型文を登録する時は、色コードを好みのものに修正してお使いくださいね。

それでは、私が登録している囲み枠３種類のHTMLをここに貼り付けておきたいと思います。

良ければ枠の中にあるものをコピーしてご利用ください。

■直線の囲み枠

<div style="background:#fff; padding:10px; border:2px solid #ffc0cb;">
直線の囲み枠です。<br>
直線の囲み枠です。
</div>

■付箋風囲み枠

<div style="border: #ffc0cb solid 1px; border-left: #ffc0cb solid 13px; padding: 10px; background: #fffff9; ">
付箋風囲み枠です<br>
付箋風囲み枠です。
</div>

■見出し付き囲み枠

◆ここにタイトルを入力します◆ <fieldset style="border:2px solid #ffc0cb;"><legend><span style="font-size: 16px; color: #ffc0cb; font-weight:bold;">
◆ここにタイトルを入力します◆
</span> </legend>
見出し付き囲み枠です。<br>
見出し付き囲み枠です。
</fieldset>

■色コード参考

ピンク：#ffc0cb　

↑　囲み枠のHTMLにあるこのコードを好みの色コードに書き換えてください

青：#0000ff

赤：#ff0000

緑：#008000

黒：#000000

カラーコードの参考は

www.colordic.org

ということで、今回は定型文機能を利用した囲み枠の作り方でした。

定型文機能、色々なことに利用できそうですよね。

また何か良い例を見つけたらメモしたいと思います。