[phoe-icon name="fa-inbox fa-lg"]　文章にメリハリをつけるボックス

いわゆる囲み記事をつくるとき、boxのHTML+CSSで、さまざまなデザインのボックスを作ることができます。このブログでも、文章の性格に応じて、いくつかの異なるボックスを使い分けたいと思っています。

Simplicityテーマのオリジナルボックス

ボックスに関しては、本ブログのテーマとして採用しているSimplicityオリジナルのボックスも初めからいくつか用意されているので便利です。Simplicityで最初から用意されているボックスは、次のとおりです。

ここには、各種の補足的な関連情報を入れます。

これも補足的な情報用のボックスですが、疑問に答えるときに使うといいかもしれません。

メニューバーにはwarningと書いてあります。背景色が黄色だからでしょうか？

本ブログのオリジナルボックス

次に、このブログで頻繁に使いたいと思っているボックスのデザインを、CSSつきでご紹介したいと思います。

ボックス１

単線で囲んだボックス

説明１
説明2
説明3

CSS

/*  ボックス　単線　 */
.box_single {
    padding: 0.5em 1em;
    margin: 2em 0;
    border: solid 2px #4ec4d3;
}
.box_single p {
    margin: 0; 
    padding: 0;
}

これは一番単純なボックスです。単線で囲っています。各種の説明、具体例の紹介などに適しています。リストのタグをつけてボックスの中に表示することもしばしばあります。

ボックス２

二重線で囲ったボックス

CSS

/*  ボックス　二重線  */
.box_double {
    padding: 0.5em 1em;
    margin: 2em 0;
    border: double 5px #4ec4d3;
}
.box_double p {
    margin: 0; 
    padding: 0;
}

単線よりも、枠を強調したいときには、この二重線の枠を使います。情報がより重要である場合、読者にとくに読んでもらいたいと思うコンテンツの場合に使うことが多いと思います。

ボックス３

シャドウつきのボックス
ここには、ぜひ読んでいただきたい文章を載せています。
2017年11月29日

CSS

/*  ボックス影つき   */
.box_shadow{
     padding: 10px 10px;
     border-radius:4px;
     border:1px solid #3cb371;
     box-shadow:1px 1px 1px 1px rgba(0, 0, 0, 0.4);
     margin: 10px 0px　;
     width: 96.5%;   
}

これは、シャドウ付き見出しとやや紛らわしいですが、ハイライトしたいコンテンツを載せる場合に使えるかもしれません。

ボックス４

【POINTマークのついたボックス】
文章の中で、とくに押さえておきたいポイントを説明します。
ボックスにすることによって、読者の理解を促進することができます。

CSS

/*  ボックスPoint    */
.box_point {
    border: 2px solid #3cb371 ;
    border-radius: 4px;
    margin: 2em 0;
    padding: 2em;
    position: relative;
}
.box_point::before {
    background-color: #fff;
    color: #3cb371;
    content: "POINT";
    font-weight: bold;
    left: 1em;
    padding: 0 .5em;
    position: absolute;
    top: -1em;
}

これは、文字通り、ポイントとなる事柄を示すために用いられます。テキストや解説文などで、しばしば利用されています。

ボックス５

見出しのテキスト
本文１
本文２
本文３
・・・

CSS


/*  ボックス　見出し付き  */

.box_title {
    position:relative;
    padding: 20px;
    margin: 60px 0;
    width: 90%;
    border: 1px solid #3cb371;
    border-radius:0 4px 4px 4px ;
    color: #2E2E2E;    
}
.box_title span{
    position:absolute;
    top: 0px;
    left: -1px;
    width: 100%;
    padding: 5px 0 5px 20px;
    background-color: #3cb371;
    border: 2px solid #3cb371;
    box-shadow: 2px 0 1px #3cb371;
    border-radius:4px 4px 0 0;
    box-sizing: border-box;
    color:#fff;
    font-weight:500;
    letter-spacing:.1.5em;
    line-height: 1em;
}

このボックスは、非常に活用範囲の広いボックスです。ボックスに自由な見出しをつけられるので、一種のコラム記事を載せることが容易になります。

以上、本ブログで使っているボックスをご紹介しました。ボックスは、ブログにメリハリをつけ、読者にどのような内容に注目してほしいかをアピールする上で重要な役割を果たします。本ブログでも適宜活用したいと思っています。