タイトル通り、あんなに四苦八苦したSNSシェアボタン。
実は一個前の記事を書きながらスクショするためにコードを貼りなおしたりしているうちに、もしや?と思ったことをやったらあっさり作成出来てしまった。
もちろん大元のコードあってこそなので、製作者様には感謝。
と言うことで、自分の記録がてら何をしたかを書いていこうと思う。
ちなにみ完成したコードは今のところ貼りません!!!知識もないし、そもそも製作者さんがどう思うかわからないし。
でも、素人の私でも何とかなった(もしかしたらシステムに影響とかあるかも)ので、誰かの参考になれば。
ちなみにこのブログはブログテーマ「Haruni」を使用しています。
前回のお話
元となったコード
SHIROMAGさん
私はSHIROMAGさんのページの「丸いシェアボタン」にしたいな、と思ったのでそちらのコードを拝借。
サイトに書いてある通りに作業を進めた結果がこちら。
さて、これを素人にどうにかできるでしょうか?
フジブロっ!さん
アイコンの上のコメントはこちらを参照。
いや~ほんとありがたや!!!
記事部分に張り付けるコードの変更
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でコードを確認して変更した。
元のコード:<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に関してはちゃんと表示されていたので、最初いじらなかったんだけど、円の真ん中からずれるのが気になった。
こんな感じ。微妙に気になる。
なので、こちらもコードを調べて変更したらちゃんと中心になった。
元のコード:<i class="blogicon-twitter lg">
変更後 :<i class="fab fa-twitter">
変更後はこんな感じ。
LINE部分を追加
ここが一番わけわかんなかった部分であり、今もわかってない。
コードを理解してないので、たまたま上手く行った、というだけだと思う。
そして、どのサイトを参考にさせてもらったのか、わからない!!!
製作者さん、ごめんなさい!!!
Poketの次の行にこれを挿入。
- <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のコードの次に挿入。
- .share-btn-type7 .share-btn__item--line {
- background-color: #06C755;
- }
LINEの色は、ColorPick Eyedropperを使って調べて色を入れた。
ここまでやった結果…
あれ?なんかギュウギュウじゃないですか?もうちょっと隣との隙間があったと思うんですけど…。
ということで再度挑戦。微調整みたいなこともしたいし。
フォントサイズの変更
丸の中のアイコンをもうちょっと大きくしたかったので「share-btn-type7 .share-btn__item 」の中のfont-sizeを変更。
元のコード:font-size: 16px;
変更後 :font-size: 22px;
max-widthの変更
さて、ギュウギュウ問題をどうにかしたい。
色々見てて最初私はこの中の
- .share-btn-type7 {
- max-width: 240px;
- margin: 1.2em auto;
- display: flex;
- justify-content: space-between;
- }
「 justify-content: space-between;」の部分を変える必要があるのかな?と思って単語を変えてみたんだけど変化なし。
検証とかも使ってみたけどわからず。
そうこうする内に、web上ってなんかエリアとかあるよね、しかもLINEのアイコン増えてるし、と思いもしかして幅か?と変更してみた。
元のコード:「max-width: 240px;」
変更後 :「max-width: 320px;」
結果!
いえ~~~~~~~~!!!
やりました!!!ついに!!! ちなみに最初適当に300にしたんだけど、なんか「デザインは8の倍数で出来ている!!!」ってのを見て、8の倍数の320にしてみた。
元のコードも8の倍数だし。
まとめ
もう凄く嬉しい。
今回なんかすんなりできたのも、多くの方がコードを作って教えてくれてるおかげ!!!
それと、前日に色々失敗したり、調べたのが役に立った。
コードを勉強するのが一番だろうけど、何で?とか考えるのは結構楽しかった。
アイコンのバージョンが変わったりして、また不具合とか出るかもしれないから、それに対応できるようにしておきたいな。
そのうち、Pinterestのシェアボタン?とかもにもチャレンジしたいな。
Twitterは直せたけどはてなB!のロゴがなんか中心から微妙にずれてるのが気になる…。