前回、記事本文を下線や枠線で装飾する方法を解説しました。
上記のようなコードを毎回入力しても良いのですが、良く使うデザインはテンプレート化して短いコードで呼び出すこともできます。
本記事では良く使う下線や枠線の装飾をCSSの追加でテンプレート化する方法を解説します。
CSSの追加でテンプレート登録
CSSの追加方法
左のメインメニューから【テーマ】を選択し【カスタマイズ】をクリックします。
そこから【詳細設定】の【CSSを追加】を選択します。
【カスタムCSSを追加】にCSSを入力できます。
後述のCSSを入力したら保存をして、反映されているか実際にブログを確認しましょう。
追加するCSS
基本形は以下の通りです。
padding: ●px; /*余白*/
border : 線の種類 ●px カラーコード; /*線の太さと色*/
border-radius: ●px; /*角丸*/
background: カラーコード; /*背景色*/
}
任意の文字には、HTMLやCSSで使わない文字を指定しましょう。
日本語をローマ字にしたものが使いやすいです。
囲い【kskoi】や背景【haikei】など、覚えやすいものがオススメです。
当ブログで使用中のCSS例
実際のCSSの方が参考にしやすいと思うので、当ブログの装飾テンプレートを載せておきます。
試しにつくった囲い【kakoi】
実際に使用はしていませんが、試しにつくった枠線のコードです。
padding: 10px; /*余白*/
border : dashed 4px #607d8b; /*線の太さと色*/
border-radius: 3px; /*角丸*/
background: none; /*背景色*/
}
長いコード用の背景【haikei】
実際に当ブログ内でも使用している、長いコードの背景用のコードです。
.haikei{
padding: 10px; /*余白*/
border-radius: 3px; /*角丸*/
background: rgba(0,0,0,0.2); /*背景色*/
width: fit-content; /*横幅文字合わせ*/
}
テンプレート使用方法
HTMLビューに切り替え
テンプレートの使用は、HTMLビューでの編集が必要になります。
HTMLビューは記事を書く画面のタイトル下にあるメニューアイコンの一番左で切り替えられます。
適宜切り替えて、次項のコードを貼り付けて編集してください。
なお、作成ビューでは反映されないので確認はプレビュー画面で行ってください。
テンプレート呼び出しコード
基本形は以下になります。
一行
<div class="任意の文字">ここに文字を入力</div>
複数行
<div class="任意の文字">ここに文字を入力<br/>ここに文字を入力<br/>ここに文字を入力</div>
「任意の文字」は、自分でつくったテンプレートの任意の文字です。
「ここに文字を入力」に装飾したい文字を入力してください。
当ブログで使用中のコード例
当ブログのコードであれば、
<div class="kakoi">ここに文字を入力</div>
<div class="haikei">ここに文字を入力</div>
となります。
例えば、HTMLビューで
<div class="kakoi">コチラがサンプル文章となります。</div>
と入力すると、記事では
と表示されます。
もう一つ例として、HTMLビューで
<div class="haikei">コチラがサンプル文章となります。<br/>コチラがサンプル文章となります。<br/>コチラがサンプル文章となります。</div>
と入力してみます。
そうすると記事では
コチラがサンプル文章となります。
コチラがサンプル文章となります。
と表示されます。
ちなみにこの２つをテンプレートではなくコードに置き換えると以下のような記載になります。
↓↓↓
<div style="border: dashed 4px #607d8b; padding: 10px; border-radius: 3px;">コチラがサンプル文章となります。</div>
↓↓↓
<div style="padding: 10px; border-radius: 3px; background: rgba(0,0,0,0.2); width: fit-content;">コチラがサンプル文章となります。<br/>コチラがサンプル文章となります。<br/>コチラがサンプル文章となります。</div>
こうやって見ると、コードだと長いですよね。
良く使う装飾ならテンプレート化して短くした方が使いやすいと思います。
装飾を良く使うならテンプレート化しよう！
本記事で解説した内容は便利な方法であって、必ずやらなければいけないものではありません。
でも、装飾をよく使う場合はコピペするにしても短い方が楽ですよね。
良く使うデザインはテンプレート化して、ブログを円滑に書けるようにしてみてはいかがでしょうか。
参考ブログ様
BloggerMaster！【bloggerカスタマイズ！記事中に目立つ囲いをつくる！】
