WordPressの無料テーマルクセリタス（Luxeritas）の「見出し」デザインをカスタマイズ、投稿記事の見出し

2019年7月1日2020年10月15日

WordPressの無料テーマルクセリタス（Luxeritas）で見出しのデザインをカスタマイズする方法をご紹介します。ルクセリタス（Luxeritas）は初心者におすすめの無料テーマです。デザイン変更も簡単で、専用のカスタマイズ（外観）設定を使用することで、難しいHTMLやCSSコードを触ることなく、設定できるのが魅力です。ルクセリタス（Luxeritas）以外のテーマでも子テーマを使用している場合は同様の方法で設定できます。

ただ、見出し設定は「CSSコード」の編集が必要になります。そのため見出しをかっこよくしたいけど、ちょっと難しいから諦めている、そんな方に、コードのコピペでできる方法をご案内します。
　ちょっと頑張って色コードをオリジナルに変更できれば怖いものなしです（^^）
あなたのサイトがぐぐっとオシャレに変身します、見出しがわかりやすいと記事を読んでくれる人にも優しいサイトになります。是非チャレンジしてみてください。

Contents

1. 見出し変更のイメージを決める
- 1.1. ルクセリタス（Luxeritas）既存の見出し
- 1.2. カスタマイズ（変更）後の見出し
2. 記事見出しH２
- 2.1. 記事見出しH３
3. 見出しのカスタマイズ

見出し変更のイメージを決める

まず、どんな見出しにするのかを決めましょう。いろいろなサイトを巡って、参考にするイメージを固めます。そして、サンプルサイトでなるべくそれに近いサンプルを探し、あとはコピペです（^^）

ルクセリタス（Luxeritas）既存の見出し

まず、ルクセリタスをインストールしたばかりの見出し表示はこんな感じです

シンプルですが、色がグレーでちょっと寂しいですね。左端のボーダーだけなので、記事に埋もれて目立ちにくいこともあります。

カスタマイズ（変更）後の見出し

今回はこれを、以下のように変更してみます。左端のボーダの色をサイトのテーマカラーに合わせました。背景色やボーダ（下線）をプラスして、見出しとわかるように目立たせました。

記事見出しH２

あああああああああああああああああああああああああああああああああああ

記事見出しH３

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

記事みだしH４

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

見出しのカスタマイズ

まずは、見出しのイメージを決めます。以下におすすめのサンプルサイトを挙げてみました参照ください。
＊この他にもたくさんあります、「Wordpress」「見出し」「カスタマイズ」「サンプル」などのキーワードで検索してみてください。お気に入りがみつかったら、設定です（^^）

■CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

＊サルワカさんのサイトです

■シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル50

＊Nx Worldさんのサイトです

■CSSコピペで出来るシンプル可愛い見出しデザイン【女性向け】

＊第０版さんのサイトです

サンプルコードのコピー

お気に入りのサンプルを見つけたら、コードをコピーしておきます。
＊サンプルサイトは無料で利用できるコードを提供してくれているところがほとんどですが、利用には制限や条件を設けている場合があります。各サイトでの利用規約等は必ず確認してください。

■サルワカさんのサイトの場合

以下の画像は　 https://saruwakakun.com/html-css/reference/h-design　より引用

■Nx Worldさんのサイトの場合

以下の画像は　https://saruwakakun.com/html-css/reference/h-design　より引用

■第０版さんのサイトの場合

以下の画像は　https://0edition.net/archives/1448　より引用

WordPressでの設定（ルクセリタスの場合）

今回は、無料テーマルクセリタス（Luxeritas）での設定方法をご紹介します。
＊CSSの設定方法はテーマごとに異なります、各テーマのヘルプサイト等で確認ください
＊子テーマを設けて入いるテーマではほぼ同じ方法で設定できます

ワードプレスの左メニューから、[Luxeritas]>>[子テーマの編集]をクリックします。

子テーマの編集画面が表示されます。
[style.css]のタブをクリックします。

もともと、入力されているオレンジ色の文字の後ろに、CSSコードを貼り付けます。

基本、現在他のコードが記載されている場合はその下に貼り付けます。
CSSコードは後から記載されたもの（つまり下側に記載されたもの）が優先されます。

