Ver1.5 Released !

カスタマイザーでデザインや細かな設定をしよう

カスタマイザーでデザイン設定

Ver1.5〜のカスタマイザーの設定方法を紹介しています。Ver1.4.1以前のバージョンをご利用の場合には、以下のリンク先をご覧ください。

SANGO 【Ver1.4.1まで】SANGOのカスタマイザーの設定方法

SANGOでは「テーマカスタマイザー」により、Webデザインの専門知識が無くとも自分好みにブログのスタイルを変えていくことができます。

カスタマイザーの開き方

カスタマイザーはWordPress管理画面の[外観]⇒[カスタマイズ]で開くことができます。

カスタマイズを選ぶ

投稿ページをプレビューしながらカスタマイズしたい場合

また、各ページ上部に表示される管理バーから「カスタマイズ」をクリックすることでもカスタマイザーを開くことができます。これによりそのページをプレビューしながらカスタマイズを行うことができます。

投稿ページからカスタマイズを選ぶ

1つずつ設定をしよう

注意
カスタマイザーのプレビュー画面でリアルタイムに変更が反映されないことがあります。その場合「公開」をクリックした後、ブラウザを更新してページを読み込み直して頂くようお願いします。

SANGOのカスタマイザーにはたくさんの項目が並んでいます。上から順番に1つずつ設定していきましょう。

カスタマイザーの項目一覧

MEMO
右側に表示されるプレビュー画面に設定項目が反映されない場合があります。そのような場合には保存してページを読み込み直してご確認ください。

カスタマイズの設定項目

Ver1.5にて整理を行い、以下のような構造になりました。

1.サイトの基本設定
┃ ┣ 基本情報とロゴの設定
┃ ┣ デフォルトのサムネイル画像
┃ ┣ Google Analytics設定
┃ ┣ 背景画像
┃ ┗ パブリッシャーを登録(コピーライト表示設定等も)
┃
┣ 2.色
┃
┣ 3.デザイン・レイアウト設定
┃ ┣ 記事一覧レイアウト
┃ ┗ フォントサイズ
┃ 
┣ 4. SANGOオリジナル機能の管理
┃ ┣ 記事一覧タブ切替
┃ ┣ モバイルフッター固定メニュー
┃ ┣ ヘッダーお知らせ欄
┃ ┣ フォローボックス(記事下)
┃ ┣ 関連記事(記事下)
┃ ┣ おすすめ記事(記事下)
┃ ┣ CTA(記事下)
┃ ┣ トップへ戻るボタン
┃ ┗ シェアボタン設定
┃
┣ 5.ヘッダーアイキャッチ
┃ ┣ ヘッダーアイキャッチ画像
┃ ┗ 2分割ヘッダーアイキャッチ
┃
┗ 6.詳細設定

WordPress標準の項目 ┣ メニュー ┣ ウィジェット ┣ ホームページ設定 ┗ 追加CSS

1. サイトの基本設定

1-1. 基本情報とロゴの設定

必須サイト名やキャッチフレーズ、ロゴ画像の登録などをこちらから行います。詳しい設定方法の解説は、別のページにまとめました。

タイトルとロゴの設定 ブログのタイトルとロゴ画像を設定しよう

1-2. デフォルトのサムネイル画像

必須トップページやアーカイブページの記事一覧において、アイキャッチ画像が未登録の記事に使われるサムネイル画像です。

デフォルトのサムネイル画像が表示

また、記事ページフッターの関連記事に「アイキャッチ画像が未登録の記事」が表示される際にも、ここで登録した画像が使われます。

関連記事に表示されるデフォルトサムネイル

サイズに注意
デフォルトのサムネイル画像には、必ず600px以上、高さ310pxのものを登録するようにしましょう(形式はJPEG、PNG、GIFのいずれか)。これ以下のサイズの画像をアップロードすると、画像が表示されなくなります。

1-3. Google Analyticsの設定

Google Analyticsを導入したい場合には、ここにUA-12345…というようなコードを入力します。

新しいAnalyticsの解析タグであるgtag.jsを使用したい場合には、アクセス解析にgtag.jsを使うにチェックを入れます。トラッキングコードには、通常と同じものを入力すればOKです。

1-4. 背景画像

背景画像は基本的に登録する必要はありません。登録した場合、背景色の代わりに画像が背景に表示されるようになります。

1-5. パブリッシャーを登録

構造化データに使用される「パブリッシャー(発行組織)情報」を登録します。

MEMO

構造化データとは、ものすごくざっくりというと検索エンジン等に対して記事の情報をより詳細に伝えるものです。現状直接的なSEO効果のあるものではありませんが、検索結果に構造化データで指定した情報が表示されることもあるため、設定しておくにこしたことはありません。

SANGOの場合、パブリッシャー情報の登録以外の設定は特に必要はありません(自動で設定されます)。

個人の場合には、パブリッシャー名はニックネーム等で良いかと思います。また、発行組織体を表す画像には、サイトロゴと同じものを使えば良いでしょう(PNG/JPEG推奨)。

著作権者名

各ページの最下部に「◯◯ All rights reserved」という形で表示されるコピーライト表記の設定です。空欄の場合には、○○の部分にサイト名が表示されます。


2. 色

メインカラーやアクセントカラー、ヘッダーメニュー、ウィジェットタイトル、リンクなどの色をこちらから変えることができます。自分好みに色を変えたい場合に設定を行いましょう。

色の設定をする 色の設定をしよう


3. デザイン・レイアウト設定

3-1. 記事一覧レイアウト

SANGOでは記事一覧のレイアウトを2種類から選ぶことができます。

①初期設定記事一覧カードタイプ
②横長タイプ横長の表示

初期設定では、記事へのリンクが①のような縦長のカードタイプになります。②の横長タイプにしたい場合には「記事一覧のカードを横長にする」にチェックを入れましょう。

MEMO
トップページとアーカイブページで別のレイアウトを選択することができます。アーカイブページとは「カテゴリーページ」「日付別ページ」「著者別ページ」「タグ別ページ」などを指します。

