WordPressで使えるシェアボタンを作ってみた

こんにちは、HTMLとCSSという言語に触れて6日目のばいろんです。

youtubeチャンネルを作ったのですが、うまく宣伝する方法がわからなかったのでブログにyoutubeボタンを設置することにしました。実は、現在設置しているボタンはver.3で他にもいくつかボタンのデザインを考えたのでここで紹介しようと思います。

突然ですが、このブログではWordPressと呼ばれるコンテンツ管理システムを使って運用しています。通常ブログなどのWebサービスはフロントエンド(デザイン)とバックエンド(データベース)を持つのですが、WordPressはバックエンド(データベース)側をサポートしてくれます。

データベースにはコンテンツ、つまり投稿記事が格納されており、記事を書いて投稿するだけでデザインに合わせて勝手に配置してくれたり、最新の投稿をリスト化してくれたりします。

そして、WordPressにはさらに強力な機能としてプラグインというものがあります。これはHTMLやCSSの知識がなくてもワンクリックでブログに様々な機能(SEO対策やスパム対策、SNSでの共有のサポートなど)を追加してくれる優れものです。しかし、このプラグイン導入すればその分サイトが重くなるという諸刃の剣…。ということで

SNSボタン、自作しましょう

 

あらかじめ言っておきますが私は今回初めてHTMLとCSSという言語に触れました。ボタン一つ製作するのに平均7時間くらいかかってます。ということで初心者の皆さんは一緒に、玄人の方々は生暖かくこの記事を見ていただけると幸いです。

そして、ボタン作りの前に下準備(WordPressの子テーマをつくるところまで

今回は子テーマを作成し、子テーマのフォルダの中にstyle.cssを作りその中を編集します。

それでは行きましょう!

 

1.マウスオーバーすると半透明になるボタン

現在youtubeチャンネル用に使っているボタンです。HTMLの#の部分にお好きなURL、CSSのbackground-imageにお好きな画像へのパスを記述することで利用することができます。

デザインがかっこよくて結構お気に入りです。(自画自賛)

画像のパスですが、例えばアイキャッチ画像を設定するときにWordPressのメディアライブラリを開く思いますが、画像の選択画面にURLという欄があると思います。それが画像のパスとなります。(例:http://サイトURL/wp-content/uploads/年/月/○○.jpg)

よくわからない人は「メディアを追加」の部分で画像をアップロードしてURLの欄を見てCSSの該当部分を書き換えればいいかと思います。

 

 

HTMLのソースコード

<div class="bg-youtube">
<a href="#"><button class="youtube">Button</button></a>
</div>

 

CSSのソースコード

/*youtubeボタン*/
.bg-youtube{
  /*
  background-image:url(IMAGE.png);
  background-repeat: no-repeat;
  width:100%;
  height:auto;
  */
  background: url(IMAGE.png) no-repeat center center;
	-webkit-background-size: cover;
  width:100%;
  height:200;
  background-size: cover;
  text-align: center;
  float:left;
}

button.youtube:hover {
	/*border-color: #cd201f;*/
  color: #fff;
  /*color: #cd201f;画像使わないとき*/
  background-color: rgba(255, 255, 255, .2);
}

button.youtube {
	display: inline-block;
	width: 200px;/**/
	height: 54px;/**/
  margin: 5em 0px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  text-align: center;
	text-decoration: none;
	line-height: 10px;
	outline: none;
  background-color: transparent;
  /*background-color: #cd201f;画像使わないとき*/
  font-size: 15px;
  color: #fff;
  border: 2px solid #fff;
}

button.youtube::before,
button.youtube::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
button.youtube,
button.youtube::before,
button.youtube::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
/*youtubeボタンここまで*/

 

実はWordPressそのもの(親テーマなど)にボタンが実装されているので割としっかりコードを書かないと自分の思ってもみない動きをするので注意です。フォントの指定なんかを忘れるとデフォルトの野暮ったいフォントになります。

2.マウスオーバーで色が変わるボタン

ふわっとした色の変化が特徴です。とてもフラットなデザインで用途や場所を選ばないデザインだと思います。いろんなボタンを作っている途中にできた偶然の産物でもあります。

 

HTMLソースコード

<div><a href="#"><button class="youtube2">Button</button></a></div>

 

CSSソースコード

/*youtubeボタン2*/
button.youtube2:hover {
	border-color: #cd201f;
  color: #cd201f;
  background-color: #fff;
  letter-spacing: 3px;
}

button.youtube2 {
	display: inline-block;
	width: 100%;
	height: 200px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
	text-align: center;
	text-decoration: none;
	line-height: 10px;
	outline: none;
  background-color: #cd201f;
  font-size: 20px;
  color: #fff;
  border: 2px solid #fff;
}

button.youtube2::before,
button.youtube2::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
button.youtube2,
button.youtube2::before,
button.youtube2::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
/*youtubeボタン2ここまで*/

 

これも結構かっこいいですね。画像のパスなどのことを考えずただコピペするだけで使えるところも評価が高いポイントです。

3.マウスオーバーで画像が半透明になるボタン

1番のボタンと2番のボタンを組み合わせたボタンです。ノリで作りました。

 

 

HTMLソースコード

<div class="bg-youtube3"><a href="#"><button class="youtube3">you tube</button></a></div>

 

CSSソースコード

/*youtubeボタン3*/
.bg-youtube3{
  /*
  background-image:url(IMG_2174.png);
  background-repeat: no-repeat;
  width:100%;
  height:auto;
  */
  background: url(IMG_2174.png) no-repeat center center;
	-webkit-background-size: cover;
  width:100%;
  height:auto;
  background-size: cover;
  text-align: center;
  float:left;
}

button.youtube3:hover {
	border-color: #cd201f;
  background-color: rgba(255, 255, 255, .2);
  color: #fff;
  letter-spacing: 3px;
}

button.youtube3 {
	display: inline-block;
	width: 100%;
	height: 200px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
	text-align: center;
	text-decoration: none;
	line-height: 200px;
	outline: none;
  background-color: transparent;
  font-size: 20px;
  color: #fff;
  border: 2px solid #fff;
}

button.youtube3::before,
button.youtube3::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
button.youtube3,
button.youtube3::before,
button.youtube3::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}

/*youtubeボタン3ここまで*/

これもそこそこ汎用性が高いのではないでしょうか?利点といえば画像全体がボタンとなるところかな。

今回は不採用だったけどどこかで使いたいボタンです。このブログで今後このボタンを見かけたら「あのときのやつかー」と思ってください。

気づいた方もいるかもしれませんが、今回は(CSSのみで実装するボタンデザインやホバーエフェクト 20+α)の記事を参考にさせていただいています。この記事のおかげでレスポンシブに動くかっこいいボタンを作ることができました。元記事にはさらにたくさんのボタンの実装が紹介されているので一読をお勧めします。

※そのまま実装するとWordPressのボタンとかち合ってしまい思い通りの動作をしないものがあったのでいくつかアレンジをしています。twentyfourteenのテーマでしか動作確認はしていませんがぜひご利用ください。

さて、今回は1ということでそのうちサイトの下にあるSNSボタンの実装についても紹介したいと思います。サイト軽量化を目指して頑張りましょう!

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to top