CSSカスタマイズ

CSSのカスタマイズのみで『縞模様(ストライプ)のボックス』を実装

CSSのみで実装できる縞模様(ストライプ)のボックスの作り方です。

最近のWordPressのテーマでは有料・無料を問わず、デザインされたボックスや吹き出しなど様々なものが組み込まれています。

それ以外にも自分でカスタマイズできるようなおしゃれなボックスを用意したいという人のために、コピペで作れるボックスを紹介します。

 

参考にしたのは大好きなサイトのWEBクリエイターボックスさんです。

参考元:WEBクリエイターボックス

https://www.webcreatorbox.com/tech/css-tips-3



CSSのみで実装できる縞模様(ストライプ)のボックス

これから作るボックスはCSSのみで実装可能となっています。(HTMLは記事を書く上で当然必要です)

以下に出来上がりのボックスがどのように表示されるかを確認してみて下さい。

表示例

吾輩わがはいは猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いてゐた事だけは記憶してゐる。吾輩はここで始めて人間といふものを見た。しかもあとで聞くとそれは書生といふ人間中で一番獰悪だうあくな種族であつたさうだ。この書生といふのは時々我々を捕へて煮て食ふといふ話である。しかしその当時は何といふ考かんがへもなかつたから別段恐しいとも思はなかつた。ただ彼の掌てのひらに載せられてスーと持ち上げられた時何だかフワフワした感じがあつたばかりである。

 

このボックスはストライプの背景に白の背景を乗せて、文字を書き込むというものになっています。

縞模様(ストライプ)のボックスをCSSで作る

 

ボックスを作るためのHTMLとCSS

HTML

<div class="stripe">
  <div class="stripe-inner">
    <p>Phasellus accumsan leo et arcu ornare accumsan...</p>
  </div>
</div>

CSS

.stripe {
  padding: 10px;
  background-size: 10px 10px;
  background-color: #f8845d;
  background-image: linear-gradient(45deg,#f8b55d 25%,transparent 25%,transparent 50%,#f8b55d 50%,#f8b55d 75%,transparent 75%,transparent);
}
.stripe-inner {
  background: #fff;
  padding: 20px;
}

 

ストライプの色の変更は

  • background-color:#f8845d
  • background-image:#f8b55d

中の白いところは

  • background:#fff

ここのカラーコードを変更すれば色が変わります。

 

当ブログではストライプの部分で#666#bbbを使用しています。白背景は#fffのままにしてあります。

 



WordPressでの簡単な使い方

《AddQuicktag》《Shortcoder》というプラグインが便利です。

両プラグインの使い方に関しては別記事にて紹介いたします。

簡単な使い方の流れ
  1. Shortcoderで<div><div> と </div></div>を分けてショートコードを作成
  2. AddQuickTagにショートコードを登録
  3. ショートコードを挿入
  4. ショートコードの間に文章を挿入

この流れでOKです。

 

縞模様(ストライプ)ボックス:まとめ

CSSのみで実装することができるボックスは使えそうでしょうか?

CSSの初心者が覚えて書き込むのは大変かと思うので、プラグインを使用して簡単に挿入できるように工夫をすることをおすすめします。

素敵なデザインでブログライフを楽しんで下さい。

-CSSカスタマイズ
-, ,