ネコ部長のお役立ちブログ

         明日から活かせる知識・話題など何かのお役に立つブログです

【CSS】コピペでOK!はてなブログで簡単にできるボックスデザイン

f:id:nekobuchou:20190906193725j:plain

 

 
こんにちはネコ部長です。

最近「ブログをもう少しおしゃれにしてみたい!」と思っていたのですが、

ブログ初心者というよりPC初心者の私としては、CSSなどの知識もありま

せん。初心者でも簡単にできる方法がないかと探していたら、とても参考に

なる記事を発見しましたので、さっそく試してみました。 

 

手順

今回、参考にさせていただいた記事がこちらです。

saruwakakun.com

こちらの記事には、はてなブログ以外での設定方法や様々なボックスデザイン

も紹介されていますので、好きなタイプのデザインを選んでください。

 

サンプル

今回選んだデザインがこちらです!

さらにフォント色を変えてみました。

それではさっそく設定していきましょう。

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

にコードをペーストします。

 

f:id:nekobuchou:20190906194248j:plain

 

設定はこれで完了ですが、コードにある

border: solid 3px #808080;とcolor: #808080;の

赤字部分を好きなカラーコードにすると枠の色が変わります。

 

ご自身のブログイメージに合った色に変えたいときは、こちらの色コードから

好きな色を選んでください。

 

www.netyasun.com

 

HTML編集

次は、実際に囲い枠を使った編集になるのですが、HTML編集の画面で

次のコードを挿入してください。

 

<div class="box26">
<span class="box-title">ここにタイトル</span>
<p>ここに文章</p>
</div> 

 

コードの 赤字部分のところに好きな文字を入れていきますが、

ここにタイトル」にたくさん文字を入れると枠が壊れるので

注意してください。

 

それでは実際に

・ここにタイトル⇒POINT

・ここに文章⇒いかがでしょうか

に変えてやってみます。

POINT

いかがでしょうか

と、このようになります。

HTMLコードは、テキストメモなどに保存しておいて、記事を書く時に

保存したコードからコピペしながら使えば簡単です。

まとめ 

f:id:nekobuchou:20190906194513p:plain


いかがでしょうか。

今までガチガチだった私のブログにも柔らかさが出てきたと感じています。

この他にも背景の色なども変更できるので色々と試して見てください。

ただし、自己責任でお願いします。

 

CSSデザインについては、これからも勉強しながら、また色々と試して

いきたいと思います。

 

ご覧いただきありがとうございました。