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

SANGOがもっと便利に!「All ShortCode of SANGO」でショートコードを簡単に貼ろう

ノートパソコンの電源ボタンを押す指

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

 

弊ブログで愛用しているブログテーマ、SANGO。
ブログ界隈でもその美しさとカスタマイズの充実度で沼にハマる方続出中です。

SANGOって?という方はまずコレ
サルワカさんのWordPressブログテーマ「SANGO」に惚れてもーたんじゃい!!

 

そして、そのSANGOのカスタマイズの先駆者、まっさーさんが作り上げた愛されし子テーマ、PORIPU。
この組み合わせでさらにSANGO礁の住民は増加中です(体感的に)。

PORIPUはいいぞ~~
poripuSANGO公認子テーマ「PORIPU」が超感動的だったので紹介させてほしい

 

そんな今日この頃、さらにSANGOのお友達が歓喜しそうなプラグインがリリースされました。

その名も「All ShortCode of SANGO」

 

かゆいところに手が届く、この素晴らしいプラグインを画像たっぷりでご紹介していきたいと思います。

全国のSANGO礁の皆さまに届きますように!

Gutenbergには非対応

WordPressの新しいエディタ「Gutenberg」に切り替えると、「All ShortCode of SANGO」のボタンが表示されなくなり利用できません。2019年7月現在、Gutenbergでは利用できないようです。

 

All ShortCode of SANGOとは?

このプラグインは、ご自身のブログをSANGOでカスタマイズされております現役大学生のふうやさんが何と3日で作成されました。つよい…!

参考 SANGOのショートコードを簡単に挿入できるプラグイン「All ShortCode of SANGO」を開発したよWeBlog Geek

 

ショートコードを投稿画面から簡単挿入

SANGOにはたくさんの機能がありまして、「ショートコード」を記事に挿入することでその機能を使えるようになります。

参考 SANGOのショートコード一覧SANGOカスタマイズガイド

↑これの目次だけでも見てきてください(別タブで開きます)。めっちゃショートコードあるんです。

 

この豊富なショートコード、一部はAddQuicktagに登録して使ってはいたものの、どんどん機能が追加されるのでやっぱりこのカスタマイズガイドを開いてはコードをコピペしていたわけですよ。

そのちょっとした手間を取り除き、WordPressの投稿ページで済ませることができるのがこのプラグイン。

こはる

さまざまなショートコードに対応してあって本当にありがたいです!

 

完全無料のプラグイン

はい。この便利な機能が、無料なんです。

嘘…だろ…!?!?

 

ということで、感謝の気持ちを込めて精一杯ご紹介記事を書かせていただきます。
ふうやさん、本当にありがとうございます。

ダウンロードはふうやさんのブログから行えますよ!こちらからどうぞ。

プラグインのダウンロード

 

 

All ShortCode of SANGOの対応ショートコード

一通り使ってみましたので、画像付きでご紹介していきますね。

基本的な使い方

ふうやさんのブログからプラグインをダウンロード後、WordPressにインストールして有効化すると、記事を投稿する画面にボタンが出現します。

All ShortCode of SANGOのショートコードボタン

ショートコードを挿入したいところでこのボタンをポチ。

 

All ShortCode of SANGOの画面

これがAll ShortCode of SANGOのショートコード挿入画面。
ここから使いたいショートコードを作っていきます。

うっかり忘れがちな操作

All ShortCode of SANGOアコーディオン機能

「適用」ボタンがある時は必ず押しましょう。 これをやらないと反映されません。

スクロールしたら下の方にコッソリ隠れている場合もあるので、「投稿に挿入」を押す前に確かめて。

 

All ShortCode of SANGOアコーディオンのプレビュー

「ショートコードのプレビュー」を押すと、表示イメージが確認できます。
いちいちプレビューを押して別窓で確認する必要がないのでとっても楽。

問題なければ「投稿に挿入」を押せば簡単に記事に追加可能できますよ!(その他のショートコードも操作はほぼ同じです)

 

アコーディオン

アコーディオンとは、ボタンを押すことでメニューを開閉できる機能。
普段は隠しておきたいものや、表示させると長いものなどを隠しておいて、必要に応じて開閉できるようになります。

