totochn’s diary

ひとり旅のこと レザークラフトのこと・・・

はてなブログで「定型文貼り付け」を使って囲み枠を簡単に使えるようにする。

こんにちは!totoです。

 

最近、ブログのデザインを集中的にカスタマイズしています。

 

 

今まで使っていた囲み枠をやめ新しい囲み枠を使うことにしました。

今回は「定型文貼り付け」を使って囲み枠を簡単に使えるようにする方法です。

 

 

囲み枠とは

 

 こんな感じの枠です。

①二重線の囲み枠

ここに本文を入力します。
二重線のちょっと綺麗目の囲み枠。

 

②四角い塗りつぶし囲み枠 

  • ここに本文を入力します。
  • 四角い塗りつぶし囲み枠を箇条書きにしました。                                                  

 

文章を枠で囲むことでブログが見やすくなったり、デザインにメリハリがついてスッキリします。

 

この2種類の囲み枠を使うことにしました。

 

こちらのブログを参考にコードを使わせていただいてます。

コピペするだけ!はてなブログで使えるアレンジ囲み枠13選 - すまてくブログ (hatenablog.com)

 

コードをコピー・編集

①二重線の囲み枠

<div style="background:#fff; padding:10px; border:3px double #fc4a1a;">
ここに本文を入力します。<br>
二重線の囲み枠例です。
</div>

 

②四角い塗りつぶし囲み枠

<div style="background: #fc4a1a; padding:10px; border:none;">
ここに本文を入力します。<br>
四角い塗りつぶし囲み枠例です。
</div>

上のコードをメモ帳にコピーします。

background:#fff 

の#fffは背景色。背景色を変えたい時は、カラーコードを変更します。

以下のカラーコードを参考にしてくださいね?

 

 WEB色見本 原色大辞典 - HTMLカラーコード (colordic.org)

 

枠の色を変えたいときは、

#fc4a1a

ここを変更します。

 

 

②、#fc4a1a

背景色はここを変更。

 

編集が終わったら定型文を作成します。

 定型文作成

はてなブログの編集画面、右側一番下の「定型文貼り付け」をクリック。

↓ 

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

定型文作成

編集画面右側

 ↓ 

「タイトル欄」には、分かりやすいタイトルを。

ここでは、「二重線の囲み枠」としています。

 

タイトル欄の下の枠に編集したコードを張り付けます。

#○○はカラーコード。

 <br>は改行したいときに使います。

定型文作成

ここにコードを張り付け

 これで作成した定型文を選択して「選択した定型文を張り付け」で表示できます。

 

こんな感じ。

 ↓

本文を入力
二重線の囲み枠

 

あとは枠内の文字を消して入れたい文字を入力するだけ。

 

  • 見たままモードの場合はHTML編集タブに切り替えて、とありますが、見たままモードに直接貼り付けても表示されました。
  • Markdownモードでも使えます。

 ↑

はてな設定の箇条書きアイコンを使えば、箇条書きにすることもできます。

 

 以前使っていた囲み枠は徐々に変更する予定です。(その後デザインCSSのコードも削除します。)

 

新しい囲み枠はダッシュボードにデザインCSSを記述する必要がないので、ブログのデザインを変えて囲み枠も変更したいというときは便利で使い勝手が良いです。

 

今回は、「定型文貼り付け」を使って囲み枠を簡単に使えるようにする方法でした。

 

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