こんにちはネコ部長です。
最近「ブログをもう少しおしゃれにしてみたい！」と思っていたのですが、
ブログ初心者というよりPC初心者の私としては、CSSなどの知識もありま
せん。初心者でも簡単にできる方法がないかと探していたら、とても参考に
なる記事を発見しましたので、さっそく試してみました。
手順
今回、参考にさせていただいた記事がこちらです。
こちらの記事には、はてなブログ以外での設定方法や様々なボックスデザイン
も紹介されていますので、好きなタイプのデザインを選んでください。
今回選んだデザインがこちらです！
さらにフォント色を変えてみました。
それではさっそく設定していきましょう。
CSSをコピペする
まずこちらのCSSコードをコピーしてください。
.box26 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #808080;
border-radius: 8px;
}
.box26 .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 9px;
line-height: 1;
font-size: 19px;
background: #FFF;
color: #808080;
font-weight: bold;
} .
box26 p {
margin: 0;
padding: 0;
}
ダッシュボード⇒デザイン⇒スパナマーク⇒デザインCSS
にコードをペーストします。
設定はこれで完了ですが、コードにある
border: solid 3px #808080;とcolor: #808080;の
赤字部分を好きなカラーコードにすると枠の色が変わります。
ご自身のブログイメージに合った色に変えたいときは、こちらの色コードから
好きな色を選んでください。
HTML編集
次は、実際に囲い枠を使った編集になるのですが、HTML編集の画面で
次のコードを挿入してください。
<div class="box26">
<span class="box-title">ここにタイトル</span>
<p>ここに文章</p>
</div>
コードの 赤字部分のところに好きな文字を入れていきますが、
「ここにタイトル」にたくさん文字を入れると枠が壊れるので
注意してください。
それでは実際に
・ここにタイトル⇒POINT
・ここに文章⇒いかがでしょうか
に変えてやってみます。
いかがでしょうか
と、このようになります。
HTMLコードは、テキストメモなどに保存しておいて、記事を書く時に
保存したコードからコピペしながら使えば簡単です。
まとめ
いかがでしょうか。
今までガチガチだった私のブログにも柔らかさが出てきたと感じています。
この他にも背景の色なども変更できるので色々と試して見てください。
ただし、自己責任でお願いします。
CSSデザインについては、これからも勉強しながら、また色々と試して
いきたいと思います。
ご覧いただきありがとうございました。
