? 文字を小さく囲いたい
CSSを知ると、WordPressのページをいろいろと修飾したくなります。ワードやPages、あるいテキストエディタにはできない技ですね。
よく使うのは見出し、リスト、ボックス、引用部、ボタン、リボンなどです。この他にも、ときどきホームページで見かける修飾として、「文字を四角や角○で囲む」という技があります。例えば、CTRL+スペースなどの記号は、マニュアル系のページでときどき見かけます。これは、どのようにして作るのかと疑問に思っていました。
? CSSを使って文字囲いを実現
よく考えれば、これはCSSを使えば比較的簡単にできます。しかし、Gooleで検索しても、なかなかわかりませんでした。検索して出てくるのは、ほとんどが「ボックス」をつくるCSSです。これでは、上のような小さな文字囲いはできません。上のような気の利いた文字囲いというデザインは、次のようなCSSを書くだけで実現できます。
.cube{
border-style: solid;/* ボーダーを実線に */
border-width: 1px;/* ボーダー線の太さを1pxに */
border-color: #c0c0c0;/* ボーダー線の色を指定 */
color:#000000; /* ボーダー線の色を指定 */
font-size: 80% ;/* フォントのサイズを80%に縮小して表示 */
border-radius: 2px 2px 2px 2px; /* 囲い四角の四隅に丸みをつける */
padding: 2px 2px 2px 2px ;/* 文字と四角の間に余白をつくる */
margin-left : 2px;/* 左隣りの文字とのスペースを2pxつくる */
margin-right: 2px;/* 右隣りの文字とのスペースを2pxつくる */
vertical-align: 3%; /* 上下のずれを微修正；少し上に移動 */
background-color: #f5f5f5;/* 背景に色を付ける */
}
これに対応するHTMLは次のようになります。
<span class="cube"> ここに囲む文字をいれます</span>
HTMLは、AddQuickTagに登録しておくと便利です。
構造はごく単純で、テキストのボーダーを1にして、グレー色の実線に指定し、背景を淡いグレーにします。それから、文字色は黒、フォントサイズを80%と少し小さめにし、ボーダーの四隅にほんの少し丸みをつけ、余白を上下左右2px入れる、左右の文字の間に2pxのマージンを入れる、上下のずれを微修正する、これだけです。
背景をあわいクリーム色にして、シャドウをつけたのが、次の文字囲いです。これはどんな場面で使うか、まだわかりません。
.cube2{
border-style: solid; /* ボーダーを実線に */
border-width: 1px; /* ボーダー線の太さを1pxに */
border-color: #f0e68c ; /* ボーダー線の色を指定 */
color:#000000; /* 文字色を黒に */
font-size: 80% ; /* フォントのサイズを80%に縮小して表示 */
border-radius: 2px 2px 2px 2px; /* 囲い四角の四隅に丸みをつける */
padding: 2px 2px 2px 2px ; /* 文字と四角の間に余白をつくる */
margin-left : 2px; /* 左隣りの文字とのスペースを2pxつくる */
margin-right: 2px; /* 右隣りの文字とのスペースを2pxつくる */
vertical-align: 3%; /* 上下のずれを微修正；少し上に移動 */
background-color: #fafad2; /* 背景に色を付ける */
box-shadow: 1px 1px 5px rgba(20,20,20,0.2); /*囲いに影をつける */
}
淡いグリーンの囲みもおしゃれかもしれません。この囲みでは、文字色をグレーっぽくしました。
.cube3{
border-style: solid;
border-width: 1px;
border-color: #c0c0c0;
color: #696969;
font-size: 80% ;
border-radius: 2px 2px 2px 2px;
padding: 2px 2px 2px 2px ;
margin-left : 2px;
margin-right: 2px;
vertical-align: 3%;
background-color: #f0fff0;
}