スマホを見て驚く男性

わーーー!!クリックしたら開いて中身が見えたーーー!!

↑これです。

 

All ShortCode of SANGOアコーディオン機能

タイトル部分には閉じた状態のボタンに表示させたい文章(「クリックして開きます」など)を。

下のエディタに隠しておきたいコンテンツを入力します。

「適用」をお忘れなく

入力画面をスクロールして「適用」ボタンがある時は必ず押しましょう。 これをやらないと反映されません。

 

タイムライン

タイムライン形式の表示を作り出せる機能です。

STEP1…のように順序立てて説明するときに便利。

STEP.1
SANGOの導入
SANGOを購入し、インストールする。 (バックアップをお忘れなく)
STEP.2
カラーコードの確認
カスタマイザーから、自分のブログのカラーコードをメモしておく。(PORIPU導入時に初期化されるため)
STEP.3
PORIPUの導入
PORIPUを購入し、インストール→有効化する。
STEP.4
カスタマイザーで設定
豊富なカスタマイズ項目から、好みのものを設定していく。
STEP.5
All ShortCode of SANGOの導入
プラグインをインストール後、有効化してさっそくブログを書く。

↑こんなやつが作れます。

 

All ShortCode of SANGOタイムライン機能

これもカスタマイズガイドからのコピペが省けて楽チンですね!

 

関連記事

とっても便利な関連記事のショートコード。SANGOでこれを使うには、表示させたい記事ID(数字)を確認する必要がありました。これが地味に大変。

All ShortCode of SANGO関連記事

このプラグインでの関連記事画面。

おや、記事のアイキャッチが見えますね。

 

All ShortCode of SANGO関連記事 検索機能

これ、使ってみましたがめっちゃ便利です。

  • キーワードで記事検索できて、そのままリンク可能!
  • 記事一覧、URL検索、記事ID…と検索方法が選べる!
  • 表示形式も簡単に切り替え可能!

この至れり尽くせり感。

表示形式は3種類あり、それぞれこうなります。

①横長タイプ
All ShortCode of SANGO関連記事 横長

②カードタイプ
All ShortCode of SANGO関連記事 カード型

③別スタイルのタイプ
All ShortCode of SANGO関連記事 別カード

管理画面から表示切り替えができて、すぐプレビューできるのは嬉しいところですね!

アップデートにより「新しいタブで開く」機能が追加されて、さらに便利になりました!

 

他サイトへのリンク

外部リンクを作成する時も、専用の枠が用意されるので入力しやすくなります。

All ShortCode of SANGO他サイトへのリンク

リンク先のURL、記事のタイトル、サイト名をそれぞれ貼り付けるだけ。

ショートコードの文字列の中にコピペするのは結構難しかったので、これなら間違いや失敗が防げますね!

文字数が長くなると、画像のようにズラーーーッと長く表示されて、文字が若干かぶるのが少し気になるところ。今後のアップデートで解消されるかしら?

こんな表示になります
All ShortCode of SANGO他サイトへのリンクプレビュー

作った外部リンクはこんな感じの表示に。キレイですね!

 

アップデートにより、「新しいタブで開く」機能と「nofollow属性付与」機能が追加され、さらにかゆいところに手が届く仕様に強化されました。

nofollow属性って?

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

 

線・点線を引く

All ShortCode of SANGO線と点線

これは地味に嬉しいw

実線と点線を引くことができる機能です。私は固定ページの区切りに使っています。

 

補足説明/注意書き

SANGOでは「memo」と「注意」という枠を作ることができます。

これもこのプラグインで分かりやすく簡単に挿入できるようになりますよ!

All ShortCode of SANGO補足説明

タイトルを変更できるので、「memo」以外に色々応用できそう。

補足説明の完成イメージ
All ShortCode of SANGO補足説明プレビュー

注意書きの完成イメージ
All ShortCode of SANGO注意事項プレニュー

 

ソースコードボックス

All ShortCode of SANGOソースコードボックス

カスタマイズ記事を書かれる方には朗報。

ソースコードを表示させるボックスも簡単に作成できます!

 

吹き出し

こはるアイコンの吹き出しはAddQuicktagに登録してありますが、たまーに使いたい吹き出しアイコンだと設定が結構面倒でした。

