【コピペでOK・AddQuickTag不要】WordPressルクセリタスでボックスデザイン（囲み枠）のカスタマイズ方法

WORDPRESS/WEB

こんにちは、歯科衛生士・ママライターのミホです。今回は「WordPressのルクセリタスにおけるボックス（囲み枠）カスタマイズ」についてです。

WordPressルクセリタスのボックスデザイン例

ボックスデザインとは、以下のように文字などを囲んだデザインのことを言います。

ルクセリタスのボックスカスタマイズ

まず上記のようなシンプルなボックスデザインのカスタマイズ方法を解説します。

プログラミングの独学に限界を感じたら、スクールに通っても良いかなと思っています。「programmer college」は完全無料のプログラミングスクールで、レッスンだけでなく就活支援まで手厚くサポートしてくれるのが嬉しい点です。なぜ完全無料？怪しくない？と思いましたが、企業から協賛金を募ることで無料スクールが実現しているそうです。どの学習ソフトも有料なので、無料で学べてしかも就活直結ってありがたいですよね。

▼完全無料のプログラミングスクール

【フリーター・未経験歓迎】手に職をつけるプログラミング＆就活スクール

WordPressルクセリタスのボックスデザインカスタマイズ方法

今後よく使うボックスデザインの場合、ルクセリタスの「定型文機能」を使うと便利です。ルクセリタスの定型文機能は、WordPressのプラグインである「AddQuickTag」の代わりのようなもの。AddQuickTagはとても便利なプラグインとしてよく勧められていますが、ルクセリタスでは標準装備なのでAddQuickTagはインストールしなくてOKです。

①スタイルシート（style.css）のバックアップを取る

ルクセリタスでカスタマイズを始める前に、スタイルシート（style.css）のバックアップを取っておくと安心です。これはCSSなどの記述は、1文字間違えるだけで全体のデザインやレイアウトが崩れてしまうことがあるからです。文字がずらーっと並んだ中から、「どこが間違っているのか」と見つけて修正するのは大変なことです。

正しいバックアップの取り方があると思いますが、私は面倒なので・・・パソコンのメモ帳に、カスタマイズ前のCSSをすべてコピペという簡単な方法で行なっています。

ルクセリタスのスタイルシート（style.css）は、子テーマの左メニューにある「外観」＞「テーマエディター」をクリックすると開けます。

②CSSを子テーマのスタイルシート（style.css）にコピペ

ルクセリタスのスタイルシート（style.css）を開くと、ずらーっと記述が並んでいると思いますが、無視して下スクロール。新たに記述を追加しましょう。

以下のCSSをスタイルシート（style.css）にコピペします。

/* ボックス（グレー） */
.box1{
background-color:#f3f3f2;
padding: 20px 40px 20px 40px;
position: relative;
margin: 0em;
display:block;
}

1行目の「/* ボックス（グレー） */」はCSS上のメモで、デザインには反映されません。後から「このボックスの色を少し変えたい」「このボックスの幅を変えたい」などとなったときに便利なので、メモや覚え書きとして残しておきましょう。

CSS上では、「/*  */」で囲えばメモとして残しておくことができます。

2行目の「.box1」は、ご自身で任意の名前に変えてOKです。ご自身でわかるような名前にしておくと、上記のメモと同じで後々楽です。

  • この記事では「.box1」として説明を続けていきます。ご自身で任意の名前に変えた場合は、今後出てくる「box1」という部分を任意の文字列に変更してください。
  • ボックスの名前の前のドット「.」は必要な記述です。削除しないでください。

記述ができたら、下の「ファイルを更新」ボタンを押します。

③左メニュー「Luxeritas」内「定型文登録」に登録

ファイルの更新ができたら、左メニューの「Luxeritas」＞「定型文登録」をクリックします。

「定型文」タブ＞「新規追加」ボタンをクリック。

下図のようなウィンドウが出るので、左下の「囲み型」にチェックを入れます。

すると下図のように入力欄が増えるので、以下のように入力します。なお「定型文」入力欄の「"box1"」は、先ほどスタイルシート（style.css）に入力したときと同じ名前を入力します。ご自身で任意の文字列に変えた場合は、この部分も同じ文字列にしないと反映されません。

また「ラベル（必須）」欄には、ご自身がわかりやすいような名前を付けておきましょう。ここで入力したラベルが、記事などを書くときのエディタページにそのまま表示されます。具体的には以下のような感じです。

定型文（コード部分）は変えたくなったら編集できますが、ラベル部分は後から変更できません。そのため後から変えたいとなった場合は、定型文を再度新規作成する必要があります。

入力が完了したら、右下の「保存」ボタンをクリックします。これでルクセリタスのボックスカスタマイズの準備は完了です。

④記事編集画面（クラシックエディター）でボックスデザインを反映させる

ではボックスカスタマイズの準備ができたので、実際に反映させてみましょう。

まず記事編集画面（エディター）画面へ移動します。今回は左メニューの「投稿」＞「新規追加」から移動しました。

下図のように、任意のテキスト（ボックスで囲いたい文字列）を入力します。

入力したテキスト（ボックスで囲いたいテキスト）を選択した状態で、メニュー内にある「定型文」アイコンをクリックします。

すると定型文に登録しているものが、定型文のラベル名で表示されます。先ほど登録した「グレーボックス」をクリックしましょう。私はいくつか定型文に登録しているので以下のようにいくつも表示されています。

ボックスが反映されました！

エディターによっては編集画面と実際のサイト上での表示が異なることもあります。随時プレビューなどで確認すると良いと思います。

WordPressルクセリタスのボックスデザインのアレンジ・カスタマイズ方法

ボックスデザインはさらにカスタマイズをすれば、以下のようにアイコンや色を付けることもできます。

ルクセリタスのボックスカスタマイズ
ルクセリタスのボックスカスタマイズ

ちなみに今回紹介したCSSは、それぞれ以下のような意味を持っています。それぞれを変更すれば「色だけ変えたい」「余白だけ変えたい」なども自由自在です。

.box1{
background-color:#f3f3f2;　　/* ←ボックスの色（今回でいうグレー） */
padding: 20px 40px 20px 40px;　　/* ←ボックス内テキスト周囲の余白 */
position: relative;
margin: 0em;　　/* ←ボックス外の余白（今回は無し） */
display:block;
}

①ボックスの色を変える方法

ボックスの色を変えたいときは、先ほどのCSSの2行目を変更すればOKです。

.box1{
background-color:#f3f3f2;　　/* ←ボックスの色（今回でいうグレー） */
padding: 20px 40px 20px 40px;　
position: relative;
margin: 0em;　
display:block;
}

今回はグレーで「#f3f3f2」という色が入っていますが、以下のようなサイトからコピペすればさまざまな色に変えることができます。

2つ目の「和色カラーコード一覧」は、おしゃれなくすみカラーが多く私もよく使っています。

②ボックス内の余白を変える方法

「ボックス内の余白」とは、以下の部分のことです。

この部分を調整したいときは、先ほどのCSSの3行目を変更すればOKです。

.box1{
background-color:#f3f3f2;　　
padding: 20px 40px 20px 40px;　/* ←ボックス内テキスト周囲の余白 */
position: relative;
margin: 0em;　　
display:block;
}

今回は「20px 40px 20px 40px」となっていますが、これは「上　右　下　左」の余白を意味しています。

そのため例えば「上の余白を10px、右の余白を20px、下の余白を30px、左の余白を40pxにしたい」ということであれば、以下のような記述になります。

padding: 10px 20px 30px 40px;

その他値をまとめて記述する方法もあるのですが、今回のように上下左右それぞれを1つずつ記述しておくと確実です。

③ボックス外の余白を変える方法

「ボックス外の余白」とは、以下の部分のことです。

この部分を調整したいときは、先ほどのCSSの5行目を変更すればOKです。

.box1{
background-color:#f3f3f2;　　
padding: 20px 40px 20px 40px;　　
position: relative;
margin: 0em;　/* ←ボックス外の余白（今回は無し） */
display:block;
}

ただこの部分の調整については、ボックスカスタマイズだけでなくホームページ全体の行間設定なども関わってきます。そのためボックスデザインで調整しても完全に思い通りにはならないかもしれません。

プログラミングの独学に限界を感じたら、スクールに通っても良いかなと思っています。「programmer college」は完全無料のプログラミングスクールで、レッスンだけでなく就活支援まで手厚くサポートしてくれるのが嬉しい点です。なぜ完全無料？怪しくない？と思いましたが、企業から協賛金を募ることで無料スクールが実現しているそうです。どの学習ソフトも有料なので、無料で学べてしかも就活直結ってありがたいですよね。

▼完全無料のプログラミングスクール

【フリーター・未経験歓迎】手に職をつけるプログラミング＆就活スクール

WORDPRESS/WEB

Posted by miho