ルクセリタスの新着記事ウィジェットをカスタマイズ

ルクセリタス・カスタマイズ

ルクセリタスオリジナルウィジェット「新着記事ウィジェット」のデザインをカスタマイズしてみます。

ウィジェット表示

「外観」→「ウィジェット」から

 #5 新着記事(Luxeritasオリジナル)を追加して表示

#5 新着記事(Luxeritasオリジナル)

 

サムネイルの選択「正方形サムネイル(小)」(初期値です)

#5 新着記事(Luxeritasオリジナル)

表示サンプル

表示・非表示を選択可能なもの。

日付、タグ(またはカテゴリー)、記事抜粋、サムネイル

表示サンプル

ルクセリタス:新着記事ウィジェット

 

 

すべてを非表示にした場合は、タイトルのみになります。

ルクセリタス:新着記事ウィジェット

 

デザインカスタマイズ

デザインのカスタマイズはCSSの追記で行います。追記場所は子テーマのスタイルシート。

child_style01

「Luxeritas」→「子テーマの編集」で「スタイルシート」を選択します。(Ver.3.7.9以前は「style.cssタブ」)

Luxelitasスタイルシート編集画面

 

 

参考デフォルトCSSは以下です。

wp-contentthemesluxeritasstyles内「widget-new-post.css

 

カスタマイズ例

サムネイル

ルクセリタス:新着記事ウィジェット

  • アイキャッチ画像のサイズを指定
  • 画像の角を丸める
#thk-new .term img,
#thk-new .term amp-img {
width: 80px;
height: 80px;
border-radius:6px;
}

 

境界線

ルクセリタス:新着記事ウィジェット

  • 破線を消す
#thk-new .toc{border:none;}

 

リンクの色変更

ルクセリタス:新着記事ウィジェット

  • タイトルリンク
  • ホバー時の画像枠色
.new-title a{color:#616161;}
.new-title a:hover{color:#fb8a8a;}
#thk-new .term img,
#thk-new .term amp-img a:hover{border-color: #999999;}

 

日付・タグ

ルクセリタス:新着記事ウィジェット

  • 右寄せ
#thk-new .new-meta{text-align:right;}

 

ルクセリタス:新着記事ウィジェット

  • 文字色やサイズ変更
#thk-new .new-meta{
color:#78aad2;
font-size:16px;
font-weight:bold;
}

 

 

関連記事