賢威8で独自CSS(スタイル)を追加する方法

賢威8は専用のスタイルが用意されていて、それを使えことでクオリティの高いサイトを構築できる。
しかしオリジナリティを出したいなら、スタイルを追加する必要があります。

そこで今回は、賢威8に独自にスタイルを追加する方法をお伝えします。

サイト全体に独自スタイルを指定する場合

サイドバーやヘッダー・フッターなど、全てのページに影響するスタイルは、次の方法で追加します。

(1) メニュー:外観 > カスタマイズ をクリックする

WordPress 外観 > カスタマイズ

(2) 追加CSSタブを開きます

WordPress 追加CSS

(3) スタイルを入力します。

WordPress 追加CSS 入力画面

(4) 公開をクリックすると、全てのページに適用されます。

公開後必ず、TOPページや記事ページを表示して、期待通りの結果になっているか確認してください。

(5) 記事をプレビューして確認する。

記事ごとに独自スタイルを指定する場合

特定の記事だけで使用するスタイルを、記事全体に適用すると、全てのページの読み込み速度が低下します。
この場合は、次の方法で記事ごとにスタイルを設定します。

(1) 画面したの『この投稿のみに表示するCSS/JS』までスクロールする。

賢威8 この投稿のみに表示するCSS/JS欄

(2) 一行目に開始に『<style>』を入力しする。

(3) 続けてスタイルを記述する。

(4) 最後に『<style>』を入力する。

<style>
.abc{color:#ff0000;}
<style>

CSSファイルを追加する場合

cssファイルは、複数のスタイル設定をまとめたファイルです。
ブラウザでキャッシュすることで、読み込み速度を速くすることができます。
ただし、ファイル内の文字数が少ない場合は、記事内にインライン展開したほうが速いケースもあります。

サイト全体に追加

サイドバーやヘッダー・フッターなど、全てのページに影響するCSSファイルは、次の方法で追加します。

(1) メニュー:賢威の設定 > 埋め込みコード設定 を表示する

賢威8 埋め込みコード設定

(2) 『</head>直前に挿入するコード記入欄』に、次のコードを入力します。

<link rel="stylesheet" href="CSSファイルのURL" type="text/css" />

(3) 変更を保存します。

記事事に指定

記事投稿ページの『この投稿のみに表示するCSS/JS』に、次のコードを入力します。

<link rel="stylesheet" href="CSSファイルのURL" type="text/css" />

まとめ

スタイルの追加には、賢威8のCSSファイルを編集する方法もあります。
しかしサーバー環境によっては上書きができないケースがあります。
またファイルを直接編集することは、サイトそのものが表示されなくなる危険を無視することができません。

そのため今回は、最も安全にスタイルを適用する方法を紹介しました。