ブログはHTMLとCSSを使用すると表現力が倍増します。
はてなブログの場合も同じです。
最初はちょっと難しいと思っても一回理解してしまえば、あとは繰り返しです。
頑張って勉強してみましょう。
ねえねえ、「はてなブログ」のことでちょっと教えて！
何を教えて欲しいの？
ブログの最後にカッコよくまとめをしたいの〜
なにかいい方法ない？
それならば、POINT囲みはどう？
一度設定して仕舞えば毎回使えるよ。
POINT囲みはこのような装飾方法です。
箇条書きをPOINT囲みで囲むとカッコよくなります。
ブログは積み重ね
フロー型とストック型
世の中で情報発信の方法はたくさんあります。
たくさんあるのですが、
私はある特徴で大きく２つに分けられると考えています。
フロー型とストック型です。
フロー型は、
投稿したら短時間に広がりますが、見られても１日です。
タイムラインが中心です。
（もちろん検索して古い投稿を見ることもできます）
ストック型は、
投稿をどんどん積み重ねて行きます。
ですから、長期間にわたり見られます。
検索されら結果閲覧されることが中心になり、
どちらがいいというのではなく、
どちらもバランスよくやっていく必要があると思います。
ブログはストック型
ブログはストック型の代表です。
一度書いてしまえば、半永久的と言えるくらい長期間、
サーバーで公開できます。
（もちろんサーバ使用料などの経費は必要です）
ですから、書けば書くほど積み上がります。
積み重ねが大切です。
ポイント囲みのような装飾も積み重さなります。
一度設定してしまえば、長期間使用できます。
ですから、早く設定して早く活用すればそれだけお得です。
やることはCSSとHTMLの設定
やることは前回、角丸囲みをした時と同じです。
CSSとHTMLの設定を行います。
毎回、書くのですが難しいそうですが、やることは基本はコピペです。
あとは自分のブログに合った色の設定です。
CSSの準備
POINT囲みのCSSを準備をします。
一度設定すれば、あなたのブログのどの記事からも共通に使用できます。
CSSのコードはサルワカさんの記事を参考にしています。
.box27 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #62c1ce;
}
.box27 .box-title {
position: absolute;
display: inline-block;
top: -27px;
left: -3px;
padding: 0 9px;
height: 25px;
line-height: 25px;
font-size: 17px;
background: #62c1ce;
color: #ffffff;
font-weight: bold;
border-radius: 5px 5px 0 0;
}
.box27 p {
margin: 0;
padding: 0;
}
”border: solid 3px #62c1ce;”
の「#62c1ce」が囲み枠の色の設定になります。
”background: #62c1ce;”
の「#62c1ce」が上の耳の部分の色の設定になります。
#62c1ceなどの色の設定は
RGBと16進数カラーコードの相互変換ツール - PEKO STEP
記事をご参考ください。
PC用に
「はてなブログ」＞デザイン＞カスタマイズ＞{}デザインCSSに設定（挿入）します。
挿入する位置は、後日みたときに分かりやすいよう
もしあれば、他のbox設定の近くにしてください。
また、同じ設定をスマホ用に
「はてなブログ」＞デザイン＞スマートフォン＞フッタに設定します。
フッタの中でラジオボタンを
「スマートフォン用にHTMLを設定する」を選んでください。
デザインCSSの使用方法は前回の私のブログをご参照ください。
HTMLを設定する
次はHTMLの設定です。
記事のHTML編集を選ぶます。
”ポイント囲み”を表示したい部分に
<div class="box27">
<span class="box-title">ポイント</span>
<p>ここに箇条書き文章</p>
<p>ここに箇条書き文章</p>
</div>
を挿入します。
”ここに箇条書き”の部分を
記事に合わせて複数変更してください。
何行設定しても構いませんが、ポイントなので最大でも５行程度かと思います。
終わりです
これで終了です。
CSSは各記事共通
HTMLは各記事ごとになります。
一度、設定すれば何回でも使用できますので、
見やすいブログにするため、
設定をおすすめします。
ということで、今回のポイントです。
ここまでありがとうございました。