①この部分は貼り付けるコードの説明です、無くてもかまいませんが、記載しておくと便利です
＊説明分は「/*aaaaaaaaaaaa*/」で囲みます

②コピペしたコードを貼り付けます
＊貼り付けたコードの前に「.post」を記載します、記事内の見出しに設定するためのコードです
＊設定する見出し　h２、h３、h４に書き換えます
＊記載は全て半角英数小文字です
＊「.post」と「h2」の間はスペースを入れます

全ての見出しの貼り付けが終わったら、[保存]をクリックします。

保存ボタンをクリッックした際に、以下のような画面がでたら、[このページを離れる]をクリックしてください。
＊使用するブラウザによって状況はことなります。

子テーマの編集の下に、「変更を反映しました」と表示されればOKです、念の為スタイルシート内にコードが追加されていることを確認してください。

これで設定は完了です。

ブログを更新して、見出し表示のスタイルが変更されたことを確認してください。

このサイトのコードは以下です

■見出し設定のコード

/*記事のh2の設定*/
.post h2{
margin-left:0;
padding: .5em 0 .5em .75em;/*文字の上右下左の余白*/
background: #f6f6f6;/*背景色*/
border-left: solid 8px #ef9c99;/*左線*/
border-bottom: 2px solid #ccc;/*下線*/
}

/*記事のh3の設定*/
.post h3 {
margin-left:0;
position: relative;
padding: .25em 0 .25em .75em;
border-left: 8px solid #ef9c99;
}
.post h3::after {
position: absolute;
left: 0;
bottom: 0;
content: ";
width: 100%;
height: 0;
border-bottom: 1px solid #ccc;
}

/*記事のh4の左ボーダー設定色*/
.post h4{
padding: .15em 0 .15em .75em;
border-left: 8px solid #ef9c99;
}

色コードの変更

CSSコード内の色コードを変更することで、より自信のサイトにマッチした見出しになります。
色コードは　＃で始まる６桁の記号と数字の表示部分です。

色コードを決める、HTMLの色コードは、「HTML」「色コード」でググるとサンプルサイトがたくさんあります

おすすめは以下のサイトです。

■HTMLカラーコード – HTML Color Codes

■HTMLカラーコード: WEB色見本原色大辞典

色コードをコピーしたら、該当のCSSの部分を書き換えます。

既存のコード

/*記事のh2の設定*/
.post h2{
margin-left:0;
padding: .5em 0 .5em .75em;/*文字の上右下左の余白*/
background: #f6f6f6;/*背景色*/
border-left: solid 8px #ef9c99;/*左線*/
border-bottom: 2px solid #ccc;/*下線*/
}

このコードでの表示
↓↓↓↓↓↓↓

色を変更したコード

/*記事のh2の設定*/
.post h2{
margin-left:0;
padding: .5em 0 .5em .75em;/*文字の上右下左の余白*/
background: #f0f8ff;/*背景色*/
border-left: solid 8px #0000cd;/*左線*/
border-bottom: 2px solid #e6e6fa;/*下線*/
}

これを表示させると、以下のようになります（^^）
↓↓↓↓↓↓↓

どうですか、イメージがだいぶ変わってきますね。
是非あれこれ試して、サイトのトータルなデザインの統一を目指してください。

書き換える時は元のコードは必ずコピーしておきましょう。もし変更後に表示がおかしくなったら、元に戻してもう一度やり直すのが一番確実です。（コードは「；」や「＜」が一つ無くなっても崩れます）

もうひと頑張りという方は以下も頑張ってみてください
↓↓↓↓↓↓↓
■WordPressの無料テーマルクセリタス（Luxeritas）の「見出し」デザインをカスタマイズ、フロントページとサイドバーの見出し

りんごからのお知らせ

こんにちは、Ringoです。岡山県真庭市というところで、非常勤のデザイン講師をしながら、ブログやメルマガを利用したネットビジネスをご紹介しています。

このブログと連携して「ゆとりのシニアライフを実現させる」をテーマにメルマガを配信、シニア＆初心者向けにネットビジネスの魅力と取り組み方をお伝えしています。噛み砕いた解説がわかりやすいと好評です（^^）
経済的にも心にも「ゆとり」をもたらす収入をゲットしませんか！
ブログを作ったけどアクセスが無い！、アフィリエイトの成果が出ない！
そんなあなたは必見ですよ
SNSやネット活用の実践講座を交えた実りいっぱいの無料メルマガです。