3-2. フォントサイズ

スマホ、タブレット、パソコン、それぞれの画面サイズでのフォントサイズを別に設定することができます。現在のフォントサイズを変えたい場合にのみ設定すればOKです。


4. SANGOオリジナル機能の管理

4-1. 記事一覧タブ切替

タブ切替

トップページのタブ切替機能の設定です。新着記事に加えて、カテゴリー別、タグ別に記事一覧を表示することができます。詳しい設定方法は、こちらの記事で解説しています。

SANGOのタブ機能 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アドセンスの関連記事型広告を掲載する」などの場合には、非表示にしておくのが良いかもしれませんね。

MEMO
関連する記事(=同カテゴリーの記事)がない場合には、チェックをつけなくても表示されないことがあるのでご注意ください。

関連記事のタイトル

関連記事の上に表示されるタイトルです。空欄にするとタイトルは表示されません。
なお、タイトルにはアイコンを使うこともできます(FontAwesomeの使い方)。

タイトルの入力例
<i class="fa fa-bookmark main-c"></i> 関連記事

アイコンのクラス名の中にmain-cと入力すると、アイコンをメインカラーにすることができます。accent-cと入力すると、アイコンをアクセントカラーにすることができます。

関連記事のデザイン

以下の選択肢の中から選ぶことができます。

タイプA

こちらが初期設定のデザインです。スマホ表示の「スライダー(スクロール機能)」はオフにすることができます。


タイプA スマホ表示

関連記事 タイプA スクロールあり


タイプA スマホ表示
(スクロールなしにチェックを入れた場合)

関連記事 タイプA スクロールなし


タイプA PC表示

関連記事対応A PC

タイプB

タイプB スマホ表示

タイプB スクロールあり モバイル


タイプB スマホ表示
(スクロールなしにチェックを入れた場合)


タイプB PC表示

タイプB PC表示

タイプC

タイプC スマホ表示

タイプCモバイル


タイプC PC表示

タイプC PC

モバイル表示で関連記事をスライダー表示にしない

タイプAもしくはBを選んでいるときにこちらにチェックを入れると、スマホ表示での横へのスライダー機能がオフになります。

親カテゴリーに属する記事も含める

デフォルトでは同カテゴリーの記事のみが関連記事として出力されます。こちらにチェックを入れると「親カテゴリー」と「親カテゴリーに含まれる子カテゴリー」の記事も合わせてランダムで出力されるようになります。

関連記事の表示数

最大の表示数を半角の数字で入力します。初期値は6です。


4-6. おすすめ記事

投稿ページのコンテンツ下に、サイト内の特におすすめしたい記事へのリンクを4つまで表示させることのできる機能です。

おすすめ記事

設定方法は簡単。「おすすめ記事を記事下に表示」にチェックをつけ、表示させたい記事の投稿IDを入力するだけです。

おすすめ記事の設定

投稿IDの調べ方
確認したい記事の編集画面を開き、URLを見てみると「post=◯◯」というように数字が含まれているはずです。この数字が投稿IDになります。

「見出し」欄に入力したフレーズは、おすすめ記事一覧の上部に表示されます。「おすすめ記事のタイトル」欄には、記事の本来のタイトルとは別の名前でリンクを表示させたいときに入力します。空欄にすると、本来のタイトルが表示されます。


4-7. CTA

CTAは記事下に表示される「ユーザーに特定のページへのアクセスを促す」ためのパーツです。「見出し」「画像」「説明」「ボタン」を自由に設定することができます。説明文や見出しにHTMLタグは使用できないのでご注意ください。

CTAのサンプル

「一部のカテゴリーの記事にはCTAを表示したくない」という場合には、以下の画像のように「CTAを表示しないカテゴリーのID」という欄にID名を半角カンマ区切りで指定します(カテゴリーIDの調べ方)。


4-8. トップへ戻るボタン

トップへ戻るボタン

記事ページにおいて画面右下に表示される「トップ(上へ)戻る」ボタンの表示設定ができます。


4-9. シェアボタンの設定

記事下のシェアボタンを別デザインにする

チェックを入れると、記事下のシェアボタンのデザインが変わります。

デフォルトのシェアボタン

別デザインのシェアボタン

なお、別デザインのシェアボタンにするとGoogle+のシェアボタンは表示されなくなることにご注意ください(基本的に不要かとは思いますが)。

記事タイトル下の円形シェアボタンをオフにする

初期設定では記事下に円形のシェアボタン(FABと呼ばれたりします:Floating Action Button)が設置されています。クリックにより、画面全体にシェアボタンが広がるというものです。

このボタンですが、広がるようなアニメーションを含めHTMLとCSSだけで表現しています。オフにしてもほとんど軽くはなりませんが、ジャマだという場合には円形シェアボタンをオフにするにチェックをつけてくださいませ。

MEMO
円形シェアボタンは、過去のAndroid端末に含まれていた「標準ブラウザ」には対応していません(このブラウザは既にサポート外であることに加え、セキュリティ上の貧弱性も発見されているそうなのでさほど気にする必要はないかもしれません)。

記事タイトル下の円形シェアボタンにテキストを含め、横長ボタン化する

Ver1.5〜追加されたオプションです。チェックを入れると、以下のようなスタイルになります。なお記事タイトル下の円形シェアボタンをオフにするにチェックが入っている場合、ボタン自体が表示されなくなることにご注意ください。

Fada 2

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閲覧時には右側に表示されているサイドバーは、一定より画面が小さくなると、ページ下側に配置されるようになります。「モバイル(スマホ/タブレット)表示では、サイドバーを非表示にしたい」という場合はここにチェックをつけてください。

MEMO
ただし、非表示になるのは記事/固定ページのみです。記事下にはおすすめ記事や、関連記事、CTA、広告などが配置されるため、サイドバーがさらにその下に表示されることにはメリットが小さい(ページが重くなるデメリットの方が大きい)と感じたので、この設定を用意しています。

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マーク

このNEWマークが表示される基準日数を変えたい場合には、ここに半角数字を入力してください。0と入力すると非表示になります。

