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

関連記事

【HTML/CSS】タイトルロゴ画像の設定の方法

自分のブログやサイトのタイトル部分にトップ絵画像を設置する方法です。方法としてはimgタグをHTML

記事を読む

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

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

記事を読む

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

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

記事を読む

WordPressの記事内でJavaScriptを動かす

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

記事を読む

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

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

記事を読む

さくらサーバーにフォルダをアップロードする方法

さくらサーバーにフォルダをアップロードする…という機能は無いみたいで個別にFTPソフトを使う必要があ

記事を読む

【jQuery UI】Sliderのオプション変更やイベントを取得をする方法

jQuery UIを使ってスライダー(トラックバー)を作ります。その際に起こるイベントとしてスライダ

記事を読む

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

LinkWithinについて ブログに関連記事を表示するパーツ『LinkWithin』を紹介します

記事を読む

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

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

記事を読む

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

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

記事を読む

NVIDIA DIGITSをSupervisorを使って自動起動する

はじめに 先日Ubuntu14.04にDIGITS 5をGPUなしP

【2017年度】GeForce 1080 Ti搭載BTOパソコン比較

はじめに 最近ディープラーニング用にGPUのないPCにDIGITSを

Windows用のシンプルなストップウォッチソフト紹介

Windows(10)でも使える使いやすいKAZAMITimerという

MNISTをDIGITS 5のCPUのみで試す(GPUなし)

はじめに DIGITSを使えばGUI操作で簡単にディープラーニングが

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

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

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

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

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

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

→もっと見る

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