お申し込みはこちらのボタンをクリック、是非この機会に(^o^)ﾉﾞ
↓↓↓↓↓↓↓↓↓↓ ＊詳細ページが表示されます、すぐにメルマガ申し込みはされません

よろしければ、この記事やブログに関する　感想・聞いてみたいこと・要望などなどお聞かせください。内容と関係ない雑談も大歓迎です（^^）
↓↓↓↓↓↓↓お気軽にo(^-^)o♪
yoko_takano@appli.redまたは お問合せ

LuxeritasLuxeritas,Wordpress,みだし

Posted by りんご

Googleアドセンス（AdSense ）の広告掲載：手動設定の方法（まずはサイドバーと記事下）を[初心者向け]に解説

Wordpressの無料テーマルクセリタス（Luxeritas）のCTA、記事下にリボン付きのお知らせを追加

コメント一覧

キシより:
2020年6月27日 1:38 AM
.postをつけてなくて、ずっとグレーのままで困っていました。
本当にありがとうございました！
返信
- りんごより:
  2020年6月27日 1:58 AM
  コメントありがとうございます、りんごです。
  それはよかったです（^^）
  是非、素敵にカスタマイズしてください。
  返信

コメントをどうぞコメントをキャンセル

この記事のトラックバックURL

プロフィール

訪問いただきありがとうございます。
運営者のりんごです。岡山県真庭市在住、【夢を追いかけ夢を叶える】をテーマにシニアライフをばく進中。旦那さんとミニ四駆のお店を運営＆非常勤のデザイン講師のかたわらネットビジネスを副業として収入を得ています。主な活動は、アフィリエイト・コンテンツ販売・各種添削・自動収益システム構築をサポートするコミュニティ運営です（^^）

このブログは、ネットビジネスの始め方を噛み砕いて解説、内容を実践できるメルマガを配信。パソコンインストラクターや、コールセンターでのサポート経験を活かし、初心者のスキルやシニアのスピードに合わせたサポートを心がけています。

年金受給率におびえない、想定外の災害にもあわてない、そんなゆとりあるシニアライフを目指すあなたを応援します。子育てを卒業！自分のために時間とお金を使える!!でも「夢見るシニアじゃいられない（現実は厳しい）」と感じているあなたに伝えたい情報です。

「ブログやアフィリエイトって、聞いたことあるけど若者（わかもの）や強者（つわもの）しか手を出してはいけない気がして」と思っていませんか？
「頑張ってみたけど、若い人の勢いについていけず挫折し諦めた」そんな経験がありますか？
それでも大丈夫！ちょっと勇気を出して扉をあけてみてください。お手伝いできれば嬉しいです。

➡︎詳しいプロフィール

「ゆとりのシニアライフ」を覗いてみたいあなた
↓↓↓メルマガ登録がおすすめです

メルマガをがっつりサポート

■メルマガアフィリエイトの手引き
はじめてメルマガアフィリエイトに取り組むための作業マニュアルとサポートです。
＊誰でもできるを目指して(*^o^*)/
＊必要な情報を凝縮（^^）
詳細はこちら↓↓↓↓↓↓↓（画像をクリック）

紹介動画♪↓↓↓↓↓↓↓

■メルマガを始めたいあなたのためのメルマガ

▶︎メルマガを始める人用

■メルマガ構築に必須のメルマガシステム

▶︎MyASPの契約と初期設定をサポート

りんごの一歩づつサポート

「ブログ＆メルマガを利用したネットビジネス」に取り組む【ディスカバリーアカデミー】をりんごのサポート付きで提供します

■ディスカバリーアカデミー
アフィリエイトを学び、稼ぎ続けるための学校

「ブログ」や「メルマガ」を利用した「アフィリエイト」で稼ぐためのマインド、ノウハウ、実際の作業がギュッと詰まっています。
初心者が「安心して取り組める」カリキュラム。アフィリエイトの仕組みが学べて作れます。りんごも学びました！