like-button-card_ecmg

ワードプレス

サイトデザインに合わせよう。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

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

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

like-button-card_03

like-button-card_04

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

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

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

like-button-card_ins2

次に、【呼び出す”魔法の書”】・・・俗世間一般でいうところの「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

なお、私に必要なかった部分はコメントアウトしています(「/* 」と「 */」で囲んでいるということ)。この部分は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

以下の「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

呼び出しの”じゅもん” を「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 endif; ?>
 <!-- 記事がよかったらいいね ここまで -->

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

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

基準1

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

  <?php if ($options&#91;'show_bookmark'&#93;) { ?>
  <!-- 省略 -->
  <?php }; ?>

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

 シェアボタン上

like-button-card_13

 シェアボタン下

like-button-card_14

基準2

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

<!-- END #article -->

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

  <?php if ($options&#91;'show_next_post'&#93;) : ?>
  <!-- 省略 -->
  <?php endif; ?>

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

like-button-card_15


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

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

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

 子テーマの導入方法

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

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

【目的別】とっておきのWordPressテーマ比較。TCDテーマのおすすめメンバーセレクション

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

Requ.log | レク.ログ

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

ピックアップ記事

  1. サイトを彩る直感設定。WordPressTCDテーマ「オリジナルウィジェット…
  2. Twitterのシェア数表示を復活!「widgetoon.js & count.…
  3. サイトデザインに合わせよう。TCDテーマ記事下にカード型「いいね!ボタン」をセン…
  4. ブロガー以外も知っておきたい。ブログ記事の書き方と、頭を整理する構成方法
  5. ブログにおける「価値あるコンテンツ」とは?三大要素と”オリジナリティ…

関連記事

  1. favicon-generator_ec
  2. quicktag_ecmg

    ワードプレス

    WordPress初心者にオイシイ、簡単記事装飾。TCDテーマ「クイックタグ」機能の使い方

    反則ギリギリな、簡単さ。小見出しのデザインを美しくしたい?ああ、例…

  3. insert-card-link_ecmg

    ワードプレス

    クリックひとつで完成。Embedlyで見栄えの良いカード型の記事リンクを貼る方法

    リンク挿入、どうしてますか?記事を書いていると、「以前に自分が書い…

  4. theme-change_ecrt

    ワードプレス

    【徹底検証】乗り換えたいでしょ?WordPressTCDテーマの変更方法と注意点

    TCDテーマからTCDテーマへ!魅了されてしまった。ついに乗り換え…

  5. browzer-extension_ec

    ワードプレス

    “WEBサイズマスター”へ。Chrome拡張「Page Ruler」「Ima…

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

  6. tcd-theme-widget_ecmg

    ワードプレス

    サイトを彩る直感設定。WordPressTCDテーマ「オリジナルウィジェット」の使い方

    本格レイアウトの「キモ」。WEBサイトのレイアウトって、メインカラ…

スポンサーリンク
高速・安定レンタルサーバー
高速・高機能・高安定レンタルサーバー【エックスサーバー】 高速・高機能・高安定レンタルサーバー【エックスサーバー】

Requ.Sound Lab. | レク.サウンドラボ

レク.サウンドラボ

音に、景色と”振る舞い”を。

特集記事

  1. adjust-the-button_ecmg
  2. tcd-theme-selection_ecmg
  3. todoist_ec
  4. retina_ecmg
  5. theme-change_ecrt
  6. display-speed_ec
  7. valuable-content-from-image_ec
  8. original-share-button_ecmg
  9. tcd-theme-user-review_ecmg
  10. extension-tools-for-bloggers_ec

ピックアップ記事

  1. switch-by-the-device_ecmg
  2. blog-contents_ecrt
  3. original-share-button_ecmg
  4. like-button-card_ecmg
  5. facebook-fast-display_ecmg
  6. todoist-advanced_ec
  7. quicktag_ecmg
  8. tcd-theme-options_ecmg
  9. chrome-font_ecmg
  10. media-setting_ec

強みを見つけて、活かしていくために。

business-books

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

todoist

おすすめ記事

  1. “WEBサイズマスター”へ。Chro…
  2. 小規模チーム、家族間の疎通に。Todoistで始める気軽なタ…
  3. 【Retinaディスプレイ対応1】Macで綺麗に。Windo…
  4. 自分のアクセス痕は残さない。アナリティクスのフィルタで自宅の…
  5. きれいにしっかり画像圧縮。WordPressプラグインCom…

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

retina-os-solution

ブログクオリティー底上げ10ツール

extools-for-bloggers

最近の記事

  1. 「私の名前はページプラグイン。」Facebookページのいい…
  2. 瞬間奥義「非同期設定」。Facebookのいいねボタン、ペー…
  3. feedlyのフォロワー数が表示されないっ!?SNS Cou…
  4. カッコ美しい、オリジナルシェアボタン。サイトデザインに合わせ…
  5. 【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザ…

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

Requ.log | おすすめビジネス書

コンテンツの秘密-ぼくがジブリで考えたこと 「言葉にできる」は武器になる。
プロフェッショナルは「ストーリー」で伝える 日本人の知らなかったフリーエージェント起業術

Requ.log | おすすめ物語

モモ マリコ/マリキータ
なんくるない たったひとつの冴えたやりかた

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」

Requ.log | STORY

  1. 「あの時、気づけなかった。」苦しい時に思い出して奮い立つ、人…
  2. 心が折れそうに辛いとき。一歩前へ踏み出し紡がれた、今へ続くス…
  3. 大切な人の最後の1年
  1. valuable-content-from-image_ec

    ワードプレス

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

    ワードプレス

    【徹底検証】乗り換えたいでしょ?WordPressTCDテーマの変更方法と注意点…
  3. display-speed_ec

    ワードプレス

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

    マネジメント

    最低限習得しておきたい自己管理術。忙しくても、頭と心は軽くしておく生活改善フロー…
  5. adjust-the-button_ecmg

    ワードプレス

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