Ver1.3.2をリリースしました(1/27)

SANGOのショートコード一覧

SANGOのショートコード一覧

このページではSANGOで使用することのできる「ショートコード」を一覧で紹介していきます。

ver1.3.1〜 新着記事を好きな数だけ出力

指定したカテゴリーの記事を好きな数だけ出力するショートコード(後述)にて、下記のようにカテゴリーを指定しなかった場合に、サイト全体の新着記事が表示されるようになりました。

[catpost num="出力する新着記事数"]

またnotin="1,5"というようにパラメーターを追加することで、特定のカテゴリーを除外することもできます。

[catpost num="出力する新着記事数" notin="除外するカテゴリー"]

ver1.3.1〜 指定したタグを持つ記事を好きな数だけ出力

[tagpost id="タグID" num="出力する記事数"]

「指定したカテゴリーの記事を好きな数だけ出力するショートコード(後述)のタグバージョンです。

ver1.3〜 特定のカテゴリーの記事でのみ表示

SANGO ver1.3より「特定のカテゴリーに属する記事ページでのみ表示する機能」を実装しました。

[category id="カテゴリーID"]
ここに指定したカテゴリーの記事でのみ表示したいものを記入
[/category]

例えば、[category id="4"]こんにちは![/category]と入力すると、カテゴリーIDが4の記事のみに「こんにちは!」と表示されるようになります
なお、id="2,5"のようにIDは半角カンマ区切りで複数指定することができます。

使いどころ

ウィジェットで使用すると便利です。例えば、「Webデザイン」カテゴリーの記事全てに「Webデザインの勉強ならこちらのサイトがおすすめ!」というテキストとリンクをまとめて挿入したいとします。その場合「コンテンツ後の広告ウィジェット」等に、上のショートコードとテキストを書き込めば良いのです。

▼使用例

[category id="WebデザインカテゴリーのID"]
Webデザインの勉強ならこちらのサイトがおすすめ!
[/category]

ver1.2〜 レビューボックス

SANGO ver1.2よりレビューボックスをショートコードで挿入できるよう致しました。このような評価テーブルを簡単に作成することができます。AddQuickTagに追加してご利用くださいませ。

この本の評価
読みやすさ
(3.5)
面白さ
(4.0)
デザインの美しさ
(5.0)
値段
(2.0)
コレクション性
(1.5)
総合評価
(4.5)

ショートコードは以下のようになります。

[rate title="この本の評価"]
[value 3.5]読みやすさ[/value]
[value 4]面白さ[/value] 
[value 5]デザインの美しさ[/value]
[value 2]値段[/value]
[value 1.5]コレクション性[/value]
[value 4.5 end]総合評価[/value]
[/rate]

ショートコード全体を[rate]〜[/rate]ではさみ、その中に項目数だけ[value 点数]項目名[/value]を入れます。点数は「1」〜「5」まで「0.5」刻みで入力することができます(「4.7」などは対応していません)。
また「総合評価」のように1つだけ目立たせたい場合には[value 4.5 end]というようにendを加えることで、その行だけ水色になります。

1. 関連記事を出力する(横長)

色の設定をする
色の設定をしよう
[kanren id="投稿ID"]

ブログ内の記事へのリンクを貼るときにのみ使用できます。id=の中には投稿IDを入力します(投稿IDは、投稿編集ページのURLを見れば確認できます。post=◯◯の数字が投稿IDとなります。)

応用編

id="15,28"のように半角カンマ区切りで投稿IDを指定することで、複数の関連記事をまとめて貼ることができます。

2. カードタイプの関連記事を出力

ウィジェットの設定をする
ウィジェットの設定をしよう:広告の貼り方も解説
[card id="投稿ID"]

こちらもブログ内の記事へリンクを貼りたいときに使用します。半角カンマ(,)区切りで複数の投稿IDを指定できます。

3. 他サイトへのリンクを出力

参考

力尽きたときの簡単レシピサルワカ

[sanko href="リンク先のURL" title="記事のタイトル" site="サイト名"]

