WordPressに囲み枠(ボックス)を簡単に設定できるようにする方法

ブログ
スポンサーリンク

こんにちは、サブです。

前回、ブログの記事にアクセントをつけるため、囲み枠を入れる方法をまとめました。

「カスタムHTML」ブロックを追加して、囲み枠用のHTMLとCSSを入れる方法を書きましたが、少し面倒に感じます。

もう少し簡単に、囲み枠を表示するため、WordPressで管理されている「style.css」を編集することにしました。

独自のCSSを追加して、好みの囲み枠を簡単に呼び出せるようにするイメージです。

スポンサーリンク

WordPressのstyle.cssを開く

まずは、独自のCSSを追加するために、WordPressが管理しているstyle.cssを開きます。

WordPress管理画面の「外観」>「テーマエディター」と進みます。

style.cssの編集画面が開きます。

スポンサーリンク

style.cssに独自のCSSを追加する

上記の赤枠部分に、独自のCSSを追加します。

/*-- カスタム --*/
.box1 {
	border: 1px solid #5166ae;
	background: #f8f9ff;
	padding: 15px;
}
/*-- ここまで --*/

上記のようなCSSを追加して、「ファイルを更新」と進みます。

ブロックにclassを設定する

最後に、記事中の囲み枠にしたいブロックに、先ほど追加したCSSのclass(box1)を設定します。

今回は、下記のボックスに囲み枠を設定します。

ボックスを選択して、右側サイドメニューの「高度な設定」を選択します。

「高度な設定」>「追加CSSクラス」に、「box1」を入力します。

最後に、記事を「更新」します。

「box1」設定前

「box1」設定後

「box1」の設定前後で、囲み枠ができていることが確認できました。

まとめ

今回は、 独自のCSSを追加して、囲み枠を簡単に設定できるようにしました。

style.cssを編集することで、割と手軽にCSSを追加できることが分かりましたので、これからも必要に応じて編集をしていきたいです。

コメント

タイトルとURLをコピーしました