ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる
  • ブログ型サイト
  • 企業ブランディング・集客ページ
  • 飲食店や医院用サイト
  • 各種LP制作

・・・などなど
ワードプレスを使ったサイト制作や
コーディングのみも承ります。

お気軽にお問い合わせください。

※本サイトで紹介する商品は提携先アフィリエイトリンク付き(PR)の場合がございます。

Luxeritas(ルクセリタス)カテゴリーページに説明文をつける方法

ワードプレスの人気無料テーマLuxeritasでカテゴリーページ冒頭に説明文をつける方法の解説記事です。

一般的な手順説明のあと、このウェブチルサイトでつけている説明文(2021年9月現在)について紹介します。

この記事でわかること

テーマLuxeritasでカテゴリー説明文の作成方法について次のことを知ることができます。

  • カテゴリー説明文を表示する設定
  • HTMLをよく知らなくてもカテゴリー説明文をHTMLで表示する方法
  • ウェブチルサイトで使用しているカテゴリー説明文

ちなみにウェブチルサイトのカテゴリー”Gutenberg(ブロックエディター)”のページではカテゴリーまとめ記事を紹介しています。

ウェブチルサイトのGutenbergカテゴリー説明文

カテゴリーページ説明文の挿入設定

おそらくデフォルト状態のLuxeritasであればカテゴリーページ説明文が挿入できるようになっていると思いますが、念のため次の設定を確認しておきましょう。

①ダッシュボードメニュー 外観>カスタマイズ>グリッドレイアウト と進める
②”カテゴリー覧の最初に説明文を挿入する”にチェックを入れる

カテゴリー説明文挿入設定

このような設定であれば、カテゴリーの説明覧に文章を入力することでカテゴリーページの冒頭に説明文が表示されます。

カテゴリー説明文入力欄

ただしHTML形式での記述が可能となっているので、通常の文章だけだと改行やスペースは無視されてしまい、読みにくい文章となってしまいます。

せっかくなので簡単でもよいのでHTML形式で入力するようにしましょう。

簡単な文章をHTML化してカテゴリー説明文とする手順

そうはいってもHTMLになじみのない人もいるでしょう。

また少々HTMLの知識はあるけれどゼロから記述するのは難しい、という場合もあるかもしれません。

そんなあなたには、ブロックエディターの”HTMLとして編集”の機能を使うのがおすすめです。

ブロックエディターの”HTMLとして編集”機能でHTML化する

簡単な文章に文字装飾もつけてHTML化する手順を紹介します。

1.ブロックエディターを開けて文章を作成

見出しブロックと段落ブロックで文章を作成します。
段落ブロックでは文字装飾もつけておきます(太字化して文字色もつける)。

見出しブロックと段落ブロックで文章を作成

2.各ブロックをHTML化する

見出しブロックを例にとると次の手順となります。

①見出しブロックのツールバー一番右の3点メニューをクリック
②”HTMLとして編集”をクリック

HTMLとして編集

段落ブロックも同様の手順でHTML化すると次のようになります。

HTML化後の文章

HTML化した文章をカテゴリー説明覧に記述

出来上がったHTML文をそのままカテゴリー説明覧にペーストします。
試しに当サイトの配色技法というカテゴリーにペーストしてみました。

カテゴリー覧にHTMLをペースト

”更新”してこのページをweb表示させると次のようになります。

カテゴリー説明覧の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つの手法ですよね。あなたのサイトづくりの参考になればと思います。

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる