Luxeritas(ルクセリタス)カテゴリーページに説明文をつける方法
ワードプレスの人気無料テーマLuxeritasでカテゴリーページ冒頭に説明文をつける方法の解説記事です。
一般的な手順説明のあと、このウェブチルサイトでつけている説明文(2021年9月現在)について紹介します。
テーマLuxeritasでカテゴリー説明文の作成方法について次のことを知ることができます。
- カテゴリー説明文を表示する設定
- HTMLをよく知らなくてもカテゴリー説明文をHTMLで表示する方法
- ウェブチルサイトで使用しているカテゴリー説明文
ちなみにウェブチルサイトのカテゴリー”Gutenberg(ブロックエディター)”のページではカテゴリーまとめ記事を紹介しています。
カテゴリーページ説明文の挿入設定
おそらくデフォルト状態のLuxeritasであればカテゴリーページ説明文が挿入できるようになっていると思いますが、念のため次の設定を確認しておきましょう。
①ダッシュボードメニュー 外観>カスタマイズ>グリッドレイアウト と進める
②”カテゴリー覧の最初に説明文を挿入する”にチェックを入れる
このような設定であれば、カテゴリーの説明覧に文章を入力することでカテゴリーページの冒頭に説明文が表示されます。
ただしHTML形式での記述が可能となっているので、通常の文章だけだと改行やスペースは無視されてしまい、読みにくい文章となってしまいます。
せっかくなので簡単でもよいのでHTML形式で入力するようにしましょう。
簡単な文章をHTML化してカテゴリー説明文とする手順
そうはいってもHTMLになじみのない人もいるでしょう。
また少々HTMLの知識はあるけれどゼロから記述するのは難しい、という場合もあるかもしれません。
そんなあなたには、ブロックエディターの”HTMLとして編集”の機能を使うのがおすすめです。
ブロックエディターの”HTMLとして編集”機能でHTML化する
簡単な文章に文字装飾もつけてHTML化する手順を紹介します。
1.ブロックエディターを開けて文章を作成
見出しブロックと段落ブロックで文章を作成します。
段落ブロックでは文字装飾もつけておきます(太字化して文字色もつける)。
2.各ブロックをHTML化する
見出しブロックを例にとると次の手順となります。
①見出しブロックのツールバー一番右の3点メニューをクリック
②”HTMLとして編集”をクリック
段落ブロックも同様の手順でHTML化すると次のようになります。
HTML化した文章をカテゴリー説明覧に記述
出来上がったHTML文をそのままカテゴリー説明覧にペーストします。
試しに当サイトの配色技法というカテゴリーにペーストしてみました。
”更新”してこのページをweb表示させると次のようになります。
この方法であれば、見出しブロック、段落ブロックのほかに画像ブロックなどの単機能なブロックはHTML化することができます。
残念ながらカラムブロックやカバーブロックなどの複雑なブロック(複数のブロックを組み合わせたブロック)にはこの手法は使えません。
ウェブチルサイトで使用中のカテゴリー説明文
最後に記事冒頭で紹介した当サイトのGutenberg(ブロックエディター)カテゴリーの説明文のHTMLおよびCSSを紹介しておきます。
(HTML)
<p style="margin-bottom: 20px; font-size: 18px; text-align: center; color: #d19385; background: #2b2c42; padding: 5px 0px;"><b>カテゴリー:Gutenbergの使い方</b><p>
<p style="margin-bottom: 20px;">Gutenberg(ブロックエディター)の使い方について集めました。</p>
<p style="text-align: center;"><b>カテゴリー まとめ記事</b></p>
<div class="category-post__container">
<figure class="category-post term"><a href="https://web-children.com/2020/11/18/gutenberg-guidelines/"><img width="320" height="180" src="https://web-children.com/wp-content/uploads/2020/11/01fb5fe3016b75442d9fec492c8806bc.jpg" class="thumbnail wp-post-image" alt="カテゴリーガイド記事" itemprop="image" srcset="https://web-children.com/wp-content/uploads/2020/11/01fb5fe3016b75442d9fec492c8806bc-320x180.jpg 320w, https://web-children.com/wp-content/uploads/2020/11/01fb5fe3016b75442d9fec492c8806bc-300x169.jpg 300w, https://web-children.com/wp-content/uploads/2020/11/01fb5fe3016b75442d9fec492c8806bc-530x298.jpg 530w, https://web-children.com/wp-content/uploads/2020/11/01fb5fe3016b75442d9fec492c8806bc-565x318.jpg 565w, https://web-children.com/wp-content/uploads/2020/11/01fb5fe3016b75442d9fec492c8806bc.jpg 640w" sizes="(max-width: 320px) 100vw, 640px"></a></figure>
<h2 class="category-post__title entry-title"><a href="https://web-children.com/2020/11/18/gutenberg-guidelines/" class="entry-link">ワードプレス Gutenberg(ブロックエディター)使い方ガイド 初めてブロックエディターを使うあなたへ</a></h2>
</div>
(CSS)
/* カテゴリーページの冒頭説明文のスタイル */
.category-description {
font-size: 1.6rem;
border: 4px double #91C4C7;
background-color: #f9ffef !important;
}
/* カテゴリー 冒頭のガイドライン記事 */
.category-post__container {
display: flex;
justify-content: space-evenly;
align-items: center;
background-color: #EEF9FF;
border: solid 1px #ccc;
padding: 15px 0;
}
.category-post.term {
width: 50%;
margin: 0 auto;
}
#list .category-post.term img {
display:block;
max-width:100%;
width:100%;
height: auto;
margin: 0;
}
.category-post__title {
width: 40%;
margin: 0 auto;
font-size: 1.6rem;
}
@media screen and (max-width: 575px){
.category-post__container {
flex-direction: column;
margin-left:8px;
margin-right:8px;
}
.category-post.term {
width:100%;
margin-bottom: 30px;
}
.category-post__title {
width: 100%;
font-size:1.6rem;
}
}
簡単にカテゴリーの紹介をした後、このカテゴリーのまとめ記事へのリンクをアイキャッチ画像とともに表示しています。
CSSのflexボックスの指定により横幅575px以下のデバイスではアイキャッチと記事タイトルは縦に並ぶ仕様としています。
また通常の記事一覧では320×180pxのサムネイルが選択されますが、このアイキャッチ画像はやや大きめに表示したかったので、<img>タグ内のsizes属性で640×360pxの画像を指定するようにしました。
sizes="(max-width: 320px) 100vw, 640px"
まとめ
ブログ内の記事が増えてくると、サイトを訪れてくれたユーザーの方により多くの記事を読んで頂けるよう工夫する必要が出てきます。
カテゴリーの冒頭にわかりやすい説明覧を設けるのもその1つの手法ですよね。あなたのサイトづくりの参考になればと思います。