他サイトへのリンクを貼りたいときはこちらを使用します。

オプション

リンク先を別のタブで開くようにしたい場合は[sanko~略~ target="_blank"]というようにtarget="_blank"をショートコード内に追加します。

4. 線を引く


[sen]

記事の途中などで横に線を引いて区切りたいときにはこちらを使います。

5. 点線を引く


[tensen]

さきほどの点線バージョンです。

6. 補足説明

MEMO
ここに文章
[memo title="MEMO"]ここに文章[/memo]

補足したい文章をショートコードで挟んで使用します。このショートコード内でさらに別のショートコードを使用することもできます。title=内の「MEMO」という部分は自由に書き換えることができます。

7. 注意書き

注意
ここに文章
[alert title="注意"]ここに文章[/alert]

注意書きをショートコードではさんで使用します。タイトル部分は自由に書き換えることができます。

8. ソースコードボックス

HTML
<div>TEST</div>
[codebox title="HTML"]<pre><code>ソースコード</code></pre>[/codebox]

こちらはあまり使用する方は多くないかもしれませんが…。ソースコードをユーザーのために表示するボックスです。<pre><code>タグと合わせて使用します。title=""に記載した文字列がボックス上のタブとして表示されます(空欄だとタブは表示されません)。HTMLを貼り付ける場合には、HTMLエスケープツールなどでエスケープした上でタグを貼り付けるようにしましょう。

9. 吹き出し(左に顔)

サルワカくん

ここに吹き出しの中に入れる文を書きます。
[say name="サルワカくん" img="画像のURL"]ここに文章[/say]

名前(name="~")は省略可能です。いちいち画像のURLを貼るのは面倒だと思うので、画像のURLまで含めたショートコードをプラグイン「AddQuicktag」に登録しておくか、メモ帳などに控えておくと良いでしょう。

10. 吹き出し(右に顔)

ここに吹き出しの中に入れる文を書きます。

サルワカくん

[say name="サルワカくん" img="画像のURL" from="right"]ここに文章[/say]

from="right"という文字列を加えると、右側から吹き出しが伸びるようになります。

11. 横並び2列

[yoko2 responsive]
[cell]1列目:画像・文章などをここに[/cell]
[cell]2列目:画像・文章などをここに[/cell]
[/yoko2]

画像や文章、ボックスなどなどを横並び2列で表示できるボックスです。ブラウザサイズが767px以下になると、縦1列に並ぶレスポンシブ仕様となっています。

オプション
responsiveというショーコード内の文字列をまるっと消すと、ブラウザサイズに関わらず常に横2列で並んで表示されるようになります。

12. 横並び3列

2列目だけ文章にしてみました

[yoko3 responsive]
[cell]1列目:画像・文章などをここに[/cell]
[cell]2列目:画像・文章などをここに[/cell]
[cell]3列目:画像・文章などをここに[/cell]
[/yoko3]

さきほどの横並び3列バージョンです。ブラウザサイズが767px以下になると、縦1列に並ぶレスポンシブ仕様となっています。responsiveというショーコード内の文字列をまるっと消すと、ブラウザサイズに関わらず常に横3列で並んで表示されます。

13. YouTubeをレスポンシブで埋め込み

[youtube]
YouTubeのURL
[/youtube]

WordPressで記事にYouTubeを埋め込む場合、スマホで見た際に動画の左右が若干切り取られて表示されてしまいます。このショートコードで埋め込みコードやURLを挟むことで、それを防ぐことができます。詳しくはこちらの記事で解説しています。

ツイートや動画を埋め込む
記事にツイートやInstagram、YouTube動画を埋め込む

一旦中断:ここまで紹介してきたショートコードを簡単挿入

AddQuicktagというプラグインにショートコードを登録しておくと、エディタ上での簡単に挿入ができるようになります。なお、ここまで紹介してきたショートコードが登録されたAddQuicktagのエクスポートファイルを下の記事内で配布しています。よろしければご活用くださいませ。

AddQuicktagで簡単ショートコード挿入
AddQuicktagで簡単にショートコードを挿入しよう

14. モバイルでのみ表示

[mobile]ここにモバイルでのみ表示させるもの
[/mobile]

こちらのショートコードではさんだものは、PCでは表示されず、モバイル(スマホ/タブレット)でのみ表示されるようになります。

15. PCでのみ表示

[pc]ここにPCでのみ表示させるもの
[/pc]

こちらのショートコードではさんだものはモバイルでは表示されず、PCでのみ表示されます。

16. 画像上に文字をのせる

GOOD INNOVATION

[texton img="画像のURL" title="画像上にのせる文字"]

こちらのショートコードで「画像のURL」と「テキスト」を指定すると、画像上の中央に簡単に文字を配置することができます。

17. 指定したカテゴリーIDの記事を好きな数だけ出力

モバイル用フッター固定メニューの設定方法
表の挿入方法とレスポンシブ対応させる方法
SANGOで表を挿入する方法:レスポンシブ対応させるには?
ボタンの挿入方法とデザイン一覧
ボタンの挿入方法と種類一覧
[catpost catid="カテゴリーID" num="出力する記事数"]

「カテゴリーID」と「出力する記事数(例:num="6")」を指定するだけで、そのカテゴリーの記事へのリンクカードが指定数分だけ出力されます。初期設定だと公開日が近い記事順に表示されます。

参考:カテゴリーIDの調べ方

オプション
[catpost~略~ type="card"]とショートコード内に加えるとリンクカードのデザインが縦長の影付きのものになります。

見出しの挿入方法と種類一覧
見出しの挿入方法と種類一覧

また、[catpost~略~ orderby="rand"]と加えると、指定したカテゴリーの中から記事がランダムに出力されるようになります(初期設定だと日付順)。

18. ボタン

ショートコードの種類が多数あるため、別記事にまとめました。

ボタンの挿入方法とデザイン一覧
ボタンの挿入方法と種類一覧

19. 箇条書き

同じく多数の種類があるため、別記事にまとめました。

SANGOの箇条書き種類一覧
記事に様々なスタイルの箇条書きを挿入する

20. ボックス

同じく多数の種類があるため、別記事にまとめました。

SANGOのボックス種類一覧
ボックス・枠を挿入する方法と種類一覧

その他見出しなど

文字の装飾や、SANGOオリジナル見出しの挿入はショートコードではなく、ビジュアルエディタのスタイル設定から行うことができます。詳しくはこちらの記事をどうぞ。

テキストの文字色と色の変更
テキストの装飾とサイズ・色の変更方法
見出しの挿入方法と種類一覧
見出しの挿入方法と種類一覧

 

59 Comments

K

以前、ATLASというテーマを用いていたのですが
今回、こちらのSANGOというテーマを導入させていただきました。
しかし、ショートコードを挿入してもコードがそのまま表示されてしまいます。
また、投稿画面にて、文字が文字化けしてしまいます。
どうしたら良いのでしょうか。

返信する
サルワカくん

ショートコードの前後に装飾が入っていたり、[]が全角だったりするとそのまま表示されてしまうのですが、そのあたりは問題なさそうでしょうか?
もし可能であれば、テキストエディタ(「ビジュアル」ではなく「テキスト」の方)のショートコード前後のあたりをまるっとコピペして教えて頂けますか?

文字化けについては「WP Multibyte Patch」という日本語関係のバグを防ぐための公式プラグインがあるのですが(おそらくデフォルトでインストールされているはず…)、こちらは有効化されていますか?

お手数をおかけしますが、ご確認よろしくお願いします。

返信する
K

お返事頂きまして、ありがとうございます。

ショートコードの件はこちらで解決できました。
お手数をおかけしました。

しかし、文字化けの件は解決できませんでした。
WP Multibyte Patchがインストールされているにも関わらず、文字化けしてしまうという状況です。

返信する
K

アップデートの件、了解致しました。

ありがとうございます。

お手数お掛けして申し訳ございません。

