アフィリエイトを真剣にビジネスとして学びたい大人のためのアフィリエイト情報サイト
menu
アフィリエイトで自宅に居ながら給料を超える方法
WordPressテーマ「CUBEY (tcd023)」

WordPressでCSS外部ファイルを作成するプラグイン | Simple Custom CSS


渡邊大輔
著者:渡邊大輔
ウェブデザイナー/アフィリエイター
WordPressテーマを変更したら書式が消えた

WordPressは「テーマ」と呼ばれるテンプレートを変更するだけで、簡単にサイトのデザインを変更することができます。しかしテーマを変更するさいにCSSの扱いに気をつけなければ、それまで作成したCSSが反映されなくなってしまいます。そのようなトラブルを回避するためのプラグイン「Simple Custom CSS」を紹介します。

←渡邊はいま何位?


【目次】
  1. WordPressでオリジナルデザインのサイトを作る!
  2. テーマを変更したら作成したCSSが反映されない!?
  3. 「Simple Custom CSS」でCSSファイルを外部ファイル化
  4. 「Simple Custom CSS」インストール方法
  5. 「Simple Custom CSS」で403ERRORが表示された時の対象法
  6. 記事のまとめ

WordPressでオリジナルデザインのサイトを作る!

WordPressは、アメブロやFC2などの無料ブログサービスと同様に、複数用意されているテーマ(デザインテンプレート)からブログのデザインを選ぶことができます。またWordPressでは、個性的でおしゃれなテーマが販売されているので、発信する情報の内容やWordPressをブログとしての機能をメインに使うのか、それともホームページのように固定された情報をメインコンテンツにするのかなど、目的に沿ったテーマを購入することでブランド力が高いサイトを作ることができます。

さらにWordPressに付属しているテーマや、購入したテーマは、CSS【Cascading Style Sheets】を変更したり書き加えることで、自分だけのオリジナルデザインのテーマへカスタマイズすることができます。伝えるメッセージに応じてデザインを変えることで、メッセージの説得力が増し、読む人へ強い印象を与えることができるでしょう。

CSSとは?

ところでCSSってなに?という方のために簡単にCSSについて説明します。CSSとは【Cascading Style Sheets】の略で、サイトを画面へ表示するさいの書式を決めているプログラム言語です。一般的に「スタイルシート」と呼ばれています。

ブログやホームページは、「見出し」や「段落」や「画像」といったサイトの構成をつかさどるパーツであることをブラウザへ伝える「HTML」と、それらパーツを画面へ表示するさいの「位置」や「大きさ」、「色」などの書式を伝える「CSS」によって作られています。WordPressもCSSを編集することで、画面に表示される文字の大きさや色、表示位置、背景色などを変えることができます。

WordPressでCSSを修正・追加する方法

WordPressのCSSを変える方法は、「ダッシュボード」>「外観」>「テーマの編集」の順番に画面を進めると、HTMLとCSSの編集画面が表示されます。画面右側に編集できるファイルの一覧が表示されるので、その中から編集するCSSファイルを選び編集します。基本的な書式は「style.css」を編集します。

またレスポンシブデザインを採用しているテーマによっては、パソコン画面へ表示する書式は「style_pc.css」。スマートフォンサイトの書式は「style_sp.css」といったように、パソコン表示用のCSSファイルと、スマートフォン表示用のCSSファイルが分かれている場合があります。

テーマを変更したら作成したCSSが反映されない!?

WordPressでデザイン性に富んだテーマを使用していても、「文字の大きさを変えたい」とか「行間を詰めたい」など、多少デザインを変更したい部分が出てきます。またテーマにはないデザインを追加する場合、新たにCSSを書き加える必要があります。このような場合は「テーマの編集」にて、CSSを追加したり修正すればいいのですが、この方法では二つの問題が生じます。

1.使っているテーマにしか書式が反映されない

「テーマの編集」画面で編集したCSSファイルは、テーマの構造をつかさどるファイルが保存されているフォルダへ一緒に保存されています。したがって編集したCSSファイルはそのテーマだけに適用されるので、別のテーマへ変えると、それまでに編集したり書き加えたCSSの情報は引き継がれません。

テーマを変更すると、そのテーマのCSSファイルが新たに適用され、変更前に作成したCSSは反映されないので注意が必要です。

2.テーマのアップデートでCSSファイルが上書きされる

WordPressのテーマは、バグの修正や機能追加によりアップデートされることがあります。テーマのバージョン情報は、CSSファイル内に記録されているので、テーマがアップデートされるたびにCSSファイルも書き換えられます。このさいCSSファイルは同じファイル名で上書き保存されます。したがって変更したり書き加えたCSSは、テーマのアップデートに伴い全て消えてしまいます。

テーマのアップデートを行うさいには、CSSファイルの中から自ら編集した部分をコピーして、新たなテーマのCSSファイルへ貼り付けることで、それまでの書式が引き続き反映されます。

