本文のみのページにシェアボタンをつけたい

simplicityの「本文のみ（狭いカラム）」をランディングページに使用していますが、ここにＳＮＳのシェアボタンをつけたいのですが、どうすればよろしいでしょうか？

このページにつけたいと考えています。
https://cools.jp/2017/04/10/fitness/

.postid-1169 .sns-group-bottom {
    display: block;
}

で、記事下のは出ます。

後は設定されていない場合は表示するようにセレクタを指定します。

ちなみに、上記はリンクのページのみです。本文のみ(狭い)全体に適用する場合は、

.page-type-narrow .sns-group-bottom {
    display: block;
}

こう書きます。子テーマstyle.cssに書いて下さい。

Hidekichi様

どうもありがとうございます。
完璧に設定できました。
https://cools.jp/2017/04/10/fitness/

ボトムだけでなく、タイトルと本文の間にも挿入することはできますでしょうか？

ちょうど、このページのタイトルの下に並んでいるシェアボタンと同じものを出したいと思っています。

「本文のみ」にしているのでそれら欲しい機能がないわけですから、「1カラム(狭い)」にして、不要な部分をcssで非表示にすればよいかと思います。

bodyタグに「postid-xx」(xxは数字)というようなクラスがついていると思います。サイトを見ると「postid-1169」ですかね。これを起点にして、

.postid-1169 #header,
.postid-1169 #navi,
.postid-1169 #breadcrumb,
.postid-1169 ...その他... {
  display: none;
}

と言う具合に不要なブロックを消していけばよいだけです。無いものを入れる為には手を入れるのがphpファイル本体になって場合によっては親テーマのカスタマイズになりますので、上記方法が面倒と感じても結果的に楽なはずです。最初の1回だけですから。

上記に合わせて非表示にするなら、関連記事、コメント、post-meta、#footerとかですかね。
セレクタはデベロッパーツールで調べられますし、display: noneは単に非表示になるだけで、デベロッパーツールのインスペクタ(html上)では半透明になり、正しくできているかも確認できます。

一応、昔に作ったサンプルで、正しく動作するかは確認してませんけれども、
サンプル: 任意の箇所に新たにSNSボタンを入れて装飾可能にする | codepen
※ cssはscssで書いています。css欄の下向き三角よりview compiledでcssに変換できます。

こういうのもあるにはあります。ありますが、手間なので「1カラム(狭い)」とcssで非表示が一番ラクかと思います。

Hidekichi様

どうもありがとうございます。

.postid-1169 を display: none; にする方法をsimplicity2 child の cssに足してみたのですが、消えませんでした。どこかで上書きされているのかもしれません。

postid-1169だけでなく、「１カラム（狭い）」のsite-title, site-descriptionをすべて非表示にできるといいです。

> simplicity2 child の cssに足してみたのですが

子テーマstyle.cssを見てみましたが、追加された部分がありませんけども、消されたんですか？

> １カラム（狭い）は

.page-type-column1.page-type-narrow 該当のセレクタ {
  display: none;
}

こんな感じかと思います。クラスが連結されているのと、該当のセレクタが半角スペース開いている意味を正しく理解して下さい。

もし何かしらのページだけ特別に表示する場合は、

.postid-1169.page-type-column1.page-type-narrow 該当のセレクタ {
  display: block;
}

こんな感じになります。

.page-type-column1.page-type-narrow 該当のセレクタで、不要なものを全体的に消すけれども、
.postid-1169.page-type-column1.page-type-narrow 該当のセレクタ でpostid-1169の時は該当のセレクタを表示するという感じです。

必ず優先したいものは後に書いて下さい。どうしても優先したい方が有効にならない場合は!importantをプロパティに付けます。ただし、!importantは!、同じセレクタの同じプロパティのimportant付きでしか上書きできません。

.test {
  color: red !important;
}
.test {
  color: blue;
}

こうある場合、.testは、本来のcssのルールで言えばblueで出力されるところですが、!importantがあるのでblueの方では上書きできず、redが出力されます。

.test {
  color: blue !important;
}

とすれば!importantがあるのでblueで出力されますが、これを更に上書きしようとすると!important付きがその後連発することになるのでわけがわからなくなり、最初のredを上書きできないようにしていた意味が無くなります。

このように!importantは使い方がややこしくなる諸刃の剣ですので、設計を間違わないように管理して下さい。

Hidekichi様

どうもありがとうございます。

Simplicity2 child style.css に

.page-type-column1.page-type-narrow #header {
display: none !important;
}

と追加し、ページタイプを１カラム（狭い）にしてみましたが、上手くいきません。

すいませんが、気づくところがあれば、ご指摘ただければ幸いです。

Hidekichi様

しばらくしたら有効になりました。
キャッシュがあったのかもしれません。
ありがとうございました。

豊田