【Luxeritas】ブログカードのカスタマイズ

2023/07/032024/09/04Luxeritas

もうダサくしないカスタマイズ第8回。

今回は
Luxeritas（ルクセリタス）の
ブログカードのカスタマイズを
して行きます。

Luxeritasのデフォルトの
ブログカードのデザインはこちら。

でかっ。

という訳で
Next/Prevと関連記事のデザインと
合わせて
ブログの全体のデザインを統一して行きます。

Next/Prevと関連記事はこうしました。

【Luxeritas】ブログカードのカスタマイズ

外観カスタマイズ

まずは外観カスタマイズで
サムネイルの表示を左にして行きます。

外観＞カスタマイズ＞ブログカード。

画像の位置を左にしました。

スタイルシートにCSSを書き込む

スタイルシートにCSSを書き込んで
デザインを整えて行きます。

サムネイルを長方形の160×90pxにして
サムネイル画像とブログカードの外枠の線を消しました。

サブタイトルとURLも消します。

/*ブログカード*/
.blogcard-img{
	width: 160px;
	height: 90px;
}

a.blogcard-href{
	padding: 10px 15px 5px;
	min-height: 110px;
	background-color: #fff;
	border: none;
	box-shadow: 1px 1px 2px #ddd;
}

p.blog-card-desc{
	display: none;
}

p.blogcard-link{
	display: none;
}

p.blog-card-title{
	font-weight: normal;
}

p.blog-card-title:hover{
	color: #b22222;
}

a.blogcard-href:hover{
	background-color: #fff;
	box-shadow: 2px 2px 4px #ddd;
	transform: translateY(-3px);
}

cssの解説

.blogcard-imgはサムネイルのサイズで
160×90pxを指定しました。

a.blogcard-hrefはブログカードの外枠。

border: none;で外枠の線を消したら
ブログカードかどうか
分かりにくくなったので
box-shadowで影を付けました。

p.blog-card-descはサブタイトルで
display: none;で消しました。

p.blogcard-linkはリンクのURLで
display: none;で消しました。

p.blog-card-title:hoverはマウスホバー時の指定。

タイトルの色を赤くなるようにしました。

a.blogcard-href:hoverは
ブログカードのマウスホバー時の指定。

マウスホバーで上に浮きます。

出来ました。

うげぇ!?サムネイルが横に伸びてる？

これは怠惰な豚です。

サムネイルが伸びない方法は
検索したら出て来ました。

サムネイルが伸びない方法

参考にさせて
いただきました。

ありがとうございました。

横に伸びたサムネイルを直す

管理機能＞サムネイル管理。

thumb320にチェックを入れて
変更を保存。

blogcard-func.phpを書き換えます。

phpファイルを編集するときは
バックアップを取った方が良いそうです。

ナツメグはバックアップを取らずに
ノーガードで行きます。

外観＞テーマファイルエディター。

Luxeritasの親テーマに切り替えます。

incをクリック。

blogcard-func.phpをクリック。

227行目と229行目。

227行目のthumb100をthumb320に書き換えて
229行目の-100×100.を-160×90.に書き換えます。

250行目。

-100×100.を-160×90.に書き換えます。

ファイルを更新します。

出来ました。

サムネイルが正常に表示されて
怠惰な豚からスマートなナツメグに戻りました。

しかし
まだまだ終わりません。

外部リンクのサムネイルを正方形にする

外部リンクのサムネイルが横に伸びてます。

うーん豚。

Luxeritasのサムネイルは
正方形に表示する仕様らしく
外部リンクを貼ると正方形のサムネイルが
横に伸びた形になってしまいます。

なので
外部リンクだけは
正方形のサムネイルが
表示されるようにします。

デザインが統一されなくなってしまいますが
しょうがないですね。

スタイルシートにCSSを書き込みます。

/*ブログカード正方形サムネイル*/
.square_img .blogcard-img{
	width: 90px;
	height: 90px;
}

これで
外部リンクのブログカードの
高度な設定にsquare_imgと書き込む事で
正方形のサムネイルが表示されます。

記事の編集画面で
外部リンクのブロックを選択します。

高度な設定の
追加 CSS クラスにsquare_imgと書き込みます。

外部リンクのサムネイルが正方形になりました。

ナツメグは今日も可愛い。

Luxeritasのデザインを整えるのは
意外と手間が掛かりますね。

今回の記事のCSSをコピペして
カスタマイズを楽に終わらせて下さい。

お疲れさまでした。

もうダサくしないカスタマイズ

【Luxeritas】もうダサくしないカスタマイズ
【Luxeritas】サムネイルは正方形か長方形か!?
【Luxeritas】サムネイルを長方形に統一
【Luxeritas】メタ情報のカテゴリーのカスタマイズ
【Luxeritas】記事一覧カスタマイズ【カード型】
【Luxeritas】文字の色はどうしよう!?【文字リンク】
【Luxeritas】SNSシェアボタンを消します
【Luxeritas】デベロッパーツールの使い方【Google Chrome】
【Luxeritas】ヘッダー下に画像リンク4つ並び【再利用ブロック】
【Luxeritas】カルーセルスライダーのカスタマイズ【JIN風】
【Luxeritas】メニュー（グローバルナビ）とフッターの色を揃える
【Luxeritas】ページネーションのカスタマイズ
【Luxeritas】ヘッダー上の帯メニューのカスタマイズ
【Luxeritas】記事内のカスタマイズ【Snow Monkey Editor】
【Luxeritas】目次のカスタマイズ
【Luxeritas】サイドバーカテゴリーのカスタマイズ【AFFINGER風】
【Luxeritas】サイドバーカテゴリーのカスタマイズ【JIN風】
【Luxeritas】サイドバープロフィールのカスタマイズ
【Luxeritas】カテゴリーと記事一覧にタイトルを付ける
【Luxeritas】パターン登録の使い方
【Luxeritas】新着記事のカスタマイズ
【Luxeritas】グローバルナビのメニューにアイコンを付ける