やまでら くみこ のレシピ

短時間で簡単に作れる人気家庭料理を紹介。

超軽快なソーシャルボタンをWordPressに設置する方法。外部JavaScriptと画像の読み込みが不要です。

投稿日:2014年11月24日 更新日:

twitter

JavaScriptや画像を読み込む必要がない、超シンプルなソーシャルボタンをワードプレスに設置する方法をご紹介します。
facebookのいいね数やtwitterのツイート数などは表示できないため機能は限られますが、動作はとても軽快です。

サイトの読み込み速度を重視する方には、有用だと思いますよ。

フェイスブック、ツイッター、はてなブックマークのボタン

フェイスブック、ツイッター、はてなブックマークのボタンを設置するには、次のコードをsingle.phpの好きな場所に貼り付けます。

見た目は、こんな感じになります。

ソーシャルメディアのボタン

<style type="text/css">
.my-social{
margin-bottom:40px;
}
.my-social a{
padding-right:10px;
text-decoration:none;
}
.my-social-icon{
font-size:12px;
font-weight:bold;
border:solid 5px;
padding:7px 5px 7px 5px;
}
.my-social-text{
font-size:12px;
font-weight:normal;
color:white;
border:none;
padding:12px 5px 12px 0;
}
</style>
<div class="my-social">
<a href="https://twitter.com/share?url=<?php the_permalink(); ?>&amp;text=<?php the_title(); ?>" onclick="window.open(this.href, 'tweetwindow', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;">
<span class="my-social-icon" style="color:#55acee;border-color:#55acee;">t</span><span class="my-social-text" style="background-color:#55acee;">ツイート</span>
</a>
<a href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>" onclick="window.open(this.href, 'window', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;">
<span class="my-social-icon" style="color:#3b5998;border-color:#3b5998;">f</span><span class="my-social-text" style="background-color:#3b5998;">いいね!</span>
</a>
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>" onclick="window.open(this.href, 'window', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;">
<span class="my-social-icon" style="color:#0075c2;border-color:#0075c2;">B!</span><span class="my-social-text" style="background-color:#0075c2;">はてブ</span>
</div>
</a>

ツイッターのフォローボタン

ついでに、ツイッターのフォローボタンもご紹介します。
これも、公式サイトで配布されているものだと外部のJavaScriptを読み込むので、結構遅いんですよね。

次のコードを貼り付けると、このように表示されます。

ツイッターのフォローボタン

<style type="text/css">
.my-follow{
margin:30px 0 30px 0;
}
.my-follow a{
padding-right:10px;
text-decoration:none;
}
.my-follow-icon{
font-size:12px;
font-weight:bold;
border:solid 5px;
padding:7px 5px 7px 5px;
}
.my-follow-text{
font-size:12px;
font-weight:bold;
color:white;
border:none;
padding:12px 10px 12px 5px;
}
</style>
<div class="my-follow">
<a href="https://twitter.com/intent/follow?screen_name=kumiko_jp" onclick="window.open(this.href, 'tweetwindow', 'width=550, height=600,personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;">
<span class="my-follow-icon" style="color:DeepPink;border-color:DeepPink;">t</span><span class="my-follow-text" style="background-color:DeepPink;">twitterでフォロー</span>
</a>
</div>

おすすめ記事

分数の計算機ツール。分数のかけ算・割り算・足し算・引き算を簡単に。

素数判定プログラム。素数を見分けるためのフローチャートも紹介。

素因数分解の簡単計算アプリ!ツールなしで算出するやり方も解説。

最小公倍数の計算アプリ。手計算する場合の簡単な求め方も紹介。

最大公約数の計算機。サイト上で瞬時に計算!簡単な求め方も解説。

フランス語のアルファベットの簡単キーボード。一覧から文字を入力。

スペイン語のアルファベット入力キーボード。変換不要!一覧から文字を選択

ロシア語のアルファベット入力キーボード。変換不要!一覧から文字を選択

累乗・べき乗の計算機。指数が分数・小数・マイナスでもOK!

正三角形の面積・高さ・辺の長さの計算機。公式を使った求め方も紹介。

円の面積・直径・半径・円周の計算機。公式を使った求め方も紹介。

トルコ語のアルファベットの入力ツール。トルコ文字の簡単キーボード。

ギリシャ文字への変換を簡単に!見た目と読み方の一覧からギリシャ語を入力。

ページ内リンクのジャンプ先がずれる原因と解決方法【HTML】

平方根(ルート)の値を求める計算機。分数もOKな電卓サイト。

分数の計算機ツール。分数のかけ算・割り算・足し算・引き算を簡単に。

分数同士の計算をサイト上で簡単に行える、電卓アプリです。かけ算・割り算・足し算・引き算、どの計算方法にも対応しています。このツールは、計算に…

素数判定プログラム。素数を見分けるためのフローチャートも紹介。

この素数チェッカーは、指定した整数が素数かどうかを簡単に判定できるアプリです。もし素数でない場合は、その整数の素因数を一覧表示します。また、…

素因数分解の簡単計算アプリ!ツールなしで算出するやり方も解説。

素因数分解をサイト上で簡単に行える、計算機アプリです。入力は15桁以下に抑えるのがおすすめです。入力した数字が大きいと、計算にかなりの時間を…

最小公倍数の計算アプリ。手計算する場合の簡単な求め方も紹介。

最小公倍数を求めるための計算機アプリです。整数は、3つ以上入力することも可能です。入力する際には、それぞれの整数を空白や改行で区切ってくださ…

最大公約数の計算機。サイト上で瞬時に計算!簡単な求め方も解説。

最大公約数を求めるための計算機アプリです。整数は、3つ以上入力することも可能です。入力する際には、それぞれの整数を空白や改行で区切ってくださ…

フランス語のアルファベットの簡単キーボード。一覧から文字を入力。

フランス語のアルファベットを簡単に入力するためのオンラインアプリです。一覧表から文字を選択するだけなので、変換は不要。アクセント記号や合字に…

スペイン語のアルファベット入力キーボード。変換不要!一覧から文字を選択

スペイン語のアルファベットを簡単に入力するためのオンラインアプリです。一覧表から文字を選択するだけなので、変換は不要。逆疑問符や逆感嘆符、ア…

ロシア語のアルファベット入力キーボード。変換不要!一覧から文字を選択

ロシア語のアルファベットを簡単に入力するためのオンラインアプリです。一覧表から文字を選択するだけなので、変換は不要。打ち方が分からなくても入…

累乗・べき乗の計算機。指数が分数・小数・マイナスでもOK!

累乗とべき乗(冪乗)を簡単に計算する電卓です。数aのn乗、anを算出します。二乗や三乗を計算するときなどに便利です。なお、この計算機は、自然…

正三角形の面積・高さ・辺の長さの計算機。公式を使った求め方も紹介。

正三角形の面積・高さ・辺の長さを計算するツールです。

円の面積・直径・半径・円周の計算機。公式を使った求め方も紹介。

円の面積と円周の長さを計算するツールです。

トルコ語のアルファベットの入力ツール。トルコ文字の簡単キーボード。

トルコ語のアルファベットを入力するためのオンラインツールです。使い方は簡単で、トルコの文字を一覧から選択するだけでOK。キーボードで入力した…

ギリシャ文字への変換を簡単に!見た目と読み方の一覧からギリシャ語を入力。

ギリシャ文字を手軽に入力するためのオンラインツールです。入力したいギリシャ文字を一覧から選ぶだけなので、超簡単。キーボードで文字を変換する必…

ページ内リンクのジャンプ先がずれる原因と解決方法【HTML】

ページ内リンクのジャンプ先がずれてしまう原因と、その解決策について解説します。別ページの特定の場所にリンクを貼る場合には、ハッシュ(#)で要…

平方根(ルート)の値を求める計算機。分数もOKな電卓サイト。

平方根(ルート)の計算機は、平方根の値をサイト上でカンタンに計算できる電卓です。整数だけでなく、小数や分数の平方根にも対応しているので、幅広…