6-9. 吹き出しショートコードのデフォルト設定

ここに名前

これが吹き出しのショートコードです

アイコン画像と、名前を登録しておくと、[say]テキスト[/say]というショートコードを使用したときに、ここで登録した画像・名前が表示されます。
なお、[say img="画像URL" name="名前"]テキスト[/say]と書くことで、デフォルト以外の画像・名前を使った吹き出しを挿入できます。


WordPress標準搭載の設定項目

ここから紹介する設定項目はSANGO独自のものではなく、WordPressであらかじめ用意されている項目です。

メニュー

SANGOでは、以下の3箇所にメニューを設定することができます。

  1. ヘッダーメニュー(PCでのみ表示)
  2. スライドメニュー(モバイルのみ)
  3. フッターメニュー(ページ最下部。PC/モバイル共通)

こちらはカスタマイザー上ではなく[外観]⇒[メニュー]から設定するのが分かりやすいかと思います。詳しくは下の記事を参照ください。

ウィジェット

SANGOではウィジェットにより、サイドバーや広告、ハンバーガーメニューなどを設置することができます。ただし、カスタマイザー上ではなく、管理画面の外観ウィジェットから行いましょう。詳しくはこちらの記事を参考にしてくださいませ。

ウィジェットの設定をする ウィジェットの設定をしよう:広告の貼り方も解説

ホームページ設定

ホームページ設定は、WordPressの標準機能です。この機能を活用することで、トップページに固定ページを表示させることができます。基本的には設定は不要ですが、もしトップページに固定ページを使用したい場合は、こちらの記事を参考にして頂ければと思います。

SANGOで固定ページをホーム固定する方法まとめ

追加CSS

WordPressにデフォルトで実装されているCSS追記スペースです。こちらに記入しても良いのですが「誤って消えてしまうリスク」や「管理のしやすさ」を考えると子テーマを用いて、CSSを追記していくことをおすすめします。

WordPressで子テーマを活用して安全にカスタマイズを行う方法

143 Comments

でんと

テンプレートを非公開サイトで使用していますので、記事下のシェアボタンを非表示にするスイッチがあるとうれしいです。

返信する
サルワカくん

検討します。とりあえず、下記のCSSを貼れば一括でシェアボタンを消すことができます。
.article-footer .footer-contents .sns-btn {
display: none;
}

返信する
いわい

こんにちは。シェアボタンのオンオフ機能、私も欲しいので一票。お問い合わせや、会社概要的なページでは非表示にしておきたいためです。

PCは非表示、モバイルはフッターのシェアボタンがあればよいという場合も多そうですが、私が運営しているサイトはPCでのアクセスが7割という事情もありまして。

よろしくお願いします。

返信する
サルワカくん

こんにちは。今後のアップデートでの実装を検討します(次回のアップデートは、もう内容が決まってしまっているので織り込めなさそうですが…)。
ちなみにですが、シェアボタンを消したい投稿の編集画面を開き、
「テキスト」エディタの方を選び、
以下のコードをエディタの最後にコピペすれば、そのページではシェアボタンが非表示になります。

<style>.article-footer .footer-contents .sns-btn {
  display: none;
}</style>

ぜひお試しください。

いわい

CSSありがとうございます!お返事いただけていることに今頃気付きました…ごめんなさい。SANGOとても気に入っています。今後のアップデートも期待しております!

ゆー

デフォルトのサムネイル画像ですが、テーマカスタマイズで「画像を選択」で登録画像を選択するとリンク切れの様になってしまします。
「削除」をするとデフォルトの画像にちゃんと戻って表示もされます。
記事の「アイキャッチ画像」として同じ画像を選んだ際にはちゃんと表示されます。
なにか設定が間違っているのでしょうか?

返信する
サルワカくん

画像サイズは、幅520px と 高さ300px 以上のものになっていますか?
また、画像形式はJPG/PNG/GIF以外になっていないでしょうか。
ご確認よろしくお願い致します。

返信する
ゆー

幅520px 高さ300pxで保存形式jpg、解像度72pixelの画像を選択しておりできませんでしたが、幅521px 高さ301pxに変更しましたら出来ました!!
ありがとうございます。

返信する
サルワカくん

あ、本当でしたか!ピッタリのサイズでNGになってしまうとは…失礼致しました。

返信する
山田

カスタマイザーの「詳細設定」内にある項目の「記事のタイトル下にアイキャッチ画像を表示しない」をPCとスマホで個別設定できるようになると嬉しい。スマホには表示させたいけど、PCだと画像領域が大きすぎて非表示にしたいからです。今後のアップデートにて検討頂けますと助かります。

返信する
サルワカくん

ご要望ありがとうございます。
いくつか問題が考えられるため、実装できるかは分かりませんが、
検討させて頂きます。

返信する
SANGO早くて使いやすくて最高です

個別記事だけでも良いのですが(一括1カラムにする)設定はないでしょうか?

返信する
サルワカくん

可能です。
①子テーマにsingle.phpを複製します。
②下記の部分を見つけます。

<div id="content"<?php column_class();?>>

③ ②を下記のコードにまるっと置き換えます。

<div id="content" class="one-column">

これで各記事の設定に関わらず、一括1カラムになります。

返信する
SANGO早くて使いやすくて最高です

迅速な対応ありがとうございます。無事1カラムに出来ました。これからもSANGO愛用していきます!(^^)!

返信する
サルワカくん

うまくいったようで良かったです。今後ともSANGOを使い倒してやってくださいませ。

返信する
NK

シェアボタン上の「SHARE」を別の文言に変更するにはどうしたらいいでしょうか。

返信する
NK

ご回答ありがとうございます!無事にやりたいことができました。お忙しいところご対応くださり感謝です。

返信する
健ママ

先日SANGOを購入し、カスタマイズ中です。
投稿の公開日を残し、更新日を非公開にする方法を教えていただけますでしょうか。
宜しくお願い致します。

返信する
アリス

