like-button-card_ecmg-ps

ワードプレス

サイトデザインに合わせよう。TCDテーマ記事下にカード型「いいね!ボタン」をセンスよく設置する方法

「バイラルメディア風」と呼ばれる、Facebookの「カード型いいね!ボタン」。よく見かけますよね。そう、記事下にシュピッ!とたたずむ、こんなステキなかたです。

viral-reeds_07

いーですねぇ。カッコいいですねぇ。記事に設定したアイキャッチ画像を自動で表示してくれるのも魅力。作成者の方には感謝キワマレリです。

FacebookページいいねやTwitterフォロワーが倍増!バイラルメディア風オリジナルSNSボタンの設置方法

でも、せっかくの美しい素材。自分のサイトデザインにビシッ!とマッチさせたいですよね。

 背景色や文言を変えたい!

 ここの文字だけ色や大きさを変えたい!

 アイキャッチ画像をもう少し広く表示させたい!

 ボタンと文字の距離感が気になる!

例えばこのサイトなら、こんなカンジでいかがでしょう?

like-button-card_01

今回は、元ソースを大いに活用させてもらいつつ、少しだけ手を加えさせてもらいつつ・・自分のサイトデザインにマッチしたカスタマイズを、初心者でも簡単にできるように紹介します

実際に使っているものなので、デフォルトではTCDテーマ【MAG】に最適化させています。

like-button-card_02

もちろんその他のテーマでも、ちょちょっ、といじれば思い通りのものが作れます。

作業順

1.「single.php」のバックアップ

2.【呼び出す”魔法の書”】を用意する

3.「いいね!ボタン構成ツール」からコードを取得

4.【呼び出しの”じゅもん”】を追記

ゲームみたいですね。カスタマイズはゲームである!・・・・楽しみましょう。

1. 「single.php」のバックアップ

like-button-card_ins1-ps

まず、サーバーから現状の「single.php」をファイルごと直接ダウンロードしておきましょう。もちろん、予期せぬ不具合が起こったとき、元の状態に戻すためです

よくわからなければWordPress管理画面「外観」⇒「テーマの編集」⇒右カラムから「個別投稿(single.php)」に入り、内容を全選択コピーして、テキストエディタに貼り付けてバックアップしておくのもあり。「single.php」は「記事ページを構成しているファイル」なんです

like-button-card_03

like-button-card_04

なおWindowsデフォルトの「メモ帳」は、改行コードが変更されてしまうなど、不具合の原因になることが多いので利用は避けましょう。

テキストエディタは、Windowsなら「サクラエディタ」、Macなら「CotEditor」あたりが無料でおすすめです。
カスタマイズは「いつでも元に戻せるようにしておく」ことが基本です。慎重に、自己責任の上で行ってください。

2.【呼び出す”魔法の書”】を用意する

like-button-card_ins2-ps

次に、【呼び出す”魔法の書”】・・・俗世間一般でいうところの「CSS」を用意します。TCDテーマの場合、テーマのスタイルシートを直接編集する不安のない「カスタムCSS」という機能があるので、そこにコピーするだけでOK。

テーマオプション(カスタムCSS含む)の詳しい使い方はこちら 

理想のWEBサイトを直感デザイン。TCD『テーマオプション』の使い方

「カスタムCSS」を使ったカスタマイズの基本はこちら 

実践あるのみ!TCDテーマで学ぶ、記事装飾の簡単カスタマイズとCSSの基本

以下のCSSソースコードを全選択して、テーマオプション内「カスタムCSS」に追記します。

/*記事がよかったら、いいねPC*/
.p-entry__push {
    margin-top: -15px;
    margin-bottom: 20px;
    display: table;
    table-layout: fix;
    width: 100%;
    background-color: #170042;
    color: #fff;
}
.p-entry__pushThumb {
    display: table-cell;
    min-width: 240px;
    background-position: center;
    background-size:cover;
}
.p-entry__pushLike {
    display: table-cell;
    /* padding: 15px; */ 
    text-align: center;
    vertical-align: middle;
    line-height: 1.4;
    font-size: 18px;
}
.p-entry__pushButton {
    /* margin-top: 15px; */
    display: inline-block;
    width: 200px;
    height: 40px;
    /* line-height: 40px; */
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}
.p-entry__pushButtonLike {
    line-height: 1
}
.p-entry__note {
    margin-top: -23px;
    margin-bottom: 25px;
    font-size: 12px;
    color: #999;
}
.p-entry__note2 {
    font-size: 12px;
    color: #fff;
}
.p-entry__note3{
    /* margin: 0 0 2em 0; */
    padding: 0;
    line-height: 240%;
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}
.p-entry__note4 {
    margin-top: -30px;
    font-size: 6px;
    color: #999;
}

