Bloggerのカスタマイズ 文字に囲み枠をつける。
こんにちは､ 草葉の陰 です。
Bloggerのカスタマイズで文字に囲み枠をつけてみましょう。
色々なサイトを見て回って参考にさせていただきました。 特に分かりやすかったのは『 UNKNOWN BLG 』さんの『 BLOGGERカスタマイズ｜HTMLコードで文字に囲み枠をつける 』でした。
そして自分なりにアレンジしたのが下記になります。
文字に囲み枠をつけてみましょう 2px 点線 角丸
<div style="background: #FFFFFF; border-radius: 10px; border: 2px dotted #111111; padding: 10px;">文字に囲み枠をつけてみましょう</div>
文字に囲み枠をつけてみましょう 2px 実線 角丸
<div style="background: #FFFFFF; border-radius: 10px; border: 2px solid #111111; padding: 10px;">文字に囲み枠をつけてみましょう</div>
これだけでも枠の色と背景の色を変えれば、かなりのアレンジができます。
上の場合は、
・background:#FFFFF → 背景を白に指定
・border:#111111 → 枠を黒に指定
にしているので、囲み枠のHTML文のそれぞれの #xxxxxxを変えれば指定した色に変わります。
カラーコードはGoogle等で #FFFFFFとかで検索すると良いでしょう。
netを探していると『ネット屋さん』 の『カラーコード一覧表』のページが分かりやすかったです。 色見本にマウスを持って行くだけで背景がその色に変わります。
また『原色大辞典』さんのwebの色見本も色の名前が書かれていて分かりやすかったです。
 |
| 原色大辞典 |
ここで試しに background: #e6e6fa lavender ; border: #0000ff blue にしてみましょう。
2px dottedの枠です
2px solidの枠です
それでは枠を色々と変えてみましょう。
4px dottedの枠です
5px doubleの枠です
10px solidの枠です
◎ 囲み枠の幅を縮小したい、拡大したい場合の方法です。
通常は記事画面の幅にフィットしますが、
← 記事画面の幅にフィットします →
コードに display:inline-block; を追加しますと
文字数にフィットするようになります
→ 文字数にフィットする ←
<div style="display:inline-block; background; #FFFFFF; border-radius: 10px; border: 2px dotted #111111; padding: 10px;">文字数にフィットする</div>
◎ 実際に作成して使用した例です。
後は コールサインや必要な情報を記入して完成できますね。
浮世絵をQSLカードにデザイン
QSLカードの『お試し』として トリミング → 文字入れで 5分ほどでザッと作ってみましたが どうでしょうか？
QSLカードの浮世絵の原版を探して_国立国会図書館編
この前のブログを一部修正して文字に囲みを付けてみました。
HTML文の使い方が分からない？ HTML文の編集なんて面倒でやりたくないよ！
→ 大丈夫、HTML文が分からなくても同じ背景、枠を利用するだけならば 記事画面 → 作成画面間の コピペ で『囲み枠』を新規の作成画面に貼り付ければ OKです。
囲み枠の中の文字はHTML文を使わなくても作成画面の『テキストの色』で簡単に色を変更できますし、文章の編集も自由自在です。
お付き合いくださり ありがとう。 では､ また 宜しくね。
 |