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

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

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

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

 

目 次

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

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

 

style.cssで編集する

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

 

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

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

 

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

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

 

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

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

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

 

スタイルシートの書き方

単に書き方と言ってもいろいろな方法があります。
今回は、すべて書くことができないのでこの記事で使う部分だけ簡単に書いておきます。
ヘッダー背景のスタイルシート変更
上記の赤枠の部分の書き方について書きますね。

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

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

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

 

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

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

 

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

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

 

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

ウィジェットの見出し
見出し部分をカスタマイズします。

 

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

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

 

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

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

 

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

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

 

まとめ

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

 


 

チャンネル登録

 

WEBのことならくまはちLABにお任せください。

サービス 制作事例
お問い合わせ
LINEスタンプ
LINE@友だち追加

くまはちLABのご利用ありがとうございます!
くまはちLABの最新情報をフォローしてゲットしてください!