GOOGLE BLOGGERの設定：HTMLコードで文字に囲み枠【無料】

自分がブログを始めてからいろいろブログを見てると、




という疑問にぶつかりました。


BLOGGERのツールボタンを調べてみましたが、どうも枠を作る機能は無いようなので、


やはり、自分でコードを入力するしかないです。


ですが、準備しておけば、コピペで完了するので、それほど難しくはありません。


デザインや色は好みがあるので難しいですが、探せばいろいろあるようです。


この記事では


GOOGLE BLOGGERで、HTMLコードのみで文字の囲み枠を挿入する


手順を書いていきます。

GOOGLE BLOGGERの設定：HTMLコードで文字に囲み枠【無料】

囲み枠とは

これだけでも枠の色と背景の色を変えれば、かなりのアレンジができます


正直いうと、楽しいのは最初だけで、いろいろ試しますが、そのうちいつも使うものはある程度決まってきます。






そして、この枠を作るには




のような方法になりますが、CLASS名を指定したとしても、結局は手入力はせずにコピペするので、長くても短くても手間は同じかなと。・・・


なので、ここは、楽に、ベタ打ちする方法で行きます。

囲み枠のコードをHTMLにコピペする

このままコードをHTMLにコピペして、文章と色を変えればそのまま使えます。

---

---

---

---

---

---

カラーコードを調べるには

カラーコードはGOOGLEで調べることができます。


よく使う色も大体決まってくるので、毎回調べなくともいいようにストックしておけば楽です。


上記説明で使った枠の色と背景の色は全て


・background:#FFFFF　→　背景を白

・border:#111111　→　枠を黒


にしているので、ここの#xxxxxxを変えれば色が変わります。


カラーコードはGOOGLEで#ffffffとかを検索すると、


こんな感じの画面が上に出てくるので、マウス操作して、



好きな色を選ぶと、中央のHEXの枠に選択している色のコードが表示されます。


毎回、色を何にするか悩んでいてもブログは完成しないので、ここは好きなカラーコードをコピペしてストックしておけば楽になります。

囲み枠の幅を調節するには

囲み枠の幅を縮小したい、拡大したい場合の方法です。


コードに display:inline-block; を追加します


通常は以下のコードで記事画面の幅にフィットしますが、


<div style="background: #FFFFFF; border-radius: 10px; border: 2px dotted #111111; padding: 10px;">こんな感じの枠です</div>

---

display:inline-block; を追加すると


<div style="display:inline-block; background; #FFFFFF; border-radius: 10px; border: 2px dotted #111111; padding: 10px;">こんな感じの枠です</div>


文字数にフィットするようになります




スペースを入れて調節ができます

---

GOOGLE BLOGGERの設定：HTMLコードで文字に囲み枠まとめ