Ver1.5 Released !

SANGOのショートコード一覧

SANGOのショートコード一覧

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

ver1.4〜 アコーディオン機能

隠したいコンテンツをここに記載

以下のショートコードをエディタの好きな位置に挿入することで、上のようなアコーディオンを使用できるようになりました。

[open title='ここにタイトル']
隠したいコンテンツをここに記載
[/open]

ver1.4〜 タイムライン機能

  • STEP.1
    フタを開ける
    カップラーメンのフタを半分だけ空けます。
  • STEP.2
    お湯を注ぐ
    うっすらと見える線の位置までお湯を注ぎます。
  • STEP.3
    3分間待つ

    タイマーを3分セットし、じっと待ちます。

  • 完成!
以下のショートコードを利用することで、上のようにタイムライン形式のレイアウトにすることができます。画像などを挿入することももちろん可能です。なお、ショートコード内のlabelやtitleは任意指定です。空欄にした項目は表示されません。
[tl]〜[/tl]のカタマリはいくつでも増やすor減らすことができます。
[timeline]
[tl label='STEP.1' title='タイトル1'] 中身1 [/tl]
[tl label='STEP.2' title='タイトル2'] 中身2 [/tl]
[tl label='STEP.3' title='タイトル3'] 中身3 [/tl]
[tl label='STEP.4' title='タイトル4'] 中身4 [/tl]
[tl label='STEP.5' title='タイトル5'] 中身5 [/tl]
[/timeline]

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

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

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

応用編

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


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

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

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

別スタイルのカード

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

ショートコード名をcard2に変えると、上のような日付入り関連記事カードを挿入できます。Ver1.4〜使用できるショートコードです。


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」に登録しておくか、メモ帳などに控えておくと良いでしょう。

TIPS

Ver1.4〜は、外観⇒カスタマイズ⇒詳細設定からデフォルトの吹き出し画像と名前を登録しておくことができます。[say]ここに文章[/say]と入力したときに、デフォルトで登録されている画像・名前が使用されます。


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動画を埋め込む

14. モバイルでのみ表示

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

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


15. PCでのみ表示

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

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


16. 特定のカテゴリーの記事でのみ表示

ver1.3〜 例えば、[category id="4"]こんにちは![/category]と入力すると、カテゴリーIDが4の記事のみで「こんにちは!」と表示されるようになります

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

なお、id="2,5"のようにIDは半角カンマ区切りで複数指定することができます。

使いどころ

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

▼使用例

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

特定のタグを持つ記事でのみ表示

ver1.5で追加されたショートコードです。簡単に言うと「特定のカテゴリーの記事でのみ表示」のタグ版です。

[onlytag id="タグID"]
指定したタグを持つの記事でのみ表示したいものを記入
[/onlytag]

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

GOOD INNOVATION

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

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


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

【CSS】見出しやリストのカスタマイズ時にトップページにまで反映されてしまう時の対処法 ボタンの挿入方法とデザイン一覧ボタンの挿入方法と種類一覧 テキストの文字色と色の変更テキストの装飾とサイズ・色の変更方法
[catpost catid="カテゴリーID" num="出力する記事数"]

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

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

画像のサイズを変えたり影をつけたりする方法 画像のサイズ変更や影をつける方法

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


19. 新着記事を好きな数だけ出力

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

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

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

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

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

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

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

21. レビューボックス

ver1.2〜 下のような評価テーブルを簡単に作成することができます。

この本の評価
読みやすさ
(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を加えることで、その行だけ水色になります。

22. ボタン

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

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

23. 箇条書き

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

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

24. ボックス

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

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

その他見出しなど

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

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

AddQuicktagでショートコードを簡単挿入

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

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

 

168 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}>
			<span class="tbcell refttl">見る</span>
			<span class="tbcell refcite">{$title}{$site}</span>
		</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を導入してよかったと本当に思います。

ありがとうございます。

返信する
ねね

吹き出しについて質問させてください。

吹き出し(右に顔)の中にいれる文章を太字にすると、吹き出しとアイコン全体が、左に寄ってしまいます。

