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で表を挿入する方法:レスポンシブ対応させるには? SANGOでアフィリエイトボタンを使う【SANGO】アフィリエイトリンクを改変せずにボタンを使う方法 AddQuicktagで簡単ショートコード挿入AddQuicktagで簡単にショートコードを挿入しよう
[catpost catid="カテゴリーID" num="出力する記事数"]

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

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

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

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

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

18. ボタン

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

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

19. 箇条書き

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

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

20. ボックス

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

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

その他見出しなど

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

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

 

116 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*/

返信する
ヒロイキ

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

返信する
あいうえお

ワードプレスの「外観」「テーマの編集」より記載されているcssを「sangochild」に追記し、
width: 100px;とwidth: calc(100% – 100px);を50px等に変更してみましたが吹き出しのアイコンに変化がありません。
何か原因が考えられるでしょうか?
初歩的な質問ですいません。

返信する
あいうえお

すいません解決しました
ブラウザのキャッシュを削除したら反映されました。

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列のレスポンシブ」はできないでしょうか。

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

返信する
tomoトモ

使い心地とみやすさの素晴らしいテンプレートをありがとうございます。

「会話吹き出し」で表示されるimg タグにalt タグを入れたく、 style-shortcode.php を拝見いたしました。

当方にて変更はできそうなのですが、親テーマなので、アップデート後上書きされるかと思い躊躇しています。

子テーマ側で制御できないかどうか調べているとこですが、そのようなことは可能なのでしょうか。

返信する
サルワカくん

お世話になっております。
その場合、別のショートコードを作った方が何かと自由に編集出来て良いかと思います。
子テーマのfunctions.phpに以下のコードを貼り付ければ、saybという名前のショートコードで吹き出しが使えるようになります。
(機能はsayと同じ。★の部分にaltテキストを入れればOKです。)

/*********************
新会話ふきだし
*********************/
add_shortcode('sayb','say_what_new');
function say_what_new($atts, $content = null) {
	if($atts) {
		$img = (isset($atts['img'])) ? esc_url($atts['img']) : null;
		$name = (isset($atts['name'])) ? esc_attr($atts['name']) : '';
		if(isset($atts['from'])){
			$from = ($atts['from']=="right") ? "right" : "left";//入力が無ければleftに
		} else {
			$from = "left";
		}
		if($img && $from =="right"){//右に吹き出し
			$output = <<<EOF
				<div class="say {$from}">
					<div class="chatting"><div class="sc">{$content}</div></div>
					<p class="faceicon"><img src="{$img}" alt="★"><span>{$name}</span></p>
				</div>
EOF;
		} else {//左に吹き出し
			$output = <<<EOF
				<div class="say {$from}">
					<p class="faceicon"><img src="{$img}"><span>{$name}</span></p>
					<div class="chatting"><div class="sc">{$content}</div></div>
				</div>
EOF;
		}//endif
	return $output;
	}// endif $atts
}
返信する
tomoトモ

誠にありがとうございます!シンプルな解決方法に頭があがりません。
こねくりまわしておりました。

それぞれのショートコードを吐き出す毎に、alt を変更したく
$alt = (isset($atts['alt'])) ? esc_attr($atts['alt']) : '';

を加えました。

いちいち面倒ですが、AddQuicktag に登録するのでそんなに変わらないかと思います。

ありがとうございます。

返信する
サルワカくん

柔軟に使える形になっていて良いですね!
たしかにAddQuickTagも合わせておけば、なお楽になりそうです。
ご報告ありがとうございました。

返信する
SANGO最高

テンプレートカスタマイズの詳細設定で、
「記事のタイトル下にアイキャッチ画像を表示しない」にチェックしても
固定ページでは記事タイトル下にアイキャッチが表示されてしまいます。

固定ページの場合は他の設定が必要なのでしょうか?

返信する
初めての有料テーマ☆

こんにちは。優しいデザインに惹かれ導入することにしました!

[kanren id="投稿ID"]のショートコードを使いたいのですが、以前のテーマを使っている時にパーマリンクを任意で設定していたので、「post-~~」の部分が丸々ローマ字になっていて関連記事にすることができませんでした。

そこで、新たに「post-~~」となるように再入力して設定してみたのですが、うまく表示できません。
これからはパーマリンクについてはいじらないようにしますが、以前の記事を反映させるのは難しいでしょうか?

返信する
初めての有料テーマ☆

サポートされているとは知らずスイマセンでした。
全てのID確認することができ、無事リンクを貼る事もできました。

BMもして次からは楽に作業できそうです(^^)
ありがとうございました。

返信する
MEE

初めまして。最近SANGOを購入しブログを始めたばかりです。
[rate]
[value 3.5]○○[/value]
[/rate]
で表示させると、BOX枠が一緒に表示されます。
枠の非表示はどの様にしたらいいですか。

返信する
サルワカくん

そちらは仕様ですね。消す場合には子テーマのstyle.cssなどに

.entry-content .rate-box {
 border:none;
}

を追加すればOKです。追加後はブラウザのキャッシュの削除をお願いします。

返信する
ささき

