SANGOとブログのカスタマイズメモ(2018/06/23更新)

SANGO育成計画

こんにちは、かのです。
AFFINGER4からSANGOにWordPressのテーマを変更しました。

違うテーマに変えると、それをキッカケにいろいろなことを学んだ気がします。
わたしはあまり難しいことわかってないんですが・・・。

公式のカスタマイズガイドがとってもわかりやすくって、助かりました。
あとはSANGOの人たちはいろいろおしえてしてくださる方も多くてとても勉強になります!

得た知識と、カスタマイズしたものをメモしていきたいと思います。

なお随時、更新していきます。

他にも、わかりやすくカスタマイズ情報をまとめたブログがありますので…
参考にするブログの1つになれば幸いです。

SANGOについて

サルワカのCatNoseさんが作られたテーマです。
マテリアルデザインが使われ、たいへん美しいのが特徴です。
くわしくは以下のブログをご覧ください。

SANGO アイキャッチ WordPressテーマ『SANGO』はオシャレ&わかりやすいテーマだったよ【感想・レビュー】

知っておきたい、SANGOのデザインのこと

SANGOはマテリアルデザインが使われています。
ちょっと勉強してみませんか?この機会に♪

SANGOの作者さんのサイト、サルワカにわかりやすい記事がありました。
デザインど素人のわたしも楽しく読める内容でした!

参考 マテリアルデザインとは?作り方とガイドラインまとめサルワカ

AFFINGER4からSANGOへの移行

丸一日作業して、残りは記事修正だけ

テーマ変更工事 アイキャッチ 9月27日(水)ワードプレステーマを変更工事します!【AFFINGER4→SANGO】

くわしい移行の記録は上記をご覧ください。
ただし、移行した時点で気が付かずあとから、修正した部分も多いのでご参考程度に!

時間としては丸一日かかりました。
あと、細かい修正や見落としていた部分を順次修正していきました。

SANGOカスタマイズガイドを片手に

公式のSANGOカスタマイズガイドが凄く分かりやすいです。
是非見ながらやることをオススメします。

参考 他テーマからSANGOに移行される方へSANGOカスタマイズガイド

見えない場所の修正を見逃さずに

リストの装飾のHTMLを見逃していました。
その他にも表面上は見えない部分の修正も忘れずに!

HTML
<div class="maruck"> <ul> <li>AFFINGER4の機能を使って、箇条書きを装飾してたんです。</li> <li>divタグ内はもういらない!</li> <li>消し忘れに注意!</li> </ul> </div> 

赤字の部分がいらないソースコードです。
AFFINGER4の箇条書きの装飾を使っていた人は要注意です!

普通に見ると、ちゃんと箇条書きに見えるので見落としてました…。

見た目でサムネイル画像がキレイでも再生成しよう!

2017/10/11 追記

カスタマイズガイドにも記載があることなんですが…

WordPressではテーマを移行した場合にも、新しいテーマ用のサムネイル画像が自動生成されることはありません。つまり、SANGO用の旧テーマのサイズの画像がそのまま使われています。
Regenerate Thumbnailsというプラグインを使うと、1クリックでSANGOに合ったサムネイル画像を再生成してくれます。操作は簡単ですが、詳しい使い方は下の記事をご覧くださいませ。

これを自己判断で、スルーしていました。見た目がキレイだったから!
でもサイトの表示速度等にも影響があるらしく、必ず行っておくことにしましょう。

ちなみに作業自体は自動で作業してくれますが、5時間近くかかりました…。
パソコンをつけっぱなしにできる環境で作業を始めることをオススメします。

目次のデザインがズレている

TOC+はAFFINGER4でも使っていたの設定を引き継いだままソコソコキレイだったので放置していました。
ただ、微妙にズレてるのが気になる。その原因は、設定を怠っていたから!
以下の参考ページから設定方法を参照できます。必ずやっておきましょう!

参考 目次プラグイン「TOC+」の設定方法SANGOガイドマニュアル

