【JIN】記事のSNSボタンの「はてブ・Pocketボタン」を非表示にする方法

JIN SNSボタン 表示・非表示
おかぴー

こんにちは!
WEBデザイナーのおかぴー(@blueokap)です。

僕の詳しいプロフィールと、このブログについてはこちら

 

今回は、以前作ったJINのプロフィールのSNSボタンの記事に、カスタマイズのリクエストをもらいまして、

「JINのテーマで記事の上・下に表示されるSNSボタンのうち、はてブ・Pocketボタンの非表示方法」について書いていこうと思います!

 

具体的には、この記事の上と下に表示される5つのボタンを↓

JIN SNSボタン 表示・非表示
JIN SNSボタン 表示・非表示

 

 

はてブ・Pocketボタンを減らし3つにして、さらに幅を調整します!

JIN SNSボタン 表示・非表示
JIN SNSボタン 表示・非表示

 

カスタマイズする前に
カスタマイズをするときは、バックアップをとって子テーマを使いましょう。CSSを貼り付ける場所はこちらから。

今回のカスタマイズに必要なファイルを子テーマにコピーする方法が、子テーマ作成方法の記事だけだと不十分だったので、この記事で追記しますね!

 


カスタマイズする箇所

 

今回編集するのは、この3箇所です。

  1. sns-top.php(記事上のボタン)
  2. sns.php(記事下のボタン)
  3. CSS

 

「①sns-top.php」「②sns.php」は、「themes>jin>includes」の中にあります。
このファイルを子テーマにアップロードして編集します。

今からsns-top.phpを解説しますが、2つのファイルは同じ編集方法なので、sns.phpも同じように子テーマにコピー・編集してもらえれば大丈夫です。

 

※ちなみに、子テーマにファイルをコピーする方法・FTPソフトの設定方法はこちらを参考に^^↓

具体的に解説!カスタマイズするファイルを子テーマにインストールする方法

2018.09.15

【FTPソフト】FileZillaのインストール・設定・使い方まとめ

2018.09.17

 

子テーマにコピーする

さっそくsns-top.phpを子テーマにコピーしていきましょう。

 

①右のFTPサーバー内で、右クリック→ディレクトリを作成を選びます。

JIN FTPソフト

 

②末尾の「新規ディレクトリ」を、「include」に名前を変える。

JIN FTPソフト

 

こんな感じで、「include」という空のディレクトリが増えてればOKです↓

JIN FTPソフト

 

③この中に、sns-top.phpファイルをアップロード。

JIN FTPソフト

 

同じように、sns.phpもアップロードすればコピーは終わりです。

次は編集に移りましょう!

 

sns-top.php・sns.phpの編集

 

この中の2箇所をコメントアウトします。

おかぴー

コメントアウトとは、<!--  -->でコードを挟むことによって、表示させない方法です。

対象箇所をザクッと消してもいいんですが、また戻したいときにこのコメントアウトの記号を戻すだけで元に戻るので、この方法がオススメです。

つまり、今回のカスタマイズでは2つのSNSボタンを<!--  -->で囲み、非表示にします。

 

「外観>テーマの編集」にsns-top.phpファイルを子テーマにコピーできたら、右のincludeの中にコピーしたファイルが出てくるはずなので、赤枠の部分をいじっていきます。

※右上の「編集するテーマを選択」で、「jin-child」になっていることを確認してくださいね^^

 

まずは「はてブボタン」から!

JIN SNSボタン 表示・非表示

 

はてブボタンの消し方
  • <!--はてブボタン-->の後ろの-->を消す
  • 最後の行<?php endif; ?>の後ろに-->を追加する
JIN SNSボタン 表示・非表示

 

これと同じ要領で、「Pocketボタン」も下の画像のように編集しましょう!

Pocketボタンの消し方
  • <!--Pocketボタン-->の後ろの-->を消す
  • 最後の行<?php endif; ?>の後ろに-->を追加する
JIN SNSボタン 表示・非表示

 

ここまでできたら、こんな感じになると思います↓

JIN SNSボタン 表示・非表示
JIN SNSボタン 表示・非表示

ここまで来れば、あと少しで完成です!

最後に、ボタンの幅をCSSにコードを追加して調整しましょう!

 

CSSにコードを追加

 

こちらをコピペしてください^^↓

ソースコード

.sns-design-type01 .sns-top li, .sns-design-type01 .sns li, .sns-design-type02 .sns-top li, .sns-design-type02 .sns li{
width:33%;
}

3つのボタンなので、33%にしています。

ボタンの数によって変わると思うので、ちょうどいい幅を設定してみてくださいね。

 

完成!

 

JIN SNSボタン 表示・非表示
JIN SNSボタン 表示・非表示

 

おかぴー

これで完成です!お疲れさまでしたー!!

他にもカスタマイズしたいことがあれば、またご相談してくださいね^^

 

ブログ作り、何から始めたらいいか迷っている人へ

WordPressの設定、記事作り、収益化も・・・ブログと一言で言ってもやることいっぱい、どれから手をつけたらいいか分からない・・・

実は、デザインを整えるのも、ブログの方向性が決まってから進めるのがおすすめ!

一度自分のブログを俯瞰して(全体を上から見る)どんな方向性にすればいいかを見直す機会を作ることの重要性を解説。

同時に、あなたのブログ作りを加速させる「リサーチ」「ターゲット理解」「考える力」を鍛えよう!

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください