Bloggerを使っている人で文字をデザインしたいけどやり方がわからないという人がいると思います。

そこで今回はBloggerで文章を四角で囲うデザインの仕方をまとめたいと思います。

Bloggerでもデザインしたいよー


これから説明するよ！
ほとんどコピペだから簡単だよ。






Point

CSSを使うことでBloggerに限らずデザインすることができます。

文章を四角で囲うデザインはCSSを使うことでできます。

その囲うデザインのCSSが紹介されたサイトとそれをBloggerでどう使うのかについて以下で説明します。

Point

CSSを使えればどんなブログでもデザインできる




Reason

CSSでデザインすることは重要です。

見やすいブログでは必ずと言っていいほど文章が四角で囲われたデザインが使われています。

また吹き出しを使って会話形式で書いているものも多いです。

見やすいブログにすることで最後までストレスなく読むことのできる記事になります。

そのため見やすいブログを作るにはこのCSSを使った方がいいです。




Example

まずBloggerでCSSのデザインをするには、編集画面でHTMLビューにします。
そこへCSSのデザインのコードを貼り付ければ完成です。

その貼り付けるCSSのコードがまとまったサイトを紹介します。
それが以下の3つです。



【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30
【永久保存版】コピペするだけ！アメブロで使えるかわいい囲み枠 10選 | アメブロ集客実践マニュアル
CSSで作る！吹き出しデザインのサンプル19選





この3つのサイトでわかりやすい記事に使われているデザインを大体使えるようになります。

ただし注意点があって、そのままhtmlビューにコピーしてできるものもありますが、htmlとCSSに分けて書くコードもあります。

その場合はhtmlビューに

<style>ここにCSSをコピー</style>

このようにしてCSS用のコードを書く必要があります。


また右向きの吹き出しをそのままコピペしても左寄せになってしまいます。

右側から吹き出しを出したい場合にはCSSのコードに

float right;

と書き足す必要があります。


しかしBloggerではいちいち分けて書くのは面倒くさいので、インラインにしてそのままコピペして使えるようにしたものを以下にまとめました。

私が主に使っているデザインの5つを紹介します。


点線の枠
Details 
<fieldset style="background: rgb(239, 255, 255); border: 2px dotted rgb(51, 204, 255); padding: 10px;">点線の枠</fieldset>

交差線の枠

Details 
  <div style="border-bottom: 2px solid black; border-top: 2px solid black; margin: 2em 0px; padding: 0.5em 1.5em; position: relative;">
<div style="background-color: black; content: &quot;&quot;; height: calc(100% + 20px); left: 10px; position: absolute; top: -10px; width: 2px;"></div>
    <p style="margin: 0px; padding: 0px;">交差線の枠</p>
    <div style="background-color: black; content: &quot;&quot;; height: calc(100% + 20px); position: absolute; right: 10px; top: -10px; width: 2px;"></div>
  </div>


Point

タイトル付きの枠

Details 
 <div style="border: 3px solid rgb(98, 193, 206); margin: 2em 0px; padding: 0.5em 1em; position: relative;">
    <span style="background: rgb(98, 193, 206); border-radius: 5px 5px 0px 0px; color: white; display: inline-block; font-size: 17px; font-weight: bold; height: 25px; left: -3px; line-height: 25px; padding: 0px 9px; position: absolute; top: -27px;">Point</span>
    <p style="margin: 0px; padding: 0px;">タイトル付きの枠</p>
</div>

右向きの吹き出し

Details 
<div style="background: rgb(255, 255, 255); border: 3px solid rgb(85, 85, 85); box-sizing: border-box; color: #555555; display: inline-block; font-size: 16px; margin: 1.5em 0px 1.5em 15px; max-width: 100%; min-width: 120px; padding: 7px 10px; position: relative;">
  <div style="border-bottom: 12px solid transparent; border-color: transparent rgb(255, 255, 255) transparent transparent; border-left: 12px solid transparent; border-right: 12px solid #FFF; border-style: solid; border-top: 12px solid transparent; border-width: 12px; left: -24px; margin-top: -12px; position: absolute; top: 50%; z-index: 2;"></div>
  <p style="margin: 0px; padding: 0px;">右向きの吹き出し</p>
  <div style="border-bottom: 14px solid transparent; border-left: 14px solid transparent; border-right: 14px solid; border-top: 14px solid transparent; left: -30px; margin-top: -14px; position: absolute; top: 50%; z-index: 1;"></div></div>

左向きの吹き出し





Details 
<div style="background: rgb(255, 255, 255); border: 3px solid rgb(85, 85, 85); box-sizing: border-box; color: #555555; display: inline-block; float: right; font-size: 16px; margin: 1.5em 15px 1.5em 0px; max-width: 100%; min-width: 120px; padding: 7px 10px; position: relative;">
  <div style="border-bottom: 12px solid transparent; border-left: 12px solid #FFF; border-right: 12px solid transparent;  border-top: 12px solid transparent; margin-top: -12px; position: absolute; right: -24px; top: 50%; z-index: 2;"></div>
  <p style="margin: 0px; padding: 0px;">左向きの吹き出し</p>
    <div style="border-bottom: 14px solid transparent;  border-left: 14px solid #555; border-right: 14px solid transparent;  border-top: 14px solid transparent; margin-top: -14px; position: absolute; right: -30px; top: 50%; z-index: 1;"></div>
</div>


この5つがあれば今のところ十分かなと思っています。

このデザインをまとめておきたくてこの記事を書きました。






Point

BloggerでCSSのデザインを使う方法をまとめました。

まだ私はCSSの使い方を試行錯誤している状態なのでインラインでCSSを書く方法とかをよくわかっていません。

もっと勉強が必要なので少しずつ必要だと感じたときに学んでいきたいと思っています。

WordPressだともっと簡単にできるそうですが、無料のBloggerでも十分にデザインできるのでぜひ使ってみてくださいね。