暮らしブログ【こはるのおうち手帖】はこちらからどうぞ

プラグイン「SANGOサポーター」でSANGO&PORIPUユーザーのブログ効率がさらにアップするよ!

ノートパソコンを操作する男性

こんにちは、こはるです!

SANGO礁の皆さま、ブログを楽しんでいらっしゃいますか?

さまざまなカスタマイズが紹介されていたり、便利なプラグインが登場したりとありがたいSANGO界隈。
ブログテーマSANGOの使い心地アップが止まらない今日この頃、さらにSANGOを充実させるプラグインに出会いました。

その名も「SANGOサポーター」

もう…もう名前からSANGOをサポートしてくれそうな感じが溢れている…!!!

このプラグイン。SANGOユーザーはもちろん、子テーマであるPORIPUユーザーも歓喜する便利機能が搭載されています。

もう私はSANGO礁から抜け出せない…それくらい便利。
この記事では、SANGOサポーターの使い心地をたっぷりとご紹介します!

SANGOサポーターとは?

このプラグインは、ご自身もSANGO礁の住人であられるはるしかさんが作られました、SANGOユーザーと子テーマであるPORIPUユーザー向けのプラグインです。
子テーマの内容も踏まえてあるなんて、しゅごい…!

参考 SANGOサポーターSANGO Supporter
SANGOサポーターを使い始める前に

これからご紹介していく機能は、SANGOサポーターの設定ページで使いたい機能のスイッチをONにして使用します。

SANGOサポーターの初期設定画面

設定>「SANGOサポーター」のメニューを見つけて、そこから使いたい機能をONにして保存してくださいね。
ON/OFFはこの画面から簡単に行えます。

プラグインのアップデートで新しい機能が追加されることもあるので、時々チェックしてみるといいかも。

スタイリッシュなフロントページを3ステップで実現

はるしかさんがブログでご紹介されております、シンプルで美しいフロントページ。
FTPソフトやテキストエディタでの編集が必要なこの操作を、わずか3ステップで実現できるんですって!

参考 SANGOのフロントページをシンプル&スタイリッシュにカスタマイズこじかログ

この記事で紹介されている手順を踏む必要なし。公式ページで紹介されている簡単な操作で実現可能だそう。
CSSをいじるのが怖いんじゃ…という方でも挑戦しやすいですね!

詳しい設定方法はこちら

参考 カスタマイザーでフロントページの設定をしようSANGO Supporter

内部・外部リンク/PORIPU向け追加タグ対応

URLを貼り付けるだけで内部リンクと外部リンクをより簡単に追加できるショートコード生成機能が手軽でとっても便利!
さらに、PORIPU向けの追加タグ生成機能にも対応。

SANGOには公認子テーマのPORIPUがありまして、その中で便利な追加タグが用意されています。

追加タグをチェック

参考 追加タグのコード一覧PORIPU-SANGO公認の子テーマ

この上の赤い吹き出しもそうなんですけどね。

SANGOサポーターを使えば、これらの追加タグを簡単に挿入できるんです!
機能の詳細は後ほど詳しくご紹介します。見てね。

サイドバーのプロフィールをウィジェットで簡単に挿入

弊ブログでも設置しているこちらのプロフィール。

SANGOサイドバーのプロフィール

カスタマイズガイドで紹介されている方法を使えば、↑このようにいい感じに表示してくれます。
私もとても気に入っています。

やり方はこちら

参考 サイドバーや記事下にプロフィール(この記事を書いた人)を設置するSANGOカスタマイズガイド

でもこれ、HTMLが苦手な方にはちょっとハードルが高かったり、画像のURLをコピペするのがすこーーーし面倒だったりする面も。

このプラグインなら、名前や自己紹介文、TwitterなどのSNSアカウントを入力する枠が用意されているので、画面に従って入れるだけ。
画像もメディアファイルから選択できるので、長いURLをコピーする必要もありません!

見出しラベルを上部に表示

ブログの本文には、区切り区切りに「見出し」が登場します。
その章がどういう内容なのかをあらわすタイトルのようなもの。

それを簡単に画面の上部にラベルとして表示させることができるようになります。

SANGOサポーターの上部固定見出し

こんなやつ、今もきっと画面の上部に出ていると思います。

SANGOサポーターを導入すれば、カスタマイザーから簡単設定で表示することが可能です!

こはる

詳しい設定方法はのちほどご紹介しますが、さっさと見たいぜ!という方はこちらから設定方法にジャンプしますのでどうぞ!

PORIPU上位モデルtearsのランキングを簡単追加

SANGO公認子テーマのPORIPUの上位モデル「tears」にあるランキングショートコードを簡単に作成できる機能にも対応。
直感的に操作ができて、ランキング作成が楽チンになりそうですね!

詳しい作成方法はこちら

参考 PORIPU tearsのランキングショートコードを直感的に作成SANGO Supporter

サイドバーにSNSシェアボックスを簡単設置

