【WordPress】ボックスデザインの適用方法

いろんなブログを見ていると下記の様なボックスでアクセントをつける記事を見かけることが多くありました。

文字がダラダラ書いてあると読みにくいですよね。

こんな感じで四角く囲ってあると強調になって見やすくなると思います。

今回はこのようなボックスデザインをWordPressに適用する方法をまとめます。

参考にしたサイト

【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30

WordPressの状態は以下のような感じです。

この記事ではStartMagazineのテーマをベースに紹介していくのでテーマは各自のテーマのpathに読み換えてください。

• WordPressのバージョン5.2.2
• テーマはStartMagazine

style.cssの修正

# 修正ファイル
wp-content/themes/start-magazine/style.css

CSSファイルを修正しますので、慣れていない方はバックアップをとっておくことをおすすめします。

style.cssを開き末尾に以下のコードを貼り付けます。


style.cssを保存しWordPressのサーバにアップロードします。

    .box1 {
  position: relative;
  margin: 2em 0;
  padding: 0.5em 1em;
  border: solid 3px #62c1ce;
}
.box1 .box-title {
  position: absolute;
  display: inline-block;
  top: -27px;
  left: -3px;
  padding: 0 9px;
  height: 25px;
  line-height: 25px;
  font-size: 17px;
  background: #62c1ce;
  color: #ffffff;
  font-weight: bold;
  border-radius: 5px 5px 0 0;
}
.box1 p {
  margin: 0;
  padding: 0;
  font-size: 17px;
}

WordPressでの投稿について

    <div class="box1">
    <span class="box-title">まとめ</span>
    <p>・ここに文章<br>・テスト<br>・てすと</p>
</div>

上記のHTMLをコピーしてWordPressでHTMLとして入力します。

プレビューしてみて記事の内容を確認してみてください。

１番上の画像のような感じでボックスデザインが表示されていると思います。

簡単にできました。

今後はこのボックスデザインを使いながら記事にアクセントをつけて見やすくしていこうと思います。

これからWordPressでブログを始める方に参考になれば幸いです。