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

【Luxeritas】カテゴリーと記事一覧にタイトルを付ける

2024/06/26Luxeritas

【Luxeritas】カテゴリーと記事一覧にタイトルを付ける サムネイル 02
ナツメグチャンネル

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

今回は
Luxeritas(ルクセリタス)の
カテゴリーと記事一覧に
タイトルを付けて行きます。

記事一覧のタイトルって何だ?

と思ったかも知れませんが
ここです。

記事一覧 タイトル
ナツメグチャンネル

カテゴリーのタイトルはここ。

カテゴリー タイトル
ナツメグチャンネル

記事一覧のタイトルと
サイドバーの見出しを同じデザインにしておくと
スマホで表示したときに
上から下まで見出しがそろいます。

スマホ表示。

記事一覧 スマホ表示
ナツメグチャンネル

下にスクロール。

サイドバー見出し スマホ表示
ナツメグチャンネル

統一されたモバイルフレンドリーな
デザインですね。

ちなみに上の画像はメインブログの
ナツメグの子供部屋』です。

【Luxeritas】カテゴリーと記事一覧にタイトルを付ける

作業の手順
  • プラグインWidget Logicをインストール
  • 記事一覧にタイトルを付ける
  • カテゴリーにタイトルを付ける
  • CSSで見た目を整える

早速やってみましょう。

プラグインWidget Logicをインストール

Widget Logicはウィジェットの
表示、非表示をコントロールするプラグインです。

このプラグインを使って記事一覧のタイトルを
記事一覧だけに表示させます。

プラグインWidget Logicをインストールします。

WordPressの管理画面から
プラグイン>新規追加。

右上のキーワードに
「Widget Logic」と入力します。

Widget Logicと入力
ナツメグチャンネル

Widget Logicを探して
今すぐインストールをクリック。

Widget Logicをインスト-ル
ナツメグチャンネル

有効化します。

Widget Logicを有効化
ナツメグチャンネル

これでWidget Logicが使えるようになりました。

記事一覧にタイトルを付ける

WordPressの管理画面から
外観>ウィジェット。

記事一覧上ウィジェットに
カスタムHTMLウィジェットを追加します。

カスタムHTMLウィジェットを追加
ナツメグチャンネル

カスタムHTMLにHTMLを書き込みます。

記事一覧上 カスタムHTML 02
ナツメグチャンネル
<div class="box1">記事一覧</div>

このように書き込みました。

ウィジェットのロジックには
is_home()と書き込みます。

ブログのトップページにのみ
表示させるという指示。

classがbox1でタイトルが「記事一覧」です。

記事一覧上にタイトル
ナツメグチャンネル

記事一覧上にタイトルが表示されました。

スタイルシートにCSSを書き込んで
デザインを整えて行くんですが
その前に
カテゴリーの方にもタイトルを付けます。

カテゴリーにタイトルを付ける

WordPressの管理画面から
カテゴリーを選択。

編集するカテゴリー名をクリックします。

カテゴリー名を選択 02
ナツメグチャンネル

カテゴリーを編集の説明に
HTMLを書き込みます。

説明にHTMLを書き込む
ナツメグチャンネル

説明の欄はHTMLが使えます。

<div class="box1">ブログカスタマイズ</div>

このように書き込んで更新をクリック。

classがbox1でタイトルが「ブログカスタマイズ」です。

全てのカテゴリーの説明に
同じように
HTMLでカテゴリー名を
それぞれ書き込みます。

CSSで見た目を整える

スタイルシートにCSSを書き込んで
見た目を整えます。

このように書き込みました。

/*記事一覧とカテゴリーのタイトル*/
.box1{
	font-size: 1.4em;
	font-weight: normal;
	color: #333;
	padding: 0em 0.5em;
	border-bottom: 3px double #555e7b;
}

/*記事一覧*/
@media screen and (max-width: 575px){
#list .toc{
	margin: 0 0 20px;
	padding: 0px 13px;
	}
}

サイドバーの見出しとデザインが揃いました。

記事一覧上にタイトル 02
ナツメグチャンネル

記事一覧のタイトルと
サイドバーの見出しの高さが合ってません。

記事一覧のタイトル側はこれ以上
上に上げられそうにないので
サイドバーの見出しの方を
下げます。

前回の記事で
サイドバープロフィールの
カスタマイズをやったので
前回の記事のCSSを修正します。

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

div[id*=side-], #col3{
    padding: 7px 0;
}

paddingで上下の余白を7pxにしました。

記事一覧上にタイトル 03
ナツメグチャンネル

記事一覧のタイトルとサイドバーの見出しの高さが
ぴったり揃いました。

カテゴリーにタイトル
ナツメグチャンネル

カテゴリーの方も
綺麗に表示されました。

CSSの解説

.box1がカスタムHTMLウィジェットで
設定したclassです。

font-sizeは文字の大きさ1.4em。

font-weightは文字の太さnormalを指定。

colorは文字の色
黒#333を指定しました。

paddingは内側の余白で
上下0em左右0.5emを指定。

border-bottomは文字の下に線を引きます。

doubleで3pxの二重線を指定して
線の色は紺色#555e7bにしました。

list .tocはスマホ表示で二重線が端まで
くっ付いていたので
記事一覧の両サイドに余白を入れて
サイドバーと同じ表示にしました。

ついでに記事同士の間隔を狭くました。

記事一覧の余白 01
ナツメグチャンネル

こうなりました。

記事一覧の余白 02

今回参考にさせていただいたのは
こちらのブログになります。

きらり☆彡さま

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

今回は以上です。

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

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

Luxeritas