のびたいむ

読書、育児、27歳のつぶやき…など雑記。

【初心者でもできた!】記事の中に囲み枠を導入する方法

f:id:rikachang:20181029222521j:plain

最近少しずつブログのカスタマイズに手をつけています。

CSS?コード?なんじゃそりゃ?って状態からスタートした超初心者で、未だに分からないことだらけですが日々試行錯誤しています。

 

そしてブログ記事に、囲み枠を導入しました!

今回はカスタマイズ超初心者でも分かりやすいように導入方法を紹介します。

 

 

 

囲み枠って?

こんな風に、文字を囲んでくれる枠です。

 

以下のサイトを参考に導入しました。

サルワカさんのデザインは可愛いものが多く、色々活用させていただいています。

saruwakakun.com

 

では、早速導入方法を説明!

 

デザインを選び、CSSコードをコピペ

まずは、導入したいデザインを選んでCSSコードをコピペします。

 

どこにコピペするかというと・・・ 

まずはてなブログの管理画面から「デザイン」を選択。

f:id:rikachang:20181029205841p:plain

 

「スパナマーク」→「デザインCSS」に選んだデザインのCSSコードを貼り付けます。

f:id:rikachang:20181029212803p:plain

 

私が選んだのは、『2.角丸』

 

 

そのままコピペするとこんなデザインです。

 

囲み枠

 

色を変更してみた

文字色と線の色を変更しました。

変更するのは、CSSコード内のこの部分↓

 color: #6091d3;/*文字色*/

border: solid 3px #6091d3;/*線*/

 

赤文字の部分を好きな色のコードに書き変えます。

私はいつもこのサイトでカラーコードを探しています。

www.colordic.org

 

私の場合は、文字色を黒(#000000)線の色を薄い赤(#ffb7b7)に変更。

するとこうなりました。

囲み枠

 

枠内の文字の太さも変えれるよ

私が選んだデザインでは、枠内の文字は太字になっていました。

私は本文と同じ文字の太さにしたかったので、

 

コード内のココを変更↓

font-weight: bold;

この、赤文字部分を「normal」に変更しました。

ちなみに「bold」は太字「normal」が通常の太さの文字です。

変更後はこうなりました。

 

囲み枠

 

こうして、デザインの設定は完成!

 

文字を囲むときは?

あとは文字を囲みたいときに、編集画面上にあるHTML編集を選択

f:id:rikachang:20181029215639p:plain

HTMLの中にHTML用のコードをコピペして

 

<div class="box2">

    <p>ここに文章</p>

</div>

 

赤文字の場所に囲みたい文を入れれば囲んでくれます!

 

まとめ

一度設定してしまえば簡単に使えます。

囲み枠を導入してみたい方はやってみてくださいね!