K

何度も申し訳ございません。

先ほど、新しいバージョン(ver1.1.3)をダウンロードさせていただきました。

しかし、文字化けの問題が改善されませんでした。

お手数お掛けしますが、ご確認お願い致します。

返信する
サルワカくん

もしかするとキャッシュが残っているかもしれません。
ビジュアルエディタを開き、Safariのメニューバーの【開発】⇒【キャッシュを空にする】をクリックし、その後再読込して頂いても良いですか?

返信する
A

お世話になります。
他のWPテーマで可能な、記事が古くなるので投稿日を非表示にする方法と
H1の下線wwwという波線が消えません。
デザインに合ってないと思いますのでH1の波線の下線を
変更する方法を教えていただけますでしょうか?
以上、よろしくお願いいたします…

返信する
サルワカくん

以下のCSSを子テーマのstyle.cssに追記すれば波線は消えます。
.nothumb .entry-meta:after, .nothumb .page-title:after {
content: none;
}
ご確認よろしくお願い致します。

返信する
T

失礼します。
SANGOにてサルワカさんの「要素を表示・非表示ボタン」のカスタマイズをしたのですが、隠れた要素が出てきません。プラグインはすべて止めたのですが、改善されません。SANGOとは相性が悪いのでしょうか・・?

返信する
T

お世話になります。どうやら自動整形で上手く作動しなかったようです。
自動整形をOFFにしたら上手く動くようになりました。お手数おかけしてすみません。

返信する
ヒロイキ

お世話になります。
お忙しいところ申し訳ありませんが、質問をお願いします。
ショートコードの吹き出しについてですが、丸いアイコンのサイズは変更できませんか?
もう少し小さめの丸いアイコンにしたいと思っています。
よろしくお願いします。

返信する
サルワカくん

子テーマのstyle.cssに以下のCSSを追加してみてくださいませ。2つの100pxの値を合わせて変えることで、より細かな調整ができます。

@media only screen and (min-width: 481px) {
.faceicon {
width: 100px;
}
.chatting {
width: calc(100% – 100px);
}
}/*END min481px*/

返信する
ヒロイキ

お忙しい中返信いただきありがとうございます!
無事希望通りの大きさにすることができました。
本当ありがとうございました。

返信する
Coco

トップページ用の固定ページをカスタマイズしているのですが、カテゴリ別ページを表示できるショートコードのように、最新記事を表示できるショートコードはないでしょうか?

返信する
サルワカくん

現時点では以下のようにカテゴリーIDを全て指定するしか無いですね…
(全て指定すれば、サイトの最新記事と同じになるかと思います)。
[catpost catid="1,2,3,4,5,6,7,8,9,10" num="5"]

今後のアップデートでの実装を検討します。

返信する
Coco

何度もすいません。
関連記事のショートコードなんですが、これをtarget=”_blank”に設定するにはどうしたらいいのでしょうか?
ショートコード内にtarget=”_blank”を入れても新規タブが開かれません。

返信する
サルワカくん

申し訳ありませんが、サイト内の関連記事リンクについては
target=”_blank”に対応しておりません。
サイト内の記事を別タブで開くケースは少ないであろうという予想
+モバイルで閲覧した場合にtarget=”_blank”を使うとユーザビリティが低下する可能性があることからあえてこのようにしていました。
が、ケースバイケースだと思うので、次のアップデートで使えるようにしようと思います。

返信する
子育てイルカ

吹き出し(左に顔)を見出し3の直前に使用すると、デザインがくっついてしますのですが。通常の文字や1行分スペースを入れれば改善されるのですが…。

返信する
サルワカくん

私の方で試してみたのですが、くっついてしまう現象が再現できませんでした。
該当するページがありましたら、URLを教えて頂けると幸いです。

返信する
サルワカくん

遅くなりました。
https://cdn.blog.st-hatena.com/css/globalheader.css
というCSSが読み込まれているのですが、こちらは認識されていますか?
このファイルに書かれているCSSが悪さをしています。
もしこちらを残したいのであれば、
.say.left {float:none!important}
を子テーマのstyle.cssに追記してくださいませ。

