Ver1.5〜のカスタマイザーの設定方法を紹介しています。Ver1.4.1以前のバージョンをご利用の場合には、以下のリンク先をご覧ください。
【Ver1.4.1まで】SANGOのカスタマイザーの設定方法 SANGOでは「テーマカスタマイザー」により、Webデザインの専門知識が無くとも自分好みにブログのスタイルを変えていくことができます。
目次
カスタマイザーの開き方
カスタマイザーはWordPress管理画面の［外観］⇒［カスタマイズ］で開くことができます。
投稿ページをプレビューしながらカスタマイズしたい場合
また、各ページ上部に表示される管理バーから「カスタマイズ」をクリックすることでもカスタマイザーを開くことができます。これによりそのページをプレビューしながらカスタマイズを行うことができます。
1つずつ設定をしよう
SANGOのカスタマイザーにはたくさんの項目が並んでいます。上から順番に1つずつ設定していきましょう。
カスタマイズの設定項目
Ver1.5にて整理を行い、以下のような構造になりました。
┣ 1.サイトの基本設定
┃ ┣ 基本情報とロゴの設定
┃ ┣ デフォルトのサムネイル画像
┃ ┣ Google Analytics設定
┃ ┣ 背景画像
┃ ┗ パブリッシャーを登録（コピーライト表示設定等も）
┃
┣ 2.色
┃
┣ 3.デザイン・レイアウト設定
┃ ┣ 記事一覧レイアウト
┃ ┗ フォントサイズ
┃
┣ 4. SANGOオリジナル機能の管理
┃ ┣ 記事一覧タブ切替
┃ ┣ モバイルフッター固定メニュー
┃ ┣ ヘッダーお知らせ欄
┃ ┣ フォローボックス（記事下）
┃ ┣ 関連記事（記事下）
┃ ┣ おすすめ記事（記事下）
┃ ┣ CTA（記事下）
┃ ┣ トップへ戻るボタン
┃ ┗ シェアボタン設定
┃
┣ 5.ヘッダーアイキャッチ
┃ ┣ ヘッダーアイキャッチ画像
┃ ┗ ２分割ヘッダーアイキャッチ
┃
┗ 6.詳細設定
WordPress標準の項目
┣ メニュー
┣ ウィジェット
┣ ホームページ設定
┗ 追加CSS1. サイトの基本設定
1-1. 基本情報とロゴの設定
必須サイト名やキャッチフレーズ、ロゴ画像の登録などをこちらから行います。詳しい設定方法の解説は、別のページにまとめました。
ブログのタイトルとロゴ画像を設定しよう 1-2. デフォルトのサムネイル画像
必須トップページやアーカイブページの記事一覧において、アイキャッチ画像が未登録の記事に使われるサムネイル画像です。
また、記事ページフッターの関連記事に「アイキャッチ画像が未登録の記事」が表示される際にも、ここで登録した画像が使われます。
1-3. Google Analyticsの設定
Google Analyticsを導入したい場合には、ここにUA-12345…というようなコードを入力します。
新しいAnalyticsの解析タグであるgtag.jsを使用したい場合には、アクセス解析にgtag.jsを使うにチェックを入れます。トラッキングコードには、通常と同じものを入力すればOKです。
1-4. 背景画像
背景画像は基本的に登録する必要はありません。登録した場合、背景色の代わりに画像が背景に表示されるようになります。
1-5. パブリッシャーを登録
構造化データに使用される「パブリッシャー（発行組織）情報」を登録します。
構造化データとは、ものすごくざっくりというと検索エンジン等に対して記事の情報をより詳細に伝えるものです。現状直接的なSEO効果のあるものではありませんが、検索結果に構造化データで指定した情報が表示されることもあるため、設定しておくにこしたことはありません。
SANGOの場合、パブリッシャー情報の登録以外の設定は特に必要はありません（自動で設定されます）。
個人の場合には、パブリッシャー名はニックネーム等で良いかと思います。また、発行組織体を表す画像には、サイトロゴと同じものを使えば良いでしょう（PNG/JPEG推奨）。
著作権者名
各ページの最下部に「◯◯ All rights reserved」という形で表示されるコピーライト表記の設定です。空欄の場合には、○○の部分にサイト名が表示されます。
2. 色
メインカラーやアクセントカラー、ヘッダーメニュー、ウィジェットタイトル、リンクなどの色をこちらから変えることができます。自分好みに色を変えたい場合に設定を行いましょう。
色の設定をしよう 3. デザイン・レイアウト設定
3-1. 記事一覧レイアウト
SANGOでは記事一覧のレイアウトを2種類から選ぶことができます。
初期設定では、記事へのリンクが①のような縦長のカードタイプになります。②の横長タイプにしたい場合には「記事一覧のカードを横長にする」にチェックを入れましょう。
3-2. フォントサイズ
スマホ、タブレット、パソコン、それぞれの画面サイズでのフォントサイズを別に設定することができます。現在のフォントサイズを変えたい場合にのみ設定すればOKです。
4. SANGOオリジナル機能の管理
4-1. 記事一覧タブ切替
トップページのタブ切替機能の設定です。新着記事に加えて、カテゴリー別、タグ別に記事一覧を表示することができます。詳しい設定方法は、こちらの記事で解説しています。
SANGOトップページのタブ切替機能の設定方法まとめ 4-2. モバイルフッター固定メニュー
スマホ/タブレットのみで表示される画面下の固定メニューです。詳しい設定方法は下記リンク先をご覧ください。
モバイル用フッター固定メニューの設定方法 4-3. ヘッダーお知らせ欄
サイト内の各ページのヘッダー下に表示される帯状のお知らせ欄です。背景色にはグラデーションを設定することができます（背景色1と2を同色にすると、グラデーションでは無くなります）。
4-4. フォローボックス
フォローボックスとは、記事下（シェアボタンの下）に表示されるソーシャルメディアのフォローを促すパーツです。カードの背景画像には、その記事のアイキャッチ画像が使用されます。
こちらも設定は簡単。「フォローボックスを表示する」にチェックをつけ、各ソーシャルメディアのユーザー名やURLを掲載するだけです。空欄にしたメディアのフォローボタンは表示されないので、例えばTwitterのユーザー名だけを入力する、という形でも構いません。
FeedlyのURLは以下のような形になるかと思います。
https://feedly.com/i/subscription/feed/サイトのURL/feed例えばサルワカのFeedlyURLはhttps://feedly.com/i/subscription/feed/https://saruwakakun.com/feedですね。カスタマイザーへの貼り付け前にURLにアクセスして正しく表示されるか確認しておきましょう。
4-5. 関連記事
投稿ページのコンテンツ下に、同じカテゴリーの記事を表示する機能です。
記事下に関連記事を表示しない
ここにチェックをつけると、記事下の関連記事が非表示になります。「Googleアドセンスの関連記事型広告を掲載する」などの場合には、非表示にしておくのが良いかもしれませんね。
関連記事のタイトル
関連記事の上に表示されるタイトルです。空欄にするとタイトルは表示されません。
なお、タイトルにはアイコンを使うこともできます（FontAwesomeの使い方）。
<i class="fa fa-bookmark main-c"></i> 関連記事アイコンのクラス名の中にmain-cと入力すると、アイコンをメインカラーにすることができます。accent-cと入力すると、アイコンをアクセントカラーにすることができます。
関連記事のデザイン
以下の選択肢の中から選ぶことができます。
タイプA
こちらが初期設定のデザインです。スマホ表示の「スライダー（スクロール機能）」はオフにすることができます。
タイプA スマホ表示
タイプA スマホ表示
（スクロールなしにチェックを入れた場合）
タイプA PC表示
タイプB
タイプB スマホ表示
タイプB スマホ表示
（スクロールなしにチェックを入れた場合）
タイプB PC表示
タイプC
タイプC スマホ表示
タイプC PC表示
モバイル表示で関連記事をスライダー表示にしない
タイプAもしくはBを選んでいるときにこちらにチェックを入れると、スマホ表示での横へのスライダー機能がオフになります。
親カテゴリーに属する記事も含める
デフォルトでは同カテゴリーの記事のみが関連記事として出力されます。こちらにチェックを入れると「親カテゴリー」と「親カテゴリーに含まれる子カテゴリー」の記事も合わせてランダムで出力されるようになります。
関連記事の表示数
最大の表示数を半角の数字で入力します。初期値は6です。
4-6. おすすめ記事
投稿ページのコンテンツ下に、サイト内の特におすすめしたい記事へのリンクを4つまで表示させることのできる機能です。
設定方法は簡単。「おすすめ記事を記事下に表示」にチェックをつけ、表示させたい記事の投稿IDを入力するだけです。
「見出し」欄に入力したフレーズは、おすすめ記事一覧の上部に表示されます。「おすすめ記事のタイトル」欄には、記事の本来のタイトルとは別の名前でリンクを表示させたいときに入力します。空欄にすると、本来のタイトルが表示されます。
4-7. CTA
CTAは記事下に表示される「ユーザーに特定のページへのアクセスを促す」ためのパーツです。「見出し」「画像」「説明」「ボタン」を自由に設定することができます。説明文や見出しにHTMLタグは使用できないのでご注意ください。
「一部のカテゴリーの記事にはCTAを表示したくない」という場合には、以下の画像のように「CTAを表示しないカテゴリーのID」という欄にID名を半角カンマ区切りで指定します（カテゴリーIDの調べ方）。
4-8. トップへ戻るボタン
記事ページにおいて画面右下に表示される「トップ（上へ）戻る」ボタンの表示設定ができます。
4-9. シェアボタンの設定
記事下のシェアボタンを別デザインにする
チェックを入れると、記事下のシェアボタンのデザインが変わります。
なお、別デザインのシェアボタンにするとGoogle+のシェアボタンは表示されなくなることにご注意ください（基本的に不要かとは思いますが）。
記事タイトル下の円形シェアボタンをオフにする
初期設定では記事下に円形のシェアボタン（FABと呼ばれたりします：Floating Action Button）が設置されています。クリックにより、画面全体にシェアボタンが広がるというものです。
このボタンですが、広がるようなアニメーションを含めHTMLとCSSだけで表現しています。オフにしてもほとんど軽くはなりませんが、ジャマだという場合には円形シェアボタンをオフにするにチェックをつけてくださいませ。
記事タイトル下の円形シェアボタンにテキストを含め、横長ボタン化する
Ver1.5〜追加されたオプションです。チェックを入れると、以下のようなスタイルになります。なお記事タイトル下の円形シェアボタンをオフにするにチェックが入っている場合、ボタン自体が表示されなくなることにご注意ください。
SANGOは、サイト訪問者の学習コストが小さくなるよう、マテリアルデザインを採用しています。2018年のマテリアルデザインのガイドラインが改訂により、上のようなExtended FABというスタイルのボタンが追加されました。
タイトル下にシェアボタンを並べて表示
チェックを入れると、タイトル下にも記事下と同じようなシェアボタンが表示されるようになります。このオプションにチェックを入れる場合、記事タイトル下の円形シェアボタンをオフにするにも合わせてチェックを入れることをおすすめします。
シェアボタンからのツイートに表示するアカウント名
サイト内の記事がTwitterでシェアされたときに@saruwakakunというようにメディアのアカウント名をツイートに含めることができます。フィールドにはsaruwakakunというようにアカウント名は除いて、入力してくださいませ。
FacebookのApp ID
任意の入力項目です。内容が分かる方のみご入力ください。
5. ヘッダーアイキャッチ
こちらはトップページの上部に「画像」「テキスト」「ボタン」を魅力的に表示させることのできる機能です。サイト訪問者の目を引きたい場合、誘導したいページがある場合にご活用ください。
詳しい設定方法は下記のリンク先で解説しています。
ヘッダーアイキャッチ画像を設定しよう 6. 詳細設定
6-1. headタグ内にコードを挿入
headタグ内に簡単にコードを入れられるようになりました。Search Consoleなどのメタタグやlinkタグを挿入したいときにご利用ください（参考：headタグ内に書くべきもの）。なお、こちらのフィールドに入力したコードは、ホーム、固定、投稿と全ページのhead内にそのまま挿入されます。なお、head内では全角スペースは使わないようにしましょう。
6-2. スマホ/タブレットでは記事下のサイドバーを非表示にする
PC閲覧時には右側に表示されているサイドバーは、一定より画面が小さくなると、ページ下側に配置されるようになります。「モバイル（スマホ/タブレット）表示では、サイドバーを非表示にしたい」という場合はここにチェックをつけてください。
6-3. リップルエフェクトをオフにする
リップルエフェクトとは、クリックしたときに波紋が広がるようなエフェクトのことです。Googleのマテリアルデザインではよくこの表現が取り入れられています。
SANGOでは、リップルエフェクトの導入のためにRipplerというプラグインをデフォルトで導入しています。
参考 RipplerAuthor : blivesta上記のリンク先で紹介されているクラス名をHTMLに追加することで、簡単にリップルエフェクトを使うことができます。また、ショートコードで挿入できるボタンの中には、リップルエフェクトを取り入れたボタンもあります。
ボタンの挿入方法と種類一覧 デフォルトでは、リップルエフェクトは使用しない設定になっています（専用のCSSとJSが読み込まれなくなるため、少し軽くなります）。
6-4. 記事のタイトル下にアイキャッチ画像を表示しない
アイキャッチ画像を登録しても、自動でタイトル下に挿入されることがなくなります。
6-5. 絵文字用のJSを読み込まない
WordPressの初期設定では絵文字を使用するためのJavaScriptが読み込まれます。サイト内で絵文字を使わない場合にはチェックを入れることをおすすめします。
6-6. 自動整形をオフに（ビジュアルエディタ含む）
WordPressでは標準機能により、インラインタグにpタグが自動適用されたり、改行コードがbrタグに変換されたりします（自動整形）。こちらにチェックを入れると、wpautopと呼ばれる自動整形を行っている関数を停止します。
6-7. 日付を非表示にする
記事一覧上/投稿ページ上の日付を非表示にします。特に理由がない限りチェックをつける必要はありません。
6-8. 何日前の記事までNEWマークをつけるか
記事一覧のカード上には、初期設定では約3日以内に投稿された記事には、NEWマークがつきます。
このNEWマークが表示される基準日数を変えたい場合には、ここに半角数字を入力してください。0と入力すると非表示になります。
6-9. 吹き出しショートコードのデフォルト設定
ここに名前
アイコン画像と、名前を登録しておくと、[say]テキスト[/say]というショートコードを使用したときに、ここで登録した画像・名前が表示されます。
なお、[say img="画像URL" name="名前"]テキスト[/say]と書くことで、デフォルト以外の画像・名前を使った吹き出しを挿入できます。
WordPress標準搭載の設定項目
ここから紹介する設定項目はSANGO独自のものではなく、WordPressであらかじめ用意されている項目です。
メニュー
SANGOでは、以下の3箇所にメニューを設定することができます。
- ヘッダーメニュー（PCでのみ表示）
- スライドメニュー（モバイルのみ）
- フッターメニュー（ページ最下部。PC/モバイル共通）
こちらはカスタマイザー上ではなく［外観］⇒［メニュー］から設定するのが分かりやすいかと思います。詳しくは下の記事を参照ください。
ウィジェット
SANGOではウィジェットにより、サイドバーや広告、ハンバーガーメニューなどを設置することができます。ただし、カスタマイザー上ではなく、管理画面の外観⇒ウィジェットから行いましょう。詳しくはこちらの記事を参考にしてくださいませ。
ウィジェットの設定をしよう：広告の貼り方も解説 ホームページ設定
ホームページ設定は、WordPressの標準機能です。この機能を活用することで、トップページに固定ページを表示させることができます。基本的には設定は不要ですが、もしトップページに固定ページを使用したい場合は、こちらの記事を参考にして頂ければと思います。
SANGOで固定ページをホーム固定する方法まとめ 追加CSS
WordPressにデフォルトで実装されているCSS追記スペースです。こちらに記入しても良いのですが「誤って消えてしまうリスク」や「管理のしやすさ」を考えると子テーマを用いて、CSSを追記していくことをおすすめします。
WordPressで子テーマを活用して安全にカスタマイズを行う方法 
テンプレートを非公開サイトで使用していますので、記事下のシェアボタンを非表示にするスイッチがあるとうれしいです。
検討します。とりあえず、下記のCSSを貼れば一括でシェアボタンを消すことができます。
.article-footer .footer-contents .sns-btn {
display: none;
}
コメントありがとうございます！
参考になりました。
こんにちは。シェアボタンのオンオフ機能、私も欲しいので一票。お問い合わせや、会社概要的なページでは非表示にしておきたいためです。
PCは非表示、モバイルはフッターのシェアボタンがあればよいという場合も多そうですが、私が運営しているサイトはPCでのアクセスが7割という事情もありまして。
よろしくお願いします。
こんにちは。今後のアップデートでの実装を検討します（次回のアップデートは、もう内容が決まってしまっているので織り込めなさそうですが…）。
ちなみにですが、シェアボタンを消したい投稿の編集画面を開き、
「テキスト」エディタの方を選び、
以下のコードをエディタの最後にコピペすれば、そのページではシェアボタンが非表示になります。
ぜひお試しください。
CSSありがとうございます！お返事いただけていることに今頃気付きました…ごめんなさい。SANGOとても気に入っています。今後のアップデートも期待しております！
デフォルトのサムネイル画像ですが、テーマカスタマイズで「画像を選択」で登録画像を選択するとリンク切れの様になってしまします。
「削除」をするとデフォルトの画像にちゃんと戻って表示もされます。
記事の「アイキャッチ画像」として同じ画像を選んだ際にはちゃんと表示されます。
なにか設定が間違っているのでしょうか？
画像サイズは、幅520px と 高さ300px 以上のものになっていますか？
また、画像形式はJPG/PNG/GIF以外になっていないでしょうか。
ご確認よろしくお願い致します。
幅520px 高さ300pxで保存形式jpg、解像度72pixelの画像を選択しておりできませんでしたが、幅521px 高さ301pxに変更しましたら出来ました！！
ありがとうございます。
あ、本当でしたか！ピッタリのサイズでNGになってしまうとは…失礼致しました。
カスタマイザーの「詳細設定」内にある項目の「記事のタイトル下にアイキャッチ画像を表示しない」をPCとスマホで個別設定できるようになると嬉しい。スマホには表示させたいけど、PCだと画像領域が大きすぎて非表示にしたいからです。今後のアップデートにて検討頂けますと助かります。
ご要望ありがとうございます。
いくつか問題が考えられるため、実装できるかは分かりませんが、
検討させて頂きます。
個別記事だけでも良いのですが(一括１カラムにする)設定はないでしょうか？
可能です。
①子テーマにsingle.phpを複製します。
②下記の部分を見つけます。
③ ②を下記のコードにまるっと置き換えます。
これで各記事の設定に関わらず、一括1カラムになります。
迅速な対応ありがとうございます。無事１カラムに出来ました。これからもSANGO愛用していきます!(^^)!
うまくいったようで良かったです。今後ともSANGOを使い倒してやってくださいませ。
シェアボタン上の「SHARE」を別の文言に変更するにはどうしたらいいでしょうか。
少しコードが長くなってしまったので、よくある質問に回答を記載しました。
ご確認よろしくお願いします。
ご回答ありがとうございます！無事にやりたいことができました。お忙しいところご対応くださり感謝です。
先日SANGOを購入し、カスタマイズ中です。
投稿の公開日を残し、更新日を非公開にする方法を教えていただけますでしょうか。
宜しくお願い致します。
CSSに以下のコードを追加すればOKです。
非表示にする事ができました。ありがとうございました。
背景画像を設定して使っているのですが、ワンカラム表示の記事の場合だと背景が白色になってしまいます。これは仕様なのでしょうか？ もしワンカラム記事にも背景画像を適用する方法があれば教えていただきたいです。よろしくお願いいたします。
そちらは仕様ですね。
とすれば、背景が表示されるかと思います。
もしコンテンツ部分は白にしたい場合には、下側のコード（.one-column #entry {~}）は消して頂ければと思います。
早急にご返信いただきありがとうございます。無事、ワンカラムにも背景画像を適用することができました。
次回のアップデートで以下を考慮して頂けるとありがたいです。
ヘッダーアイキャッチ画像上に表示される見出しと説明文の色をカスタマイズ画面で指定できるようになれば便利です。アイキャッチ画像は気分で時々変更するのですが、文字の部分の背景が白っぽい時に見出しと説明文が目立たなくなってしまうので。その度にCSSを変更するのは、ちょっと面倒。
サルワカのトップページ、人気記事一覧のアイキャッチ表示のように写真の上下左右に白枠を入れる事は可能でしょうか？それと、そのカード自体の四隅の角を丸くすることは可能ですか？出来れば右方ウィジェットのアーカイブやカテゴリー等の枠の四隅角も丸く出来ればすごく嬉しいです。
「SANGO」カスタマイズ：一覧ページの画像に余白をつける方法という記事を書いてくださっている方がいらっしゃいます。こちらをご確認頂ければ。
ウィジェットやカードの角を丸くするには、以下のCSSを追加すればおそらくOKです。
お忙しい中すぐに解答頂き大変感謝致します。すごく参考になりました。本当にありがとうございます。
「デフォルトのサムネイル画像」を設定したところ、トップページの記事一覧ではアイキャッチ画像を設定していない記事に対して正しく設定したサムネイル画像が表示されましたが、サイドバーウィジェットに設定した「最近の投稿」一覧では同じアイキャッチ画像は表示されずタイトル文字が表示されます。
これは仕様でしょうか？
できれば表示されたほうがうれしいです。
すみません、そちらは仕様です…。
簡単なカスタマイズで表示可能かどうかはちょっと調べてみます。
わかりました。
好みの問題かもしれませんが、サムネイル付のものと、無しのものが混在すると、バランスが良くないように見えるので。
トップページでも『スマホ閲覧時には記事下のサイドバーを非表示』にすることはできますでしょうか？
はい、子テーマで編集するには以下のようになります。
①親テーマから子テーマにsidebar.phpを複製
②子テーマのsidebar.phpの1行目
is_singular() &&を削除して頂ければOKです。つまり削除後の1行目は以下のようになります。
キャッシュ系プラグインを使っている場合は、カスタマイズ後、キャッシュの削除をよろしくお願いします。
いつも大変お世話になっています！
個人的な趣味でブログをはじめたところです、
フォローボックスですが、インスタがあると大変嬉しいです！
次回のアップデートの時にご参考いただければ幸いです。
たしかに、インスタもあると良いですね。検討させて頂きます！
いつもお世話になっております。
メルマガ登録フォームをサイドバーに表示すると、スマホだとかなり下に表示されてしまうので、スマホのみコンテンツ後広告の部分に「これから臨床心理士を目指す方へ」という形で挿入してみました。
ですが、table タグの枠が表示されてしまいます。
「コメントを残す」のフォームのような枠線のないフォームにするには、どうすればいいでしょうか？
トップに戻るボタンがページ下部に固定されている状態です。このページのように、下にスクロールしていくと表示され、トップに戻る際もヌルヌル動くようにするにはどうすれば良いでしょうか？
外観⇒カスタマイズ⇒SANGOオリジナル機能の管理⇒「トップへ戻るボタン」から簡単に設定ができます。
ご確認よろしくお願いします。
デフォルトで表示されている、アクセントカラーのトップへ戻るボタンを押すとトップへすぐ戻ってしまいます。
外観⇒カスタマイズ⇒「トップへ戻るボタン」で表示させるトップへ戻るボタンのような戻り方に設定できますか？
遅くなり失礼しました。最新のテーマだと外観⇒カスタマイズ⇒詳細設定に「headタグ内にコードを挿入」という欄があるので、そこに
を貼り付けて頂ければと思います。
回答ありがとうございます。
やってみたのですが、ページ上部のタイトルの上に、貼り付けたコードが表示されボタンの挙動に変化が無い状態です。
あ、すみません。scriptタグではさむのを忘れていました。
前回のコメント上のコードを編集したので、そちらを貼り付けて頂いて良いですか？
何度もすみません。
scriptタグを含めて貼り付けたのですが、変化がありません…
うーん、それではhead欄は消して頂いて、子テーマのfunctions.phpに以下のコードをまるっと貼り付けてみて頂けますか？
これでも動かない場合、サイトのURLを教えて頂けますと幸いです。
functions.phpの方に貼り付けたところ、希望どうりの動作になりました！
何度も回答していただき、ありがとうございました。
よかったです！スパッと回答できずに失礼しました。
たびたびすみません。一点教えてください。PC版で記事一覧のレイアウトを「横長」にすると2列になると思いますが、モバイル版のように1列にする方法はございますでしょうか。よろしくお願いいたします。
以下のCSSを子テーマのstyle.cssに追加してみて頂けますか？
ありがとうございます。カスタマイズで記事一覧の形式を横長にしてから、いただいたコードを追加することで、実現することができました。どうもありがとうございます。
カテゴリ違いでしたらすみません。
ウィジェットのタイトルの色は変えられましたが、おしゃれな見出しデザインにある
デザインをタイトルに割り当てたいのですが可能ですか？
すみませんが、こちらの質問は「見出し記事」で投稿頂けますか？
（ノウハウがちゃんと共有されるようにしたいので）
本当に度々ですみません。記事一覧の上に、関連カード型でオススメの記事がTopに表示されるようにしています。ですが、この関連カードの大きさが不揃いになってしまい、ちょっとカッコ悪いです。これの大きさを揃える方法はありますでしょうか？
でどうでしょうか。
ご返信ありがとうございます。「style.css」に追記して有効にしてみましたが、特に変化ないようです・・。
横2列のショートコードを使っているのですね。
を追加すればいけるかもしれません。
度々ありがとうございます。追加のコードも挿入していみましたが、駄目っぽいです・・。
本当ですか・・・。となると、色々と試して頂いた中、ものすごく申し訳ないのですが、
【サルワカ風】トップページに人気記事を設置する方法
で解説しているウィジェットを使った方法を実行して頂くのが良いかと思います。申し訳ないです。
トップ固定ページで、『新たな固定ページ』を設定すると、下の方に、次の記事示(『新たな固定ページ』）が表示されてしまいます。トップ固定ページのみ次の記事が表示されない様にするには、どうしたらいいですか。投稿画面では次に記事を表示させたいです。
すみませんが、ご回答お願いします。
解決できました。すみませんでした。
お世話になっております。コメント失礼します。
記事一覧レイアウトについて質問させて下さい。
SANGOのデフォルトの設定では公開日の表示形式が
2018.01.14 SUN
というような感じになっていますが、
[記事公開日] 2018年1月14日
[記事公開日] 2018年4月21日
にしたいです。
可能でしょうか？
また、同様に記事内も同じ表記にしたいです。
お忙しいと思いますが、ご教授の程よろしくお願いします。
申し訳ありません。記入ミスです。
正しくは
[記事公開日] 2018年1月14日
[記事更新日] 2018年4月21日
と２列にこのような形式で公開日と更新日を並べたいです。
お忙しいと思いますが、ご教授の程よろしくお願いします。
度々コメント失礼します。
上記のような形式はやはり難しいでしょうか？
お忙しいと思いますが、お返事いただけると助かります。
大変申し訳ないのですが、全体の見栄えが崩れる可能性のある大幅なカスタマイズに関しては、ご自身で行って頂きたくお願いします。
（一人ひとりの細かなカスタマイズ要望に対応しているとキリがないため・・・申し訳ないです）
個別記事の下部に関連記事ウィジェットを表示させているのですが、SANGOのデモページでは
関連記事
となっていて、関連記事のタイトル前にブックマークのアイコンが表示されていますが、自分のSANGOv1.3.2では
関連記事
となっていて、関連記事のタイトル前にブックマークのアイコンは表示されません。
SANGOデモページのようにするには、テンプレートを触らないといけないのでしょうか？
このページで解説している通り（こちらです）、関連記事のタイトルに
<i class="fa fa-bookmark main-c"></i> 関連記事と入れるとアイコンが表示されます。お世話になっております。初心者です。
SANGOのVer.1.3.3 から Ver.1.4 へバージョンアップしたところ、カスタマイザー機能の一部が動作しなくなってしまいました。
・『トップページへ戻るボタン』（Ver.1.3.3では問題なく機能していた）
・『追尾サイドバー』（Ver.1.3.3では問題なく機能していた）
・『タブ切替機能』（Ver.1.4の新機能、表示するが切替できず）
どこを直せばよいのか全く分からず苦慮しております。
ご教授いただけると助かります。
よろしくお願いいたします。
動作しないとは、具体的にはどのようなことですか？
おそらくアップデートとは別の部分に原因がある気がします。
一度、プラグインをすべて停止してみましたか？（直った場合1つずつ戻して原因となっているプラグインを特定する）
また、カスタマイズした内容が影響しているということはありませんか？（子テーマではなく親テーマを有効化しても機能しませんか？）
度々失礼します。
ご返信ありがとうございます。
言葉足らずで申し訳ありません。
・『トップページへ戻るボタン』（戻るボタンが表示しなくなった）
・『追尾サイドバー』（追尾しなくなった）
・『タブ切替機能』（表示するがクリックしても切替できず）
返信でご指摘いただきましたプラグインの関連を疑ってみたところ、原因は分かりました。
『Easy Smooth Scroll Links』のプラグインを停止したところ、上記症状が全て正常に動作することが分かりました。
初心者につき、質問が明確でなく言葉足らずとなりましたこと、申し訳ありません。
また、丁寧なご返信に大変感謝いたします。
今後もSANGOを愛用してブログ作りに励みたいと思います。
ご対応ありがとうございました。
ご報告ありがとうございます。
なるほど。「Easy Smooth Scroll Links」が問題の原因になることがあるのですね。
今後の参考にさせて頂きます。ありがとうございました。
いつもお世話になっています。SHAREの文言変更についての記事読ませていただきました。
＼ ／ も含め ＼SHARE ／ の行を全て非表示にしたい（ボタンのみ表示したい）のですが、
どのようにしたらいいでしょうか。
何度も申し訳ありません。よくある質問に記載がありました。試してみます。
ありがとうございました。
お世話になります。
自動生成されるthumb-520とthumb-160の生成をやめて、
関連記事と新着記事に使われるサムネイルをwordpressデフォルトの150pxサイズの画像にしたいのですができますでしょうか？
ちなみに記事はタイプAorBで4列表示されるように変更しております。
よろしくお願い致します。
お世話になっております。
カスタマイザーでPC・モバイルともに「トップへ戻るボタン」を表示するにチェックを入れていないのですが、どちらも表示されてしまいます。
どうすれば消せるのでしょうか？
また上記ボタンが表示されているからなのか、それは関係していないのかはわかりませんが、モバイル表示でサイドバーとフッターの間にかなり余白ができてしまいます。
（サイドバー→ボタンと余白→フッター）
余白の間にユーザーが離脱するのを防ぐために余白をなくしたいのですが、どうすればなくす（狭める）ことができますか？
お忙しいところ恐縮ですがご回答よろしくお願いいたします。
度々すみません。
試しにカスタマイザーでトップへ戻るボタンを表示するにしてみたところ、既存の表示されていたものにプラスし、こちらのページと同じ追尾型のボタンが新たに増えました。
どうも私のページの不具合は、
「追尾型ではないトップへ戻るボタンが、固定でサイドバーとフッターの間に余白とともに余分に挿入されている（カスタマイザーのオンオフ関係なく）」ようです。
どうすればこの余分に挿入されてしまっているボタンを消せるのでしょうか？
そちらは仕様です。GoogleなどのマテリアルデザインのWebサイトでよく見かける表現です。
気になるようでしたら、
のCSSを追加することで消せます。
仕様だったんですね、大変失礼いたしました。
教えていただいたとおりCSS追記でボタンは消せたのですが、サイドバーとフッターの間に余白があるままです。
PC表示ではそれほど気にならないのですが、スマホで見た時にかなり空いているのが気になるので、こちらをなくす（または狭める）事は可能でしょうか？
お手数ですがよろしくお願いいたします。
を子テーマのstyle.cssに追加すればフッター上の余白が小さくなると思います。
ありがとうございます。
CTA画像自体にリンクを貼ることはできますか？
申し訳ないです、そちらは非対応です。
いつもお世話になっております。ありがとうございます。
さて、質問ですが、CTAを固定ページへ置く方法はございますでしょうか？
現在は、記事下だけ表示されるようになると理解しています。
page.phpを子テーマに複製し、
というコードをCTAを表示したい位置にペーストすると良いかと思います。
のすぐ下くらいが良いですかね。
サルワカ様
ご教示ありがとうございます。
無事、固定ページ下にCTAが設置されました！
感謝です！
すみません、page.phpを子テーマに複製し～というところなのですが子テーマの内容をコピペする感じなのでしょうか？
https://saruwakakun.com/sango/child-theme
こちらの記事で解決しました。
FTPソフトを使ってページ丸ごと親テーマからコピーするんですね。
理解しました。
ど初心者です。
アイキャッチ画像を設定して記事を投稿し、その記事ページをサイトで開くとアイキャッチ画像が最初に表示される仕様になっています。ユーザーが記事ページを開いたときのこのアイキャッチを非表示に設定したいのですが、方法はありますでしょうか。
ちなみに、デフォルトのアイキャッチ画像だと記事ページを開いてもアイキャッチは表示されません。
ご教示よろしくお願いいたします。
外観⇒カスタマイズ⇒「詳細設定」で、アイキャッチ画像を非表示にするオプションを選ぶことができます。
できました、ありがとうございます！
お世話になっております。
子テーマを使うようになってからか、投稿の右上に表示される「New」が表示されなくなってしまったように思います。何か勘違いでしょうか？あるいはどこかにスイッチがあるでしょうか。
横長の記事一覧レイアウトでは「NEW」マークは表示されません。これはNEWマークを載せるスペースがないためです。
また、通常のカードタイプのレイアウトでNEWマークが表示されない場合には、外観⇒詳細設定⇒NEWを表示する日数が0になっている可能性があります。こちらの数字を1以上にすれば表示されるようになるはずです。
コメントありがとうございます。
ご教示いただいた方法で解決しました。値が何も入っていない状態になっておりました。
迅速なご回答、誠にありがとうございました。
ヘッダー背景色としてグラデーションを使用したいのですが、どちらにCSSを設置すべきでしょうか？GradPadにてコードは取得済みです。
子テーマのstyle.css内に書くことをおすすめします。
参考：WordPressで子テーマを活用して安全にカスタマイズを行う方法
ご返信ありがとうございます
追加するCSSもお教えいただけいただけますでしょうか？
でいけると思います。
モバイルでの新着記事一覧を「【サルワカ風】トップページに人気記事を設置する方法」のカスタマイズをおこなった場合の上部の人気記事が並んでいるように２列で表示することは可能でしょうか？
フォローボックス（記事下）の設定についてなのですが、フェイスブックのタイムラインのＵＲＬ（ＦＢで個人ページのＵＲＬの設定は済んでいる）を入れて更新してもサイトに反映されません。
何か考えられる原因はありますでしょうか。ツイッターのフォローボタンは設置できました。
さきほどのフォローボックスでの設定の件ですが、ＵＲＬからwwwを抜いたら反映されました。
wwwの有無により反映されたりされなかったりするのですね。参考になる情報のご提供、ありがとうございました。
お役に立つかわかりませんが、ご報告です。すでに自己解決したのですが、「WP-Copyright-Protection」というプラグインを入れていると、カスタマイザー（左側のカスタマイズメニュー）が閉じてしまい、トップページと同じ状態になりカスタマイズできなくなることがわかりました。もし同じようなお悩みを持つ方からご相談があれば、ご参考にしていただければ幸いです。
プラグインのアップデートが5年前なので、WordPress自体との互換性に問題がありそうですね・・・。
貴重な情報の提供、ありがとうございました。
利用規約にも書いてありますが、カスタマイズサポートは行っておりません。
対応可能なものは対応しますが、全て回答できるわけではありません。
もしカスタマイズサポートを求められるのであれば、そのようなテーマをご利用頂ければと思います。
申し訳ありませんが、ご了承ください。
内容理解しました（コメント欄上では非表示とさせていただきます）。
たくさんのコメントが来るため、対応に時間がかかる場合もありますし
対応ができない場合もあります。
2列の件は、対応できるか検討してます（対応可能であれば返信します）。
お世話になっております。
先日AndroidからiPhone X に乗り換えたのですが、背景画像がページをスクロールした時に一緒スクロールされるようになっていました。
カスタマイズの一緒にスクロール、にはチェックを入れておらず、Androidで確認する正常になっています。
原因がわからないので何卒よろしくお願い致します。
背景画像の設定はWordPressの標準機能であり、
背景がページ全体に広がってしまうのはiOSの仕様なのですよね…。
https://qiita.com/skwbr/items/bedaf09244f5cdebb228
対応方法としては、上の記事を参考になると思います。
詳細設定の「記事のタイトル下にアイキャッチ画像を表示しない」とありますが。特定のカテゴリーのみ、アイキャッチ画像を表示しないようにできないでしょうか？
投稿画面にて、その記事に対してアイキャッチ画像を登録しなければ良いと思います。
ご返信ありがとうございます。サムネイルとしてはアイキャッチを使用したいのですが、ページを開いた際にはアイキャッチをタイトル下には置きたくないのです…。
Youtubeの動画のサムネイルと同じ画像をアイキャッチをして使用したいのですが、記事下にそれが入ると同じ画像が並んでしまうのです。
やりたいこととしては、動画関連のカテゴリーだけ、ページが開くとタイトル下にYoutubeの動画をすぐ置きたいです（そのため記事内でのアイキャッチは不要だが、記事一覧の際のサムネイルとしては使用したい）。可能でしょうか？
「記事のタイトル下にアイキャッチ画像を表示しない」にチェックを入れたうえで、
投稿ページにてアイキャッチ画像を登録することで、それが可能です。
ご丁寧にご返信ありがとうございます！
申し訳ありません。私の質問がわかりにくかったですね…。その設定だと全体もタイトル下にアイキャッチが入らないんです…。
特定のカテゴリー以外（全体）は、タイトル下にアイキャッチを入れつつ、特定のカテゴリーのみタイトル下にアイキャッチを入れないことが可能か、ということでした。
やりたいことをまとめました。
●全体
・タイトル下にアイキャッチ画像が入る。（デフォルトで入るようにしたい）
・一覧でもサムネイルとして使用
●動画カテゴリーのみ
・タイトル下にアイキャッチ画像が入らない（タイトル下にすぐYoutube動画を置きたい）
・一覧ではサムネイルとして使用
上記の形はどうすれば可能でしょうか？何度も申し訳ありません。
以前質問させていただきました問題、無事に解決できました。
サルワカさんのこちらの記事にて、カテゴリークラスを出力後、
「display:none;」を使って実現できました！ありがとうございました。
（しつこい質問で申し訳ありませんでした…。）
あ・・・完全に前回の質問を見落としてしまっておりました。
申し訳ありません。
うまくいったようで良かったです！ご報告ありがとうございました。
度々の質問ですみません。
投稿の個別ページでの関連記事の表示について質問させていただきます。
カスタマイズに①「関連記事（記事下）」と②「関連記事」の２つの項目があり、
①（表示位置はSHAREの下の欄）については 記事下に関連記事を表示しない、にチェックをいれることで表示を消せるのですが、②（表示位置は本文直下SHAREの上のあたり）の関連記事は非表示には出来ないのでしょうか？
カスタマイズで②を開いても、見出しの表示、などの設定はあるのですが、非表示にする、という方法がわかりませんでした。
初歩的な設定の質問で大変申し訳ありませんが、よろしくお願いいたします。
質問をこちらのコメント欄でさせていただいたのに、質問直後に自己解決したことで慌ててしまい、別の記事のコメント欄に投稿してしまいました。
質問させていただいた、関連記事の表示は導入していたプラグインの設定の問題だけでした。
コメント欄お目汚ししてしまいすみません。
お世話になります。
二つ質問が有ります。
一つは記事の後の『フォローミー』の欄に
フェイスブックのＵＲＬを入れても表示されません。
もう一つは新着記事の『ＮＥＷ』の表示が出ません。
どうしたら良いでしょうか。
お手数をお掛け致しますが宜しくお願い致します。
１つめについては、トップページを拝見しましたが、NEWという文字が問題なく表示されているようです。
２つめについては、申し訳ないのですが、Facebook「ページ」のフォローボタン用です・・・。個人アカウントへのフォローボタンとすることはできないようです。
サルワカ様。
ＮＥＷの文字は設定のミスでした。
そしてフェイスブックのフォローボタンですが
こちらの質問ページの中でフェイスブックのＵＲＬの
wwwを抜かして更新したところ表記される様になりました。
この度はお手数をお掛け致しました。
wwwを除くと反映されるとは知りませんでした。
情報提供ありがとうございました。
度々コメント失礼します。
サイドバーをトップページではなく、記事内に表示させたいです。
トップページには非表示で記事内にのみサイドバーを表示させる方法はありますでしょうか？
大変申し訳ないのですが、現状ではトップページ（PC表示）のサイドバーを非表示にすることはできません。
ご理解よろしくおねがいします。
こんにちは。
お忙しい中恐縮ですが質問です。関連記事・おすすめ記事の見出しのデザインはどう変更するのでしょうか？
教えてください。
という感じで変えることができるかと思います。
はじめまして。問い合わせの方に間違っていってしまったかもしれません、すみません。
サイドバーを右から左にしたいのですが、どこで設定すればいいのでしょうか？
申し訳ないのですが、SANGOのサイドバーは右にのみ配置することができます。
了解しました。ありがとうございます。
お世話になっております。
ワードプレスで投稿した際に自動でTwitterに投稿する機能はありますか？
よくある質問でTwitterカードを正方形にする方法は見つかったのですが、肝心の自動投稿の方法が見つけられませんでした。
お忙しいとは思いますが、お教えいただけると幸いです。
どうそよろしくお願いいたします。
お世話になります。そのあたりはテーマではなく、プラグインでやるのが一般的ですね。
「twitter wordpress 自動投稿」などとGoogle検索すると、解説記事がヒットします。
早速のご返信ありがとうございます！
Googleで検索してみます。
もう一点お伺いしたいのですが、スマートフォンで見た際のトップページの新着記事一覧を関連記事のタイプBスマホ表示（スクロールなし）のサイズ（スマホの画面に２列ずつ記事が表示されている状況）にすることは可能でしょうか？？
よくある質問の「トップページなどの記事一覧をスマホでも2列にしたい」を御覧くださいませ。
お世話になっております。
よくある質問をよく読まずに質問してしまい、申し訳ありませんでした。以後、気をつけます。
お教えいただきありがとうございました。今後ともよろしくお願いいたします。
横長タイプでカテゴリーラベルを表示するカスタマイズ方法を教えてください。
①以下のコードを子テーマのfunctions.phpに追加
②以下のCSSを追加
ご確認よろしくお願い致します。
ありがとうございます。
post-grid.phpのソースを見たところ、
25行目にnewmark();という箇所が見当たりません。
どうぞよろしくお願いいたします。
申し訳ありません。古いバージョンでの方法を書いてしまいました。
さきほどのコメントを修正し、最新版の方法を載せました。
申し訳ないのですが、子テーマのpost-grid.phpは消していただき、子テーマのfunctions.phpに上記コメントのコードを貼って頂けますか？
サルワカさま、いつもお世話になっております。
段落の間隔を広げたいと思い、サルワカさまの「CSSが効かない・反映されないときの対処法まとめ」の記事を参考に、スタイルシート内に以下のような記述をしたのですが反映されませんでした。
p {margin-bottom: 3em;}
3emをpxに変更したり、キャッシュの削除も試してみましたがうまくいきませんでした。
そこで、「!important」をつけてみたところ反映はされたのですが、ロゴの下や目次タイトルの下など意図しないところにもスタイルが反映されてしまったため、現在は削除しています。
追加CSSで対応は可能なものなのでしょうか。
なにか解決策がありましたらご教示いただけますと幸いです。
ご多用中恐縮ですが、何卒よろしくお願いいたします。
CSSが効かないときの対処法にに書かれている「CSSの優先順位を上げる方法：セレクタを詳しく指定する」の部分が参考になるかと思います。
SANGOの場合、記事領域には
.entry-contentというクラスが当てられているので.entry-content p {~}というように指定するとイメージ通りに反映されるはずです。サルワカさま、早々のご返信ありがとうございます。
上記方法でうまくいきました！
その他の記事も参考に、いろいろと勉強させていただいております。
書いたコードで自分の思い通りに変化していくのは、とても楽しいですね。
これを機に少しずつhtmlやcssの勉強をしていきたいと思います。
ご多用中にも関わらず、早々のご対応ありがとうございました！
今後とも、どうぞよろしくお願いいたします。
サルワカ様
質問です。
外観→カスタマイズ→詳細設定→
シェアボタンを別デザインにするというボタンを押しても、
変化がなく、シェアボタンを別にする事ができません。
普通に変更したいのですが、どのように
変更すればいいのかご教示頂けたら幸いです。
忙しい中申し訳ございません。
よろしくお願いいたします。
サイト確認しましたが、別デザインになっているかと思います。
もしかして、Ver1.5〜導入された「Extended FAB（タイトル下の横長スタイルのシェアボタン）」のことでしょうか。
その場合、Ver1.5のアップデートしたうえで、外観→カスタマイズ→シェアボタン→「記事タイトル下の円形シェアボタンにテキストを含め、横長ボタン化する」にチェックを入れれば、横長のものになります。
ご返信ありがとうございます。
ちょっとややこしい書き方をしてしまったかもしれません。
タイトル下の横長スタイルのシェアボタンの事ではありません。
現在は、こちらのページの記事内にある
「4-9.シェアボタンの設定」の項の
「記事下のシェアボタンを別デザインにする」の状態になっています。
ツイッタアイコン、FBアイコン、はてブアイコンの感覚が現在狭い状態になっている という事です。
それを、
ツイッタアイコン、FBアイコン、はてブアイコンの感覚が広い状態に戻したいのですが、
外観→カスタマイズ→詳細設定→シェアボタンを別デザインする というチェックボックスを押しても、 何をしても、元に戻らず、
現状のままなのです。
そちらの変更手順をご教示頂けたらと思って
ご連絡を差し上げました。
ご返信頂けたら幸いでございます。
すみません。
①シェアボタン下のフォローボックスを非表示にして
②シェアボタンのスタイルをデフォルト状態に戻したい
ということで良いでしょうか？
①はフォローボックスの設定で非表示にできます。
②は「記事下のシェアボタンを別デザインにする」のチェックを外して保存しても、デフォルト状態に戻らないということでしょうか。
はいその通りです。
ですが、、、
なぜか今改めて触って、公開ボタンを押したら
反映されました。。。
昨日はキャッシュの問題かと思って、
キャッシュクリアした上で触っていましたが、
急に今できたっぽいです(T_T)
お騒がせして申し訳ございませんでした。
カスタマイザーでの変化がすぐにリアルタイムで
反映されない場合があるっぽいです。
忙しい中お手数おかけして申し訳ございませんでした。
ありがとうございます。