ブログのコメント欄を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
  • このエントリーをはてなブックマークに追加

関連記事

ニコニコ動画やYoutubeのRSSフィードもサムネ付きで手軽に表示できるブログパーツ

通常サイトのRSSだけでなく、ニコニコ動画やYoutubeの動画サイトのRSSを読み込んでサムネ画像

記事を読む

ニコニコ動画のユーザーおよびマイリストのRSSフィード

ニコニコ動画のユーザーページのRSSフィードおよびマイリストのRSSフィードは次のようになっています

記事を読む

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

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

記事を読む

【HTML/jQuery UI】NumericUpDownを設置する【Spinner】

HTMLタグにNumericUpDownがないか探したのですがないみたいなのでそれが使えるようなもの

記事を読む

関連記事を表示させるブログパーツOutbrainの導入方法

関連記事を表示させるブログパーツOutbrainの紹介です。 このOutbrainの長所は

記事を読む

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

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

記事を読む

Windows7でVirtualBoxとVagrantを使ってローカル開発環境を構築する

Vagrant(ベイグラント)とは http://www.vagrantup.comで入手できる仮

記事を読む

美人画像を表示してくれるブログパーツまとめ

美人時計など有名なものもありますが、美人画像を表示してくれるブログパーツをまとめました。暦や時刻を表

記事を読む

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

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

記事を読む

【jQuery/javascript】Tweetボタンを動的に設置する

Twitterボタンをブログやサイトに設置するとき読み込みに時間がかかってしまって困るといったことや

記事を読む

Windowsユーザが初めてMacBookを購入したときの注意点や感想

最近12インチのMacBookを購入しました。今までWindowsしか

Redmine3.2をUbuntu14.04にインストールして躓いた所についてメモ

はじめに Ubuntu14.04 ServerにRedmine3.2

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

→もっと見る

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