背景画像を設定して使っているのですが、ワンカラム表示の記事の場合だと背景が白色になってしまいます。これは仕様なのでしょうか? もしワンカラム記事にも背景画像を適用する方法があれば教えていただきたいです。よろしくお願いいたします。

返信する
サルワカくん

そちらは仕様ですね。

#content.one-column {
background:transparent;
}
.one-column #entry {
  background: transparent;
}

とすれば、背景が表示されるかと思います。
もしコンテンツ部分は白にしたい場合には、下側のコード(.one-column #entry {~})は消して頂ければと思います。

返信する
アリス

早急にご返信いただきありがとうございます。無事、ワンカラムにも背景画像を適用することができました。

返信する
CM

次回のアップデートで以下を考慮して頂けるとありがたいです。
ヘッダーアイキャッチ画像上に表示される見出しと説明文の色をカスタマイズ画面で指定できるようになれば便利です。アイキャッチ画像は気分で時々変更するのですが、文字の部分の背景が白っぽい時に見出しと説明文が目立たなくなってしまうので。その度にCSSを変更するのは、ちょっと面倒。

返信する
にこ

サルワカのトップページ、人気記事一覧のアイキャッチ表示のように写真の上下左右に白枠を入れる事は可能でしょうか?それと、そのカード自体の四隅の角を丸くすることは可能ですか?出来れば右方ウィジェットのアーカイブやカテゴリー等の枠の四隅角も丸く出来ればすごく嬉しいです。

返信する
サルワカくん

「SANGO」カスタマイズ:一覧ページの画像に余白をつける方法という記事を書いてくださっている方がいらっしゃいます。こちらをご確認頂ければ。
ウィジェットやカードの角を丸くするには、以下のCSSを追加すればおそらくOKです。

.cardtype .cardtype__article {/*カードの丸み*/
    border-radius: 10px;/*丸み度合い*/
}

.sidebar .widget:not(.widget_search) {/*サイドバーウィジェットに丸み*/
    border-radius: 10px;/*丸み度合い*/
    overflow: hidden;
}
.textwidget p {
margin-top: 0;
}
返信する
にこ

お忙しい中すぐに解答頂き大変感謝致します。すごく参考になりました。本当にありがとうございます。

返信する
CM

「デフォルトのサムネイル画像」を設定したところ、トップページの記事一覧ではアイキャッチ画像を設定していない記事に対して正しく設定したサムネイル画像が表示されましたが、サイドバーウィジェットに設定した「最近の投稿」一覧では同じアイキャッチ画像は表示されずタイトル文字が表示されます。
これは仕様でしょうか?
できれば表示されたほうがうれしいです。

返信する
サルワカくん

すみません、そちらは仕様です…。
簡単なカスタマイズで表示可能かどうかはちょっと調べてみます。

返信する
CM

わかりました。
好みの問題かもしれませんが、サムネイル付のものと、無しのものが混在すると、バランスが良くないように見えるので。

返信する
Tk

トップページでも『スマホ閲覧時には記事下のサイドバーを非表示』にすることはできますでしょうか?

返信する
サルワカくん

はい、子テーマで編集するには以下のようになります。
①親テーマから子テーマにsidebar.phpを複製
②子テーマのsidebar.phpの1行目is_singular() && を削除して頂ければOKです。
つまり削除後の1行目は以下のようになります。

<?php if((wp_is_mobile() && get_option('no_sidebar_mobile')) //カスタマイザーでモバイルでは非表示に設定してるとき

キャッシュ系プラグインを使っている場合は、カスタマイズ後、キャッシュの削除をよろしくお願いします。

返信する
さぶ

いつも大変お世話になっています!
個人的な趣味でブログをはじめたところです、
フォローボックスですが、インスタがあると大変嬉しいです!
次回のアップデートの時にご参考いただければ幸いです。

返信する
でるた

いつもお世話になっております。
メルマガ登録フォームをサイドバーに表示すると、スマホだとかなり下に表示されてしまうので、スマホのみコンテンツ後広告の部分に「これから臨床心理士を目指す方へ」という形で挿入してみました。
ですが、table タグの枠が表示されてしまいます。
「コメントを残す」のフォームのような枠線のないフォームにするには、どうすればいいでしょうか?

返信する
uni

トップに戻るボタンがページ下部に固定されている状態です。このページのように、下にスクロールしていくと表示され、トップに戻る際もヌルヌル動くようにするにはどうすれば良いでしょうか?

返信する
サルワカくん

外観⇒カスタマイズ⇒SANGOオリジナル機能の管理⇒「トップへ戻るボタン」から簡単に設定ができます。
ご確認よろしくお願いします。

返信する
uni

デフォルトで表示されている、アクセントカラーのトップへ戻るボタンを押すとトップへすぐ戻ってしまいます。
外観⇒カスタマイズ⇒「トップへ戻るボタン」で表示させるトップへ戻るボタンのような戻り方に設定できますか?

返信する
サルワカくん

遅くなり失礼しました。最新のテーマだと外観⇒カスタマイズ⇒詳細設定に「headタグ内にコードを挿入」という欄があるので、そこに

<script>$('.footer .fab-btn').click(function(event) {
        event.preventDefault();
        $('html, body').animate({scrollTop: 0}, 300);
      })</script>

を貼り付けて頂ければと思います。

返信する
uni

回答ありがとうございます。
やってみたのですが、ページ上部のタイトルの上に、貼り付けたコードが表示されボタンの挙動に変化が無い状態です。

サルワカくん

あ、すみません。scriptタグではさむのを忘れていました。
前回のコメント上のコードを編集したので、そちらを貼り付けて頂いて良いですか?

uni

何度もすみません。
scriptタグを含めて貼り付けたのですが、変化がありません…

サルワカくん

うーん、それではhead欄は消して頂いて、子テーマのfunctions.phpに以下のコードをまるっと貼り付けてみて頂けますか? 

function my_footer_js_function() {
echo <<< EOM
<script>$('.footer .fab-btn').click(function(event) {
        event.preventDefault();
        $('html, body').animate({scrollTop: 0}, 300);
      })</script>
EOM;
}
add_action( 'wp_footer', 'my_footer_js_function' );

これでも動かない場合、サイトのURLを教えて頂けますと幸いです。

uni

functions.phpの方に貼り付けたところ、希望どうりの動作になりました!
何度も回答していただき、ありがとうございました。

サルワカくん

よかったです!スパッと回答できずに失礼しました。

ピピノブ

たびたびすみません。一点教えてください。PC版で記事一覧のレイアウトを「横長」にすると2列になると思いますが、モバイル版のように1列にする方法はございますでしょうか。よろしくお願いいたします。

返信する
サルワカくん

以下のCSSを子テーマのstyle.cssに追加してみて頂けますか?

@media only screen and (min-width: 1030px) {
 #main .sidelong__article {
    float: none;
    width: 94%;
    margin: 0 0 25px;
  }
  .sidelong h2 {
    font-size: 19px;
  }
}/*end 1030px*/
返信する
ピピノブ

ありがとうございます。カスタマイズで記事一覧の形式を横長にしてから、いただいたコードを追加することで、実現することができました。どうもありがとうございます。

返信する
長濱

カテゴリ違いでしたらすみません。
ウィジェットのタイトルの色は変えられましたが、おしゃれな見出しデザインにある
デザインをタイトルに割り当てたいのですが可能ですか?

返信する
ピピノブ

本当に度々ですみません。記事一覧の上に、関連カード型でオススメの記事がTopに表示されるようにしています。ですが、この関連カードの大きさが不揃いになってしまい、ちょっとカッコ悪いです。これの大きさを揃える方法はありますでしょうか?

返信する
サルワカくん
.home_top .shtb2 {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

でどうでしょうか。

返信する
サルワカくん

横2列のショートコードを使っているのですね。

.home_top .shtb2 .cell {
    display: block;
    width: 49.5%;
}

を追加すればいけるかもしれません。

返信する
ピピノブ

度々ありがとうございます。追加のコードも挿入していみましたが、駄目っぽいです・・。

MEE

トップ固定ページで、『新たな固定ページ』を設定すると、下の方に、次の記事示(『新たな固定ページ』)が表示されてしまいます。トップ固定ページのみ次の記事が表示されない様にするには、どうしたらいいですか。投稿画面では次に記事を表示させたいです。
すみませんが、ご回答お願いします。

返信する
ココア

お世話になっております。コメント失礼します。

記事一覧レイアウトについて質問させて下さい。
SANGOのデフォルトの設定では公開日の表示形式が

2018.01.14 SUN
というような感じになっていますが、

[記事公開日] 2018年1月14日
[記事公開日] 2018年4月21日

にしたいです。
可能でしょうか?
また、同様に記事内も同じ表記にしたいです。

お忙しいと思いますが、ご教授の程よろしくお願いします。

返信する
ココア

申し訳ありません。記入ミスです。
正しくは

[記事公開日] 2018年1月14日
[記事更新日] 2018年4月21日

と2列にこのような形式で公開日と更新日を並べたいです。
お忙しいと思いますが、ご教授の程よろしくお願いします。

返信する
ココア

度々コメント失礼します。

上記のような形式はやはり難しいでしょうか?

お忙しいと思いますが、お返事いただけると助かります。

返信する
サルワカくん

大変申し訳ないのですが、全体の見栄えが崩れる可能性のある大幅なカスタマイズに関しては、ご自身で行って頂きたくお願いします。
(一人ひとりの細かなカスタマイズ要望に対応しているとキリがないため・・・申し訳ないです)

返信する
CM

個別記事の下部に関連記事ウィジェットを表示させているのですが、SANGOのデモページでは
関連記事
となっていて、関連記事のタイトル前にブックマークのアイコンが表示されていますが、自分のSANGOv1.3.2では
関連記事
となっていて、関連記事のタイトル前にブックマークのアイコンは表示されません。
SANGOデモページのようにするには、テンプレートを触らないといけないのでしょうか?

返信する
サルワカくん

このページで解説している通り(こちらです)、関連記事のタイトルに<i class="fa fa-bookmark main-c"></i> 関連記事と入れるとアイコンが表示されます。

返信する
MAX

お世話になっております。初心者です。
SANGOのVer.1.3.3 から Ver.1.4 へバージョンアップしたところ、カスタマイザー機能の一部が動作しなくなってしまいました。

・『トップページへ戻るボタン』(Ver.1.3.3では問題なく機能していた)
・『追尾サイドバー』(Ver.1.3.3では問題なく機能していた)
・『タブ切替機能』(Ver.1.4の新機能、表示するが切替できず)

どこを直せばよいのか全く分からず苦慮しております。
ご教授いただけると助かります。
よろしくお願いいたします。

返信する
サルワカくん

動作しないとは、具体的にはどのようなことですか?
おそらくアップデートとは別の部分に原因がある気がします。
一度、プラグインをすべて停止してみましたか?(直った場合1つずつ戻して原因となっているプラグインを特定する)
また、カスタマイズした内容が影響しているということはありませんか?(子テーマではなく親テーマを有効化しても機能しませんか?)

返信する
MAX

度々失礼します。
ご返信ありがとうございます。
言葉足らずで申し訳ありません。

・『トップページへ戻るボタン』(戻るボタンが表示しなくなった)
・『追尾サイドバー』(追尾しなくなった)
・『タブ切替機能』(表示するがクリックしても切替できず)

返信でご指摘いただきましたプラグインの関連を疑ってみたところ、原因は分かりました。
『Easy Smooth Scroll Links』のプラグインを停止したところ、上記症状が全て正常に動作することが分かりました。
初心者につき、質問が明確でなく言葉足らずとなりましたこと、申し訳ありません。
また、丁寧なご返信に大変感謝いたします。
今後もSANGOを愛用してブログ作りに励みたいと思います。
ご対応ありがとうございました。

返信する
サルワカくん

ご報告ありがとうございます。
なるほど。「Easy Smooth Scroll Links」が問題の原因になることがあるのですね。
今後の参考にさせて頂きます。ありがとうございました。

返信する
るい

いつもお世話になっています。SHAREの文言変更についての記事読ませていただきました。
\ / も含め \SHARE / の行を全て非表示にしたい(ボタンのみ表示したい)のですが、
どのようにしたらいいでしょうか。 

返信する
るい

何度も申し訳ありません。よくある質問に記載がありました。試してみます。
ありがとうございました。

返信する
ジョナサン

お世話になります。
自動生成されるthumb-520とthumb-160の生成をやめて、
関連記事と新着記事に使われるサムネイルをwordpressデフォルトの150pxサイズの画像にしたいのですができますでしょうか?
ちなみに記事はタイプAorBで4列表示されるように変更しております。
よろしくお願い致します。

返信する
ママ

お世話になっております。
カスタマイザーでPC・モバイルともに「トップへ戻るボタン」を表示するにチェックを入れていないのですが、どちらも表示されてしまいます。
どうすれば消せるのでしょうか?

また上記ボタンが表示されているからなのか、それは関係していないのかはわかりませんが、モバイル表示でサイドバーとフッターの間にかなり余白ができてしまいます。
(サイドバー→ボタンと余白→フッター)
余白の間にユーザーが離脱するのを防ぐために余白をなくしたいのですが、どうすればなくす(狭める)ことができますか?

お忙しいところ恐縮ですがご回答よろしくお願いいたします。

返信する
ママ

度々すみません。
試しにカスタマイザーでトップへ戻るボタンを表示するにしてみたところ、既存の表示されていたものにプラスし、こちらのページと同じ追尾型のボタンが新たに増えました。

どうも私のページの不具合は、
「追尾型ではないトップへ戻るボタンが、固定でサイドバーとフッターの間に余白とともに余分に挿入されている(カスタマイザーのオンオフ関係なく)」ようです。

どうすればこの余分に挿入されてしまっているボタンを消せるのでしょうか?

返信する
サルワカくん

そちらは仕様です。GoogleなどのマテリアルデザインのWebサイトでよく見かける表現です。
気になるようでしたら、

.footer .fab-btn {
    display: none;
}

のCSSを追加することで消せます。

返信する
ママ

仕様だったんですね、大変失礼いたしました。
教えていただいたとおりCSS追記でボタンは消せたのですが、サイドバーとフッターの間に余白があるままです。

PC表示ではそれほど気にならないのですが、スマホで見た時にかなり空いているのが気になるので、こちらをなくす(または狭める)事は可能でしょうか?
お手数ですがよろしくお願いいたします。

返信する
サルワカくん
@media only screen and (max-width: 768px) {
  #content {
    padding-bottom: 0!important;
  }
  #inner-footer {
    padding-top: 0!important;
  }
}/*end max768*/

