WordPressテンプレート制作、ウェブデザイン技能検定に挑戦中

前の記事:ハンバーガーボタン、アコーディオンメニューを実装
HOME
次の記事:ウェブデザイン技能検定3級試験結果

SNSシェアボタンを自作【Twitter、Facebook、Google+、LINE】

Web知識

 

WordPressであればTwitterをはじめとしたSNSボタンをプラグインでいくらでも追加出来ますが、今後自分の制作サイトに設置する事も考えて自作していきます。

SNSボタンを自作といっても、各SNSのロゴマークを使用するには厳格な決まり事があります。ロゴマークに加工を施せないのは当然として、ロゴ背景の色や形にも気を付けなければいけません。WordPressで何万とダウンロードされているSNSボタン設置プラグインでも、規約に違反したデザインを採用している場合があります。ある程度は黙認される部分もあるのでしょうけど。

とはいえ、冒険をしてまで我を通したデザインにする道理もないので無難なものにします。

 

 

各SNSボタンの用意

 

IcoMoonというサイトでは様々なアイコンがダウンロード出来ます。また、IcoMoonでダウンロードしたアイコンはWebフォントとして扱われます。Webフォントとは、簡単に言えば画像を文字データとして扱う事です。Webフォントは拡大縮小による劣化がなく、CSSで編集出来るのでカスタマイズも容易です。

IcoMoon

 

とりあえずTwitter、Facebook、Google+、LINEの4つのSNSロゴをIcoMoonでWebフォント化しようと思います。IcoMoonにLINEのロゴが用意されていなかったので、こちらのサイトで配布されていたものを利用させていただきました(feedly、はてブ、ポケット、LINEのロゴがセットになっています)。

ブログのデザインでも使用している「Webフォントアイコン」を本当にオススメしたい!

 

 

svgファイルインポート

ダウンロードしたファイルを解凍し、line.svgファイルをIcoMoonでインポートするとLINEのロゴが追加選択出来るようになります。

 

 

アイコン選択

希望のアイコンを選択し終わったら画面右下のGenerate Fontをクリック。アイコン名を設定してダウンロードを選択します(今回アイコン名はデフォルトのままで出力しました)。

ダウンロードしたzipファイルを解凍して、icomoonフォルダを使用するディレクトリにアップロードします。WordPressであれば/wp-content/themes/使用しているテンプレートフォルダです。

 

 

<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/icomoon/style.css">

head要素内(<head>~<head>)に上記のコードを記述します。

<?php echo get_template_directory_uri(); ?>はWordPressでテンプレートフォルダまでのパスを出力します。他のサイトではhrefの内容を書き換える必要があります。

 

 

<span class="icon-line"></span>

上記のコードでアイコンが呼び出せます。これはLINEロゴを呼び出すコードですが、クラス名をicon-twitterに変えるとTwitterロゴが呼び出せます。アイコン毎のクラス名の確認、変更はicomoon内のstyle.cssファイルから行えます。

 

 

<span class="icon-twitter" style="background-color: #55acee; color: #ffffff; font-size: 40px; padding: 10px;"></span>

 

Twitterロゴ

ご覧の通り、文字を装飾するかのようにアイコンに装飾を施せます。※記事内で出力したものを画像ファイルに置き換えています。

 

 

各SNSボタン

他のアイコンも同様に装飾してみました。Facebookのロゴは下詰め右寄せが公式スタイルなので、それに倣うなら背景ボックスを用意して、それを基準にWebフォントをポジション指定で位置をズラす必要があります。

ここまでやっておいてなんですが、そこまでするなら公式から画像ファイルをダウンロードしてリンクを貼った方が・・・という気もします。公式で配布している素材以外の利用というのがそもそもグレーゾーンの話ですし。

 

追記

p014

確認不足でした。IcoMoonのダウンロード画面でロゴをクリックするとスケールや配置位置の設定が出来ました。ここでしっかり編集して出力すれば、使用先のサイトで細かくスタイルを設定する必要がなくなります。

 

 

 

各SNSロゴの色参照

 

.icon-twitter { color: #55acee; }
.icon-facebook { color: #3b5998; }
.icon-google-plus { color: #dd4b39; }
.icon-line { color: #1dcd00; }

 

 

各SNSボタンにシェアリンクを貼る

 

<a href="https://twitter.com/share?url=【URL】" target="_blank">Twitter</a>
<a href="https://www.facebook.com/sharer/sharer.php?u=【URL】" target="_blank">Facebook</a>
<a href="https://plus.google.com/share?url=【URL】" target="_blank">Google+</a>
<a href="http://line.me/R/msg/text/?【URL】" target="_blank">LINE</a>

※サンプルコードではURLの情報しか与えていません。

 

<a href="https://twitter.com/share?url=<?php echo get_permalink(); ?>&text=<?php echo urlencode(get_the_title()); ?>" target="_blank">Twitter</a>

WordPressでの使用を想定した、Twitterのシェアリンクコードをカスタマイズした一例です。

<?php echo get_permalink(); ?>で記事のURL情報を、<?php echo urlencode(get_the_title()); ?>で記事のタイトル情報を与えています(日本語のままではURLで情報の受け渡しが出来ないのでエンコードしています)。

 

リンク先のSNSで色々と処理をしてくれるので、シェアリンクを貼るだけならページ表示速度に影響が出る事はありません。

SNS毎にシェアされた数を取得して表示、といった事は今回は見送ります。ページ表示速度を犠牲にする必要があると思うので(2つ3つの数なら問題ないでしょうけど)、そちらは無理に実装する事もないかという考えです。はじめたばかりのブログなので実装しても0の数字が並ぶだけでしょうし。

今回はとりあえずの実装という事でこれで終了します。もう少し見られるブログになったら他のSNSの勉強と共に諸々の機能の実装もしていきたいと思います。

 

 

こだわる方はこちらの設定もどうぞ。私はまずTwitterとFacebookのアカウント取るところからですね。

OGP設定: Facebook・TwitterのOGP設定方法まとめ

TwitterCard設定: あなたのサイトのアピール度が上がる!Twitterカードの設定方法

 

 

||||

SNSシェアボタンを自作【Twitter、Facebook、Google+、LINE】

0件のコメント

コメント

カテゴリ

月別アーカイブ