返信する
子育てイルカ

ありがとうございます。はてなからワードプレスに移行してきたときのCSS?が残っていました。
importantで無事に表示されるようになりました。

tomo

SANGOを購入させて頂きました。
ふきだしのアバターについて質問があります。
縦横150px〜のアバターを表示させたいのですが、縮小されずそのままのサイズで表示させることは可能でしょうか?
また、アバターの周囲の丸い円を消す事は可能でしょうか?
お忙しい中申し訳ございません、ご教示頂ければ幸いです。宜しくお願い致します。

返信する
サルワカくん

一つ目の質問については、以下のCSSで対応できるかと思います。ただし、スマホで見たときにアンバランスになる可能性があることはご了承ください。
.entry-content .faceicon {
width: 150px;

}
.entry-content .chatting {
width: calc(100% – 150px);
}

周囲の枠線は
.entry-content .faceicon img {
border: none;
}
で消すことができます。

返信する
tomo

entry-content .faceicon {
width: 150px;

}

.entry-content .faceicon img {
border: none;
}
で解決致しました。お忙しい中、本当に有難うございます。
立て続けの質問で申し訳ございません、現在カスタマイズ中なのですが、子テーマの固定ページにテンプレートの種類メニューが無いのですが、これは仕様でしょうか?(親の方にはありました)
また、下からふわっと上がってくるアニメーションをオフにすることは可能でしょうか?

返信する
tomo

>子テーマの固定ページにテンプレートの種類メニューが無い
申し訳ありません、こちら解決致しましたm(_ _)m 

返信する
ここまえ

こんばんは
関連記事のショートコードを使用しました。
すると思ったように表示されないです。
http://kokomae.com/what-to-see
このようになってしまいます。
どのように修正すればよろしいでしょう?

返信する
サルワカくん

お手数をおかけしますが、よくある質問の「ショートコードで挿入した関連記事リンクが分裂してしまう」をご覧頂けますでしょうか。
よろしくお願い致します。

返信する
新田

昨日SANGOを購入させていただきました。目次16番の、「画像の上に文字」についてご質問よろしいでしょうか。
画像の上に文字を表示させる際、自動的に中央寄せになりますよね。
これを、左寄せにするにはどのような方法が有効でしょうか。
また、文字の大きさを変える方法もあれば知りたいです。

返信する
サルワカくん

左寄せにするためには子テーマのCSSなどに
#main .textimg p {
text-align: left;
}
と追加すれば良いと思います。

返信する
新田

先ほどの続きです。また、改行するとなどの余計な文字が表示されてしまい、実質1行しか文字を入れられなくなっています。改行して長めの文章を入れるにはどうしたらよいでしょう。

返信する
サルワカくん

「改行するとなどの余計な文字が表示されてしまう」
すみません、どういうことでしょうか。具体的な現象が生じているページを教えて頂けると助かります。

返信する
くろねさんの紹介で買いました

すばらしいテンプレートありがとうございます。
昨日購入いたしました。

アイキャッチを設定せずに、サイドメニューやランキングに画像を表示するには設定があるのでしょうか?

例 → https://kurone43.com/first-10article/

返信する
サルワカくん

お世話になっております。
アイキャッチ画像が登録されていない記事に関しては、
外観⇒カスタマイズ⇒デフォルトサムネイル画像で登録した画像が使用されるようになっております。
ご確認よろしくお願い致します。

返信する
素晴らしいテンプレートです

お世話になります。

「他サイトへのリンクを出力」で「参考」を「みる」などに文言変更はできますでしょうか?

返信する
サルワカくん

ショートコードを新設してくださいませ。
下記のコードを小テーマのfunctions.phpに貼り付け「見る」で表示したい部分には「sanko href="~"」ではなく「sanko2 href="~"」というように書くようにすればOKです。