AFFINGER4とSANGOの違いについて

とりあえず、移行ができていざ記事を書こうと思う時に、テーマの差が気になるものだと思います。
そのあたりの話を少し挟んでみますね。

SANGOは初期の頃に比べて、機能も増えとても使いやすくなりました。
ただ、前使ってたテーマとは別物です!卒業したのです!
(いや併用してるかもしんないけど)

かの

過去を振り返らずに、SANGOに慣れていきましょ〜。

豊富なショートコードへの戸惑い

初期の頃、ショートコードによる記事作成に慣れず苦労しました。

Ver.1.3のバーションアップでプルダウンメニューが追加され、かなり満足しました。

Ver.1.3以降、多くの『スタイル』から使えるようになったのですが…
一部、公式機能ではショートコードでしか使えないものも残っています。

が・・・!

SANGOだけではエディタから使えないショートコードも『All ShortCode of SANGO 』(無料プラグイン)を追加すればエディタから使えます。

それでも無理なものは『AddQuicktag』という任意のコードを登録できるプラグインがあるのでソレを使っています。

かの

今は、記事も書きやすくなって、SANGOならではの表現の豊かさを楽しんでますね。

カスタマイズ手段のちがい

機能差も、慣れとバージョンアップのおかげでかなり気にならなくなりました。

バージョンアップに連れて、AFFINGER4にはない良さを目立たせてきたイメージでしょうか。SANGOらしい装飾に特化した機能がどんどん触れています。

むしろ!!

機能のあるなしの差よりも、元AFFINGERユーザーが気になるのは操作性ではないでしょうか。
AFFINGER4のチェックひとつ、ボタンひとつで簡単に変えられるカスタマイズ方法に慣れてる人は戸惑うかもしれません。

SANGOは、たとえばサイドバーのウィジェットに機能を挿入する場合…
カスタマイズガイドからソースをコピーペーストし、必要部分を編集するといった感じです。

こればかりは慣れなんですけど…。頻度の多いものでもないので気になりません。
カスタマイズガイドの説明がとにかくわかりやすいので安心してください。

AFFINGERの頃、チェックボックス探して迷子になっていたあの頃より楽かもしれません 笑

では、ここからカスタマイズしたメモを残していきますので活用いただけたら幸いです。

サイト全体の見直し

カテゴリとタグ分け

現在のカテゴリ分けは『SEOを考えたカテゴリー設定をしよう(SANGOカスタマイズガイド)』を参考にしています。

SANGOは基本的に、1記事1カテゴリーに対応するように作られています。
だから、これに従ってカテゴリーを整理し直しました。

  • 1記事1カテゴリー
  • カテゴリーは大きな枠で組んで、道案内になるように設定して、1記事1カテゴリーに所属させる
  • 1つの記事が複数のジャンルにまたがる場合、タグを活用して整理する。

1つの記事が複数ジャンルにまたがる場合はタグを使うというのは…

たとえば、写真家ソール・ライターに憧れて…―見るものすべてが写真になるという記事は、ソールライターと言う人の『写真集』も紹介していれば、ドキュメンタリー『映画』も紹介しています。そして、アートであり、写真のことを語った記事でもあります。
従って、カテゴリーは『旅と写真>写真論』にいれました。そして、タグを『アート』『映画』『読書』というその他の切り口はタグで整理をしています。

SANGOを高速化!

サルワカと言うサイトは、SANGOの制作者さんのサイトです。
ワードプレスユーザー全体に向けた記事ですが、SANGOの場合の対応も書いてあるのでよりわかりやすいです。

上記のページを参考にして行えばOKです。
実際にやってみて感じた部分を補足と特に注意するべき点を書いておきます。

All in SEO Pack等のOPG設定プラグインは不要

JavaScript to Footerは相性が悪い

「JavaScript to Footer」とSANGOは相性が悪いので停止させておきましょう。
※使うと、トップへ戻るボタンが表示されなくなります。

 