を子テーマのstyle.cssに追加すればフッター上の余白が小さくなると思います。

ネコ

いつもお世話になっております。ありがとうございます。
さて、質問ですが、CTAを固定ページへ置く方法はございますでしょうか?
現在は、記事下だけ表示されるようになると理解しています。

返信する
サルワカくん

page.phpを子テーマに複製し、

<?php insert_cta(); //CTA ?>

というコードをCTAを表示したい位置にペーストすると良いかと思います。

<?php insert_social_buttons();?>

のすぐ下くらいが良いですかね。

返信する
ネコ

サルワカ様

ご教示ありがとうございます。
無事、固定ページ下にCTAが設置されました!
感謝です!

返信する
まさと

すみません、page.phpを子テーマに複製し~というところなのですが子テーマの内容をコピペする感じなのでしょうか?

返信する
なぴ助

ど初心者です。

アイキャッチ画像を設定して記事を投稿し、その記事ページをサイトで開くとアイキャッチ画像が最初に表示される仕様になっています。ユーザーが記事ページを開いたときのこのアイキャッチを非表示に設定したいのですが、方法はありますでしょうか。

ちなみに、デフォルトのアイキャッチ画像だと記事ページを開いてもアイキャッチは表示されません。

ご教示よろしくお願いいたします。