この様に扱いが面倒なCSSですが、CSSファイルをテーマとは別に外部ファイルとして管理することで、テーマを変更したりアップデートしても継続してCSSを適用させることができます。

そのようなCSSファイルをテーマとは別に管理できるプラグインが「Simple Custom CSS」です。

「Simple Custom CSS」でCSSファイルを外部ファイル化

WordPressの書式をつかさどるCSSファイルは、テーマ本体に保存されているので、テーマを変更したりアップデートするとCSSファイルも一緒に変更・更新されてしまいます。そこでテーマとは別にCSSファイルを管理すれば、たとえテーマを変更しても作成したCSSが消えることはないよね。という発想を実現したプラグインが「Simple Custom CSS」です。

「Simple Custom CSS」は、テーマとは別にCSSを保存・管理しているので、テーマを変更しても消えたり上書きされることはありません。CSSを外部ファイル化すると、

  1. 1.テーマを変更・アップデートしても作成したCSSが消えない。
  2. 2.複数の記事や固定ページへ書式を反映させることができる。

このようなメリットがあります。

1.テーマを変更・アップデートしても作成したCSSが消えない

これまで説明してきた通り、テーマを変更するとそれまでのCSSファイルが適用されなくなったり、またアップデートするとCSSファイルが上書き保存されるので、作成したCSSが消えてしまいます。それに対して、テーマとは別に管理することで、例えテーマを変えたりアップデートしても、作成したCSSが消えることはありません。

2.CSSを複数の個別記事や固定ページへ反映できる

文字のサイズを大きくしたり、文字の色を変えるCSSは、外部ファイル化することで複数の個別記事や固定ページに反映させることができます。したがって外部ファイルのCSSを変更するだけで、サイト内で反映されている書式を一括変換することができます。

「Simple Custom CSS」インストール方法

「ダッシュボード」>「プラグイン」>「新規追加」>検索窓にて「Simple Custom CSS」を検索。

Simple Custom CSS

プラグインの新規追加画面を開き、画面右上の検索窓へ「Simple Custom CSS」を入力して検索します。「Simple Custom CSS」が表示されたら、「いますぐインストール」をクリックし有効化すれば完了です。

Simple Custom CSS編集画面

CSSファイルの作成・編集は、ダッシュボードメニューの「外観」に追加された「Custom CSS」をクリックすると編集画面が表示されます。

SyntaxHighlighterで編集画面が見やすい!分かりやすい!

当サイトのCSS

上のキャプチャが当サイトで実際に使っているCSSです。CSSを編集した後、「Update Custom CSS」をクリックすることでCSSファイルが更新されます。余計な機能が一切ないプラグインなのでシンプルで使いやすいです。

また「SyntaxHighlighter」によってセレクタとプロパティが色分けされるので、宣言ブロックの内容がとても分かりやすくなっています。編集時に正しい数値を入力することで、プロパティが色表示されます。したがって入力ミスがあると、プロパティは黒文字のままとなり間違いに気が付きやすくなっています。これに対してテーマのCSSの編集画面は、SyntaxHighlighterの機能はありません。

自分でCSSを編集するのであれば必須なプラグイン

CSSを編集するには、CSSの知識が必要なので誰でも簡単に編集作業が行えるわけではありませんが、ご自身でCSSを作成するのであれば「Simple Custom CSS」の使用をお勧めします。

これまで説明したようにテーマを変更することで「作成したCSSが反映されないトラブル」を防いだり、テーマをアップデートすることで「CSSが上書きされて作成したCSSが消えてしまうトラブル」を防ぐことができます。

またテーマのCSSには、サイトのレイアウトをつかさどる重要な宣言ブロックが含まれています。万が一、誤ってサイトデザインの構造に関わる重要な宣言ブロックを削除してしまうと、デザインが崩壊し修復がとても難しくなります。

一方、「Simple Custom CSS」を使用すると、サイトデザインに関わるCSSに触ることがないので、たとえ編集ミスがあったとしても、サイトデザインが崩壊するような重大なトラブルを起こしません。そのためCSSの編集に慣れていない初心者は、「Simple Custom CSS」を使ってCSSの作成を行えば、安心して安全に編集作業を行うことができます。

「Simple Custom CSS」で403ERRORが表示された時の対象法

Simple Custom CSSで403ERRORが出た時の対象法

ロリポップレンタルサーバーを利用しているユーザーが、「Simple Custom CSS」をインストールし、CSSを編集後に保存しようと「Update Custom CSS」をクリックすると、上のスクリーンショットのような403ERRORが表示されます。

403ERRORが表示される原因は、ロリポップレンタルサーバーのWAF【ウェブアプリケーションファイアウォール】と呼ばれる外部からの不正なアクセスを防ぐファイアウォールが、プラグインによるデータの送信を阻むことが原因です。

403ERRORが表示されたら、以下の方法でファイアウォールを解除することができます。

ロリポップWAF(ウェブアプリケーションファイアウォール)解除方法

ロリポップWAFウェブアプリケーションファイアウォール解除方法

