ルクセリタスの記事一覧(カード)デザインをプチカスタマイズ

ルクセリタスで、トップページやアーカイブなどの記事一覧ページでの表示方法は、以下の通り9種類あります。

8743_05

 

今回は、カード型(最大2列)での表示例ですが、その他のタイプにも応用可能です。

 

変更箇所

BEFORE

8743_02

AFTER

8743_01

 

具体的には以下のデザインを変更しています。

  • メタ情報(カテゴリー名)の表示方法
  • 「記事を読む」リンクの表示方法

 

基本設定

レイアウト

「外観」→「カスタマイズ」から「グリッドレイアウト」を選択。

8743_03

 

リスト型トップページ、カテゴリー、アーカイブのそれぞれのリストタイプを選択

今回の例では「カード型(最大2列)

 

8743_04

 

「記事を読む」(カード型)のところに表示したい文字を入力。

例:More・・ などでもOK

※グリッドレイアウト設定下の方にあります。

8743_10

 

サムネイル

「サムネイル(アイキャッチ)」の設定から表示する画像サイズを選びます。

8743_06

 

今回の例では「ノーマル(150*150)

 

8743_07

 

「メタ情報の表示位置」から表示するメタ情報を設定。

 

8743_08

 

今回の例では「カテゴリー名」のみですが、お好みで。

 

8743_09

 

カスタマイズ

CSS追記

「Luxeritas」→「子テーマの編集」でスタイルシート(style.css)に追記します。

luxeritas_sitemap06

 

メタ情報のデザイン

8743_13

8743_11

 

メタ情報部分の装飾は以下です。色やサイズ等、お好みに編集して下さい。
/*記事一覧のメタ情報装飾*/
#list .meta {
text-align: center; /*テキストを中央寄せ*/
border-radius: 8px; /*角を丸める*/
background: #9d9d9d; /*背景色*/
font-size: 14px; /*文字サイズ*/
padding: 0 10px; /*余白*/
line-height: 26px; /*行の高さ*/
color: #fff; /*文字色*/
}
#list span.category a{
color: #fff;
text-decoration: none; /*下線を消す*/
}

 

「記事を読む」のデザイン

8743_14

8743_12

 

「記事を読む」の装飾は以下です。色やサイズ等、お好みに編集して下さい。
/*記事を読む*/
.read-more-link,
.read-more-link i {
position: relative; top:-45px; left:-10px; /*表示位置の調整*/
display: inline-block;
padding: 8px 10px 5px 1px; /*余白の調整*/
text-decoration: none; /*下線を消す*/
width:107px; /*幅*/
background: #fff;
border: solid 1px; /*枠線*/
color: #7f7f7f; /*文字色*/
border-color:#7f7f7f; /*枠線色*/
text-align:center; /*テキスト中央寄せ*/
}

 

表示する文字を「記事を読む」にした場合の例です。違う文字列で表示する場合は、文字数に応じての部分を調整して下さい。

 

リンクのホバー色も変える場合は以下をお好みの色に変更して追記して下さい。

 

.read-more-link:hover {
color: #fff; /*ホバー時の文字色*/
background: #7f7f7f; /*ホバー時の背景色*/
text-decoration: none;
}

 

色の変更

 

色の変更は以下もご利用下さい。

マカロンビビッドパステル和色セーフ色名 

 

その他の記事一覧カスタマイズ

カード型(最大1列)のカスタマイズ

 

タイル型のカスタマイズ

 

  • WordPressランキング
  • にほんブログ村 IT技術ブログ Webサイト構築へ