テキストを装飾する方法として重要な役割を担うボックスデザイン、デフォルトのものの使い方が難しかったり、サンプルが無いためにどんな感じになるのかがわからなかったり、何かと使い勝手が悪く困ることがあります。
ブロガーにもHTMLとCSSを覚えましょうと伝えているサイトが多い理由は、好きなデザインを作ることが可能になるため、サイトのデザイン性が高くなるというところにあります。デフォルトのデザインでは遅かれ早かれ「これがあればいいのに」という物足りなさの壁にぶつかるのでHTMLやCSSも覚えていきたいところです。
しかしながら、HTMLやCSS勉強をするよりも、ブログのネタになるような勉強する方がブログの成長に繋がるでしょう。ひとまず当記事のようなCSSの配布サイトを活用してサイトのデザイン性を向上させておきたいところです。
使用規定についてはカテゴリページに表記してあるので閲覧してください。
導入するHTMLスタイル
HTMLは共通です。class名の「ここにCSS名」を消して、導入したいCSS名を入力して使って下さい。
使い方はエディタ内で「カスタムHTML」などのHTMLを入力するブロックに入力して使用します。
↓これを使ってください。
以下が入力時のイメージです、詳しい装飾についてはオプションとして後述します。
これにCSSを適用すると以下のようになります。
以下のデザインは今回紹介する「simple-line」です。
HTMLは共通です。class名の「ここにCSS名」を消して、導入したいCSS名を入力して使って下さい。 使い方はエディタ内で「カスタムHTML」などのHTMLを入力するブロックに入力して使用します。
今回紹介するCSSは一般的な位置レイアウトを考え、marginは上下2emの左右はautoに設定しているので、枠の位置的なレイアウトを変えたい場合はmargin:2em auto;を変更してみてください。
また、paddingは文字を何pxで使っているかはユーザーによって異なるのでpxで共通化しています。
枠内文字の位置が枠線から近すぎる、遠すぎると思った場合はpxの数字をいじってみて下さい。
後述するオプションについて
上述しましたがオプションについての説明です。
今回はシンプルなデザインの枠線の紹介なので、色はご自由に設定していただきたいと思います。
今回紹介するCSSで簡単に設定可能な項目は以下の通りです。
- 文字色の変更
- 背景色の変更
- 枠線をテキストサイズに合わせる
背景色なしのシンプルデザイン
①シンプルな線のみのボックス
ごくごくシンプルな線で囲まれたデザインのボックスです。線の太さは「border: solid 2px #000」の2pxをいじれば細くすることや、ふとくすることができます。線の色については#000を変更してください。色のコード表はオプションの欄で記述します。
②二重線のボックス
シンプルなデザインの二重線です。シンプルな線のみのボックスよりは強調されますね。目立たせたいときに使うと良いかもしれません。二重線の間隔は「border: double 6px #000;」の6pxをいじれば変わります。色は#000を変更します。
③線と影がついているボックス
線だけでなく、影のついているボックスです。個人的には影のついているボックスが好きです、立体感がありますね。影の濃さは「box-shadow: 5px 5px 3px #6b6b6b;」の5px 5px 3pxをうまく調節してみてください。薄くするためには数字を減らせばOKです。影の色を変えたい場合は#6b6b6bを変更してください。
④点線
点線で囲まれたボックスです。点線の間隔は変わりませんが「border: dashed 2px #000;」の2pxを変更することで、線の太さが変わります。点線の色の変更は#000を変更してください。
⑤丸みを帯びた線
丸みを帯びた線で囲まれたボックスです。丸みを強くしたい場合は「border-radius: 10px;」の10pxの数字を大きくしてください。20pxくらいでも良いかもしれません。先の太さと色については他と同様の方法で変更してください。
背景色ありのシンプルデザイン
背景色枠線あり
①背景色のあるシンプル線
シンプルな線のボックスに背景色を付けたデザインです。文字色を変更するには「color:white;」、背景色を変更するには「background-color: #af2828;」を変更して下さい。線の太さ、色の変更については他のものと同様の方法で変更します。
②背景色のある二重線
背景のついた二重線ボックスです。文字色は「color:white;」、背景色は「background-color: #af2828;」、二重線の間隔と二重線の色については「border: double 6px rgb(252, 198, 198);」で、それぞれ6pxとrgb(252, 198, 198)を変更して使います。
③背景色のある線と影のあるボックス
背景色のついた線と影のあるボックスです。文字色は「color:white;」、背景色は「background-color: #af2828;」、影の量と色については「box-shadow: 5px 5px 3px #6b6b6b;」で、それぞれ5px 5px 3pxと#6b6b6bを変更して使います。
④背景色のある丸みを帯びた線
背景色のある丸みを帯びた線です。文字色は「color:white;」、背景色は「background-color: #af2828;」、線の丸みは「border-radius: 10px;」の10pxを変更して使用します、数字を大きくすると丸みが増します。
背景色枠線なし
①背景色のみ、四角のボックス
背景色のみで線のないタイプのボックスです。スッキリしていて美しいデザインなので重宝します。文字色は「color:white;」で、背景色は「background-color:#af2828;」を変更して使用します。
②背景色のみ、影付きボックス
様々なウェブサイトで見るデザインです。私が最も好きなデザインです。文字色は「color:white;」を、背景色は「background-color: #af2828;」を、影の大きさと影の色は「box-shadow: 5px 5px 3px #6b6b6b;」で、それぞれ5px 5px 3pxと#6b6b6bを変更して使用します。
③背景色のみ、丸みのあるボックス
先のないタイプの丸みを帯びたボックスです。文字の色は「color:white;」を、背景色は「background-color:#af2828;」を、丸みの強さは「border-radius: 10px;」の数字を変更してください、数字を大きくすると丸みが増します。
オプション
上述したように、以下の変更について解説していきます。
一部記事内、各ボックスでも解説をしている内容も含まれます。
- 文字色の変更
- 背景色の変更
- 枠線をテキストサイズに合わせる
文字色の変更
文字色の変更については「color:white;」を変更します。blackやwhiteなどの色の指定でも、色コードでも、どちらも指定することが可能です。コード内に「color:;」が含まれない場合は追加してあげることで文字色の変更が可能です。
背景色の変更
背景色の変更については「background-color:#af2828;」を変更します。背景色は色コードを使って指定してあげたほうが理想に近くなります。サイトのテーマカラーに近い色を指定してあげるとサイトのデザインがまとまって見えます。
枠線をテキストサイズに合わせる
文字が少ないのに枠が大きくて嫌だなぁ…というときは、囲みを文字量と合わせるため、CSS内に 「display: table;」 を設定してあげます。
追加後の ①シンプルな線のみのボックス のイメージは以下の通り。
文章量が少ないとこんな感じ
改行もOK
三行目もOK、一番文字量が多い行が基準になります。
このように、ボックスをCSSで追加してあげるとサイトデザインが華やかになります。
テーマに付属、プラグインで導入したデフォルトのデザインだけではいつか限界がきますので、CSSを導入して自分だけのサイトデザインを作り上げていきましょう。
