IDOL×IDOL STORY! 感想レビュー
ナツメグチャンネル
Luxeritas カスタマイズ サムネイル 05
【Luxeritas】記事一覧カスタマイズ【カード型】 サムネイル
【Luxeritas】ヘッダー下に画像リンク4つ並び【再利用ブロック】 サムネイル 02

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

2024/06/13Luxeritas

【Luxeritas】ブログカードのカスタマイズ サムネイル 02
ナツメグチャンネル

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

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

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

ブログカード デフォルト
ナツメグチャンネル

でかっ。

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

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

関連記事 長方形 サムネイル
ナツメグチャンネル

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

作業の手順
  • 外観カスタマイズで画像の位置を左に
  • スタイルシートにCSSを書き込んでデザインを整える
  • 画像が横に伸びたサムネイルを直す
  • 外部リンクのサムネイルを正方形にする

外観カスタマイズ

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

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

ブログカード 外観カスタマイズ
ナツメグチャンネル

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

スタイルシートに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は
ブログカードのマウスホバー時の指定。

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

出来ました。

サムネイル 伸びる
ナツメグチャンネル

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

これは怠惰な豚です。

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

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

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

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

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

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

Luxeritas サムネイル管理 04
ナツメグチャンネル

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

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

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

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

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

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

テーマを選択
ナツメグチャンネル

incをクリック。

inc
ナツメグチャンネル

blogcard-func.phpをクリック。

blogcard-func.phpを選択
ナツメグチャンネル

227行目と229行目。

227行目
ナツメグチャンネル

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

thumb320に書き換える
ナツメグチャンネル

250行目。

251行目
ナツメグチャンネル

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

-160×90に書き換える
ナツメグチャンネル

ファイルを更新します。

出来ました。

直りました
ナツメグチャンネル

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

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

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

外部リンク サムネイル 伸びる
ナツメグチャンネル

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

うーん豚。

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

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

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

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

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

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

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

追加 CSS クラス
ナツメグチャンネル

高度な設定の
追加 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