エディタをより使いやすく!

タイトルの文字数が知りたい!(PORIPU搭載機能)

注意
この機能はPORIPUに搭載されてます。子テーマ『PORIPU』ユーザーはカスタマイズする必要はありません。

25字〜30字程度のタイトルの長さであれば、パソコンでも、スマホでも検索結果に途中で切れることなく表示されるでしょう。長くとも35字をこえるタイトルはやめましょう。ユーザーが瞬時にタイトルを読み切ることができなくなり、クリック率が下がります。
引用:https://saruwakakun.com/it/seo/blog-article

クリック率を考えると25~30字がいいみたいです。
でもタイトルの文字数数えるの面倒だなぁって思っていたんです。

そんなところに、子テーマのfunctions.phpを変更するだけでエディタのタイトル右上に文字数を表示する機能を追加する方法を記事にしてくれた方がいました。

参考 ワードプレスで記事タイトルの文字数を表示するゆころぐ

必要なショートコードはAddQuicktagに登録!

かの

まずは、『All ShortCode of SANGO 』というプラグインを追加するのがオススメです。
多くのショートコードこのプラグインでカバーできるます!

※『All ShortCode of SANGO 』については、後述します。

それでも使いたいショートコードがエディターからつかえない時は『AddQuicktag』を使いましょう!

参考 AddQuickTagの設定方法&使い方|便利なタグも紹介!ひつじアフィリエイト

【便利!】参考資料の外部リンク作成を楽ちんに!

補足
『All ShortCode of SANGO 』(無料プラグイン)や『SANGOサポーター』(有料プラグイン)にもある機能ですが、現状この方法の方が早く外部リンクボタンを作成できます。

外部リンクを作成するためには…

  • URL
  • 記事名
  • サイト名

この3つをコピーしてくる必要があります。地味にめんどくさい!
それを解決してくれるブックマートレットをニシカワ アキヒロさんという方が記事にしてくださいました!

とっても便利なのでブラウザのブックマークに追加しとくといいですよ!
詳しくは以下のサイトに!

参考 【SANGO】他サイトへのリンクのブックマークレット | ブログ・デ・イコラブログ・デ・イコラ

わたしが使ってるウィジェット(サイドメニュー&広告)

うちのサイトで使っている、サイドメニューのカスタマイズです。
ウィジェットの基本的な設定は以下のボタンリンクの先に書いてあります。

ウィジェットの設定をしよう:広告の貼り方も解説

↑ 公式カスタマイズガイドにつながります。

残りは、サクッと参考にしたページへのリンク貼っときますね。

SANGOユーザーを助ける追加機能たち!

子テーマPORIPUをキッカケに、拡張プラグインがいくつか増えてきました。

ただ、有料のもの、無料のものありますが…
一式揃えると、SANGO・PORIPUも含めて合計15,000円!そいつは初期投資には高い!

以下のスリーステップで買うのが個人的にオススメです!

  • STEP.1
    『SANGO』と同時に『All ShortCode of SANGO 』を手に入れよう
    SANGOを購入したら、同時に『All ShortCode of SANGO 』をダウンロードしちゃいましょう。無料なので即導入!

    これだけで充分使えるテーマなので、まずはここまでが揃えてSANGOに慣れるのがオススメ!

  • STEP.2
    子テーマ『PORIPU』を買おう!
    ブログで収益が貯まったら、4,000円でまずはPORIPUを買っちゃいましょう。より色んな機能が使えます。
  • STEP.3
    『SANGOサポーター』を買おう!
    1,000円で『SANGOサポーター』をかってPORIPUをより活用しちゃましょう!

All ShortCode of SANGO (無料プラグイン)

製作者は19歳のふうやさん@fwww0707)です。

ということで…なんと無料です!!

つまりどういうプラグインかというと…。
『スタイル』からの挿入にサポートしていないSANGOのショートコードをエディタから簡単に挿入できるんです。

画面イメージはこんな感じです。

