ホーム > 亀の子記（日記）ど素人が独学でHTMLやPHPを勉強してサイトを作る日記

【180日目】SNSのシェアボタンをお洒落に表示-完成！

Posted:2021.02.26　 Last Update:2021.02.26

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

昨日までの成果

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

先日はGoogleから「カバレッジの問題が新たに検出されました」と連絡をもらって対処しました。6日経つのにまだ結果が出ていません…！気長に待ちましょう。

で、今現在メインでやっている作業が「SNS等のシェアボタンをお洒落に表示する」。ページ下のリンクの部分です。昨日までの作業でこうなりました。統一感があってなかなかいいです。

スマホ画面はこのような感じ。

今日の作業

昨日作業を終える前に課題をいくつか洗い出していました。

URLをコピーしたのかしていないのか、動作確認のポップアップなどがないので分からない
PC版デザイン、ランキングを一番右に持ってきた方がしっくり来るかも？
小見出しが英語で分かりづらいかも。素敵な日本語に変えるか検討したい

一つ目は今の技術だとちょっと対応できない…。これは後日ゆっくりやりましょう。

で、2番と3番に対応します。スタイルシートを少し弄るだけですね。

すこし…。

時間はかかりましたが、こうなりました！若干ですが見やすくなったし、何のボタンか分かりやすくなったと思います。また、マウスをあてると解説もでます。

元がこれだったので、かなり良くなったのではないでしょうか？

HTMLとスタイルシート

今回「はてブ」のアイコンはSimple Iconsからとってきました。使い方をまた記事にしよう。

ご興味がある方がいるかは分かりませんが、HTML/JavascriptとPHP大公開です。

HTML

<div id="maincontact">
<h5 id="mc1h5">記事をシェアする</h5>
<p id="mc1p">
<script>
function copyToClipboard() {// コピー対象をJavaScript上で変数として定義する
var copyTarget = location.href ;// コピー対象のテキストを選択する
navigator.clipboard.writeText(copyTarget);
}
</script>
<button id="sharebutton2" onclick="window.open('https://twitter.com/intent/tweet?screen_name=kamenokoki%20<?php echo $myurl.'/'.$urlfolder.'/'.$filenum;?>&ref_src=twsrc%5Etfw', 'view');" title="ツイッターで記事をシェア"><i class="icon-twitter"></i></button>
<button id="sharebutton3" onclick="window.open('https://b.hatena.ne.jp/entry/<?php echo $myurl.'/'.$urlfolder.'/'.$filenum;?>', 'view');" title="はてなブックマークに追加"><i class="icon-hatenabookmark"></i></button>
<button id="sharebutton1" onclick="copyToClipboard()" title="クリップボードにURLをコピー"><i class="icon-share2"></i></button>
</p>

<h5 id="mc2h5">亀の子に連絡</h5>
<p id="mc2p">
<button id="sharebutton1" onclick="window.open('<?php echo $myurl;?>/menu/contact" title="メールフォーム"><i class="icon-envelope"></i></button>
<button id="sharebutton2" onclick="window.open('https://twitter.com/messages/compose?recipient_id=????????&ref_src=twsrc%5Etfw', 'view');" title="Twitter DM"><i class="icon-twitter"></i></button>
</p>

<h5 id="mc3h5">ランキング参加中！ぽちっとしてね</h5>
<p id="mc3p">
<a href="https://blogranking.fc2.com/in.php?id=1051713" target="_blank"><img src="https://static.fc2.com/blogranking/ranking_banner/c_03.gif" alt="F2cランキングアイコン"></a>
<a href="https://blog.with2.net/link/?id=2051001" target="_blank"><img src="https://blog.with2.net/img/banner/banner_21.gif" title="人気ブログランキング" width="88" height="31" alt="人気ブログランキング"></a>
<a href="https://blogmura.com/ranking/in?p_cid=11077965" target="_blank"><img src="https://b.blogmura.com/88_31.gif" width="88" height="31" border="0" alt="ブログランキング・にほんブログ村へ" /></a>
</p>
</div>

スタイルシート

#maincontact{
margin: 70px 0 30px 0;
display:grid;
row-gap: 0.5em;
column-gap: 2em;
}
@media screen and (max-width:599px){
#maincontact{ max-width: 280px;}
#mc1h5{grid-row: 1; grid-column:1;}
#mc1p{grid-row: 2; grid-column:1;}
#mc2h5{grid-row: 1; grid-column:2;}
#mc2p{grid-row: 2; grid-column:2;}
#mc3h5{grid-row: 3; grid-column:1/3;}
#mc3p{grid-row: 4; grid-column:1/3;}
#mc4h5{grid-row: 5; grid-column:1/3;}
#mc4p{grid-row: 6; grid-column:1/3;}
}
@media screen and (min-width:600px){
#maincontact{ max-width: 600px;}
#mc1h5{grid-row: 1; grid-column:1;}
#mc1p{grid-row: 2; grid-column:1;}
#mc2h5{grid-row: 1; grid-column:2;}
#mc2p{grid-row: 2; grid-column:2;}
#mc3h5{grid-row: 1; grid-column:3;}
#mc3p{grid-row: 2; grid-column:3;}
#mc4h5{grid-row: 3; grid-column:1/4;}
#mc4p{grid-row: 4; grid-column:1/4;}
}
#maincontact h5{
margin:0;
padding:0;
}
#maincontact p{
margin:0;
padding:0;
}
#sharebutton1{
width: 1.8em;
height: 1.8em;
background-color: #008000;
color: #FFFFFF;
border:none;
border-radius: 5px;
font-size: 1.3em;
vertical-align: top;
}
#sharebutton1:hover{
cursor:pointer;
}

#sharebutton2～3は色のみ異なるので割愛しました。

今日はここまで

本番環境に移植して、…今日はここで時間切れです！ちょうどいい時間ですね。

明日からはまた、ブログ入力を簡単にする「入力フォーム」の作成に戻りたいと思います。それでは、また明日！