ブログのコメント欄をTwitterやFacebook、はてなのコメントで代用する方法

公開日: : WordPress, zenback, サイト制作

スポンサーリンク

最近になってコメント欄にスパムっぽいものが大量に飛んでくるようになったのでどうにかしないと、と思い一度閉鎖してソーシャル系のコメントで代用しようと思いZenbackを導入しました。

Zenbackかよ…重いでしょ…と期待外れの方は申し訳ありませんがこれ以降はほぼその話しかないです。ごめんなさい。でも一度にやるとなるとこれが一番楽だと思うのです。

Zenbackの導入

導入方法はこちらの記事をご覧ください。

以前は関連記事表示のために使用していましたが、WordPressに移行してからはプラグインなどが充実していて不要だなと思い使っていませんでした。

今回私は関連記事の表示などもありますが、それについてはチェックを外してお知らせ欄や広告欄のところは後ろの方に回しました。この辺は各自取捨選択しておいてください。

Zenbackの挿入位置

Zenbackの挿入位置ですが私の場合ですとテーマは「Stinger3」を使用していますのでそれについて書いていきます。

できれば関連記事の下に設置したかったので挿入場所はテンプレートの「単一記事の投稿」のところとなります。

z-tanitukiji

関連記事の下なので貼りつけるスクリプトは下図の赤枠部分となります。後で色々したいのでクラス名「zenback」と付けたdiv要素で囲みました。必要ない方はそのままペーストしても構いません。

zenbackinsertpos

デザイン

コメント欄っぽく囲う

正直このままでも十分役に立ってくれるのですが、ちょっとコメント欄っぽくしたいと思いこんな感じで囲ってみました。

zenbackcomment1
↑※広告やお知らせ欄は画像を加工して消しています

CSSはこんな感じになっています。

.zenback{
  font-size: 13px;
  padding: 15px 20px !important;
  margin: 60px -12px 0;
  border-radius: 10px;
}

/*ここから吹き出し部分*/
.zenback {
	position: relative;
	background: #f8f8f8;
	border: 3px solid #c2e1f5;
}
.zenback:after, .zenback:before {
	bottom: 100%;
	left: 18%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.zenback:after {
	border-color: rgba(248, 248, 248, 0);
	border-bottom-color: #f8f8f8;
	border-width: 30px;
	margin-left: -30px;
}
.zenback:before {
	border-color: rgba(194, 225, 245, 0);
	border-bottom-color: #c2e1f5;
	border-width: 34px;
	margin-left: -34px;
}

先ほど貼りつけるスクリプトをクラス名zenbackのdiv要素で囲ったのでこのようになっていますが、別の名前にした方は「.zenback」を置換して考えてください。

これは『CSS ARROW PLEASE!』というサービスを利用してCSS(3)だけで作成した吹き出しです。詳細は以下の記事をご覧ください。

最後に

Zenbackにはデザインハックの方法が公式で紹介されているのでこのデザインは見あきたというかたは見てみてください。

スポンサーリンク
Amazon
  • このエントリーをはてなブックマークに追加

関連記事

PEARをレンタルサーバーにインストールする

共用レンタルサーバーにPEARをインストールしたときにてこずったところについてメモ。今回レンタルサー

記事を読む

関連記事を表示するブログパーツまとめ

これまでいくつか関連記事を表示させる方法について記事を3つの記事投稿してきましたが、ここで簡単にまと

記事を読む

スクレイピングをサポートしてくれるAPI【kimono】

kimonoというスクレイピングをAPI化してくれるという素晴らしいサービスがあります。

記事を読む

【さくらサーバー】htaccessを使って拡張子無しでアクセスする

さくらサーバーで拡張子なしのアクセスする方法について非常に苦労したのでつづっておきます。私は

記事を読む

【TortoiseGit】複数のリポジトリを統合する

やりたいこと 最近WindowsにTortoiseGitを導入してリポジトリを作ったり、履歴をプッ

記事を読む

ニコニコ動画の検索APIについて調べたのでメモ

ニコニコ動画にはAPIがあり、動画の情報(タイトルとか再生数とか)を取得したり、ランキング情報(RS

記事を読む

WordPressの記事内でJavaScriptを動かす

WordPressでは厄介なことにJavaScriptが動かない場合があります。この記事では動かない

記事を読む

相互RSSサービスのまとめ

ブログやサイトを作ると相互RSSという名前を聞くことがあると思います。相互RSSとはざっくりいうと他

記事を読む

Pocketのソーシャルボタンをブログ・サイトに設置する方法

後で読みたい記事を保存することのできるPocketのソーシャルボタンの設置方法についてです。このボタ

記事を読む

livedoorblogのタグのページが404 Not Found

別のブログとしてライブドアのものを使っているのですが、タグを編集していた際に特定のタグ一

記事を読む

UWSCを使ったソフト自動立ち上げ【SoftEther VPN Server】

やりたいこと 最近SoftEtherという筑波大学発のベンチャー企業

【PHP】headerでContent-Typeを指定したのに効かない場合の対処法

PHPでサイトマップを作ろうと思い、XML形式のファイルを出力しようと

スマホ向け幅固定サイトの回転時の幅対応方法

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。

【PHP】特定のURLからそのAtomやRSSのフィードを抽出する方法

特定のURLからRSSやATOMのフィードを抽出する方法をメモ。 流

フィード抽出ツール(RSS1.0、RSS2.0、atom)

任意URL サイト名 サイトURL RSS1.0

格安プラン限定レンタルサーバー機能比較表(2016年)

はじめに  最近新しい共用サーバーをレンタルしようと思い調査およびそ

kindle unlimitedが便利だったのでお勧めの使い方など感想メモ

 kindle unlimitedというサービスが8/3からAmazo

→もっと見る

  • Author : ががんぼ
    プログラミングやWeb関係で気付いたことについてメモしていく予定。だいたいが備忘録ですが、自分でサンプルを作って動かしてみたりしています。
PAGE TOP ↑