/*記事がよかったら、いいねスマホ*/
.p-shareButton-bottom {
    margin: -25px 0 0;
    padding-bottom: 15px;
    overflow: hidden;
}
.p-shareButton__buttons {
    font-weight: 700;
    color: #fff;
    font-size: 13px;
    text-align: center
}
.p-shareButton__buttons>li {
    padding-left: 3px;
    padding-right: 4px
}
.p-shareButton__buttons .c-btn {
    padding: 8px 0;
    border-radius: 2px
}
.p-shareButton__buttons .c-ico {
    display: block;
    margin: auto auto 5px
}
.p-shareButton__fb {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    width: 115px
}
.p-shareButton__fb-cont {
    position: relative;
    width: 108px;
    margin: 10px auto
}
.p-shareButton__fb-unable {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px
}
.p-shareButton__cont {
    margin: 15px 0 0
}
.p-shareButton__a-cont {
    background: #170042;
    display: table;
    width: 100%
}
.p-shareButton__a-cont__img {
    display: table-cell;
    min-width: 150px;
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center
}
.p-shareButton__a-cont__btn {
    display: table-cell;
    padding: 12px;
    text-align: center
}
.p-shareButton__a-cont__btn p {
    font-size: 12px;
    color: #fff;
    font-weight: 700;
    padding: 5px 0 15px;
    line-height: 1.4;
    margin-bottom: 0px;
}

like-button-card_05

コピペしたら保存ボタンを忘れずに。この段階で記事ページを確認しても、何も変化はありません。それで正常です。今は【呼び出す”魔法の書”】を作っただけ。あとで【呼び出しの”じゅもん”】を唱える必要があるわけですね。わかりやすい例ですね。うまいことやりました。

like-button-card_ins3-ps

なお、私に必要なかった部分はコメントアウトしています(「/* 」と「 */」で囲んでいるということ)。この部分はCSSとして機能していない状態ですが、あえて残しておいています。

使用テーマ環境や好みによって、必要であれば「/* 」と「 */」を外して調整してください。調整のしかたは下記プルダウンから。コードの意味、サッパリわかんねぇ!なあなたでも大丈夫

テーマによっては記事幅が違ってしっくりこなかったり、右側部分の背景色を変えたりしたくなると思います。例えば・・・

