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 endif; ?>
<!-- 記事がよかったらいいね ここまで -->

ハイライトされている部分を先ほどの「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. もっとストレスフリーに・・Todoistの連携ワザで高速タスク登録!
  2. サイトデザインに合わせよう。TCDテーマ記事下にカード型「いいね!ボタン」をセン…
  3. アレ?Chromeの表示文字、汚なくなった!? キレイなフォントを1分で取り戻そ…
  4. TodoistでToDoリスト。プロジェクトやタスクの階層化で頭の中を楽にする
  5. サイトを彩る直感設定。WordPressTCDテーマ「オリジナルウィジェット…

関連記事

  1. unveil-lazy-load_ec

    ワードプレス

    設定不要!WordPressプラグイン「Unveil Lazy Load」でページ読込スピードアップ…

    簡単装備で速度をブースト!プラグインをインストールするだけで、ペー…

  2. media-setting_ec
  3. facebook-fast-display_ecmg

    ワードプレス

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

    余計な読込み遅延を解消セヨ。えぇー今回の任務は「ぺいじ」の読込…

  4. tcd-css-customize_ecmg

    ワードプレス

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

    初心者のうちに、実践で学ぶ。初心者にとって避けて通りたい・・避けた…

  5. retina-logo_ec

    ワードプレス

    【Retinaディスプレイ対応4】サイトの顔も綺麗に。TCDテーマなら3ステップで完了する、ロゴ画像…

    サイトロゴは、サイトの顔。このサイトでは最上部にロゴを配置していま…

  6. annotation-image_ecmg

    ワードプレス

    ”ブログにおいしい”、注釈画像の作り方。矢印や枠線、文字を追加しよう

    注釈画像も、自由自在。前回までの記事では、Screenpres…

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

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

レク.サウンドラボ

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

特集記事

  1. tcd-theme-user-review_ecmg
  2. business-books_ecmg
  3. tcd-mag_ecmg-ps
  4. improvement-flow_ecmg
  5. adjust-the-button_ecmg
  6. theme-change_ecrt
  7. todoist-extension_ecmg
  8. extension-tools-for-bloggers_ec
  9. valuable-content-from-image_ec
  10. todoist-tips_ecmg

ピックアップ記事

  1. todoist-basic_ec-ps
  2. tcd-theme-options_ecmg
  3. simple-image-sizes_ec
  4. todoist-class_ecrt
  5. lightshot_ecmg
  6. intuitive-custom-post-order_ec
  7. like-button-card_ecmg-ps
  8. widgetoon-js-count-jsoon_ecmg
  9. facebook-page-plugin_ecmg-ps
  10. compress-jpeg-png-images_ecrt

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

business-books

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

todoist

おすすめ記事

  1. タスクを完了させたくなる!? モチベーションアップに役立つT…
  2. WordPressで子テーマを作る際に知っておくべき仕組みと…
  3. Screenpresso(スクリーンプレッソ)を使うなら、や…
  4. 「Mailboxの代わりは・・?」代替メールアプリ最有力。S…
  5. 【Retinaディスプレイ対応3】ねえ・・どうする?widt…

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

tcd-mag

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

retina-os-solution

最近の記事

  1. 子テーマ使用者必見!カスタマイズしたWordPressテーマ…
  2. 「違い」を調べる神ツール。テキストファイルの差分比較、合併が…
  3. WordPressで子テーマを作る際に知っておくべき仕組みと…
  4. 【使用者レビュー】WordPress初心者にこそおすすめのブ…
  5. 【小技特集】もっと使いこなす!おすすめタスク管理ツールTod…

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

思考・価値感系おすすめ記事

  1. reset-button_ecrt
  2. blog-contents_ecrt
  3. restriction_ecmg-ps

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

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

Requ.log | おすすめ物語

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

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」
  1. tcd-theme-selection_ecmg-ps

    ワードプレス

    【目的別】とっておきのWordPressテーマ比較。TCDテーマのおすすめメンバ…
  2. adjust-the-button_ecmg

    ワードプレス

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

    マーケティング

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

    マネジメント

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

    ワードプレス

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