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

関連記事

FC2ブログからWordPressへの引っ越しについて

今までFC2ブログでメモを残していましたが、WordPressに移行することにしました。理由としては

記事を読む

なるべく安くロリポップを申し込む方法

ロリポップというレンタルサーバーは元々比較的安く、よくキャンペーンなどで割引をやっているので安価にC

記事を読む

人気記事・ランダム記事等紹介の忍者レコメンドが大幅にパワーアップした件

以前このブログにて忍者レコメンドの紹介記事を書きました。その際にこのブログにも忍者レコメンドを設置し

記事を読む

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

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

記事を読む

人気記事表示ブログパーツの忍者レコメンドを使ってみる

忍者レコメンドとは 今回は忍者レコメンドという人気記事表示のブログパーツを紹介します。忍者レコメン

記事を読む

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

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

記事を読む

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

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。 下記2点の設定が必要です。

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

【Laravel5】既存のDBからデータを取得して表示する

はじめに 今まで作ったWebサイトをLaravel5で見れるようにし

【C++/OpenCV】cv::Matの画像にインパルスノイズを付加する

OpenCVで画像にノイズを付け足したいと思って調べたところ、Pyth

Intel Corei7-7700TでHTC Viveの動作確認

はじめに HTC ViveというVRヘッドセットで遊んでみたのでその

【Python】フォルダ内のカッコ付き数字ファイルを一括でリネームするスクリプト

はじめに タイトルどおりなのですが、指定フォルダ内のファイルのファイ

OpenCV3.1のTracking APIでトラッキングを試す

はじめに 先日OpenCV3.1をopencv_contrib付きで

パソコンを複数台使う際便利なツール

はじめに 先日、機械学習用にGPUを積んだBTOパソコンを購入しまし

OpenCV3.1をopencv_contrib付きでVisual Studio2013でビルドしてインストールする

はじめに OpenCV3.1でトラッキングがしたいと思いインストーラ

→もっと見る

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