投稿ページで1カラムにした際に、関連記事を表示させないようにしたいと思っております。
色々調べていると「display:none;」で非表示に出来るかと思い
.one-column .related-posts {
display:none;
}
と入れたのですが、何が間違っているのかさっぱりわかりません。
お忙しいところ恐縮ですが教えていただけますでしょうか。

返信する
ささき

すみません。
先ほど質問したものですが、全角スペースを半角スペースにしたら出来ました。
お騒がせしました。

返信する
MEE

再度質問させていただきます。
SANGO用の子テーマでカスタマイズした内容ですが、PC表示では変更内容が適応されますが、スマホ表示では変更が適応されません。どの様に対処したらいいご回答お願いします。

返信する
MEE

PCとスマホ表示の同期化はentry-option.cssの元データの下に、変更内容を記入する事で改善できました。
しかしこの方法でカスタマイズを繰り返していいでしょうか?

返信する
MEE

度々申し訳ございません。
アドバイスより色々調べましたが、やはり原因がよく分かりませんでした。

例えば下記2点を変更しましたが、記述に間違いがありますか。PC表示では変更されてます。

/*h2変更*/
.entry-content h2{
position: relative;
color: white;
background: #6088C6;
line-height: 1.4;
padding: 0.5em 0.5em 0.5em 1.8em;
}

.entry-content h2:before {/*疑似要素*/
font-family: FontAwesome;
content: “\f14a”;
position: absolute;
left : 0.5em; /*左端からのアイコンまでの距離*/
}

/*アイコンの色変更*/
.fa-bl:before
{
color: #4f96f6 ;
}

また一番最初に変更した『タイトル下のギザギザを削除』ですが、当初スマホ表示されましたが、1週間位でスマホ表示されない様になってました。
ブラウザー以外のキャッシュが原因ですか?

返信する
サルワカくん

CSSは問題なさそうなので、おそらくプラグインが原因な気がします。
キャッシュ系のプラグインは入れてますか?過去のページデータが表示されているのかもしれません。
①一度プラグインを全てオフにして直るか確認
②直る場合、1つずつプラグインを有効に戻して、原因となっているプラグインを探す
という手順を踏んでみることをおすすめします。
原因となっているプラグインが分かったら、その設定を見直してみると良いと思います。

プラグインが原因では場合、.entry-contentの前に半角スペースを空けてbodyと入れてみると良いかと思います。

返信する
MEE

やはり改善されません。
キャッシュ系のプラグインは入れてませんが念の為、全てのプラグイン停止しましたが、ダメでした。また半スペースbodyを入力すると、今度は変更が反映されません。
お手数ですが、作成してるサイトを1度ご確認お願いします。

返信する
サルワカくん

あー、なるほど。原因が分かりました。

@media only screen and (min-width: 768px) {
〜
}

というコードが子テーマ内にあると思います。
こちらの{〜}の中に書かれたコードは、デバイスサイズが768px以上の場合にのみ適用されます。
.entry-content h2のコードがこの中に入ってしまっています。

  #logo, #logo img, .desktop-nav li a {
       height: 120px;/*768px〜で見たとき用サイズ*/
       line-height: 120px;/*768px〜で見たとき用サイズ*/
    }
具体的には、このコードの後に、}が必要です。なお、style.cssの中にHTMLが書かれているようなので、そちらは消しておいた方が良いと思います。
返信する
MEE

 無事スマホ表示されました。ありがとうございました。
ご指摘通り、@media only screen and (min-width: 768px) { ~ の }を追加しましたら、改善できました。初歩的な記載ミスで大変ご迷惑お掛けしました。今回の件で、cssの正確さが重要である事を学べました。
 サルワカさんの『SANGO』は初心者でも分かり易く、素敵なテンプレートですので、今後のサイト作成が楽しみです。本当にありがとうございました。

返信する
サルワカくん

ご報告ありがとうございます。
いえ、解決に手間取ってしまい申し訳なかったです。
そう言って頂けるととても嬉しいです。
よろしくお願いします!

返信する
LIBRA

こんにちは。SANGOの感性の素晴らしさと、
初心者にも優しいカスタマイズガイドにとても助けられています。

写真と文章の2列横表示、または3列横表示を”詳しく見る”のボタンと共に
使っているのですが、
カーソルがボタンの近くを通ると、写真や文章が左に動くという現象が起きます。
これはどのように改善できますでしょうか??

返信する
サルワカくん

こんにちは。
実際に私のブラウザ(Chrome/Safari/FireFoxの3つ)で確認してみたのですが、
そのような現象が再現できませんでした。
どのブラウザで見た時に問題が起きますか? Internet Explorerでしょうか?

返信する
サルワカくん

問題があるのはIEで見た時の表示のようですね。
IEは色々なバグがあるので・・・。

.shtb3 .cell img {
width:100%;
}

を追加してみて頂けますか?

返信する
LIBRA

ただでさえ綺麗なSANGOのテーマがさらに綺麗に見えたので、
これを機にChromeに切り替えました!
ありがとうございました☆

サルワカくん

そう言って頂けると嬉しいです!ありがとうございます!

lan

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