まずロリポップレンタルサーバーのトップページから「ユーザー専用ページ」へログインします。

左側に表示されるメニュー一覧の「WEBツール」にマウスポインタを乗せると、ポップアップメニューが表示されるので一番下の項目「WAF設定」をクリックします。

WAF設定

するとWAFの設定を管理する画面が開くので、該当するドメインを確認後、設定変更の「無効にする」をクリックします。すると「設定状態」が無効へ変わりファイアフォールが解除されます。

以上の手順で403ERRORの問題は解決します。

せっかくCSSを作成したにも関わらず、403ERRORによってCSSが更新されずに消えてしまってはショックが大きいので、「Simple Custom CSS」を有効化したら、まず最初に「Update Custom CSS」をクリックしてCSSファイルが更新されるか確認することをお勧めします。

記事のまとめ

  1. WordPressはCSSを修正・追加することでオリジナルデザインへ変えることができる。
  2. テーマのCSSファイルを変更するとテーマを変えたさいに変更内容を引き継げない。
  3. テーマをアップデートするとCSSファイルが上書きされて変更した内容が消えてしまう。
  4. 「Simple Custom CSS」を使うことでCSSファイルを外部ファイル化できる。
  5. ロリポップで403ERRORが表示されたらサーバーのWAFを無効にする。
一人でネット起業して一億稼いだ成功事例
自由な人生を手に入れる教科書
Amazon電子書籍ランキング
1位獲得!
おすすめ度

AmazonのKindle本ベストセラーランキング全30万タイトル中で1位を獲得!アフィリエイトで1億円以上の報酬を手にして、30歳でセミリタイヤした元時給700円の皿洗いが伝える、自由な人生を手に入れた方法。

通常価格1,000円が期間限定で、今なら無料でダウンロード頂けます。さらにセミナー映像をダウンロード特典として無料でプレゼント!お早めに!

  • このエントリーをはてなブックマークに追加

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

算数の計算を解くと投稿できます 【漢数字が出てきます】 *

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

私が使って役立った教材

アフィリエイト教材

アンリミテッドアフィリエイトNEO

アンリミテッドアフィリエイトNEO
圧倒的な情報量と分かりやすい解説でアフィリエイトの稼ぎ方を学べた!

たった一人で1億2,000万円ものアフィリエイト報酬を手にしたアフィリエイターを生み出した業界No.1アフィリエイト教材。新たに開発された手法やノウハウはすぐにテキストへ追加され、最新版のテキストはメンバーページからいつでも無料でダウンロード可能!多くの成功者が学んだ、効果的なアフィリエイト手法満載のテキスト。

販売手法・購入心理

扇動マーケティング

扇動マーケティング
コピーライティング以上の人心誘導術その効果、まさに悪用厳禁レベル!

コピーライティングでは商品は売れませんよね?実は売れているアフィリエイターは、コピーライティングとは全く別のテクニックを使って商品を売っているそうです。「あなたから買えてうれしい。」とまで言わせるその危険な売り方を、アフィリエイトで1億円以上稼いだトップアフィリエイターが動画で解説しています。

アフィリエイト教材

ディスカバリーアカデミー

ディスカバリーアカデミー
一週間毎に課題を進める動画教材。丁寧な動画解説が分かりやすい。

アンリミテッドアフィリエイト同様に、アフィリエイトで収益を上げるための、インターネットを活用した稼ぎの構造作りを学ぶための教材。アンリミテッドアフィリエイトがPFD教材に対して、ディスカバリーアカデミーは解説動画で学ぶ教材になっています。自宅のパソコンでじっくり学びたい方に適したアフィリエイト教材です。

無料レポート

会社に雇われず豊かに暮らす

自由な人生を手に入れる教科書
Amazon電子書籍ランキング1位!アフィリエイトの成功事例

AmazonのKindle本ベストセラーランキング全30万タイトル中で1位を獲得!アフィリエイトで1億円以上稼いで、30歳でセミリタイヤした元時給700円の皿洗いが、自由な人生を手に入れたプロセスを紹介しています。

通常価格1,000円が期間限定で、今なら無料でダウンロードできます。さらにセミナー映像も無料で付いてくるのでお早めに!

アフィリエイトコンサル

無料メールマガジン


無料メールマガジン
私が実践しているアフィリエイトノウハウ全20項目を、20日間毎日お伝えします。

※いつでも配信停止することができます。
※ご登録頂いたアドレスが他へ渡ることはありません。

Tweet

会社に雇われず起業した人の成功事例
自由な人生を手に入れる教科書
Amazon電子書籍ランキング1位獲得!

AmazonのKindle本ベストセラーランキング全30万タイトル中で1位を獲得!アフィリエイトで1億円以上の報酬を手にして、30歳でセミリタイヤした元時給700円の皿洗いが伝える、自由な人生を手に入れた方法。

通常価格1,000円が期間限定で、今なら無料でダウンロード頂けます。さらにセミナー映像をダウンロード特典として無料でプレゼント!お早めに!