add_shortcode('sanko2','sng_othersite_link_ver2');//参考リンク その2
function sng_othersite_link_ver2($atts) {
	$href = isset($atts['href']) ? esc_url($atts['href']) : null;
	$title = isset($atts['title']) ? esc_attr($atts['title']) : null;
	$site = isset($atts['site']) ? '<span>'.esc_attr($atts['site']).'</span>' : "";
	$target = isset($atts['target']) ? 'target="_blank"' : "";
	$rel = isset($atts['rel']) ? ' rel="nofollow"' : "";
	if($href && $title) {
		$output = <<<EOF
		<a class="reference table" href="{$href}" {$target}{$rel}>
			<div class="tbcell">見る</div>
			<p class="tbcell">{$title}{$site}</p>
		</a>
EOF;
	return $output;
	} else {
		return '<span class="red">参考記事のタイトルとURLを入力してください</span>';}
} //END sng_othersite_link

返信する
とりけら

こんにちは。

新着記事の表示で [catpost num="出力する新着記事数"] を利用する際に、
日付を表示する方法を教えていただけますか? 

よろしくお願いします。

返信する
あさり

初めまして。最近SANGOを購入しブログを始めたばかりのワードプレス初心者です。
ショートコード一覧にないようなので質問です。
サルワカさんのブログの方でよく画像の横に吹き出しで説明をされているのですが、それはどうしたらできるのでしょうか?(顔の吹き出しではありません。)
ショートコードで2列にはできたのですが、説明文を吹き出しで囲うことができません。
お忙しいところ大変恐縮ですが、教えていただけると助かります。
よろしくお願いいたします。

返信する
サルワカくん

すみません、そちらの機能はSANGOでは搭載しておらず…。
CSSが複雑なうえ、中に入れるもの次第ですぐにデザイン崩れを起こしてしまうので。
ご了承頂けると幸いです。

返信する
あさり

わかりました!
ご丁寧にありがとうございます!
テンプレートとても気に入っています☆
これからもよろしくお願いします!

返信する
素晴らしいテンプレートです

素晴らしいワードプレステーマをありがとうございます。

今後のアップデートで下記をお願いできたらと思い提言させてください。

すでにある新着記事の表示ショートコードですが、アイキャッチなしの、日付あり+タイトルをお願い致します。

返信する
素晴らしいテンプレートです

お返事ありがとうございます。

お忙しい中ではございますが、ご検討を何卒よろしくお願いいたします。

返信する
ターク

先日購入させていただきました。使いやすく、美しく、カスタマイズも簡単で素晴らしいテンプレートで、大変満足しております。
ひとつ気になったのですが、目次のアイコンの色を変えるには、CSSのどの部分を弄れば良いでしょうか?
もしかしたらどこかに記載されていたかもしれませんが、御教授お願いします

返信する
サルワカくん

ありがとうございます。
目次のアイコンにはメインカラーが使用されます。

#toc_container .toc_title:before {
    background-color: 色コード;
}

とCSSに追記することで、アイコン色を変えることができます。

返信する
素晴らしいテンプレートです

いつもお世話になっております。

グローバルメニューにて、「カレントメニュー表示(カレントメニューのクラスに”current”付与など)」を実装するにはどのような方法が適切か、もしアドバイスいただけましたらお願いいたします。

CSSで実装できるのか、それとも、jQueryなのか、考えて探しております。

返信する
サルワカくん

カレントメニューには、current-menu-itemというクラス名が付与されるWordPressの仕様となっています。
Chromeの検証機能を使って、メニュー周辺のクラス名を見てみると良いかと思います。

返信する
素晴らしいテンプレートです

お忙しい中、お返事いただきありがとうございます。

そのような情報を頂き本当に助かります。

どうもありがとうございました。試してみます。

返信する
素晴らしいテンプレートです

お世話になっております。

非常に使いやすいテンプレートで、かつデザインの応用が効くので非常に助かっております。

1点、質問がございます。

「横並び4列のレスポンシブ」はできないでしょうか。

何卒ご検討をよろしくお願い致します。

返信する

コメントを残す

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