このブログいいね!この記事いいね!そんな時にポチッと押していただけるとうれしいシェアボタン。
SANGOサポーターを使うことで、サイドバーやハンバーガーメニューにサクッと配置できるようになります。

SANGOサポーターのSHAREウィジェット
これどうやって設置するん?

まず設定>「SANGOサポーター」の「SHAREボックスウィジェットを利用にする」をONにして保存しましょう。

SANGOサポーターのSHAREウィジェット

その後、外観>ウィジェットから「SHAREボックス」というウィジェットをペッと貼り付けるとOK。

SANGOサポーターのSHAREウィジェット

くまさんのブログで素敵なカスタマイズが公開されています。ご一緒にどうぞ!

参考 【SANGOカスタマイズしてみた】ナビドロワーのSNSボタンをなじませてみたfor men

この充実機能がお手頃価格

記事執筆の作業効率が格段にあがるこの機能が、とっても手に取りやすい1,980円。(愕然)
はるしかさん、本当にありがとうございます!

プラグインは、はるしかさんのお店「こじかショップ本店」でご購入になれますよ。
ぜひチェックしてみてくださいね!

こじかショップ本店へ

SANGOサポーターを購入する

これは便利!ショートコード生成機能

数ある便利機能の中から、ショートコード生成機能を詳しく見ていきたいと思います。
同じく内部リンク・外部リンクを生成できる「All ShortCode of SANGO」との違いにも注目してみましょう。

MEMO
「All ShortCode of SANGO」はWordPressの新エディタ「Gutenberg」に対応していません。

「All ShortCode of SANGO」を利用する場合はプラグイン「Classic Editor」を使用して旧エディタを利用する必要があります。

 

機能を使い始める前に

こじかショップ本店からSANGOサポーターを購入後、インストール→有効化したらまず初期設定を。

SANGOサポーターの初期設定画面

設定>「SANGOサポーター」のメニューを見つけて、そこから有効にする機能をONにして保存しておきましょう。

「ショートコード生成ボタンを有効にする」をONにすると、投稿画面にSANGOサポーター用のボタンが出現。

Classic Editor(旧エディタ)

SANGOサポーター投稿画面のボタン

旧エディタの場合は、エディタの上部にボタンが出現します。

Gutenberg(新エディタ)

SANGOサポーターのGutenbergショートコード

新エディタの場合は「ショートコード」ブロックを選択すると、右側のメニューに「ショートコード作成」ボタンが表示されます。

これでショートコードを生成することができるようになります!ワクワク!

内部リンク用ショートコード

ショートコードボタンを押すとこんな画面が。

SANGOサポーター内部リンク用ショートコード

①URLの入力欄
②表示タイプを選択するラジオボタン
③別窓で開くかどうかのチェックボタン というシンプルな作り。

SANGOサポーター内部リンク

URLを入力するだけで自動的に記事IDが入るので、いちいち記事IDを調べたり覚えたりする必要がありません。

内部リンクを張りたいURLをコピペするだけなので楽チンですね!
表示タイプもここで選ぶことができます。

All ShortCode of SANGOとの違い
SANGOサポーター内部リンク用ショートコード
SANGOサポーターはURLを貼り付けるだけで簡単に内部リンクが作成可能なので、自分のブログを見ながらコピペしたい時や、URLが分かっている時に便利。

All ShortCode of SANGO関連記事
All ShortCode of SANGOは
①記事一覧やキーワードから検索
②URLから入力
③記事IDから入力 の3通りから挿入方法が選べるので、キーワードから記事を探したい時や過去記事から探したい時に便利。

外部リンク用ショートコード

SANGO外部リンク用ショートコード

こちらは外部リンクを簡単に生成できます。

①外部リンクのURL欄
②リンク先を別窓で開くかのチェックボタン
③リンクを”nofollow”属性にするかどうかのチェックボタン が用意されています。

nofollow属性って?

検索エンジン(Googleなど)のクローラーにリンク先を巡回してほしくない時・リンク先を評価しないでほしい時に付与します。
(参考:nofollow属性とは│SEO HACKS )

…でも、よく見てみるとこの画面、URLしか入力するところがないですよね。
リンク先の名前とかタイトルとか、どうするんでしょ。

SANGOサポーターのショートコード画面

実は、自動で入るんです・・・
これスゴくないですか・・・URL入れただけなのに、タイトルとサイト名が反映されているんです・・・便利すぎる。

All ShortCode of SANGOとの違い
SANGO外部リンク用ショートコード
SANGOサポーターはURLを入れるだけの簡単操作なので、外部リンクをサクッと作りたい方にはピッタリ。

All ShortCode of SANGO他サイトへのリンク
All ShortCode of SANGOは、記事のタイトルやサイト名を手入力できるので、こだわってカスタムしたい方にオススメ。

※SANGOサポーターも外部リンク作成後、投稿エディタからタイトルとサイト名の編集は可能です。

PORIPUユーザー向け追加タグ

こちらはPORIPUユーザー歓喜の追加タグ機能です。