[say name="なまえ" 画像URL" from="right"]文章[/say]

このように記述すると、全体が左によります。

ちなみに、

[say name="なまえ" 画像URL" from="right"]文章[/say]

このように記述すると、左には寄りませんが、吹き出しの枠が、言葉に合わせたサイズではなく、画面いっぱいの大きなサイズになります。

できれば、言葉の長さに合わせた枠にしたいので、解決方法を知りたいです。
何か解決方法はありますでしょうか?
よろしくお願いいたします。

返信する
サルワカくん

「吹き出しの枠が言葉に合わせたサイズ」になるのはVer1.4〜になります。アップデートはお済みですか?

返信する
ねね

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

アップデートは済み、最新版の状態です。

吹き出しの、顔が左の場合は、問題なく「吹き出しの枠が言葉に合わせたサイズ」になっております。

顔が右の場合だけ、うまくいきません。

何か考えられる解決方法はありますでしょうか…?

返信する
サルワカくん

こちらでは同様の現象が確認できないのですが、問題の起きているページのURLを教えて頂けませんか?

返信する
サルワカくん

確認しましたが、SANGOのVer1.3.3が適用されているようです。
外観→テーマでチェックしてみるとわかるかと思います。
アップデートができていないようなので、再度Ver1.4のファイルをインストールして頂けますか?

ねね

最新版にアップデートすることによって、解決しました。
(自動でアップデートの案内がくるものと思い込んでおりまして、案内が来てないから最新だろうと思っておりました…。確認不足ですみません。)

ありがとうございました!

サイソン

サルワカ様、いつもお世話になっております。
Ver 1.4から導入された日付入り関連記事カード[card2]についての質問です。

日付を投稿日ではなく、更新日に変更したいのですが、
CSSのどの部分をいじればよろしいのでしょうか?

サポート対応外の場合は
[card2]のCSSが書かれている位置だけでも教えていただけると幸いです。
お忙しいところ恐縮ですが、よろしくお願いいたします。

返信する
サルワカくん

なるほど。更新日で表示する新しいショートコードを作る方法を載せます。
子テーマのfunctions.phpに追記してください。

//カード横長の関連記事(更新日で表示)
add_shortcode('card2mod','sng_longcard_link_mod');
function sng_longcard_link_mod($atts) {
	$id = isset($atts['id']) ? esc_attr($atts['id']) : null;
	$output = '';
	if($id){
		$ids = (explode(',',$id));//一旦配列に
	}
	$target = isset($atts['target']) ? ' target="_blank"' : "";
	if(isset($ids)) {
	foreach ($ids as $eachid) {
			$img = (get_the_post_thumbnail($eachid)) ? get_the_post_thumbnail($eachid, 'thumb-520') : '<img src="'.featured_image_src('thumb-520').'">';
			$url = esc_url(get_permalink($eachid)); //URL
			$title = esc_attr(get_the_title($eachid));
			$time = get_the_modified_date('Y.m.d',$eachid);
			if($url && $title) {
			$output .= <<<EOF
	          <a class="c_linkto longc_linkto" href="{$url}"{$target}>
	            <span class="longc_img">{$img}</span>
	            <span class="longc_content c_linkto_text"><time class="longc_time dfont"><i class="fa fa-clock-o"></i> {$time}</time><span class="longc_title">{$title}</span></span>
	          </a>
EOF;
			 }//endif
      } //endforeach
      }	else {$output = '関連記事のIDを正しく入力してください';}
      return $output;
} //END カード横長の関連記事(更新日で表示)

記事内に記載するcard2というショートコード名をcard2modに変えると、更新日表示のカードが挿入できます。

返信する
サイソン

サルワカ様、返信いただきありがとうございます。

早速コードを追加してみたところ、無事反映されました!
これからもSANGOを愛用させていただきます。
本当にありがとうございました!

返信する
オスギ

サルカワさま、お世話になります。
バージョン1.3.1から導入された「新着記事を好きな数だけ出力」「指定したタグを持つ記事を好きな数だけ出力」のことでご質問です。
カテゴリーIDやタグいずれかを絞って出力可能だと思うのですが、カテゴリーIDとタグを併せて絞り込む機能はありませんでしょうか。
よろしくご教授ください。

返信する
オスギ

サルワカさま、迅速なお返事ありがとうございました。
いつかそのような機能が追加されることを期待しております。
あとお名前を間違えてしまい申し訳ありませんでした(^0^;)

返信する
田中

お世話になっています。
質問お願いします。

トップページのことですが、トップページ記事一覧上ウィジェットでビジュアルエディターを使ってトップページコンテンツを作ったのですが、なぜか画像が左に寄ってしまいます。(トップページは2カラムです)

どうやったら中央寄せになりますか?

返信する
サルワカくん

ビジュアルエディタに中央寄せのボタン(
)があると思います。
画像付近を選んでこちらのボタンを押せば中央寄せになると思います。

返信する
豊田

広告の非表示方法について質問があります。
「この記事では広告を非表示」にチェックを入れた際に「記事タイトル下広告」や「記事中広告」、「記事コンテンツ後広告(モバイル)」は非表示になるのですが、アドセンス関連記事型広告だけは表示されたままになってしまいます。
そこで、「この記事では広告を非表示」にチェックを入れた際にアドセンス関連記事型広告も非表示にしたいのですが、可能でしょうか。

返信する
サルワカくん

おっしゃる通りですね。
次のアップデートで対応しようと思います。
現在の対応として、親テーマ内の「parts」⇒「single」⇒「entry-footer.php」の20行目の

<?php dynamic_sidebar( 'ads_footer' ); //関連記事広告 ?>

を以下に書き換えることで、イメージ通りになると思います。

<?php if(!get_post_meta( $post->ID, 'disable_ads', true ) && is_active_sidebar('ads_footer')) dynamic_sidebar( 'ads_footer' ); //関連記事広告 ?>

こちら次回のアップデートで反映させるので、親テーマのファイルを直接編集して頂いて構いません。お手数をおかけしますがよろしくお願い致します。

返信する
池田

先日、他のブログからWordpressに移行してSANGOを使い始めました。
ショートコードで画像入りの吹き出しを使用したいのですが、画像のみ表示されません。

・下書きのプレビューの段階で表示されない。公開では試してません。
・画像以外の文字・吹き出し枠は表示される
・テキスト画面でショートコードを入力
・画像URLはメディアライブラリか→ファイルの詳細からコピー
・画像サイズは274 × 274、70×70、60×60などいろいろ試しました。
・デフォルトのショートコードでもデフォルト画像が表示されません
・子テーマを使用

お手数おかけします。

返信する
サルワカくん

記事を拝見したところ、表示されているようなのですが…
別の部分でしょうか。
ご確認よろしくお願いします。

返信する
池田

サルワカ様、早速の返信ありがとうございます。

今の公開記事で表示されているのは、移転前のはてなブログで書いていた記事です。SANGOのショートコードは使用していません。
その時使用していたコードでは、画像の下に名前が表示できない(やり方が分からない)のと、利便性が悪いため、SANGOのショートコードの吹き出しを使用したいです。
下書きのプレビューで画像が全く表示されないので、記事は公開していません。
試しに公開した方が良いでしょうか?

返信する
サルワカくん
.entry-content p:first-of-type img:first-of-type {
 display:none
}

というCSSを追加されていますよね。
カスタマイズで非表示にしてしまっているようです。

返信する
あにかぶ

いつもSANGOを使わせていただいています。

お忙しいところ申し訳ないのですがお聞きしたいことがあります。

サルカワのように記事の角の部分を丸くしたいのですがどのようにすれば良いのでしょうか?
よろしくお願いします。

返信する
サルワカくん
@media only screen and (min-width: 768px) {
 #entry {
    border-radius: 20px 20px 0 0;
 }
}

でいけると思います。

返信する
豊田

人気記事ランキングをカテゴリー別で集計したいのですが、WordPressPopularPostsを使わずにsangoをカスタマイズして表示させることはできますでしょうか。
WordPressPopularPostsを使ってしまうと表示速度がどうしても重くなってしまいまして。。。

返信する
サルワカくん

すみませんが、カテゴリー別集計には対応していません。
(それをやり始めると結局遅くなってしまうので)

返信する
てゃんきょう

素晴らしいテンプレートをありがとうございます。
私の場合は、もう関係ないのですが、AddQuicktagでショートコードをインポートできるようなファイルをこのサイトのどこかに設置していただくと、新規ユーザーさんの初期設定が楽に終わるのではないかと思いコメントしました。
既出でしたらすみません。

返信する
sangoオタク

いつもsangoを使わせております。
質問ですが、アコーディオンを目立つように色を変更したいのですが、可能でしょうか?

返信する
サルワカくん
.accordion label {
    background-color: #FFFFFF;/*背景の塗りつぶし色*/
    border: solid 2px #EFEFEF;/*線のタイプ 太さ 色*/
}

上記のCSSを追加して、#EFEFEFの色コードを変更して頂ければOKです。

返信する
sangoオタク

続けて質問すいません。
固定ページにコメント欄を追加したいのですが、どうすればよいでしょうか。

返信する
サルワカくん

page.php(1カラムの場合には、page-1column.php)を子テーマのフォルダーに複製します。
②子テーマのpage.php

<?php insert_json_ld();//構造化データ ?>

のすぐ下の行に以下のコードを追加します。

<?php comments_template();//コメント?>

加えて、固定ページの編集画面において「コメントの投稿を許可する」にチェックを入れれば、コメント欄が表示されるようになるかと思います。

返信する
sangoオタク

お忙しいところ丁寧に答えてくださり有難うございます。
無事解決できました。

返信する
スミス

アコーディオンを複数並べると、たまに開かなくなってしまいます(PCだと問題なく開けるのですが、スマホ表示になるとその現象が起こります)。
多分アコーディオンを開くときのエフェクトで重くなってしまっているんですかね?
何か解説策はありませんでしょうか。

返信する
サルワカくん

私の環境で複数並べてみたのですが、スマホでも問題なく機能しているようです。
可能であれば、問題が生じているページのURLを教えて頂けないでしょうか。

返信する
あは

外部リンクのことで質問です。
[sanko href="リンク先のURL" title="記事のタイトル" site="サイト名"target="_blank"]と入れてみたのですが、別ウインドウで開かず自分のサイトから外部サイトに変わってしまいます
何か解決策はありますでしょうか?

返信する
サルワカくん

sankoショートコードでのtarget="_blank"指定は、Ver1.3.1〜対応したのですが、バージョンはそれよりも新しいものでしょうか。

返信する
サルワカくん

site="サイト名"target="_blank"の間に半角スペースを入れてもダメですか?

返信する
OGNAS

画像の上に文字をのせるショートコードで、ビジュアルモードの太字や色を反映できるようにしてほしいです。

返信する
bigtree

いつもありがたくSANGOを使わせていただいております。

質問ですが、ボックス内(”box3″)で吹き出しを使うと左からの吹き出しのアイコンのみ少し大きくなってアイコンとコメントが重なってしまうのですが、どうやったら解決できるでしょうか?
また、吹き出しのデザインをサルワカ君のように白+枠線にしたいのですが枠線の出し方がわかりません。
教えていただけると嬉しいです、よろしくお願いします。

返信する
サルワカくん

こちらでbox3の中に吹き出しを入れてもそのような現象は起こらないのですが、本当にbox3でしょうか。
(ちらっとサイトを拝見しましたが、崩れているのはカスタマイズで追加されたボックス内の吹き出しでした)
アイコンまわりの枠線はデフォルト状態で表示されるようになっておりますが、表示されませんか?
表示されない場合、カスタマイズにより消しちゃっている可能性があります。

返信する
bigtree

仰る通りbox3ではなくカスタマイズのボックスで上手くいってなかったのでbox3を使わせていただきます!ありがとうございます。

もう1つ質問があるんですが、ポッチの箇条書き(チェックマーク)を使った時に、囲い枠とその前の文章の間に不必要なスペースが空いてしまうことがあります。
囲い枠の後にはスペースはできず、枠の前(上)にスペースができてしまいます。
やっかいなことは、「出来ない時もある」ということ(ほとんどの場合起こります)で、また数字の箇条書きを使った時にはこの現象は起こりません。
解決方法を教えていただけると嬉しいです・・・。
すみませんがよろしくお願いいたします。

返信する
サルワカくん

ちょっと原因が分からないですね・・・。
その現象が再現されているページがあれば、原因究明ができます。

返信する
bigtree

お世話になります。
該当の現象が起きているページのURLはこちらです。
https://www.bigtreeinthehouse.com/entry/2018-04-08-120402
冒頭のポッチ箇条書きはきちんと表示されていますが、後半のポッチ箇条書きは上にスペースが空いてしまっています。
テキスト編集で確認する限り変なスペース等は入っていないと思うんですが・・・。
すみませんがよろしくお願いいたします。

サルワカくん

確認しましたが、謎の半角スペースが入っているようです。
ショートコードを使っているのであれば、ショートコードタグとulタグの間を詰めてみてください。(pタグが入っている場合には消去してください)

bigtree

ご指摘の通りにしたら解決しました!
こんなに簡単なことに気づかずお手間を取らせてすみませんでした。
これからも陰ながらに応援しています。
どうもありがとうございました。

須藤真人

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

「関連記事を出力する」際に、これを別タブで開くように設定することは可能でしょうか?
リンクでならtarget=”_blank”でできると思うのですが、ビジュアル的に「関連記事の出力」機能の方が良いので、設定で出来るようになると大変助かります。

よろしくお願いいたします。

返信する
nema

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

ページネーションしたページをnodexにしたいのですがsangoでもできるのでしょうか。
お忙しいとは思いますが、ご教授ください。

返信する
サルワカくん

ページネーションしたページ(2ページ目以降)はデフォルトでnoindexがつくようになっています!

返信する

コメントを残す

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