2020年11月9日 / Last updated : 2020年11月9日くまはちLAB LightningWordPressスタイルシートビジネスサイト向け無料テーマ

Lightning スタイルシートでカスタマイズする

この記事のURLとタイトルをコピーする

この記事を読むのに必要な時間は約 12 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)

どのテーマでも同じですが、テーマで設定されたCSS(カスケードスタイルシート)をそのまま使うと同じテーマを使っているサイトと同じであり、独自性に欠けるものとなってしまいますね。
今回は、Lightningのスタイルシートをどうカスタマイズできるのか？
やり方などを含め解説してみたいと思います。
WordPressの場合は、こういう部分が自由にカスタマイズできるというのがいいところの１つです。

目　次

スタイルシートの編集場所
見出しなどのデザインのおすすめ
- スタイルシートの書き方
記事タイトルのスタイルシートを変更
3PRブロックのタイトルや色をカスタマイズする
ウィジェットの見出しスタイルを変更する
サイドバーの見出しスタイルを変更する
記事のヘッダーカテゴリー表示部分のカスタマイズ
グローバルメニューの色の変更
まとめ

スタイルシートの編集場所

アメブロなどと違ってWordPressの場合は、テーマをカスタマイズすることで変更が可能です。
アメブロも変更は可能ですが、場所によってパソコンだけとかモバイルに反映しないなどのデメリットもあります。
このLightningでは、レスポンシブデザインなのでパソコンだけでなくタブレットやスマホでも同じデザインとして反映させることが可能です。
編集できるところは、3箇所ありますがそれぞれに特長があってどこが1番都合いいのか？
またその理由なども解説しておきます。

style.cssで編集する

テーマには親テーマ子テーマともにstyle.cssがあってテーマのスタイルシートが設定されています。
できるだけこのファイルに記述する方がいいでしょう。
スタイルシートを外部ファイルにしておくのは１つ１つの記事でヘッダーでスタイルシートを読み込ませると容量が大きくなる可能性があって読み込みに時間がかかることになります。
編集には直接、TerapadやSublime Textなどで編集するもしくは、[外観] → [テーマエディター]で開いて編集してもOKです。

テーマカスタマイザーでCSSを追加する

テーマカスタマイザーの中にあるCSS追記を開いて追加する方法もあります。
ここに追記すると HTMLを見るとヘッダーに追記されるのでどの記事を開くときも毎回ヘッダーに出力されることになります。

必須プラグインExUnitでCSSを追加する

Lightningには必須プラグインがあり、その１つであるExUnitの中にもスタイルシートを編集できる場所があります。この場所も HTMLではヘッダーに追記されることになります。

見出しなどのデザインのおすすめ

編集場所がわかれば参考になるデザインを設定しておくとカスタマイズするのに便利です。
下記に参考になるデザインサンプルのあるサイトを紹介しておきます。

上記で紹介したのは、知っているとコピペさえできれば初心者の方でもカスタマイズ可能だからです。
あとは、書き方とカスタマイズ方法がわかれば完璧ですが・・・

スタイルシートの書き方

単に書き方と言ってもいろいろな方法があります。
今回は、すべて書くことができないのでこの記事で使う部分だけ簡単に書いておきます。

上記の赤枠の部分の書き方について書きますね。

記事のヘッダーに通常は、青の背景で白抜き文字でカテゴリーが通常は、表示される部分の背景を変更します。
まず、書き方としては HTMLの中に(class=””)で指定されている部分、ファイルの中で選択されている部分です。

/* CSS書き方 */

