Luxeritas・見出しのデザイン変更

WordPress

Luxeritas(ルクセリタス)は多機能であるにも関わらず高速で動作する、無料のWordPressテーマです。

非常に多くの設定項目があるのですが、残念ながら見出しの設定項目がありません。

見出しのデザイン変更は、子テーマのスタイルシート(style.css)にコードを書いて変更します。

見出しのコードを編集

スタイルシートにコードを書いて変更するといっても、難しいことはありません。

見出しのデザインのコードを公開してくれているので、そのコードを少し変更するだけで見出しのデザインを変えることができます。

見出しのデザインは下記サイトにいろいろあるので、好みのデザインを見つけてください。

コードの変更箇所

紹介したサイトのコードをLuxeritasの見出しで使用するには、少し変更する必要があります。

以下の左のコードをLuxeritasの「投稿・固定ぺージ(H2)の見出し」にしたい場合は、コードの「h1」を「.post h2」にします。

h1 {
border-bottom: solid 3px #cce4ff;
position: relative;
}
h1:after {
position: absolute;
content: " “;
display: block;
border-bottom: solid 3px #5472cd;
bottom: -3px;
width: 20%;
}
.post h2 {
border-bottom: solid 3px #cce4ff;
position: relative;
}
.post h2:after {
position: absolute;
content: " “;
display: block;
border-bottom: solid 3px #5472cd;
bottom: -3px;
width: 20%;
}

CSSの基本書式

CSSの基本的な書式は、「セレクタ {プロパティ:;}」となります。

「.post h2 {border-left: transparent;}」では、「.post h2」がセレクタ、「border-left」がプロパティ、「transparent」がになります。

CSSセレクタ

変更したい箇所の見出しのCSSセレクタは以下になります。

それぞれ変更してください。

見出しCSSセレクタ
投稿・固定ぺージ(H2).post h2
投稿・固定ぺージ(H3).post h3
投稿・固定ぺージ(H4).post h4
投稿・固定ぺージ(H5).post h5
投稿・固定ぺージ(H6).post h6
記事タイトル・記事一覧.entry-title
サイドバー(H3)#side h3
サイドバー(H4)#side h4
スクロール追従サイドバー#side #side-scroll h4
フッター#foot-in h4

スタイルシートに貼り付け

変更しコピーしたコードをスタイルシートに貼り付けます。

「ダッシュボード」→「Luxeritas」→「子テーマの編集」にある「スタイルシート」に貼り付けます。(元から書かれているコメント部分は削除せずに貼り付けてください)

貼り付けたら、「保存」ボタンをクリックして保存します。

「保存」ボタンをクリックするとブラウザによって、以下のようなプロパティが表示されますが、構わず「このページを離れる」や「移動」ボタンをクリックしてください。

「保存」した後に見出しが正しく表示されているか、確認してください。

色を変更

コードの中の「#xxxxxx(6桁の数字)」や「black」が、カラーコードになります。

カラーコードを変更すれば、見出しの色が変わります。

下記サイトを参考に好みの色にしてください。

デフォルトの左の線を削除

Luxeritasのデフォルト(初期設定)の見出しは以下のデザインです。

見出しのデザインを変更しても、デフォルトの左の線が残ってしまう場合があります。

左の線を削除したいときは、以下のコードをスタイルシートに貼り付けてください。(必要な箇所だけ)

/* 投稿・固定ぺージ(h2,h3,h4)の見出し */
.post h2,.post h3,.post h4 {
    border-left: transparent; /* 左の線を削除 */
}

/* フッターの見出し */
#foot-in h4{
    border-left: transparent; /* 左の線を削除 */
}

※「記事タイトル・記事一覧」と「サイドバー」の見出しに左の線はありません。

スペースを削除

左の線を削除しても見出しのデザインによっては、スペース(空白)ができる場合があります。

左の線とスぺースを削除する場合は、以下のコードを貼り付けてください。

/* 投稿・固定ぺージ(h2,h3,h4)の見出し */
.post h2,.post h3,.post h4 {
    border-left: transparent; /* 左の線を削除 */
    padding: 0; /* スペースを削除 */
}

/* フッターの見出し */
#foot-in h4{
    border-left: transparent; /* 左の線を削除 */
    padding: 0; /* スペースを削除 */
}

WordPress

Posted by aurora3