返信する
サルワカくん

外観⇒カスタマイズ⇒「詳細設定」で、アイキャッチ画像を非表示にするオプションを選ぶことができます。

返信する
ks

お世話になっております。
子テーマを使うようになってからか、投稿の右上に表示される「New」が表示されなくなってしまったように思います。何か勘違いでしょうか?あるいはどこかにスイッチがあるでしょうか。

返信する
サルワカくん

横長の記事一覧レイアウトでは「NEW」マークは表示されません。これはNEWマークを載せるスペースがないためです。
また、通常のカードタイプのレイアウトでNEWマークが表示されない場合には、外観⇒詳細設定⇒NEWを表示する日数が0になっている可能性があります。こちらの数字を1以上にすれば表示されるようになるはずです。

返信する
ks

コメントありがとうございます。
ご教示いただいた方法で解決しました。値が何も入っていない状態になっておりました。
迅速なご回答、誠にありがとうございました。

返信する
H

ヘッダー背景色としてグラデーションを使用したいのですが、どちらにCSSを設置すべきでしょうか?GradPadにてコードは取得済みです。

返信する
H

ご返信ありがとうございます
追加するCSSもお教えいただけいただけますでしょうか?

返信する
サルワカくん
.header {
  background: linear-gradient(45deg,#色コード1,#色コード2)!important;
}

でいけると思います。

返信する
ひろみ

モバイルでの新着記事一覧を「【サルワカ風】トップページに人気記事を設置する方法」のカスタマイズをおこなった場合の上部の人気記事が並んでいるように2列で表示することは可能でしょうか?

返信する
なぴ助

フォローボックス(記事下)の設定についてなのですが、フェイスブックのタイムラインのURL(FBで個人ページのURLの設定は済んでいる)を入れて更新してもサイトに反映されません。

何か考えられる原因はありますでしょうか。ツイッターのフォローボタンは設置できました。

返信する
なぴ助

さきほどのフォローボックスでの設定の件ですが、URLからwwwを抜いたら反映されました。

返信する
サルワカくん

wwwの有無により反映されたりされなかったりするのですね。参考になる情報のご提供、ありがとうございました。

返信する
AKIHIRO

お役に立つかわかりませんが、ご報告です。すでに自己解決したのですが、「WP-Copyright-Protection」というプラグインを入れていると、カスタマイザー(左側のカスタマイズメニュー)が閉じてしまい、トップページと同じ状態になりカスタマイズできなくなることがわかりました。もし同じようなお悩みを持つ方からご相談があれば、ご参考にしていただければ幸いです。

返信する
サルワカくん

プラグインのアップデートが5年前なので、WordPress自体との互換性に問題がありそうですね・・・。
貴重な情報の提供、ありがとうございました。

返信する
サルワカくん

利用規約にも書いてありますが、カスタマイズサポートは行っておりません。
対応可能なものは対応しますが、全て回答できるわけではありません。
もしカスタマイズサポートを求められるのであれば、そのようなテーマをご利用頂ければと思います。
申し訳ありませんが、ご了承ください。

返信する
サルワカくん

内容理解しました(コメント欄上では非表示とさせていただきます)。
たくさんのコメントが来るため、対応に時間がかかる場合もありますし
対応ができない場合もあります。
2列の件は、対応できるか検討してます(対応可能であれば返信します)。

返信する
お願いします

お世話になっております。
先日AndroidからiPhone X に乗り換えたのですが、背景画像がページをスクロールした時に一緒スクロールされるようになっていました。
カスタマイズの一緒にスクロール、にはチェックを入れておらず、Androidで確認する正常になっています。
原因がわからないので何卒よろしくお願い致します。

返信する
TAKA

詳細設定の「記事のタイトル下にアイキャッチ画像を表示しない」とありますが。特定のカテゴリーのみ、アイキャッチ画像を表示しないようにできないでしょうか?

返信する
サルワカくん

投稿画面にて、その記事に対してアイキャッチ画像を登録しなければ良いと思います。

返信する
TAKA

ご返信ありがとうございます。サムネイルとしてはアイキャッチを使用したいのですが、ページを開いた際にはアイキャッチをタイトル下には置きたくないのです…。

Youtubeの動画のサムネイルと同じ画像をアイキャッチをして使用したいのですが、記事下にそれが入ると同じ画像が並んでしまうのです。

やりたいこととしては、動画関連のカテゴリーだけ、ページが開くとタイトル下にYoutubeの動画をすぐ置きたいです(そのため記事内でのアイキャッチは不要だが、記事一覧の際のサムネイルとしては使用したい)。可能でしょうか?

返信する
サルワカくん

「記事のタイトル下にアイキャッチ画像を表示しない」にチェックを入れたうえで、
投稿ページにてアイキャッチ画像を登録することで、それが可能です。

返信する
TAKA

ご丁寧にご返信ありがとうございます!

申し訳ありません。私の質問がわかりにくかったですね…。その設定だと全体もタイトル下にアイキャッチが入らないんです…。

特定のカテゴリー以外(全体)は、タイトル下にアイキャッチを入れつつ、特定のカテゴリーのみタイトル下にアイキャッチを入れないことが可能か、ということでした。
やりたいことをまとめました。

●全体
・タイトル下にアイキャッチ画像が入る。(デフォルトで入るようにしたい)
・一覧でもサムネイルとして使用

●動画カテゴリーのみ
・タイトル下にアイキャッチ画像が入らない(タイトル下にすぐYoutube動画を置きたい)
・一覧ではサムネイルとして使用

上記の形はどうすれば可能でしょうか?何度も申し訳ありません。

TAKA

以前質問させていただきました問題、無事に解決できました。

サルワカさんのこちらの記事にて、カテゴリークラスを出力後、
「display:none;」を使って実現できました!ありがとうございました。

(しつこい質問で申し訳ありませんでした…。)

サルワカくん

あ・・・完全に前回の質問を見落としてしまっておりました。
申し訳ありません。
うまくいったようで良かったです!ご報告ありがとうございました。

五月

度々の質問ですみません。
投稿の個別ページでの関連記事の表示について質問させていただきます。
カスタマイズに①「関連記事(記事下)」と②「関連記事」の2つの項目があり、
①(表示位置はSHAREの下の欄)については 記事下に関連記事を表示しない、にチェックをいれることで表示を消せるのですが、②(表示位置は本文直下SHAREの上のあたり)の関連記事は非表示には出来ないのでしょうか?
カスタマイズで②を開いても、見出しの表示、などの設定はあるのですが、非表示にする、という方法がわかりませんでした。

初歩的な設定の質問で大変申し訳ありませんが、よろしくお願いいたします。

返信する
五月

質問をこちらのコメント欄でさせていただいたのに、質問直後に自己解決したことで慌ててしまい、別の記事のコメント欄に投稿してしまいました。
質問させていただいた、関連記事の表示は導入していたプラグインの設定の問題だけでした。
コメント欄お目汚ししてしまいすみません。

返信する
Kera

お世話になります。
二つ質問が有ります。
一つは記事の後の『フォローミー』の欄に
フェイスブックのURLを入れても表示されません。
もう一つは新着記事の『NEW』の表示が出ません。
どうしたら良いでしょうか。
お手数をお掛け致しますが宜しくお願い致します。

返信する
サルワカくん

1つめについては、トップページを拝見しましたが、NEWという文字が問題なく表示されているようです。
2つめについては、申し訳ないのですが、Facebook「ページ」のフォローボタン用です・・・。個人アカウントへのフォローボタンとすることはできないようです。

返信する
Kera

サルワカ様。
NEWの文字は設定のミスでした。
そしてフェイスブックのフォローボタンですが
こちらの質問ページの中でフェイスブックのURLの
wwwを抜かして更新したところ表記される様になりました。
この度はお手数をお掛け致しました。

返信する
サルワカくん

wwwを除くと反映されるとは知りませんでした。
情報提供ありがとうございました。

返信する
池本えいみー

度々コメント失礼します。
サイドバーをトップページではなく、記事内に表示させたいです。
トップページには非表示で記事内にのみサイドバーを表示させる方法はありますでしょうか?

返信する
サルワカくん

大変申し訳ないのですが、現状ではトップページ(PC表示)のサイドバーを非表示にすることはできません。
ご理解よろしくおねがいします。

返信する
楽匠

こんにちは。
お忙しい中恐縮ですが質問です。関連記事・おすすめ記事の見出しのデザインはどう変更するのでしょうか?
教えてください。

返信する
サルワカくん
.footer-contents #main .h-undeline {
 /*ここにCSS*/
}