これまでのやり方だと、画像のURLをコピペする必要があったんですよね。

All ShortCode of SANGO吹き出し

このプラグインなら、見て。メディアから画像を選択して設定できるんです。URLのコピペ必要なし。

画像位置を右にするか左のままにするかも設定可能。きめ細やかな配慮が嬉しいですね!

挿入するとこうなります
All ShortCode of SANGO吹き出し使用イメージ

 

横並び2列/3列

All ShortCode of SANGO横並び

画像や文章を横に2枚または3枚並べることができる機能。

プレビューを押して別窓で確認するのがいちいち大変なこのショートコードも、簡単切り替えでプレビューできます。

ただし、画像のサイズによってはうまく表示できない場合もあるようです。

 

表示分岐

All ShortCode of SANGO表示分岐

モバイルから見た時だけ表示させる、またはPCから見た時だけ表示させる。

そんな設定もポチッと押すだけで設定可能です!

 

指定のカテゴリー記事/タグ記事を表示

指定したカテゴリーや特定のタグを使った記事を好きな数表示できる機能ですが、IDを調べるのがなかなか大変なのです。

All ShortCode of SANGO好きな数だけ表示

このプラグインなら、ご覧の通り自分のカテゴリーをドロップダウンリストから選んで設定することができます!(タグも同様)

管理画面からカテゴリー一覧に行ってIDを調べて…という手間は一切なし!

おまけに表示する記事数までこの場で入力できます。

 

画像に文字をのせる

こんなこともできちゃいます。

All ShortCode of SANGO画像に文字を乗せる

メディアから画像を選んで、画像の上に乗せたい文字を入力すれば…

こんなイメージになります
All ShortCode of SANGO文字を乗せたイメージ

オサレ…!!!

 

新着記事を好きなだけ表示

こちらの機能も、表示させたい新着記事の数を入力する枠が用意されているので、とても簡単です!

 

レビューボックス

商品のレビューを書く方にオススメ!星の数で評価を表示します。

All ShortCode of SANGレビューボックス

 

まぁ、つまりこういう感じです。↓

このプラグインの評価
クオリティ
(4.5)
対応ショートコードの充実度
(4.0)
操作の分かりやすさ
(3.5)
ブログの効率
(5.0)
SANGO大好き度
(5.0)
総合評価
(4.5)

コピペ不要で管理画面から挿入できて、素晴らしい!

 

ボタン

SANGOのために用意された様々なボタンも、このプラグインで簡単挿入が可能になります!

All ShortCode of SANGOのボタン追加

嬉しいことに、

  1. 新しいタブで開く機能
  2. nofollow属性付与機能
  3. ボタン中央寄せ機能
  4. リップルエフェクト機能

こんなに多くの便利機能がチェックボックスで対応可能。

リップルエフェクトって?

クリックすると現れる、波紋が広がるような効果です。

(ブラウザによってエフェクトが表示されない場合があります)

 

なお、「例を見る」を押すとボタンのイメージが画像で確認できます。

ボタン名の説明だけではイメージしづらいけど、視覚的に分かるからいいですね!

All ShortCode of SANGOのボタン例一覧ページ

 

ボックス

SANGOの魅力の一つである、豊富なデザイン。

その中のひとつ、ボックスもこのプラグインから挿入可能に。

All ShortCode of SANGOボックス

 

「例を見る」のボタンを押すことで、ボックスデザインが一覧となり確認することができるようになります!

All ShortCode of SANGOボックスデザイン例

これはありがたい…!

いいなと思ったデザインのボックスをドロップダウンリストから選び、タイトルと文章を入力して「適用」すれば…

 

All ShortCode of SANGOボックスプレビュー

簡単にできちゃいます…!!!

 

SANGOユーザーならぜひ使ってみて!

以上が、現在の機能一覧です。

ご覧いただいた通り、ものすごく充実しています。これは記事を書く効率がめっちゃ上がりそう…!

 

今後のアップデートも楽しみ。

ふうやさん、素晴らしいプラグインをありがとうございました!

SANGO愛用の皆さん、ぜひ使ってみてくださいね。

プラグインのダウンロード

 

 

 

コメントを残す

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

CAPTCHA