ヤエノート

前日にめっちゃ苦労したのに、あっさりSNSシェアボタン設置出来て変な気分。

f:id:yae2021:20210703234310p:plain

タイトル通り、あんなに四苦八苦したSNSシェアボタン。

実は一個前の記事を書きながらスクショするためにコードを貼りなおしたりしているうちに、もしや?と思ったことをやったらあっさり作成出来てしまった。

もちろん大元のコードあってこそなので、製作者様には感謝。

と言うことで、自分の記録がてら何をしたかを書いていこうと思う。

ちなにみ完成したコードは今のところ貼りません!!!知識もないし、そもそも製作者さんがどう思うかわからないし。

でも、素人の私でも何とかなった(もしかしたらシステムに影響とかあるかも)ので、誰かの参考になれば。

ちなみにこのブログはブログテーマ「Haruni」を使用しています。

 

 前回のお話

yaenote.co

元となったコード

SHIROMAGさん

www.notitle-weblog.com

私はSHIROMAGさんのページの「丸いシェアボタン」にしたいな、と思ったのでそちらのコードを拝借。

サイトに書いてある通りに作業を進めた結果がこちら。

f:id:yae2021:20210701153850p:plain

さて、これを素人にどうにかできるでしょうか?

 

 フジブロっ!さん

www.fuji-blo.com

アイコンの上のコメントはこちらを参照。

いや~ほんとありがたや!!!

 

記事部分に張り付けるコードの変更

Font Awesomeのバージョンを変更 ※関係なかったみたい

わからないなりに調べていくと、Font Awesomeのバージョンの問題でアイコンが表示されないことがあるのを知った。

なので「headに要素を追加」に張り付けるコード内の「4.7.0」を「5.8.2」に変更。

これはFont Awesomeでfacebookのアイコン検索した時に更新:バージョン5.8.2となっていたため。

※確認のため「4.7.0」「5.8.2」どちらも試したら、どっちでも問題なかった(笑)

 

facebook,poket,twitterのアイコンのコードを変更

ちゃんと表示されないアイコン2種。

ここを変えないといけないんだろうと思い、Font Awesomeでコードを確認して変更した。

facebook

元のコード:<i class="fa fa-facebook-square lg">

変更後  :<i class="fab fa-facebook-square">

poket

元のコード:<i class="fa fa-get-pocket">

変更後  :<i class="fab fa-get-pocket">

twitter

twitterに関してはちゃんと表示されていたので、最初いじらなかったんだけど、円の真ん中からずれるのが気になった。

f:id:yae2021:20210702173632p:plain

こんな感じ。微妙に気になる。

なので、こちらもコードを調べて変更したらちゃんと中心になった。

 

元のコード:<i class="blogicon-twitter lg">

変更後  :<i class="fab fa-twitter">

 

変更後はこんな感じ。

f:id:yae2021:20210702174324p:plain

LINE部分を追加

ここが一番わけわかんなかった部分であり、今もわかってない。

コードを理解してないので、たまたま上手く行った、というだけだと思う。

そして、どのサイトを参考にさせてもらったのか、わからない!!!

製作者さん、ごめんなさい!!!

Poketの次の行にこれを挿入。

  1. <a href="http://line.me/R/msg/text/?{Title}-{URLEncodedPermalink}"class="share-btn__item share-btn__item--line" target="_blank"><i class="fab fa-line"></i></a>

 

アイコンの上にコメントを挿入

ここはフジブロっ!さんのサイトからコードを拝借して、文言を変えました。

 

元のコード:よければシェアしてください

変更後  :シェア・保存する

 

これでひとまず、記事下(記事上)に張り付ける部分は終了。

 

「デザインCSS」に張り付けるコードの変更

LINE部分を追加

完全に見様見真似、ほかのアイコン部分のコードを使ってLINE部分を作成。

これをPoketのコードの次に挿入。

  1. .share-btn-type7 .share-btn__item--line {
  2.   background-color: #06C755;
  3. }

 

LINEの色は、ColorPick Eyedropperを使って調べて色を入れた。

chrome.google.com

 

ここまでやった結果…

f:id:yae2021:20210702174356p:plain

あれ?なんかギュウギュウじゃないですか?もうちょっと隣との隙間があったと思うんですけど…。

ということで再度挑戦。微調整みたいなこともしたいし。

 

フォントサイズの変更

丸の中のアイコンをもうちょっと大きくしたかったので「share-btn-type7 .share-btn__item 」の中のfont-sizeを変更。

 

元のコード:font-size: 16px;

変更後  :font-size: 22px;

 

max-widthの変更

さて、ギュウギュウ問題をどうにかしたい。

色々見てて最初私はこの中の

  1. .share-btn-type7 {
  2.   max-width: 240px;
  3.   margin: 1.2em auto;
  4.   display: flex;
  5.   justify-content: space-between;
  6. }

「 justify-content: space-between;」の部分を変える必要があるのかな?と思って単語を変えてみたんだけど変化なし。

検証とかも使ってみたけどわからず。

そうこうする内に、web上ってなんかエリアとかあるよね、しかもLINEのアイコン増えてるし、と思いもしかして幅か?と変更してみた。

 

元のコード:「max-width: 240px;」

変更後  :「max-width: 320px;」

 

結果!

f:id:yae2021:20210702174514p:plain

いえ~~~~~~~~!!!

やりました!!!ついに!!! ちなみに最初適当に300にしたんだけど、なんか「デザインは8の倍数で出来ている!!!」ってのを見て、8の倍数の320にしてみた。

元のコードも8の倍数だし。

yoko51.com

 

まとめ

もう凄く嬉しい。

今回なんかすんなりできたのも、多くの方がコードを作って教えてくれてるおかげ!!!

それと、前日に色々失敗したり、調べたのが役に立った。

コードを勉強するのが一番だろうけど、何で?とか考えるのは結構楽しかった。

アイコンのバージョンが変わったりして、また不具合とか出るかもしれないから、それに対応できるようにしておきたいな。

そのうち、Pinterestのシェアボタン?とかもにもチャレンジしたいな。

Twitterは直せたけどはてなB!のロゴがなんか中心から微妙にずれてるのが気になる…。