ROAD AWAKE

こんにちは　のりぞうです。

さて今日はブログの記事装飾についてのお話になります。

ブログ記事の装飾って様々ありますが、記事内にある
特定の記事のみを囲み枠で強調させたいことってありますよね。

その記事の囲み枠を表示させるhtmlを紹介したいと思います。
またそれと同時に囲み枠を記事の幅に合わせて調整させる
htmlコードも紹介しておきます。
 

　記事囲み枠のhtml

 
画像やまた何の装飾もないブログ記事を書いてアップした場合、

読み手側から見ますと読みにくいとか
理解しにくい、また面白くない、そんな記事になる可能性もあると思います。

学校における授業のような面白味のない記事になってしまうと
離脱するユーザーも増えてくるのです。

それを防ぐ意味でも、記事の囲み枠で肝心な部分の文字を協調
させる事は非常に意味のある事になります。

以下は私がよく使う記事の囲み枠のhtmlです。

 
①

<div style=\"display:inline-block;background:#fcfcff; padding:15px; border:1px solid #ff0000; border-radius:10px; word-break:break-all;\">
ここに本文</div>

 
②

<div style=\"border:1px solid #e88;background:#fdd;padding:0 20px;font-weight:bold;\"> 
ここに本文</div>

 
③

<div style=\"border: #4169e1 3px double; padding: 20px; background-image:linear-gradient(#f0f8ff,#ffffe0); margin: 5px; color: #6D4C33; border-radius: 10px; box-shadow: 5px 5px 5px #AAAAAA\">
ここに本文</div>

 

　記事囲み枠のhtmlブログとスマホ

 
以上の記事囲み枠のhtmlを使用しますと
例えばブログではこのように見えたりします。

記事によっては横へ横へと書くよりも
このようになるべく下へ下へと書かなくて
ならない場合も出てくると思いますよね。

この上の画像は２カラムのブログ使用での表示ですが
そうした場合、文字の右側の余白が多くできてしまいます。

見た目もあまり恰好が良くないですよね。

で、そういった場合その余白をなくすために、この右のhtml（display:inline-block;）を
先ほどの記事囲み枠htmlに追記することで自動的に調整する事ができます。

 
④

<div style=\"display:inline-block;background:#fcfcff; padding:15px; border:1px solid #ff0000; border-radius:10px; word-break:break-all;\">
ここに本文</div>

 
⑤

<div style=\"display:inline-block;border:1px solid #e88;background:#fdd;padding:0 20px;font-weight:bold;\"> 
ここに本文</div>

 
⑥

<div style=\"display:inline-block;border: #4169e1 3px double; padding: 20px; background-image:linear-gradient(#f0f8ff,#ffffe0); margin: 5px; color: #6D4C33; border-radius: 10px; box-shadow: 5px 5px 5px #AAAAAA\">
ここに本文</div>

 
先ほどの格好の悪い記事も見栄えが良くなりました。

 

　記事囲み枠のhtmlスマホでは

 
これら以上のhtmlを使用した場合はレスポンシブ対応の
スマホ表示でもきちんと囲み枠として表示されています。
※　①～⑥まで

ただし以下のような（width:300px）のhtmlを使って囲み枠の幅を調整すると
スマホではこのように右端が切れてしまったりするので使わないようにして下さい。

例えば①のhtmlを（width:300px）を使って幅を調整しますと
 
①　

<div style=\"display:inline-block;background:#fcfcff; padding:15px; border:1px solid #ff0000; border-radius:10px; word-break:break-all;\">
ここに本文</div>

 
⑦　①に対して幅を調整するhtml（width:300px）を後ろに追加

<div style=\"background:#fcfcff; padding:15px; border:1px solid #ff0000; border-radius:10px; word-break:break-all;width:300px\">
ここに本文</div>

 
パソコン表示では幅３００で表示されてもレスポンシブ対応
スマホ表示ではこのように右端の囲み枠が切れてしまう場合があります。
こういった場合、枠だけでなく記事の文字も切れて
しまっているので注意が必要です。

※３００以下なら切れない場合もありますが
いちいち確認するのが面倒になってきます。

　まとめ　

 
以上で囲み枠についてを終わりたいと思います。
スマホユーザーが増えてきている現在では
ブログも大切ですがスマホでも、どのように見えているのか
必ずチェックしておきましょう。

そうしないとユーザーはすぐ離脱してしまいますからね。