わたしは、プラグインのQuicktagsもあまり使いこなせず、公式のカスタマイズガイドからイチイチコピペ、コピペしながら作業していました。

かの

それが、公式のガイドラインを毎回開かなくてもコードを挿入できるって素敵!!
対応してる機能はこんな感じ!

  • アコーディオン:『+』を押すと隠れた文字が出てくる
  • タイムライン:Step1〜順に手順を説明する際に使う。
  • 関連記事:『関連リンク』のボタンを作成する
  • 他サイトへのリンク:『参考リンク』のボタンを設置できます。
  • 線、点線を引く
  • 補足説明:鉛筆アイコン付きのボックスを設置します。
  • 注意書き:ビックリマークアイコン付きのボックスを設置します。
  • 吹き出し
  • 横並び2列
  • 横並び3列
  • 表示分岐:PC or スマホのみで表示する部分を設置します。
  • 指定カテゴリ記事表示
  • 指定タグの記事表示
  • 画像上に文字をのせる
  • 新着記事を好きな数だけ出力
  • レビューボックス:☆1〜5で評価する昨日を設置します。

もっと詳しく『All ShortCode of SANGO』知る

子テーマ 『PORIPU』(有料4,000円)

SANGO専用の有料子テーマ『PORIPU』を購入しました。
親テーマは『SANGO』を使いつつ、子テーマに『PORIPU』を設置しています。

PORIPUはマサオカブログのまっさーさん(@iMassa07 )がSANGO公式に許可を得た上で、作ってくださった子テーマです。PORIPUは有料で、4,000円です。

初心者にとってハードルとなるphpやCSSを操作する必要のある追加カスタマイズ!
でも、ステキなデザイン追加や広告の設置など、魅力的なカスタマイズも多いんですよね…。

わたしも、あまりソースの修正得意ではないです。
難しそうだから諦めたり…
ドキドキしながら編集したり…
うまくいかなくて頭を抱えたり…

苦労しました!!

そんなカスタマイズの不安や苦労を減らしてくれるがPORIPUです!

わたしが心奪われたPORIPUのデザイン

細かい微調節も含めがSANGOユーザーの心をくすぐります。
あーコレが欲しかったんだって思える機能があります。

  • 引用がSANGO標準より、スッキリと小さくなった
  • 青文字・赤文字がやや見やすくなった
  • ミニ吹き出し見出し
  • ミニ吹き出し型見出し付きボックス
  • フッダーにロゴ表示
  • アイコン付き吹き出しのカラー変更
  • トップページにおすすめ記事を表示
  • 『Rinker』・『WPアソシエイトポスト』・『カエレバ』・『ポチれば』のデザイン調整

1つ1つは小さいことなんですが…
引用がコンパクトになって読みやすくなったのはわたしの中ではかなり嬉しかったです!

あと、ミニ吹き出しボックスは非常に使い勝手が良いです!
見出しを可愛くつけれますし、5色から選べます。
ピンクなら、読んでほしい文章が更に目立ちます。
灰色ならなら、ヒッソリと書き込めるボックスになります。

色によって使い分けもできて、形もチョコチョコ使わせてもらってます。

もっと詳しくPORIPUを知る

わたしが心奪われたPORIPUの広告カスタマイズ

デザインも嬉しいですが、ソレ以上に収益に直結する広告関連のカスタマイズが嬉しいです!

カスタマイズにも、検証も苦手なわたしは…ハードルが高かったんですよね。
広告1つ着けるにも。しかも広告位置にも色んな意見があり、何が正解なのやら…

難しかったんです!

PORIPUの作者はマサオカブログのオーナーです。
この方、アドセンスの広告に定評のある方です(わたしの中で)

なので個人的に信頼できるので…
PORIPUでマサオカブログと同じ設置に広告を簡単に設置できるのはすごくすごく魅力的でした。

カスタマイザーで設置できる広告設定

  • 記事一覧内に入れる、インフィード広告
  • 長い記事内に設置できる、見出し前の広告
  • アドセンス自動広告の設置

