【178日目】記事をシェアするボタンをおしゃれに作り直してみた

「記事の投稿ページを作成する」プロジェクトはいったんお休みして、一昨日からシェアボタンをお洒落にしようと奮闘しています。

昨日までの成果

簡単にブログを入力できるように、「記事の投稿ページを作成する」プロジェクトに専念していましたが、先一昨日からちょっと休憩中。

先一昨日にGoogleから「カバレッジの問題が新たに検出されました」と連絡をもらって対処していましたが、その結果はまだ出ていません！早く検証を終了して欲しいですね…。

で、一昨日から何をしているかと言うと、ページの下の方に設置しているリンクボタンをお洒落にしようと格闘しています。なんか、一日でちょいちょい、とやるつもりだったのが、案外時間がかかってしまっていますね…。

昨日までてこのようになりました。

ツイッターのボタンのサイズをあわせる

　上のスクリーンショットを見ていただくと分かりますが、一番上のShareのボタンの内、ツイッターだけサイズがあっていません。上下の表示位置をあわせる前に、まずはツイッターのボタンのサイズを合わせましょう。

…と、簡単に言いましたが、取り組んでみると案外難しい！普通にspanを使ったりすると、文字の位置の調整がややこしいですね…。

最終的に、URLのコピーと同じように、ボタンを使うことにしました。「onclick="window.open()"」という新しい手法を学びましたよ～！なかなかいいですね。

書いたHTMLがこんな感じです。

で、ここにスタイルシートを適用。

他の部分もスタイルシートを書いて、画面はこうなりました！統一感が出ましたね。

今日はここまで

今日はここでタイムアップです…。明日は「CONTACT」の部分を触って、より統一感を出していきたいと思います。では、また明日！

記事をシェアする

亀の子に連絡

ランキング参加中！ぽちっとしてね