小説家になろうにて「キモオタでギャルゲー、それって何の罰ゲーム!?」連載中!

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

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テーマ一番人気と呼んでいいほど。
情報は豊富にあります。

解答者の写真
わからなければ、とりあえずGoogle先生に聞いてみましょう。
「Luxeritas (やりたいことや機能)」で検索すれば大抵のことは教えてもらえると思います。
アドセンス有りでもPageSpeed Insightで100点満点!

超光速サイト実行環境KUSANAGI&WEXAL。
コスパ抜群のレンタルサーバーConoHa。
もっと知りたい方はボタンをクリックしてください。
特集記事の目次が開きます。

この記事を書いた人

広島市内のパチンコホール勤務。
3号機時代からのパチンカス。
ADHD、精神障害者手帳3級所持。
慶應義塾大学商学部卒、専攻はマーケティング(広告・宣伝)
国家一種試験経済職の資格で公安調査庁に入庁。
在職時は国際テロ、北朝鮮を担当。
「小説家になろう」の底辺作者。
WordPress記事は素人の備忘録です。

天満川鈴をフォローする
Luxeritas
スポンサーリンク
きもおたねっと。
タイトルとURLをコピーしました