当サイトのお気に入り登録・ブックマークを忘れずに!

SANGOテーマ「PORIPU」のカスタマイズ

SANGOのテーマ「PORIPU」(上位版「tears」)は本当によく考えて作られたテーマです。

AMP対応できていない点は大いに不満ですが、それを差し引いたとしてもやはり、SANGOテーマはとてもいいと思います。

SANGOテーマのカスタマイズまとめとしてこのページを作りました。

SANGOのデモページ・特徴・価格

まずは主な特徴をザッと見てみましょう。

デモページ

特徴についての説明

2018年11月現在、このような価格です。

親テーマ「SANGO」… 10,800円

子テーマ「PORIPU」の上位版「tears」… 4,980円

テーマ購入ページ(※インストール時の注意点もこの中に書かれています。)

購入後のマイページ(ログイン後、管理画面が開きます。)

「購入した商品」をクリックすると、再ダウンロードが可能です。

テーマのアップロードと有効化

最初に親テーマのzipフォルダ(sango-theme.1.7.8.zip)を、WordPressサイトの管理画面「テーマ」からアップロードします。

続いて、小テーマのフォルダ(子テーマ.zip)を、WordPressサイトの管理画面「テーマ」からアップロードします。

子テーマ「tears」を有効化します。

今まで使っていたテーマのheader.phpに書き加えているコード(Analytics関連など)があれば、そのコードをコピーします。

上記コードをPORIPUのheader.phpに貼り付けます。

ダッシュボードの「外観」→「カスタマイズ」→「サイトの基本設定」で「Google Analyticsの設定」をクリックします。

トラッキングIDを入力し、「アクセス解析にgtag.jsを使う」にチェックを入れます。

サイトの基本設定

基本設定については[SANGOのページ]に詳しく書かれています。

子テーマの編集についても[SANGOのページ]に詳しく書かれています。

設定については、ダッシュボードの「外観」→「カスタマイズ」から行えます。

カスタマイズの方法についてはSANGOのガイドに詳しく書かれています。

1.サイトの基本設定

1.「外観」→「カスタマイズ」の「基本設定」では、ロゴやファビコンを設定できます。

2.デフォルトのサムネイル画像を登録します。

3.「Google Analyticsの設定」では、アナリティクス管理画面で調べたIDを入力します。

4.背景画像については、適当なものをアップします。

例)

5.「パブリッシャーを登録」します。

2.色

自分好みに細かく設定できます。

3.デザイン・レイアウト設定

「記事一覧レイアウト」で、2種類のレイアウトを選べます。

私はスペースを節約したいので、すべて横長スタイルにしました。

4.SANGOオリジナル機能の管理

上記以外の設定についても管理できます。

【記事位一覧タブ切替】

私は、現在設定をしていません。

【モバイルフッター固定メニュー】

私は、現在設定をしていません。

【ヘッダーお知らせ欄】

「SANGOのオリジナル機能の管理」→「ヘッダーお知らせ欄」から設定できます。

重要なお知らせを書き込んだり、URLを入力することでテキストリンクにすることもできます。

デフォルトではグラデーションがかかります。

【フォローボックス】

「フォローボックスを表示する」にチェックを入れ、「画像上にのせるテキスト」と「Twitterのユーザー名」などを入力します。

記事下にこのように表示されるようになります。これは、かなりおしゃれですね。

ただし、アドセンスを記事下に持ってくるような場合には、フォローボックスはない方がいいかもしれません。

【関連記事】

私の場合、Googleアドセンスの関連記事型広告を掲載しているので、「記事下に関連記事を表示しない」にしました。

【おすすめ記事(記事下)】

記事上と同様、記事下にもおすすめ記事を4つまで表示させることができます。

【CTA】

記事下に配置し、特定のページへ誘導したい場合に役立ちます。

【トップへ戻るボタン】

つけておくと便利です。

【シェアボタンの設定】

私は、次のような設定にしました。

すると、記事タイトル下の画像にこのように表示されました。

 

シェアボタンからのツイートに表示するアカウント名も加えておいても良いかもしれません。

5.ヘッダーアイキャッチ

誘導したいページが特にないので、私の場合はこの機能を使いません。

6.詳細設定

私は絵文字を使わないので、絵文字用のJSを読み込まない設定にしました。

「何日前の記事までNEWマークをつけるか」のところですは、私は14日前までNewマークを付けたいので「14」と入力しました。

吹き出しショートコードのデフォルト設定も行いました。

このように表示されます。

7. h3などの見出しのCSSを変更する方法

SANGOではデフォルトでも簡易な見出しデザインができます。

自分好みのデザインを行いたい場合、「SANGO」のテーマに手を加えることになります。

ただしテーマの更新が行われる際には上書きされてしまうので注意が必要です。

h3に関しては、SANGOの親テーマで「.entry-content h3」で記述されているので、これを一旦無効にします。

700行目あたりにあります。

その上で、子テーマのCSSにデザインの記述を行います。

プラグインの「カスタムCSS」に記述してもOKです。

8. SANGOのクックタグを活用

プラグイン「AddQuicktag」を活用し、SANGO専用のショートコードを使うことができます。

記事執筆の効率化に欠かせないので、ぜひ活用しましょう。

SANGOでプラグイン「AddQuicktag」を導入する方法は?

SANGOサポーター

プラグインを有効化した後、「設定」→「SANGOサポーター」から各種設定を行います。


関連記事

ここでは、ブログの仕事についてまとめています。 ブログによる仕事については、誰かから依頼を受けて記事を作成するWEBライターと呼ばれる人たちもいます。 ここでは、自らのブログ記事によって収益を上げる方法についてまとめています。 […]