KUSANAGI MAGAZINEで「きもおたわーどぷれす。」が紹介されました! クリックで公式サイトが開きます。

Luxeritasのトップ・カテゴリページの記事カード(タイル)の枠線カスタマイズ

この記事は約3分で読めます。
記事内に広告が含まれています。
本稿ではLuxeritasのトップページの記事に枠線つけたり角を丸めたりする方法を紹介します。
スポンサーリンク

Luxeritasの記事カード(タイル)の枠線を引くor消す方法 その1

Luxeritasは、テーマ自体に、枠線を描画する機能があります

1 「コンテンツ領域に枠線をつける」にチェックを入れる

管理画面からLuxeritas→カスタマイズ外観→コンテンツ領域とサイドバーを開きます。

「コンテンツ領域に枠線をつける」にチェックを入れると、枠線をつけられます。
外すと消えます。

わかりづらい!

 

わからなくても仕方ないかも
Luxeritasは設定項目多いから……

 

2 「コンテンツ領域枠線色」で枠線の色を設定する

「背景色/枠線色」に移動します。

 

「コンテンツ領域枠線色」で枠線の色の設定をします。

その3 枠線をカスタマイズしたい場合

角を丸めたい場合を例にとります。
以下のコードを子テーマのstyle.cssに追記してください。

/* Luxeritas枠線装飾 */
.grid{
border-radius: 4px;
}

border-radiusはボックスの角を丸めるプロパティ。
数字を変えると丸まり具合が調整できます。

他の装飾をしたい時も同じ。
{ }の中にプロパティを記述すれば設定できます。

スポンサーリンク

Luxeritasの記事カード(タイル)の枠線を引くor消す方法 その2

前項の方法が一般的ではあるのですが、これだと記事エリアにも枠線が引かれてしまいます。
リストページのみに枠線をつけたいのなら「コンテンツ領域に枠線をつける」のチェックを外し、CSSで直接指定します。
下のコードはカスタマイズ外観「グリッドレイアウト」で「カード型(最大1列)」に設定しているケースです。

/* Luxeritas記事リスト枠線(カード型最大1列の場合) */
#card-1 .grid{
border: 1px solid #ddd;
border-radius: 4px;
}
#bottom-area{
border: none !important;
}

指定するID(例なら「#card-1」)はお使いのレイアウトによって変わります。
例えば「タイル型(最大3列)」なら「#tile-3」となります。
全部のレイアウトに適用させたければ「#list」を指定してください。

スポンサーリンク

まとめ

Luxeritasは多機能ですけど、どこに何があるかわかりづらいのが難点。
私も恥ずかしながら……
以前、テーマに標準で機能がついているのに気づかず、作者のるなさんからコメントで指摘を受けたことがあります。

帯状メニューに「サイトマップ」と「問い合わせ」ボタンを追加する ~Luxeritasカスタマイズ
本記事は、WordPress無料テーマLuxeritasのヘッダー上部帯状メニューの項目を追加する方法カスタマイズを紹介するものです。【2017/02/25追記...

当時はまだまだユーザーが少なく情報が乏しかったというのもあるのですが。

もはやLuxeritasは無料WordPressテーマ一番人気と呼んでいいほど。
情報は豊富にあります。
本件に限らず、探せばどこかで方法が見つかると思います。

サイトを始めたい・引っ越したい方へ

おすすめレンタルサーバー「ConoHa WING」
Webサーバー処理速度 国内最速!
サイト管理・カスタマイズのタイパも抜群!
自動化AIのWEXALによって他社より負担を減らせます
各種キャンペーン施策によりコスパも抜群!
ConoHaに初めて入会かつ12か月以上のWINGパックなら
下のボタン経由で契約すると最大5000円の割引が受けられます

この記事を書いた人

素人の備忘録です。
素人がゆえにトラブルにぶつかりまくってきたので、同じように困った方の役に立てたらいいなと思ってます。
8年来のKUSANAGI推し。

元公安調査庁職員、発達障害(ADHD)

天満川 鈴をフォローする
Luxeritas

This website stores cookies on your computer. These cookies are used to provide a more personalized experience and to track your whereabouts around our website in compliance with the European General Data Protection Regulation. If you decide to to opt-out of any future tracking, a cookie will be setup in your browser to remember this choice for one year.

Accept or Deny

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