うえのブログ

試行錯誤をしながらまともなブログを書けるようになるブログ

うえのブログ

シェアボタンが表示されない(超絶初心者向け)

スポンサーリンク

f:id:uenoyou111:20170907000421j:plain

なぜだ。

 

実はここ数日、デザインとかをいじって遊んでいた。で、ツイッターでシェアする的なボタンがあるじゃないっすか。あれスタイリッシュにしたいな…と!

 

かなり苦労したけど、どうやらトップページにカスタマイズボタンは表示されないようで。

 

とりあえず個別ページに表示は出来るけど、自分でもよくわからないからまとめてみることに。

 

(ここ数日って書いたけど、全部シェアボタンに時間取られたのは内緒)

 

 

シェアボタンって?

 

ふといろんな人のブログ見てたら、SNSのボタンが自分のブログと違う…これなんだ?ってところで気付いた。

 

ちなみに自分のブログはこんな感じ↓

 

f:id:uenoyou111:20170907001938j:plain

 

形はバラついてるし、なんていうかダサい。

 

で、他の人のブログ↓

 

f:id:uenoyou111:20170907002737j:plain

超スタイリッシュ。

 

色んなキーワードで探してみると、どうやら「SNSシェアボタン」「フォローボタン」というらしい。

 

実際に変更してみる

 

そうとなれば後は簡単。「はてなブログ シェアボタン」で検索。ヒットしたのはこちらのブログ様。

 

【はてなブログカスタマイズ】色々な「SNSシェアボタン」と「フォローボタン」を集めてみた。 - BACKFLOW

 

いくつかのシェアボタンがデザイン付きでまとめてあった。わかりやすい。

 

まずは変更するところから始めよう!ということで、一番上にいらっしゃるこちら様を参考に。

www.yukihy.com

詳しく書かれているので、やり方に関しては上記参照で。

 

いざ変更…!でも表示されない?(1日目)

 

忠実にやり方を参照し、一点の曇りなくコピペして貼り付け。もう表示されてる前提だから、公式のシェアボタンはチェックを外してサヨナラ。

 

よ~しこれでそれっぽいブログに…!

 

f:id:uenoyou111:20170907004342j:plain

 

 

表示すらされてないですぜ…!!

 

 

なんでだ?(1日目ぐらいの様子)

 

ここから、仕事中も常にシェアボタンのことが頭をよぎることになるとは…思いもよりませんでした。

 

再度見直して挑戦し直す(2日目)

 

明らかにコピペ内容も、貼り付け場所も間違ってない…もしかしてテーマとかが関係あるのかな?ってところで迷走しまくりました。

 

色々テーマを変えたりして、そこで再度コードを書き直す作業を延々としてました。おかげで現在テーマは初期設定に。

 

これ、絶対違うんだよなぁ…って気付いたのは2日目。

 

ついに表示が…!(3日目)

 

ここでふと、意味もなく「記事ページをプレビュー」というボタンがあるのに気付く。

 

f:id:uenoyou111:20170907010433j:plain

悩んだ挙句、ふと押してみると…

 

 

 

f:id:uenoyou111:20170907010456j:plain

 

出た……!!!!!!!!

 

今まで全然出ることすら無かったので、まず出たということはやり方が間違ってなかったのか…!と歓喜。

 

記事のページに飛ばないと、表示されない

 

その後、自分なりに調べましたよ。

 

ブログを開いた直後、そのまま記事を読めるので読んじゃうんですけど…その場合はシェアボタンが表示がされてないのだと気付きました。

 

つまり、トップページに記事が全文表示されるようになっているんですね。で、例えばタイトルとかクリックすると記事ページに飛べるんですよ。その時にシェアボタンが表示されてる。

 

タイトルだけの一覧表示にしないと、これじゃ意味ないですやん。と思ったら、pro化すれば一覧表示に対応出来るみたいですね。うーん…まだ他にやりたいことあるから、考えてないな。いつかやる。

 

原因がわかったら、ちゃんと解説してくれるブログ様も見つかりました。

 

design.syofuso.com

トップページは公式のシェアボタンを表示させて、個別ページにはカスタマイズシェアボタンを表示させるコードもついてます。

 

まとめ

 

pro化しなさい。

 

すごい悩みまくったけど、でも出来た時の達成感とまとめる作業楽しい。

 

 

追記。

 

Chromeを使ってる方で、拡張機能にアドブロックとかいうのが入ってて有効にしとくと表示されないようです。