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

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

こんにちは、WEBデザイナーのおかぴーです!

プロフィールはこちら。ブログデザインと組み合わせて効果的な収益化が目指せるこちらの記事もおすすめです^^

 

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

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

 

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

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

 

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

JIN SNSボタン 表示・非表示
JIN SNSボタン 表示・非表示
『カスタマイズする前に』 カスタマイズをするときは、子テーマを使って、バックアップをとってから行ってください。カスタマイズについては必ず自己責任でお願いいたします。

 

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

 

目次

カスタマイズする箇所

 

今回編集するのは、この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ソフトの設定方法はこちらを参考に^^↓

[sitecard subtitle=合わせて読みたい url=https://okap01.com/stork-child-theme-install target=]

[sitecard subtitle=合わせて読みたい url=https://okap01.com/filezilla target=]

 

子テーマにコピーする

さっそく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ボタン 表示・非表示
おかぴーおかぴー

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

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

おまけ

ブログを作っていると、ふと

「見た目をもっとカッコよくしたい」「おしゃれでキレイな感じにしたい」っていう衝動が来ませんか?

みみこ

あるあるですね(笑)なんかしっくりこないなーとか、
でも、どう作っていいか操作も含めて分からないことがあります。

おかぴー

そんな時は、WEBデザインの勉強を少しだけでもいいので、
やってみるのもいいと思います^^

僕は見た目が納得がいくものが作れると、モチベーションが上がります。

よーし!また記事を書こうかな〜って思えるし、書いたものを見返して

「 はぁぁぁぁ〜(*´꒳`*)ウキウキ 」

ってなります(笑)

僕がこのブログを通して知り合った方は、みなさん自分のブログの見た目(デザイン性)とか、作り込み(WordPressの操作)に悩んでいる方が多かったです。

僕自身も初めはWordPressの管理画面からよく分からなくて、どこをいじったら何が変わるのか?もそうだし、

色を変えたり大きさ変えたり、基本的な内容でも何時間もかかったことがありました。

知り合った方のお悩みを聞いて改めて感じたことは、

そもそもWordPressでブログを作る=WEBデザインの知識が多少なり必要になるということです。

デザイン知識然り、コーディング知識しかり。。

でも、WEBデザインの勉強と言ってもその範囲はめちゃくちゃ広いし、ぶっちゃけ終わりはありません。

専門用語も多いし、だからと言って初心者の人が幅広く手を出して勉強するのも大変です。(ゴールを見失います)

それなら、

WEBデザイン初心者の人でも、モチベーションが爆上がりできるような必要範囲を絞ったブログ制作の教材があったらいいんじゃないか?と思ったんですが、どうでしょうか?(*^^*)

具体的には、こんな内容を盛り込む予定です↓

  • WEBデザインの知識を活かして魅力的なメインビジュアル(ブログのメイン画像・アイキャッチ画像)を楽しみながら作れるようになれる
  • カスタマイズが一定レベルでできるようになれる
  • パソコン自体の知識も身に付く
  • 程よい範囲のWEB知識がつくから、情報リテラシー(※)が高くなる
  • 登録してくれた方それぞれのお悩みに特化した、特別コンテンツを受け取れる

※情報リテラシー:世の中にあふれる多くの情報を、適切に活用できる能力

これから作っていくことになるのですが、

提供開始まで先行登録してくれた方には別途プレゼントもお送りしたいと考えています

最新の知識を受け取ることができますし、

登録してくれた方それぞれのお悩みに応じたコンテンツの提供ができることも、このLINEの一つの魅力かなと。

少しでも作れるよ〜って人にも、ためになる内容を盛り込む予定もあるので、興味がある方はLINE登録してもらえると嬉しいです^^

↓↓↓

チェックしてね
「お気軽にどうぞ〜」
よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


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

目次