*記事内に広告が含まれています。

WordPressの無料テーマルクセリタス (Luxeritas)の「見出し」デザインをカスタマイズ、フロントページとサイドバーの見出し

2019年9月13日

WordPressの無料テーマルクセリタス (Luxeritas)で見出しのデザインをカスタマイズする方法をご紹介します。この記事ではフロントページ(Topページ)の見出しと、サイドバーの見出しについて変更方法をご紹介しています。

 ルクセリタス (Luxeritas)は初心者におすすめの無料テーマです。デザイン変更も簡単で、専用のカスタマイズ(外観)設定を使用することで、難しいHTMLやCSSコードを触ることなく、設定できるのが魅力です。ただ、見出し設定は「CSSコード」の編集が必要になります。そのため見出しをかっこよくしたいけど、ちょっと難しいから諦めている、そんな方に、コードのコピペでできる方法をご案内します。

なお、投稿記事内の見出しカスタマイズについては、以下の記事を参照ください。
↓↓↓↓↓↓↓
WordPressの無料テーマルクセリタス (Luxeritas)の「見出し」デザインをカスタマイズ、投稿記事の見出し

 

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

まず、どんな見出しにするのかを決めましょう。いろいろなサイトを巡って、参考にするイメージを固めます。そして、サンプルサイトでなるべくそれに近いサンプルを探し、あとはコピペです(^^)
 今回は、記事投稿内の見出しを合わせたデザインにします。

 

ルクセリタス (Luxeritas)既存の見出し

まず、ルクセリタス をインストールしたばかりの見出し表示はこんな感じです。シンプルですが、インパクトがなく寂しいですね。アクセントがないので見出しかどうかがわかりづらいです。

フロントページの見出し

キャプチャー、既存のフロントページ見出し

 

サイドバー見出し

キャプチャー、既存のサイドバー見出し

 

WordPressでの設定(ルクセリタス の場合)

では、早速変更設定です。

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

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

ルクセリタス 、子テーマ編集

 

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

cssの画面が表示されます。

もともと、入力されているオレンジ色の文字の後ろに、CSSコードを貼り付けます。既にコードが記載されている場合は、一番下に挿入します。
キャプチャー、子テーマ

 

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

 

 

フロントページの見出し変更

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

キャプチャー、コードの説明記載

 

コードを貼り付けます(ピンクの枠のコードをコピぺしてください)
*内容を変更する場合は以下を参考に必要部分を変更してください
①設定する箇所の記載です、フロントページの見出しの記載です(テーマにより異なる可能性があります)
②左側に表示させるボーダーの設定、(太さ、形状、色)
③文字と左ボーダーとの間隔
④文字と下線との間隔(ゼロ以外だと左ボーダーと下線の間に隙間ができます)

キャプチャー、コード貼り付け

 

■フロントページの見出し設定

.entry-title, #front-page-title{
border-left:8px solid #ef9c99;
padding-left:20px;
margin-bottom:0;
}

 

入力が完了したら画面上部の[保存]をクリックします。

キャプチャー、cssの保存

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

 

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

これで設定は完了です。

 

 

結果を確認します。
インパクトが出て、見やすくなりました(^^)

キャプチャー、変更結果の表示

 

 

サイドバーの見出し変更

上記と同様の操作をし、子テーマのスタイルシートを表示させます。
基本一番下にコードを貼り付けます(ピンクの枠のコードをコピぺしてください)
*内容を変更する場合は上記のフロントページの説明を参考に必要部分を変更してください

キャプチャー、サイドバーの見出しCSS

 

■サイドバーの見出し設定

/* サイドバーの見出し設定*/
body #side h3{
border-left:8px solid #ef9c99;
border-bottom:1px dotted #999;
padding-left:12px;
margin-bottom:30px;
}

 

入力が完了したら画面上部の[保存]をクリックします。

キャプチャー、cssの保存

 

結果を確認します、満足です(^^)
キャプチャー、変更結果

 

どうですか?かなりオシャレ感が違いますね。是非頑張ってカスタマイズしてみてください。

 

記事内の見出し設定については以下の記事を参照ください。
*左ボーダーの色変更についても紹介しています
↓↓↓↓↓↓↓
WordPressの無料テーマルクセリタス (Luxeritas)の「見出し」デザインをカスタマイズ、投稿記事の見出し

 

りんごからのお知らせ

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

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

お申し込みはこちらのボタンをクリック、是非この機会に(^o^)ノ゙
↓↓↓↓↓↓↓↓↓↓ バナー、りんごメルマガ登録用 *詳細ページが表示されます、すぐにメルマガ申し込みはされません

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

お願い記事内の不具合や間違い等をお知らせください。 (キャプチャーの違い、古くなった情報、誤字脱字等些細なことでもかまいません)
↓↓↓↓↓↓↓↓
バナー、不具合問い合わせフォーム *お知らせいただいた方にはりんごからささやかなお礼を送らせていただきます。