吹き出しのアイコンを丸くせずにそのままのサイズで表示させるにはCSSのどこを弄ればよろしいでしょうか?

返信する
サルワカくん

子テーマのstyle.cssなどに

.faceicon img {
border-radius: none;
}

と追加すれば四角になります。もし線を消したい場合は、

.faceicon img {
border-radius: none;
border:none;
}

としてください。

返信する
lan

お返事ありがとうございます。
子テーマのcssを指摘通りに変更したのですが、画像がどうしても楕円形に表示されてしまいます。アイコン画像ではなく、スクショ画像を使った為、画像サイズが大きすぎるのでしょか?

返信する
サルワカくん

本当ですか・・・。可能であれば、該当のページのURLを教えて頂けますか?確認します。

返信する
サルワカくん

ありがとうございます。

.faceicon img {
    border-radius: none;
}

というところがあると思うのですが、この中の border-radius: none;border-radius: 0!important;にしてみて頂けますか?

lan

ご指摘通り、タグを変更したら解決できました。
更に画像のサイズを拡大したりするににはどうすればよろしいでしょうか?

サルワカくん

このコメントのCSSをご利用頂ければサイズ変更ができます。
2つの150pxの値(=画像サイズ)をお好みで調整してくださいませ。

lan

度々すみません。
画像のサイズを変更したのですが、吹き出し部分のサイズが固定されてしまっていて、意図した通りに表示されません。
吹き出し部分のサイズも画像のサイズに合わせて調節するにはどう記述すれば良いのでしょうか?

LIBRA

サルワカさん、こんにちは。

度々の質問で申し訳ないのですが、
フォローボックスのカスタマイズでFacebookのURLを記入しても
記事上に反映されません。

Facebookのフォロワー設定は公開になっています。
何か別の原因があるのでしょうか??

返信する
サルワカくん

申し訳ないです、そちらはFacebookページのフォローボタン用です・・・。個人アカウントへのフォローボタンとすることはできないようです。

返信する
LIBRA

あ!なるほどです。

フォローボックスが可愛くてどうしても使いたいので、Webサイト用Facebookページをつくることにします。
ありがとうございました!

返信する
としま

サルワカさんこんばんは。
夜分遅く申し訳ありませんが色の変更方法について教えて頂きたい事がありコメント致しました。

どの色かといいますと…
フォーマット→スタイル→文字のスタイル→ラベルの部分です

デフォルトだとメインカラーとアクセントカラーしか使うことができないようになっているようです。

このラベルの色を他の色へと変更する方法はあるのでしょうか?お忙しい中申し訳ありませんが宜しくお願い致します。

返信する
サルワカくん

なるほど。メインカラーとアクセントカラーの色を変えるイメージですかね?

.labeltext.accent-bc {
  background-color: #色コード; /*アクセントカラーのラベル色を変更*/
}
.labeltext.main-bc {
  background-color: #色コード; /*メインカラーのラベル色を変更*/
}

というCSSでいけるかと思います!

返信する
shunP

サルワカさん教えてください!
吹き出しを文字の幅で表示させたいです。

例えば短い言葉をつぶやいた際に現状だと、
画面いっぱいまで吹き出しが表示されますよね。

クロームの検証から自力で弄ってみたものの、なかなか上手く表示されません。
.sc{(~省略) fit-content;}
と追記してみましたが駄目でした。

カスタマイズ方法をご教示頂けないでしょうか?

返信する
サルワカくん

なるほど、CSSに

.right {
    text-align: right;
}
.sc {
    display: inline-block;
    text-align: left;
}

を追加してみて頂けますか?

返信する
としま

サルワカさんこんばんは、先日質問をさせていただきましたとしまと申します

メインカラーとアクセントカラーの色の変更も簡単にできました。それでまた質問させて頂きたいのですが、このメインカラーとアクセントカラーに加えて何色かラベルカラーを追加したいのですがその方法を教えて頂けないでしょうか。

何卒宜しくお願い致します。

返信する
サルワカくん

まずCSSで以下を追記します。色コードはお好みで。


.my-label {
    display: inline-block;
    margin-right: 5px;
    padding: 5px;
    color: #fff;
    font-size: .9em;
    font-weight: bold;
    line-height: 1;
    background: #色コード;
}

プラグイン「AddQuicktagを」ご利用ですか?
以下のタグを登録して

<span class="my-label">ラベル</span>

エディタ上で呼び出せば、さきほど登録した色のラベルが使えるようになります。
ただし、エディタ上の見た目までは変化しないので要注意ですが・・・

返信する
うずくまる

うっとりするようなWordpressテーマをありがとうございます。

1. 関連記事を出力する(横長)
について質問します。

サムネイルと題名の他に、
日付を表示させたいのですが、可能でしょうか。

ご回答よろしくお願いします。

返信する
サルワカくん

すみませんが、対応していません。
ただし、次のアップデートで、日付も表示するタイプの関連記事ショートコードを追加する予定です。

返信する
うずくまる

ご返信ありがとうございました。

次回のアップデートぼくにとって最高のアップデートになると思います。SANGOを導入してよかったと本当に思います。

ありがとうございます。

返信する

コメントを残す

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