/* Header TITLE Picture */
.page-header { background-color:#ffffff; color:#f745e8; background: url('image/page_title.jpg') top right no-repeat;}

/* CSS書き方 */

/* Header TITLE Picture */

.page-header { background-color:#ffffff; color:#f745e8; background: url('image/page_title.jpg') top right no-repeat;}

1行目の(/* Header TITLE Picture */)これは、コメントアウトなので反映されませんが、後で見た時にわかりやすくするためです。
すべて覚えておくことは不可能なのでコメントアウトするクセをつけるといいでしょう。

(.page-header)は、class指定された部分を指定しているのです。
class=”a” とあれば .a と表記します。
今回の事例では HTML内に複数のclass指定があるので気をつけて選択する必要があります。
(.page-header)の前にタグが付くこともあります。
この場合だと(div.page-header)という感じになります。
以下の項目でも似たような書き方のサンプルが出てくるので知っておくと便利です。
{} の中は、デザインサンプルからのコピペが多いですね。

記事タイトルのスタイルシートを変更

記事タイトルを装飾します。

/* 記事タイトルのスタイルシートを変更 */
h1.entry-title {border-bottom: double 5px #191970;font-size:20pt;font-weight:bold;}

1 2	/* 記事タイトルのスタイルシートを変更 */ h1.entry-title {border-bottom: double 5px #191970;font-size:20pt;font-weight:bold;}

3PRブロックのタイトルや色をカスタマイズする

Lightningは、ウィジェットを利用するとトップページに3PRブロックを作成することができます。
そのタイトルのデザインを変更する方法についてサンプルコードを表示します。

/* 3PRブロックのタイトルや色をカスタマイズする */
h1.prBlock_title {position: relative; padding-left: 25px; font-weight: bold;}
h1.prBlock_title:before {position: absolute; content: ''; bottom: -3px; left: 0; width: 0; height: 0; border: none; border-left: solid 15px transparent; border-bottom: solid 15px #191970; font-weight: bold;}
h1.prBlock_title:after {position: absolute; content: ''; bottom: -3px; left: 10px; width: 100%; border-bottom: solid 3px #191970; font-weight: bold;}

/* 3PRブロックのタイトルや色をカスタマイズする */

h1.prBlock_title {position: relative; padding-left: 25px; font-weight: bold;}

h1.prBlock_title:before {position: absolute; content: ''; bottom: -3px; left: 0; width: 0; height: 0; border: none; border-left: solid 15px transparent; border-bottom: solid 15px #191970; font-weight: bold;}

h1.prBlock_title:after {position: absolute; content: ''; bottom: -3px; left: 10px; width: 100%; border-bottom: solid 3px #191970; font-weight: bold;}

ウィジェットの見出しスタイルを変更する

見出し部分をカスタマイズします。

/* ウィジェットの見出しスタイルを変更する */
h2.mainSection-title { clear:both; display:block; position:relative; margin:50px 0 22px; padding:.5em 18px .5em; width:auto; min-width:115px; color:#fff; text-align:left; font-size:20px; font-weight:700; background:#191970; z-index:0; border-bottom:0; }
h2.mainSection-title:after { content:""; position:absolute; bottom:-10px; left:30px; margin-left:-10px; display:block; width:0px; height:0px; border-style:solid; border-width:10px 10px 0 10px; border-color:#191970 transparent transparent transparent; }

/* ウィジェットの見出しスタイルを変更する */

h2.mainSection-title { clear:both; display:block; position:relative; margin:50px 0 22px; padding:.5em 18px .5em; width:auto; min-width:115px; color:#fff; text-align:left; font-size:20px; font-weight:700; background:#191970; z-index:0; border-bottom:0; }

h2.mainSection-title:after { content:""; position:absolute; bottom:-10px; left:30px; margin-left:-10px; display:block; width:0px; height:0px; border-style:solid; border-width:10px 10px 0 10px; border-color:#191970 transparent transparent transparent; }

サイドバーの見出しスタイルを変更する

サイドバーの見出しも変更してみました。
以下のコードを参考にしてください。

/* サイドバーの見出しスタイルを変更する */
h1.widget-title {border-left: #0000ff 8px solid; border-bottom: #0000ff 2px solid; padding: 0px 0px 1px 5px; font-size: 20pt; font-weight: bold;}

1 2	/* サイドバーの見出しスタイルを変更する */ h1.widget-title {border-left: #0000ff 8px solid; border-bottom: #0000ff 2px solid; padding: 0px 0px 1px 5px; font-size: 20pt; font-weight: bold;}

記事のヘッダーカテゴリー表示部分のカスタマイズ

赤枠の中の背景画像と文字の色を変更します。
画像のアドレス指定は、サンプルでは相対パスで書いていますが、慣れてない方はフルパスで書くことをおすすめします。

/* 記事タイトルのスタイルシートを変更 */
/* Header TITLE Picture */
.page-header { background-color:#ffffff; color:#f745e8; background: url('image/page_title.jpg') top right no-repeat;}

/* 記事タイトルのスタイルシートを変更 */

/* Header TITLE Picture */

.page-header { background-color:#ffffff; color:#f745e8; background: url('image/page_title.jpg') top right no-repeat;}

グローバルメニューの色の変更

グローバルメニューの色を変更します。
下記を参考にしてください。

/* グローバルメニューの色の変更 */
/*  グローバルメニュー  */
.gMenu_name {
    font-weight:bold !important;
    }
.navbar .gMenu {width: 100% !important; }
.navbar {backgroung-color:#191970;}

/*  グローバルナビ色の変更  */
.navbar ul.gMenu > li a {
    background: #191970;
     color: #fff;
     font-size: 11pt !important;
}
.navbar ul.gMenu > li > ul.sub-menu li a {
    background: #00008b;
         color: #fff;
     font-size: 11pt !important;
}
.navbar ul.gMenu > li a:hover{
     background: #fff;
      color: #191970;
      font-size: 11pt !important;
}
.navbar ul.gMenu > li > ul.sub-menu li a:hover {
     background: #fff;
      color: #00008b;
      font-size: 11pt !important;
}

/* グローバルメニューの色の変更 */

/* グローバルメニュー */

.gMenu_name {

font-weight:bold !important;

}

.navbar .gMenu {width: 100% !important; }

.navbar {backgroung-color:#191970;}

/* グローバルナビ色の変更 */

.navbar ul.gMenu > li a {

background: #191970;

color: #fff;

font-size: 11pt !important;

}

.navbar ul.gMenu > li > ul.sub-menu li a {

background: #00008b;

color: #fff;

font-size: 11pt !important;

}

.navbar ul.gMenu > li a:hover{

background: #fff;

color: #191970;

font-size: 11pt !important;

}

.navbar ul.gMenu > li > ul.sub-menu li a:hover {

background: #fff;

color: #00008b;

font-size: 11pt !important;

}

まとめ

６つの事例を元にサンプルコードを紹介させていただきました。
デザインだけでなく文字の色や文字の太さ・カラーリングなど
自分のサイトに合わせて変更する必要はありますが、他者との差別化や独自性を見せることが可能になります。コピペする場合には完璧にコピペしてくださいね。
中途半端にして足りないと同じように表示しないので場合によってブサイクになる場合もあります。