という感じで変えることができるかと思います。

返信する
きゅう

はじめまして。問い合わせの方に間違っていってしまったかもしれません、すみません。
サイドバーを右から左にしたいのですが、どこで設定すればいいのでしょうか?

返信する
サルワカくん

申し訳ないのですが、SANGOのサイドバーは右にのみ配置することができます。

返信する
maruco

お世話になっております。
ワードプレスで投稿した際に自動でTwitterに投稿する機能はありますか?
よくある質問でTwitterカードを正方形にする方法は見つかったのですが、肝心の自動投稿の方法が見つけられませんでした。
お忙しいとは思いますが、お教えいただけると幸いです。
どうそよろしくお願いいたします。

返信する
サルワカくん

お世話になります。そのあたりはテーマではなく、プラグインでやるのが一般的ですね。
「twitter wordpress 自動投稿」などとGoogle検索すると、解説記事がヒットします。

返信する
maruco

早速のご返信ありがとうございます!
Googleで検索してみます。

もう一点お伺いしたいのですが、スマートフォンで見た際のトップページの新着記事一覧を関連記事のタイプBスマホ表示(スクロールなし)のサイズ(スマホの画面に2列ずつ記事が表示されている状況)にすることは可能でしょうか??

返信する
maruco

お世話になっております。
よくある質問をよく読まずに質問してしまい、申し訳ありませんでした。以後、気をつけます。