SANGOサポーター PORIPUの追加タグ対応

これですよこれ!今までPORIPUの公式ページをブックマークして都度コピペしていたんですが(※AddQuicktagに登録しておくことも可能です)、SANGOサポーターの導入により簡単に挿入できるようになります!

弊ブログで使いまくっている注釈用ふきだしも、ポチポチっと挿入可能。

SANGOサポーター 注釈用ふきだし

タイトルの枠に表示させたい言葉を入れて「投稿に挿入」を押せば…

SANGOサポーター 注釈用ふきだし挿入画面

出てくる…!!!(しゅごい…!!!)

カラータイプを切り替えれば、表示例部分にもカラーが反映されるのが嬉しいですね。
(※入力した文字は反映されません)

SANGOサポーター PORIPUの注釈ふきだし

注釈用ふきだし以外にも…

SANGOサポーター PORIPUのリスト枠

PORIPUユーザーお馴染みの関連する記事用リストや、ふきだし部分を自由に変更できるリストにも対応。

↓こんなリストが簡単挿入できるようになります。

SANGOおすすめプラグイン

  • SANGOサポーター
  • All ShortCode of SANGO
リスト形式にするには

SANGOサポーター リスト形式にする方法

画面をスクロールすると、コンテンツの中身を入力する部分があります。

普通に入力するだけではリスト形式にならないので、エディタのリストボタン(画像参照)を押して箇条書きにすると、挿入した際に綺麗なリスト表示になります。

さらに、追加のメモボックスも出せますよ!

SANGOサポーター PORIPUのメモボックス

ブログを読みやすく分かりやすくするためのさまざまなコードが手軽に使えるようになるので、執筆の効率が上がりそうですね!

上部固定見出しラベルの設定を解説

SANGOサポーターの上部固定見出し

見出しのタイトルを画面の上部に固定表示できるようになる機能。
これを表示させるための設定方法を詳しくご紹介していきますね!

STEP.1
「見出しラベルを上部に固定表示」をONにする

まずはこの機能を使えるように設定します。

設定>SANGOサポーター を開いて「見出しラベルを上部に固定表示」をONにします。

SANGOサポーターの上部見出し表示設定

ONに表示が切り替わったら「変更を保存」をしておきます。

STEP.2
カスタマイザーをひらく

SANGOサポーターの上部固定見出しラベルの設定

外観>カスタマイズ>SANGOサポーター>「上部固定見出しラベルの設定」を選択して、画像のような設定画面を表示させます。

STEP.3
見た目や表示の設定をする

上部固定見出しラベルをブログに合うように表示させるための設定をします。

カスタマイザーの項目一覧

見出しラベルの背景色/文字色

見出しラベルの背景色と文字色を選びます。カラーコードを直接入力するか、マウスで好きな色を選択しましょう。
ブログカラーに合ったものを選ぶといいですね。

見出しラベルの文字サイズ

文字サイズの変更が可能。デフォルトは14pxです。

ラベルを表示する見出しのタイプ

h2~h6の見出しのうち、どこまで表示するかを選ぶことができます。
最大値はh2~h6(すべて)、最小値はh2のみ。

ラベル左側のアイコン

見出しラベルの見出し前についているマークを変更できます。

デフォルトは「シェブロンマーク」。丸の中に「>」が入っているマークです。FontAwesomeのアイコンからお好みのものに変更しましょう!

Font Awesomeの使い方サルワカさんの記事で詳しく解説してありますのでどうぞ。
参考 【保存版】Font Awesomeの使い方:Webアイコンフォントを使おうサルワカ | サルでも分かる図解説明マガジン

見出しラベルを表示するタイミングのオフセット

本文見出し表示後、見出しラベルをどのタイミングで表示させるか。
数字が大きいほど、タイムラグがあります。

ラベルの出現タイプ

見出しラベルをパンッと表示させるか、ふわっと表示させるか。
お好みでどうぞ。

見出しのフェードイン/アウト

ラベルをの出現タイプを「ふわっと」にした場合のフェードイン/アウト速度の調整が可能。

STEP.4
公開ボタンを押して完了

設定が完了したら「公開」を押して反映させます。

SANGOサポーターの上部固定見出しラベルの設定

フゥーーッ!!!できました!

カスタマイザーで簡単に設定するだけで表示できるようになるので、ぜひ試してみてくださいね!

ブログ効率がめちゃくちゃ上がる!おすすめです

ノートパソコンを操作する人

SANGOの良いところをさらに伸ばしてくれるこのプラグイン。
金額もお手頃価格ですし、SANGO &PORIPUユーザーには大変オススメです!

また、新エディタのGutenbergでも挿入できるショートコードはめちゃめちゃ便利。長く愛用できそうなプラグインです。

皆さんもこの最強プラグインを使いながら、効率よくブログを書きませんか?
この記事が、どなたかのブログライフをより楽しくするキッカケになりますと幸いです!

SANGOサポーターのページへ

コメントを残す

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

CAPTCHA