★ 今日はこんな記事も読まれています ★

Luxeritas（ルクセリタス）の記事リスト画像から枠を取り去る方法

2017年11月6日Luxeritas

PCブラウザ・ノート

表題の画像というのはトップページやカテゴリーページに表示される記事リストに表示されるアイキャッチのことです。画像周りの丸いボーダーと余白で装飾されていますよね。カスタマイザーから消せるのは本文のみ。

というわけでアイキャッチから余白と枠を取り去って丸みを消した上で、画像を要素いっぱいに広げてみました。

角を立たせただけでちょっとスタイリッシュになります。

サムネイルが表示されるエリアは4つある

サムネイルが表示されるのはトップページやカテゴリに表示される記事リストの他にもあります。

  1. 記事リスト
  2. 新着記事ウィジェット（Luxeritasオリジナル）
  3. 関連記事
  4. 次記事・前記事

これら全てのサムネイルに丸っこい枠線がついています。その理由はLuxeritasテーマのスタイルシートにあるこの部分。

.term img{
　float:left;
　max-width:150px;
　height:auto;
　margin-bottom:15px;
　background:inherit;
　border:1px solid #ddd;
　border-radius:4px;
　box-shadow:0 0 2px 1px rgba(255,255,255,1) inset
}
.thumbnail{display:block;padding:4px;//略
}

画像周りの装飾は.termと.thumbnailというクラスで定義されています。

やりたいことは2つだけれど

枠線を消して画像サイズをできるだけ大きく四角くするためにやることは2つ。

  • borderを角の丸みごと消す
  • 余白であるpaddingを消す

この2点だけなのですが、画像サムネイルは先の4箇所で使われているため、.termだけでコントロールすると問題が生じます。

というのもリスト表示で使われているサムネイルと、関連記事で使われているサムネイルでは余白が異なるため、一箇所でうまくいっても他に影響が出てしまいます。

そういったわけで、個別に変更します。

画像余白・ボーダー変更のCSSサンプル

余白とborder関係だけをtermでまとめて変更して、余白やマージンだけ個別で変更するのがスマートだと思いますが、分かりやすくするためここではパートごとに個別に設定します。

thumnailクラスのpaddingは.termで上書きしてしまいます。

投稿記事リストの変更

投稿記事リストのサムネイルは figure 要素で定義されています。そこでfigureのみに適用するため、figure.term imgで変更します。

figure.term img{
border:0;border-radius:0;
margin:0 0 5px 0;//レイアウトによって変わる
padding:0;
box-shadow:none;//枠を消してしまう。消す代わりに影をつけることもできる（後述）
}

要素figureのクラス名termの中にあるimgのプロパティでボーダーを0にして角の丸みを取り払い、さらに余白も消しています。

marginは4つ数字を指定すると、右から順に上右下左の余白が設定されます。

画像下側のマージン5pxは選択したレイアウトによって異なるので、使用しているものに合わせて変更してください。

あと、box-shadowをnoneにする代わりにちょろっといじると陰をつけられます。こんな感じ。

box-shadow:5px 5px 5px 0 #999

関連記事サムネイル（投稿本文下）

投稿記事下のサムネイルは #related というid内にあります。

#related .term img{
border:0;border-radius:0;
box-shadow:0;
margin:8px 10px 8px 0;
padding:0;
}

基本やっていることは上と同じですが、関連記事は上下と右にマージンがないと詰まってしまうため数字が多くなっています。

次の投稿・前の投稿サムネイル

次の投稿、前の投稿へのリンクにサムネイルを表示させている時に変更します。

#pnavi img{border:0;border-radius:0;}

余白も弄る必要がないのでこれだけ。

ウィジェットの新規投稿（ルクセリタス専用）

#thk-new内にあります。

#thk-new .term img{
border:0;border-radius:0;
padding:0;margin:0 5px 0 0;
box-shadow:0;}

基本は同じですが、画像の右側にタイトルとdiscriptionが表示されるため、右側にマージンを設けています。

レイアウトを変更する時は気をつけて

ルクセリタスはカスタマイザーからレイアウトを手軽に変えられるのがいいところですが、デザインをいじっているとリストではよくてもタイルだと崩れてしまうことがあるのでお気をつけあれ。

画像に文字を重ねて透過させようかと思ったのですが、レイアウトを決めてからにしないといろいろややこしくなるんですよね。

LuxeritasLuxeritasカスタマイズ