もっと詳しくPORIPUを知る

子テーマ更新する際の注意

基本的には、この手順で大丈夫です。
style.cssなどをカスタマイズしてる場合はコピーを忘れずに!
コレくらいは簡単なので楽勝なのですが…

加えて、phpなど他のファイルを触ってる方は地味にカスタマイズ後に忘れずにコピーしないといけません。
これが増えると…「どこに何をコピーすればよかったっけ??」と…地味にわからなくなるんですよね^^;

子テーマ更新の度に迷うので、わたしは、phpで触ってた昨日をSANGOの標準機能に置き換えました。

子テーマ導入前に独自カスタマイズしてる方は何を編集してるかリスト化して整理するのをオススメします!

SANGOサポーター (有料プラグイン:1,000円)

製作者は、はるしかさん@HAL_Gatherer です。

このプラグインは現状、SANGOサポーターはPORIPU(有料 SANGO用子テーマ)ユーザーにメリットの大きいプラグインです。

PORIPUの追加ショートコードを追加に対応しています!

かの

こんな感じ!これもとっても便利!
SANGOサポーターの機能はこんな感じ!

  • SANGO【関連リンク】
  • SANGO【参考リンク】
  • 注釈用ふきだし
  • 関連リンク用吹き出し
  • 文字を変更する吹き出し
  • メモボックス1
  • メモボックス2

SANGO【関連リンク】とSANGO【参考リンク】は上記の無料プラグイン『All ShortCode of SANGO 』にもある機能です。
なので、SANGOのみのユーザーが焦って買う必要はないかもしれません。
SANGO+PORIPUを使ってるユーザーにこそ価値がある気がします。

もっと詳しく『SANGOサポーター』について知る

 

 

参考になる資料たち

カスタマイズやSANGOの情報収集にみているサイトを掲載しておきます。

SANGO公式サイト関連

SANGOの公式の説明書

SANGO 公式カスタマイズガイド
この記事でも何度も登場しましたが…。最重要です
を見ればだいたいなんでもわかります。

テーマ更新情報

SANGOのテーマ更新情報
カスタマイズガイド内の、『更新情報』のページです。
これまでの更新履歴が見れます。細かい機能もたくさんあるので見てみると掘り出し物があるかも!

公式Twitter

SANGO公式Twitter
更新情報や、カスタマイズの情報などを流しています。バグなどもこちらに報告すると対応してもらえますよ!
ぜひフォローしておくことをオススメします。

先輩方のカスタマイズまとめ

まっさーさんのブログ

SANGOのカスタマイズまとめ!一番最初にやる設定集
SANGOのカスタマイズ記事をたくさんもってるブロガーさんです。
ほんとうに丁寧にカスタマイズ方法をまとめてくださってます!
この記事は、必ず役に立つはず!ぜひ御覧ください。

さっちんさんのブログ

テーマをSTORKからSANGOに変えたのでカスタマイズやプラグインをまとめてみるよ
SANGOのカスタマイズに関するブログ記事をまとめてくださっています。
とりあえず、情報量がすごいです。ぜひ、覗いてみてください!

 

さいごに、だいじな言葉をメモしておきます

ちゃんとキレイにしよう!自分のブログ!!

2 Comments

aya

はじめまして。Wordpressをはじめたばかりの初心者です。
サイト設営のため色々調べていてこのサイトにたどり着きました。色々参考になりました。ありがとうございます(^-^)
私もすっかりサルカワさんのファンになってしまい、テーマのSANGOも購入してしまいました。(アフィンガーにするつもりだったのですが…。)
これからも楽しみにしています(*^^*)

返信する
かの かの

はじめまして!コメントありがとうございました。
サルワカさん、わかりやすいしキレイだしすてきですよね!
ブログ拝見しました。JINDOも癖が強いですよね。
初心者なりの記事を更新していきますので、これからもどうぞよろしくお願いいたします。

返信する

コメントを残す