SANGOとブログのカスタマイズメモ(10/19更新)

SANGO育成計画

こんにちは、かのです。
SANGOをブログを作る上で、わたしもメモを残してみようと思います。

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

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

SANGOについて

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

SANGO アイキャッチ
WordPressテーマ『SANGO』に変更した感想はオシャレな洋服屋さん

AFFINGER4からSANGOへの移行

休日1日を潰してやりました。とはいっても結構、記事修正を残してです。
かなり大変な作業でした。

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ガイドマニュアル

だいじな言葉をメモしておきます

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

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

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

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

参考

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

カテゴリとタグ分け

はじめ、クロネさん方式でカテゴリ分けをしていました。
ただ、そのあとでカスタマイズガイドのSEOを考えたカテゴリー設定をしようを見つけます。

SANGOは1記事1カテゴリに対応していることを考慮して、ガイドマニュアルに沿っています。

  • 1記事1カテゴリ
  • カテゴリは大きな枠で組んで、道案内になるように設定して、1記事1カテゴリに所属させる
  • 1つの記事が全然ジャンルの違うジャンルにもリンクする場合はタグで仕分ける

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

ということで、カテゴリは『旅と写真>写真論』にいれてタグを『アート』『映画』『読書』という全然ちがうジャンルのタグにもいれています。

エディタ関連

タイトルの文字数が知りたい!

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

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

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

参考

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

Vivaldiだとビジュアルエディタでボックス・ボタンが表示されない

わたしはまあまあマイナーなブラウザ、Vivaldiを使っています。

マイナーなので、使ってる人いないかもしれませんが…
もし使っている方がいたらChrome等で使うとボックスやボタンの形まで表示されます。
記事を書くのが更に楽になりますよ!

続報 SANGOの中の人が神対応してくださいました。

キャッシュ嫌いです!すぐ邪魔をします。
無事、ブラウザのキャッシュを削除して解決しました。

かの

恨むぞキャッシュ!わたしの大好きなキッシュになってしまえ!(意味不明)

ショートコード関連

ショートコードを一括登録して楽ちん管理!

公式のカスタマイズガイドに、『AddQuicktagで簡単にショートコードを挿入しよう』の項目があることは知っていたんです。
でも、『AddQuicktag』がうまく使いこなせないわたしは、めんどくさがりつつスルーしていました。

そして、SANGOにしてから2週間が経ちやっと気が付きました。

よく使いそうなものはすぐに導入できるようにSANGO用のAddQuicktagを用意しました。下のボタンからファイルをダウンロードし、AddQuicktagの設定画面の最下部からインポートができます。このときzipファイルを解凍して、.json形式でインポートするようにしましょう。

一括登録ができるだと・・・・!!?!
それなら楽ちんじゃないか!!!

ぜひ、みなさんもお忘れなく、この一手間で楽できるので…。

参考

AddQuicktagで簡単にショートコードを挿入しよう SANGOカスタマイズガイド

注意
既存のタグを登録してる場合、上書きされてしまいます。ご注意ください。

 

わたしがよく使うショートコード

リンク編

野球をみにいこうよ
初心者と野球観戦する時の楽しみ方【阪神タイガース/甲子園/野球デート】
HTML
[kanren id="投稿ID"]
「今日生理なの」どうしたら? アイキャッチ
旅行先で彼女が「今日、生理なの」と言った、どうすればいい?
HTML
[card id="投稿ID"]

サンプル:SANGOの紹介記事へ

使用方法 リンクをドラックした状態で、『スタイル>ボタン>浮き出し(メインカラー)』

サンプル:AFFINGER4の紹介記事へ

使用方法 リンクをドラックした状態で、『スタイル>ボタン>浮き出し(アクセントカラー)』

サンプル:ワードプレスの紹介記事へ

使用方法 リンクをドラックした状態で、『スタイル>ボタン>浮き出し(赤)』

ボックス編

MEMO
目立ちますよね。ひと目見てほしい注釈に使います。
HTML
[memo title="MEMO"]ここに文章[/memo]
注意
目立ちますよね!これもMEMOより重要なことに使います。
HTML
[alert title="注意"]ここに文章[/alert]
サラッと流してもらってもいいけど、囲いたい部分に使ってます。

使用方法 スタイル>ボックス>19.カギカッコ

みんなが考えそうなことを書くときに使ってます。

使用方法 スタイル>ボックス>23.丸い吹き出し

 

タイトル
見出し付きで書くときに使ってます。ちょっと目立つのもGOOD!
HTML
[box class="box26" title="タイトル"]文章[/box]
タイトル
見出し付きで注意喚起したいときに使います
HTML
[box class="box27" title="タイトル"]文章[/box]
タイトル
関連記事を紹介するときに使ってます。
HTML
[box class="box30" title="タイトル"]文章[/box]
タイトル
上の色違いです!チェックはついてません。
HTML
[box class="box32" title="タイトル"]文章[/box]

箇条書き編

  • 箇条書きのサンプルです。
  • こんなデザインです。
  • 目立たせたいリストで使ってます。
HTML
[list class="li-chevron li-mainbdr main-c-before"]
〜箇条書き〜
[/list]

 

【便利!】外部リンク作成を楽ちんに!

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

  • URL
  • 記事名
  • サイト名

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

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

参考

SANGO・他サイトへのリンクカード用ブックマークレット(仮)を作りました ニシカワのメモ帳<br />

SANGOを高速化!

SANGOの中の人が書いてくださった記事です。
SANGOの場合の話も書いてあるので非常にわかりやすいです!

プラグイン関連

高速化の記事と重なります。そして高速化のページを引用させていただきます。

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

Autoptimize(圧縮プラグイン)のCSS圧縮をオフ

WordPressのコード圧縮系のプラグインといえばAutoptimizeが人気です。複数のCSSファイル/JavaScriptを結合してそれぞれ1つにしてくれたり、余白や改行を消してファイルサイズを軽くしてくれます。

SANGOの場合、CSSを圧縮する機能がテーマに付随しています。
SANGO内の機能をオンにしている場合は、Autoptimize内のCSS圧縮はオフにしましょう!

JavaScript to Footerは相性が悪い

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

参考になる資料たち

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

SANGO公式

SANGO公式のカスタマイズガイド

最重要です。これを見ればだいたいなんでもわかります。

参考

SANGOカスタマイズガイド

更新情報

カスタマイズガイド内にあるページです。

参考

SANGOのテーマ更新情報 |SANGOカスタマイズガイド

公式Twitter

更新情報や、SANGOのカスタマイズに役立つ情報のリツイートがあります。
更新よりさきにバグの対処法をツイートしてくれたりもするので必ずフォローしてチェックしたいアカウント!

参考

SANGOの情報まとめ(@sangowp)さんTwitter

カスタマイズまとめ

さっちんさんのブログ

すごいの一言です。SANGOのカスタマイズに関するブログ記事がまとまっています。
ココを見れば、公開からの流れがわかると言ってもいいくらい^^
Twitter上でのやり取りでわかった最新情報を丁寧に拾ってくださってます。
公式より先にまとめてくださったりすることもあるんですよ。

こちらも随時更新形式なのでちょくちょく見に行ってます。

参考

テーマをSTORKからSANGOに変えたのでカスタマイズやプラグインをまとめてみるよLove!?2nd

2 Comments

aya

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

返信する
かの かの

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

返信する

コメントを残す