日々メモ

シンプル&コンパクトな暮らしと、猫の闘病生活、家電やネット小説など、好きなことを日々メモしていきます。

スポンサーリンク

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

f:id:squarecat:20210105174608j:plain

こんにちは。

猫飼よしのです。

 

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

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

なんて思います。

 

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

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

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

 

さて、今回は

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

です。

 

これですね!

 

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

「それ使いたい!」

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

私には向かないかも?

と思っていましたが、

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

 

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

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

 

◆ 流れ ◆

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

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

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

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

4.「定型文を作成する」をクリック

5.タイトルに分かりやすい名称(囲み枠など)、タイトル下の空欄に1でコピーしたHTMLを貼り付け保存します。

 

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

使うときは、

 

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

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

 

 

 

ちなみに、

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

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

 

それでは、私が登録している囲み枠3種類の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

 

 

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

 

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

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

 

 

 ランキングに参加しています 良かったら「いいね」代わりにポチっとお願いします★


にほんブログ村 猫ブログ 猫好きへ
にほんブログ村
にほんブログ村 主婦日記ブログ 40代主婦へ
にほんブログ村
にほんブログ村 ライフスタイルブログ シンプルライフへ
にほんブログ村

アラフォー日記ランキング

 

 

 

 

 

スポンサーリンク