/*記事がよかったら、いいねPC*/
.p-entry__push {
    margin-top: -15px;
    margin-bottom: 20px;
    display: table;
    table-layout: fix;
    width: 100%;
    background-color: #170042;
    color: #fff;

背景色は上記【background-color: #170042;】の「#」以降を変更すればOK。

「記事が気に入ったらRequ.logを”いいね!”」部分の文字色は【color: #fff;】の「#」以降を変更すればOK。こんな感じでもろもろ変更すると・・・

like-button-card_01

like-button-card_06

ん?当たり障りなさすぎ?じゃあカラーを少し派手にして、もうちょっと縦長にします?

like-button-card_07

うーん・・あまり主張した色にすると、アイキャッチ画像とぶつかり合うので注意です。文字数と文字サイズのバランスも大切になってきそうですね。カラーコードのチョイスに迷ったら一度、サイトのメインカラーに合わせてみてもいいかもしれません。

tcd-css-customize_24

そらーちょっと初心者にゃあ敷居高いわぁ・・

大丈夫。

そんな時に役に立つのがChromeの「デベロッパーツール」。実際のソースをいじらないでも、「もしココをこう変更したら?」をプレビューできるスグレモノ。

theme-change_20

ナルホド。「.p_entry__note」の「margin-top」の数値を変えれば、いいねボタンとの隙間が埋められるんだな!なんてことも簡単に分かりますね。

また、スマートフォンでの表示具合も機種ごとに確認できてしまいます。

theme-change_21

詳しい使い方はこちら 

サイト検証・カスタマイズに便利なChromeデベロッパーツールの基本的な使い方

Firefoxユーザーのための確認方法にも、ちゃんと触れられています。

調整は、この記事で紹介している全作業完了後に行ってください。

3.「いいね!ボタン構成ツール」からコードを取得

like-button-card_ins4-ps

以下の「facebook for developers」ページで「いいね!ボタン」のコードを取得します

facebook for developers | いいね!ボタン構成ツール 

「いいね!ボタン」のコードを取得する前に、まずFacebookの開発者登録をしておきましょう。簡単に登録できますし、もちろん無料。

まだ登録していなければ、今後のためにも、先に登録しておきましょう。

サラリと終える開発者登録。FacebookのApp ID(アプリID)とApp secretの取得方法・調べ方

実は現在、「ソーシャルプラグイン」と呼ばれている類のものは、開発者登録なしでも作れる状態なんですが・・・

like-button-card_16

ガンガン更新されるFacebookの仕様変更やバージョン管理など、将来的な側面も考慮して、登録しておくことをおすすめします。

ちなみに、下のようなWordPressプラグインなどに必要となる「App ID・App secret」取得には、開発者登録が必須 そんな応用力もあるワケです。

便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cacheの設定方法と有効的な使い方

「いいね!ボタン」コードの取得方法

FacebookページのURL以外は好みに設定してください。項目を埋めたり、チェックを外したりするだけで下に完成図がプレビューされるので、それを見ながら設定します。このサイトで(記事公開時)使用しているのは下図の状態 

like-button-card_07

「コードを取得」ボタンを押すと、2つのコードが現れます。

like-button-card_10

1つ目のコード

まず上のStep2と書いてあるほうのコードをまるっとコピーして、「外観」⇒「テーマの編集」⇒「header.php」内に追記します。TCDテーマの場合、ほとんどのテーマに「いいね!ボタン」が実装されています。その場合、この作業(下記プルダウン)は不要

like-button-card_03

like-button-card_09

追記場所は<body>タグの直下が推奨されています。既に追記されていても、ちょくちょくバージョンアップされているので、現状の記述から変更されているようであればこの機会に上書きしておきましょう。

まだ必要とするものがあるので、「いいね!ボタン構成ツール」ページはブラウザの別タブで開いたままにしておきます。

もちろん追記する前にバックアップ!

bodyタグの場所や表記はテーマによって多少異なると思いますが、例えばこんな感じ 

</head>
<body <?php body_class(); ?>>

 <!-- global menu -->

2行目が<body>にあたります。ただ<body>と書かれているわけじゃないので、初めて編集する場合、”陥りポイント”のひとつになりそうですよね。その下のハイライト部分に、先ほどの「Step2」のコードを追記します

保存したら「いいね!ボタン構成ツール」に戻ります。

もし、この後の作業をしてもうまく表示されなかった場合は、上の作業を試してみてください。

【関連】コダワリの強いあなたへ。ページ表示遅延改善の一手間。

瞬間奥義「非同期設定」。Facebookのいいねボタン、ページプラグインたちの読込み遅延を斬るっ!

2つ目のコード

like-button-card_10

本来であれば、続いてStep3のコードを表示したい部分に貼り付ければOK。じゃあ早速コピー!といきたいところですが・・・

このコードを使った場合、いいね!ボタンを押した際に現れる「コメント欄」が、他の要素の裏側に隠れてしまいます (環境やテーマによっては隠れない可能性もあります)

viral-reeds_06

ここで詳しくは触れませんが、CSSで「z-index」や「overflow」を追加指定するなど、親要素との兼ね合いを変えることでうまくいくこともあるようです。詳しい方は試してみてください。

しかし少し根深い問題のようで、私の環境ではうまくいきませんでした。さらにはコメント欄がスマートフォン表示で「記事枠をはみ出す」という、根本的にNG!な問題も出てきたのです。(その状態のまま利用しているサイトもよくみかけますが・・・)

環境によっては解決に時間がかかりそう

そもそもコメント欄は必要ない

という考えから、ここではコメント欄のポップアップ自体をなくす方法を紹介します。

つまり、「いいね!ボタン」を押した時の挙動を… 

like-button-card_01

like-button-card_11

この変化だけにする、ということ。これで問題解決です。

「いいね!ボタン構成ツール」に戻りましょう。上のタブを「IFrame」に切り替え。そこに現れたコードを使います。

like-button-card_12

そうこれが・・【呼び出しの”じゅもん”】の一部になるのです!

4.【呼び出しの”じゅもん”】を追記

like-button-card_ins5-ps

呼び出しの”じゅもん” を「single.php」内の呼び出したい場所、つまり「記事ページ」内の表示したい場所に追記します

<!-- 記事がよかったらいいね ここから -->
<?php if(is_mobile()) { ?>
	<div class="p-shareButton p-asideList p-shareButton-bottom">
		<div class="p-shareButton__cont">
			<div class="p-shareButton__a-cont">
				<div class="p-shareButton__a-cont__img" style="background-image: url('<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>')"></div>
			<div class="p-shareButton__a-cont__btn">
				<p class="p-entry__note3">記事が気に入ったら<br>Requ.logを<br>"いいね!"</p>
				<div class="p-shareButton__fb-cont p-shareButton__fb">
					<iframe src=●●></iframe>
					<div class="p-entry__note4">Requ.log | レク.ログ</div>
					<span class="p-shareButton__fb-unable"></span>
				</div>
			</div>
			</div>
		</div>
	</div>
<?php } else { ?>
<div style="padding:10px 0px;"></div>
<!-- 記事がよかったらいいねPC -->
	<div class="p-entry__push">
		<div class="p-entry__pushThumb" style="background-image: url('<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>')"></div>
			<div class="p-entry__pushLike">
				<p class="p-entry__note3">記事が気に入ったら<br />Requ.logを "いいね!"<br /><span class="p-entry__note2">Facebookで更新情報をお届け。</span></p>
				<div class="p-entry__pushButton">
					<iframe src=●●></iframe>
				</div>
				<p class="p-entry__note">Requ.log | レク.ログ</p>
			</div>
	</div>
<?php }; ?>
 <!-- 記事がよかったらいいね ここまで -->

ハイライトされている部分を先ほどの「IFrame」でコピーしたものと差し換えてください。「Facebookで更新情報をお届け。」などの文言部分も好みに変更。そうしたらあとはもう、「single.php」の表示させたい場所にまるごと追記すればOK!・・・・

なんですが、どこに追記すればどこに表示されるのか、分からないとちょっとコワいですよね。

基準1

ひとつ基準を知れば大丈夫です。MAGの場合、デフォルトで実装されている記事下のシェアボタンは、以下のようなコードで呼びだされています。

<?php if ($options['show_bookmark']) { ?>
・
・(省略)
・
<?php }; ?>

この上に追記すればシェアボタンたちの上に表示され、下に追記すれば下に表示されます。

 シェアボタン上

like-button-card_13

 シェアボタン下

like-button-card_14

基準2

ダメ押しにもうちょい基準を紹介します。TCDテーマでは「記事セクションはここまでですよ!」という注釈を入れてくれています。(多少表記が異なる場合もあると思います) 

<!-- END #article -->

MAGの場合、テーマオプションで設定できる「次の記事、前の記事リンク」はその直前。 

<?php if ($options['show_next_post']) : ?>
・
・(省略)
・
<?php endif; ?>

つまり、これらの間に貼り付ければ、「次の記事、前の記事リンク」の下に表示されます。

like-button-card_15


以上、カード型「いいね!ボタン」の設置方法を紹介しました。間違って余計なものを消したりしないようにさえ注意すれば、簡単に、自由な場所に設置できますね。

なお、使用テーマのアップデート時に、今回追記をした「header.php」と「single.php」の新データをそのまま上書きしてしまうと、当然ですが、設定が消えてしまいます。

対処方法としては、データの上書き前に【追記した部分だけバックアップ】しておき、【新データの該当部分に追記】し直すか、【子テーマの導入】を検討することが挙げられるでしょう。

 子テーマの導入方法

「10分で終わらせてくるっ!」WordPress子テーマの作り方を2ステップで簡単解説!

でも「カスタムCSS」に追記している内容は、アップデートしても消えない仕様になっています。だから【呼び出す”魔法の書”】はずっとそのまま。伝え続けられてゆく。それだけでもずいぶん助かりますね。カスタマイズは、初心者にもできるゲームである!・・・楽しみましょう。

関連記事

魅力的なブログで収益化。ワードプレステーマTCD【MAG】の有効的な活用方法とカスタマイズまとめ

【使用者レビュー】WordPress初心者にこそおすすめのブログテーマ、TCD「MAG」のデフォルト機能と魅力を徹底解説

記事が気に入ったら
Requ.logを "いいね!"
Facebookで更新情報をお届け。

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク

ピックアップ記事

  1. 理想のWEBサイトを直感デザイン。TCD『テーマオプション』の使い方
  2. ゆっくり、フシギな色変化。GIFアニメを使った目を引くサイトロゴの作り方
  3. アレ?Chromeの表示文字、汚なくなった!? 変わったフォントを1分で取り戻そ…
  4. 「私の名前はページプラグイン。」Facebookページのいいね!ボタンをWord…
  5. 魔法のような仕事効率化。ブログにも使えるWindows定型文ツール「Phrase…

関連記事

  1. simple-image-sizes_ec-ps

    ワードプレス

    メディア問題さん、さようなら。画像サイズを気ままに追加するプラグイン「Simple Image Si…

    挿入画像サイズ、もっと自由に選びたい。ハイ。お悩み相談室のコーナー…

  2. display-speed_ec

    ワードプレス

    目指せ軽量化!今から始める、WordPressサイトの表示スピード改善計画

    あなたの●●●、ちょっと重すぎない? いえ、すみません。あなた…

  3. valuable-content-from-image_ec

    ワードプレス

    『伝わりやすいブログ』を作るには?画像で届ける価値あるコンテンツ

    記事を見栄えよく、伝わりやすくするには?ブログ記事を書き始めると、…

  4. switch-by-the-device_ecmg
  5. retina-os-solution_ecmg

    ワードプレス

    【Retinaディスプレイ対応1】Macで綺麗に。Windowsでサクサク。ブログ画像をOSごとに適…

    簡単に、美しく。ページ表示速度の観点で考えると、画像においてはでき…

  6. browzer-extension_ec

    ワードプレス

    ”WEBサイズマスター”へ。Chrome拡張「Page Ruler」「View Image Info…

    自分のWEBサイトの幅、知ってますか?今自分が見ているページの「あ…

【Requ.log記事】魅力的なブログを、今すぐ作る。
tcd-mag
【Requ.log記事】魅力を活かす、カスタマイズまとめ。
tcd-mag

特集記事

  1. retina_ecmg
  2. todoist_ec
  3. tcd-mag_ecmg-ps
  4. theme-change_ecrt
  5. tcd-theme-user-review_ecmg
  6. improvement-flow_ecmg

ピックアップ記事

  1. quicktag_ecmg
  2. widgetoon-js-count-jsoon_ecmg
  3. todoist-constitution_ec
  4. tcd-css-customize_ecmg
  5. annotation-image_ecmg
  6. chrome-font_ecmg

タスク管理で、自己管理。

todoist

掘り出し記事

  1. todoist-re-schedule_ec
  2. mergely-ecmg
  3. feedly-count-problem_ecmg
  4. analytics-ip-filter_ecmg

魅力的なブログを、今すぐ作ろう。

tcd-mag

ブログのRetina対応、始めませんか?

retina-os-solution

ピックアップ記事

  1. compress-jpeg-png-images_ecrt
  2. quicktag_ecmg
  3. annotation-image_ecmg
  4. child-theme_ecmg

ゆっくり、フシギなGIFアニメ。

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

最近の記事

  1. enlarge-image-ecmg
  2. spark-tutorial-ecmg
  3. modern-dilemma-ecmg
  4. paradigm-shift-ecmg

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」

思考系ピックアップ記事

  1. modern-dilemma-ecmg
  2. restriction_ecmg-ps
  3. blog-contents_ecrt
  4. irreplaceable-ecmg
  1. business-books_ecmg

    マーケティング

    【厳選6冊】起業したくなったら読んでおきたいビジネス書。自分の強みを見つけて活か…
  2. adjust-the-button_ecmg

    ワードプレス

    【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザイン変更と調整方法
  3. todoist-tips_ecmg

    マネジメント

    【小技特集】もっと使いこなす!おすすめタスク管理ツールTodoistの活用法12…
  4. todoist_ec

    マネジメント

    【フリーランス必見】確実に納期を守るために。タスク管理ツールTodoistで予定…
  5. retina_ecmg

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
PAGE TOP