ブログカスタマイズの雑談BLOG

自分のブログを眺めていたら、個別記事の下にTwitterやFacebook等の「ソーシャルボタン」が表示されているのが気になってきました。





今はちょこちょことカスタマイズを試している段階なんですが、その過程でTwitterやFacebookアイコンが邪魔になってきましたｗ
私は別に必要ないし、使わないんだったら非表示にしちゃおう！という短絡的思考により、今回の記事を書いております。


単純に非表示にするだけだし、必要な時はまた表示させればいいので、あまり深く考えることはないと思います。（というか、こういう内容を記事にする必要性すらないと思いますが、下書きを書いてしまったので掲載します）

ソーシャルボタンを非表示にする

「管理画面＞設定」を開くと、「ソーシャルボタン」があるので、クリックします。






ソーシャルボタンの設定ページが開きます。
デフォルトの状態だと「シンプルブックマークを使用する」にチェックが入っているので、このチェックをはずします。あとは「保存」をクリックすれば、記事下のソーシャルボタンを非表示にできます。





ちなみに、「シンプルブックマークを使用する」にチェックが入っている場合は、下の「PC」や「スマートフォン」に表示させるマークを選択できません。「シンプルブックマーク」を選んでいるのだから、当然です。


チェックをはずせば、他のマークを1つずつ選択できます。表示させたいマークがあるならば、まずは「シンプルブックマークを使用する」のチェックをはずしてみましょう。

posted by の下余白を調整する

ソーシャルボタンを非表示にすると、こんな感じになります。





このままでもいいのですが、やっぱりちょっと、隙間が気になります。
「posted by」の部分と、その下の枠線との空間（赤い矢印部分）が広すぎるので、余白を小さくします。



CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面で「article__footer」というclassを探します。
CSSの該当部分に下記「編集後」のコードをコピペするか直接記述し、変更内容を「保存」します。


＜元コード（以前の記事で編集済み）＞


＜編集後＞


●「元コード」で紹介している内容は、以前の記事＜■記事ページの「posted by」「Twitterマーク」の余白を調整＞で変更済のコード記述です。（デフォルトのテンプレートの記述内容とは違います）

●Twitter等のマークを非表示にしたので、「posted by」部分の下余白を「40px」から「5px」に変更しました。数値だけを見ると「こんなに余白を減らして大丈夫？」と思われるかもしれませんが、そもそも記事部分は点線で囲むように指定していますし、その点線にはちゃんと余白を設定していますから、大丈夫です。

●と思っていましたが、私はこのブログのデザインをリニューアルする際に、記事を囲む点線部分（新しく作ったclass「article_kobetu」）の余白を現行の「10px」から「15px」に変更するつもりなので、そんなに狭く感じなかったことにさっき気が付きました。なので、現時点ではとりあえず「10px」ぐらいにしておいてはどうでしょう？

●つーか、下の「実際のページ」画像を見てみて、問題ないという場合は「5px」で、ちょっと狭いと思う場合は「10px」ぐらいにすればいいと思います。（もう、細かいことは知ったこっちゃありませんｗ）

コード編集後のCSSと実際のページ

次の記事の紹介

次の記事では、記事ページの「関連記事」のサムネイルにマウスを乗せた時に記事タイトルを表示させる方法を説明します。