読者です 読者をやめる 読者になる 読者になる

すけこむブログ

カメラが好きな都内在住31歳男性の写真ブログ。ニコンD810を愛用。2歳児の子育てにも奮闘中。

はてなブログの記事によくある質問を設置するためのHTMLとCSS

ブログカスタマイズ

f:id:sukecom:20170311071832j:plain

はてなブログで任意のページに「よくある質問と回答」を設置したいときってありませんか。滅多にないですよね。それでも設置したい!と思ったときに役立つかもしれないHTMLとCSSについてまとめてみました。

たとえばブログにお問い合わせフォームや連絡先などを記載している方。同じような質問をされて、毎回同じように回答することに絶望を感じてきたのなら、よくある質問と回答を載せてみるのがきっと効果的。

ここにまとめていることは、HTMLとCSSを理解されている方にとっては、屁のカッパレベルのこと。カッパに屁をこかれたくない!という方は、すみやかに他の記事をご覧いただいた方が健康的でよろしいかと思います。

よくある質問と回答を設置するためのHTML

以下のHTMLをコピペすれば、よくある質問は9割方完成します。

<dl class="qa-list">
<dt>ここに質問を書く</dt>
<dd>ここに回答を書く</dd>
</dl>

classにidで指定するところがミソです。キュウリにはもろみ味噌が合います。

ここに質問を書く
ここに回答を書く

こんな感じで表示されます。

同一ページ内に、ひとつしかよくある質問を設置しない場合は、classではなくidで指定するのもありですね。実際、私はidで指定しています。

idとかclassなんてわかんねーよ!という方は、とりあえずキュウリ食べて落ち着いてください。ぶっちゃけわからなくても、表示上の大きな問題はありません。ただしGoogle先生に嫌われる可能性はちょっとあります。

CSSの設定は必要ですか?
もちろん必要です。次の項目でご説明します。

このページはGoogle先生に嫌われるかもしれません...(わかる人にはわかる)

CSSの設定

CSSは以下のように設定して、デザインCSSにぶっこんでいます。フォントのサイズやらマージンやらパディングやらは、ブログのデザインに合わせて微調整してください。

/* FAQ */
.qa-list dt {
	display: block;
	position: relative;
	margin-bottom: 15px;
	padding: 10px 0 10px 45px;
	background: url(★★★.gif) left center no-repeat;
	-webkit-background-size: 30px 30px;
	background-size: 30px 30px;
	font-size: 1.2em;
}
.qa-list dd {
	margin-left: 0;
	margin-bottom: 3em;
	padding: 5px 0 5px 45px;
	background: url(★★★.gif) left center no-repeat;
	-webkit-background-size: 30px 30px;
	background-size: 30px 30px;
}

赤枠で囲った部分のデザインCSSにこれらを貼り付けるのです。

f:id:sukecom:20170310151705j:plain

★★★.gifの部分は各々でアップロードした、はてなフォトライフ上のURLをコピペする必要があります。

f:id:sukecom:20170303081613g:plain

f:id:sukecom:20170303081616g:plain

この画像でよければダウンロードして使ってもらっても構いません。Photoshopで文字を画像化しただけです。

スマホから見ると、CSSが適用されていないんだけど!というときは、とりあえずきゅうりのキューちゃんをほかほかご飯と一緒に食べてみてください。

それでも空腹がおさまらないときは、以下をコピペして「スマートフォン用にHTMLを設定する」のところにぶっこんでみてください。

<style type=text/css> 
.qa-list dt {
	display: block;
	position: relative;
	margin-bottom: 15px;
	padding: 10px 0 10px 45px;
	background: url(★★★.gif) left center no-repeat;
	-webkit-background-size: 30px 30px;
	background-size: 30px 30px;
	font-size: 1.2em;
}
.qa-list dd {
	margin-left: 0;
	margin-bottom: 3em;
	padding: 5px 0 5px 45px;
	background: url(★★★.gif) left center no-repeat;
	-webkit-background-size: 30px 30px;
	background-size: 30px 30px;
}
</style>

貼り付けるのは赤枠で囲ったところ。上下にある<style type=text/css>と</style>は消したらダメなやつです。

f:id:sukecom:20170310152247j:plain

このときも★★★.gifの部分は各々でアップロードした、はてなフォトライフ上のURLをコピペする必要があります。

設置したら消し飛んだページ

私はモデル募集のページに、よくある質問と回答を設置したのですが、設置して数日後、該当ページの検索順位が恐ろしく下がりました...

よくある質問と回答の設置が引き金になったのかどうかは、私には判断できません。

今までずっと特定のワードで1ページ目をキープしていたのに、さっき調べたら15ページ目でした...カッパでいうならお皿の水が完全に乾いた状態。

一時的なものなのか、何か他の要素が影響しているのか、SEOのことはあまり詳しくないのでさっぱりですが、どうにかしたいところ。

ここに書かれているやり方で、よくある質問と回答を設置したら、検索順位下がったじゃねーか!みたいなクレームは受け付けられません。黙ってキューリでも食べててください。設置は自己責任でお願いします。

よくある質問自体は有益な情報だと思う

よくある質問と回答自体は、閲覧者にとって有益なものと思います。どういったワード、経緯でそのページに辿り着いて、そこにどんなことが書かれているかによるとは思いますが。

検索順位が急降下したのは別の要素が影響しているものと思いたい。教えてください、詳しい方。美味しいキューリご馳走します。

はてなブログに問い合わせフォームを設置している方や、連絡先を公開されている方で、無駄なやりとりを極力省きたい方は、よくある質問と回答の設置を検討してみてはいかがでしょうか。