お教えいただきありがとうございました。今後ともよろしくお願いいたします。

きゃっつり。

横長タイプでカテゴリーラベルを表示するカスタマイズ方法を教えてください。

返信する
サルワカくん

①以下のコードを子テーマのfunctions.phpに追加

/*横長カードをカスタマイズ*/
  function sng_sidelong_card(){ ?>
    <article class="sidelong__article">
        <a class="sidelong__link" href="<?php the_permalink() ?>">
          <p class="sidelong__img">
            <img src="<?php echo featured_image_src('thumb-160'); ?>" alt="<?php the_title(); ?>">
          </p>
          <div class="sidelong__article-info">
            <?php if(!get_option('remove_pubdate')):?>
            <time class="updated entry-time dfont" datetime="<?php the_time('Y-m-d'); ?>"><?php echo get_post_time('Y.m.d D');?></time>
            <?php endif; ?>
            <h2><?php the_title(); ?></h2>
          </div>
        </a>
        <?php 
                newmark();
                 if(!is_archive()) output_catogry_link();  
        ?>
    </article>
<?php
  }
/*END 横長カードをカスタマイズ*/

②以下のCSSを追加

.sidelong__article .cat-name {
    top: 0;
    right: 0;
    left: auto;
    padding: 0 5px;
    height: 16px;
    line-height: 16px;
    font-size: 10px;
    border-radius: 0;
}

ご確認よろしくお願い致します。

返信する
きゃっつり。

ありがとうございます。
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の勉強をしていきたいと思います。
ご多用中にも関わらず、早々のご対応ありがとうございました!
今後とも、どうぞよろしくお願いいたします。

返信する
vivi

サルワカ様

質問です。
外観→カスタマイズ→詳細設定→
シェアボタンを別デザインにするというボタンを押しても、

変化がなく、シェアボタンを別にする事ができません。
普通に変更したいのですが、どのように
変更すればいいのかご教示頂けたら幸いです。
忙しい中申し訳ございません。
よろしくお願いいたします。

返信する
サルワカくん

サイト確認しましたが、別デザインになっているかと思います。
もしかして、Ver1.5〜導入された「Extended FAB(タイトル下の横長スタイルのシェアボタン)」のことでしょうか。
その場合、Ver1.5のアップデートしたうえで、外観→カスタマイズ→シェアボタン→「記事タイトル下の円形シェアボタンにテキストを含め、横長ボタン化する」にチェックを入れれば、横長のものになります。

返信する
vivi

ご返信ありがとうございます。
ちょっとややこしい書き方をしてしまったかもしれません。
タイトル下の横長スタイルのシェアボタンの事ではありません。

現在は、こちらのページの記事内にある
「4-9.シェアボタンの設定」の項の

「記事下のシェアボタンを別デザインにする」の状態になっています。
ツイッタアイコン、FBアイコン、はてブアイコンの感覚が現在狭い状態になっている
という事です。

それを、

ツイッタアイコン、FBアイコン、はてブアイコンの感覚が広い状態に戻したいのですが、
外観→カスタマイズ→詳細設定→シェアボタンを別デザインする

というチェックボックスを押しても、
何をしても、元に戻らず、

現状のままなのです。
そちらの変更手順をご教示頂けたらと思って
ご連絡を差し上げました。

ご返信頂けたら幸いでございます。

返信する
サルワカくん

すみません。
①シェアボタン下のフォローボックスを非表示にして
②シェアボタンのスタイルをデフォルト状態に戻したい
ということで良いでしょうか?
①はフォローボックスの設定で非表示にできます。
②は「記事下のシェアボタンを別デザインにする」のチェックを外して保存しても、デフォルト状態に戻らないということでしょうか。

返信する
vivi

はいその通りです。

ですが、、、
なぜか今改めて触って、公開ボタンを押したら
反映されました。。。

昨日はキャッシュの問題かと思って、
キャッシュクリアした上で触っていましたが、
急に今できたっぽいです(T_T)

お騒がせして申し訳ございませんでした。
カスタマイザーでの変化がすぐにリアルタイムで
反映されない場合があるっぽいです。

忙しい中お手数おかけして申し訳ございませんでした。
ありがとうございます。

コメントを残す

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