WordPressテーマSANGOの子テーマをPORIPUに変更したときにやったこと!

SANGO & PORIPU

このブログはWordPressで運営していますが、現在のテーマはSANGOを利用しています。

以前は、アルバトロスを使っていたのですが、昨年の11月からSANGOに変更しました。

SANGOに変更した理由は、なんといってもシンプルでとても柔らかいデザインが気に入ったことでした。

また、あまり余計なプラグインを導入しなくてもいいほど機能が充実しており、カスタマイズを簡単に行えることが魅力です。

WordPressテーマ「SANGO」の使い方やカスタマイズ方法を解説します。

SANGOに限らず、WordPressをカスタマイズして利用するときは、子テーマを使うことが重要になります。

このブログも、SANGOが用意してくれた子テーマを利用して運営していたのですが、より強力な機能を装備した子テーマPORIPUなるものがあることを知り、導入してみました。

今回は、WordPressテーマSANGOの子テーマをPORIPUに変更したときにやったことを紹介いたします。

なお、あらかじめお断りしておきますが、PORIPUに変更してもほとんどやることはありませんでした。

SANGOの子テーマをPORIPUとは

PORIPUは、SANGO公認の子テーマであり、SANGOではカバーしきれない細かなカスタマイズが最初からできあがった状態になっています。

さらに、アドセンスのインフィード広告や自動広告の設置も簡単にできるようになります。

PORIPU for SANGOとは? ”時間が足りない”ブロガーのため収益機能を強化しています PORIPU…

また、PORIPUを導入しても、ウィジェットの設定は引き継がれるので、やり直す必要はありません。

子テーマをPORIPにしても、ほとんどやることはないのですが、一部設定が引き継がれないことがあります。

たとえば、サイトのカラー関連については、引き継がれないので、PORIPを導入したらすべてやり直す必要があります。

もうひとつ、見出しのデザインも引き継がれません。

こちらもやり直しが必要です。

このブログでは、この2点を変更いたしましたので、この先で説明していきます。

PORIPUでサイトカラーと見出しのデザインを変更する方法

子テーマをPORIPに変更したら、サイトカラーと見出しのデザインを変更することが必要になります。

これは、SANGOを導入したときにもやったことですが、子テーマPORIPを導入すると、以前変更したサイトカラーと見出しのデザインがデフォルトに戻ってしまうため、あらためて設定する必要があります。

SANGOのカラー設定は、メインカラーや薄めの下地色、ヘッダー背景色、ウィジェットタイトルの背景色等、多くの色の設定する箇所がありますので、すべてを同じにするのは少し面倒でもあります。

すべての色を覚えているわけでもないので、はじめは戸惑うかもしれませんが、PORIPUを導入しても、それまで利用していたSANGOオリジナルの子テーマをWordPressから削除する必要はないので、テーマの有効化を切替えながら行うことで、対応できます。

また、見出しデザインの変更についても、テーマの有効化を切替えながら行うと、簡単にできます。

早速順やっていきましょう。

テーマの切替え

ここからは、PORIPUがすでに導入されていることを前提として進めていきます。

WordPressにログインし、外観→テーマと進みます。

WordPressにログインし、外観→テーマと進む

現在は、PORIPUが有効化されていますが、SANGOオリジナルの子テーマも共存しています(アルバトロスも残しております)。

元のカラーに戻したいが、わからなくなったら、SANGOオリジナルの子テーマを有効化すれば、元のカラー設定に戻りますので、これを利用すればPORIPUの設定も簡単に行えます。

見出しデザインの変更も同様に行えば簡単にできます。

サイトのカラー変更方法

外観→カスタマイズから、「色」を選びます。

外観→カスタマイズに進む

外観→カスタマイズから、「色」を選ぶ

ここで、各種カラーの設定を行っていきます。

色を選択すると、下の画像の画面になります。

色を選択した画面

上の画面から、変更する色(カラー)の「色を選択」をクリックすると(今回はメインカラーを選択)、下の画面になります。

色はカラーピッカーで設定するのではなく、カラーコードで指定すると間違いない

色(カラー)は、カラーピッカーで設定するのではなく、カラーコードで指定すると間違いなく行えます(上の画像の赤枠部)。

カラーコードがわからなくなったら、先に紹介したテーマの切替えで、SANGOオリジナルの子テーマを有効化して、外観→カスタマイズと進み、カラーコードを確認してください。

見出しの変更方法

SANGOの見出しはとてもシンプルです。

見出しがシンプルな理由は、自由にカスタマイズするための配慮です。

このブログではもともと、SANGOオリジナルの見出しからの変更は、h2に下線を引いただけでしたが、PORIPを導入したら、この下線もなくなり、デフォルトに戻っていました。

なお、元の見出しデザインをそのまま使いたい場合で、元のCSSを忘れてしまった場合は、テーマの切替えから、SANGOオリジナルの子テーマを有効化して、元のCSSコードを確認してください。

今回、見出しデザインは、SANGOの作者であるサルワカさんのサイトを参考にしました。

h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。

元のブログでは、h2だけを変更していましたが、h4も変更します(h3はオリジナルのままです)。

外観→テーマの編集に進みます。

外観→テーマの編集に進む

CSS(スタイルシート)追加画面

PORIPの初期設定では、下の画像の赤枠のように、h2・h3・h4ともに空欄になっています。

PORIPの初期設定では、h2・h3・h4ともに空欄になっている

この部分(上の画像の赤丸部分)に必要なCSSを記入します。

h2とh4にCSSを記入

最後に、ファイルを更新をクリックすれば完了です。

ファイルを更新をクリック

通常、ファイルを更新したあとに、サイトを表示すれば変更した見出しデザインになっているはずですが、変更が反映されていないことがあります。

この場合の対処法を次の章で説明いたします。

WordPressのCSSを変更したのに反映しない理由

WordPressのCSSを変更したのに、反映しない理由はウェブブラウザが過去の見出しデザイン情報を表示し続けている可能性があるからです。

このように、ウェブブラウザがCSSや画像を保存することは「キャッシュ」と呼ばれています。

もしも、ウェブブラウザが過去のCSSや画像を表示し続けている場合は、この「キャッシュ」を削除する必要があります。

今回は、Google Chromeでキャッシュを削除する方法を紹介いたします。

Google Chromeでキャッシュを削除する方法

Google Chromeでキャッシュを削除する方法は次の通りです。

Google Chromeからブログを開き、下の画像の赤丸の部分をクリックします。

Google Chromeからブログを開き、画像の赤丸の部分をクリック

その他のツール→閲覧履歴を消去と進みます。

その他のツール→閲覧履歴を消去と進む

閲覧データを消去する画面から、削除する対象を決めます。

今回は期間を1時間以内、キャッシュされた画像とデータのみを選択し、データを消去をクリックします。

閲覧データを消去する画面から、削除する対象を決める

改めてブログを表示すれば、CSSの変更が反映されます。

最後に

いかがでしたでしょうか。

今回は、WordPressテーマSANGOの子テーマをPORIPUに変更したときにやったことを紹介してきました。

しかし、PORIPUに備わっている機能を詳しく紹介してきたわけではありません。

実際のPORIPUの本領は、WordPressブログの収益機能を強化したところにあります。

PORIPU for SANGOとは? ”時間が足りない”ブロガーのため収益機能を強化しています PORIPU…

もしも、SANGOをお使いの方で、カスタマイズや収益化に時間をかけたくないのならば、PORIPの導入を検討してみてはいかがでしょうか。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください