INTEREST

※上の文字入りQRコードは「MOJI-Q 2.0 」で作りました♪

　QRコードが必要かどうかはこの際置いといて... とりあえず隙間を埋める為とは言え、どうせ貼るならちょっとでもオシャレな感じにしたいなと思ってｗ

また、プラグインの「検索フォーム」と「QRコード」は以下の手順でちょこっと改良を加えて、任意の場所に移しました。 （ほぼコピペで済む作業ですが... 　一応書いておきますｗ）

---

【プラグインの改良と表示位置変更】

1. 1.「検索フォーム」の改良と表示位置変更
   • 1-1.「検索フォーム」の“改良前”と“改良後”のHTML
   • 1-2.「検索フォーム」のCSS部分の記述
2. 2.「QRコード」の改良と表示位置変更
   • 2-1.「QRコード」のHTMLを編集する

---

※テンプレートのHTMLやCSSを編集する際は、念の為にテンプレートの「複製」を作ったりメモ帳等に全文をコピーしてバックアップを取ってから作業する事をオススメします。

1.「検索フォーム」の改良と表示位置変更

まず「検索フォーム」の編集ですが、「管理画面」から「プラグインの設定」を開いて、「検索フォーム」の“詳細”をクリックします。

※プラグインの設定に「検索フォーム」が無い場合は、「公式プラグイン追加」で「検索フォーム」を追加すればOKです。

すると右の画像のように「検索フォームの編集」が開くので、その中の【HTMLの編集】をクリックしてHTMLソースを表示します。

あとは、このソースを「テンプレートの設定」のHTML編集で、ソース内にコピペすれば任意の場所に「検索フォーム」を表示する事が出来るのですが、使ってるテンプレートや表示したい場所によって、コピペする場所も異なるので多少HTMLの知識が必要です。
また今回は、下記のようにちょこっと改良を加えました。

1-1.「検索フォーム」の“改良前”と“改良後”のHTML

<form action="./" method="get">
<p class="plugin-search" &align>
<input type="text" size="20" name="q" value="" maxlength="200" /><br />
<input type="submit" value=" 検索 " />
</p>
</form>

<form action="./" method="get">
<input type="text" maxlength="200" class="field top-search" title="サイト内検索" 
name="q"<!--search_area--> value="<%search_word>"<!--/search_area--> />
<input type="submit" value="検索" class="top-search-btn" />
</form>

【HTMLソースの改良点】

　「<p class="plugin-search" &align>と</p>」の削除
プラグイン用の変数部分で不要なので削除しました。

　「size="20"」の削除
入力欄の幅を文字数で指定してる箇所ですが、ブラウザにより見た目が変わるので、
　横幅はCSSの“width”で設定する事にして削除しました。

　「<br />」を削除
<input ～ />の後に付いてる<br />は、検索ワードの入力スペースと検索ボタンを改行する為に付いてたが、今回は両方を横並びで表示する為に削除しました。

　「class="field top-search"」の追加
CSSで装飾をする為に、class属性を追加してます。（CSSの内容は下記参照）

　「title="サイト内検索"」の追加
title属性で補足情報を付けてます。(検索フォームにマウスを乗せると“サイト内検索”と表示が出ます)

　「<!--search_area--> value="<%search_word>"<!--/search_area-->」の追加
検索フォームに入力したワードが、検索結果のページで消えないように変数を使って改良しました。
FC2ブログの変数については、こちら　 をご覧下さい。

　「class="top-search-btn"」の追加
上の項目と同じく、CSSで装飾をする為に、class属性を追加してます。（CSSの内容は下記参照）

このブログでは、以上のように改良した「検索フォーム」のHTMLをページ上部に組み込んで配置。
そして、プラグインの「検索フォーム」はもう必要無いので「プラグイン管理」の中から「検索フォーム」を削除しました。(またプラグインとして追加したければ「公式プラグイン追加」からいつでも可能)

※今回のようにプラグインの内容を、テンプレートのHTML内に直接記述した場合、表示の編集等をする度にHTMLもしくは、CSSのソースを編集する必要があり、「プラグインの設定」では操作出来ません。

1-2.「検索フォーム」のCSS部分の記述

「テンプレートの設定」のスタイルシート編集に、下記のソースを記述しました。

/*　▼　ブログ内で統一してる入力フォームの装飾　▼　*/
input.field, textarea.field {
padding:6px;
border-radius:5px;
border:solid 1px #bbb;
box-shadow:1px 1px 1px 0px #555 inset;
}
input.field:hover, textarea.field:hover{ border:1px solid #09F; }
/*　▼　ページ上部　検索フォームの装飾　▼　*/
input.top-search { width:190px; }
input.top-search-btn {
margin:8px 0 0 10px;
padding:4px 15px 3px 15px;
box-shadow:1px 1px 1px 0 #555;
cursor:pointer;
}

※上記は例として、このブログのCSSの内容なので、もし「検索フォーム」を改良される場合は、ご自身のブログに合わせて調整が必要になるかと思います。

---

2.「QRコード」の改良と表示位置変更

次に「QRコード」の編集ですが、上記の手順と同じようにまずは、「管理画面」から「プラグインの設定」を開いて、「QRコード」の
“詳細”をクリックします。

※プラグインの設定に「QRコード」が無い場合は、「公式プラグイン追加」で「QRコード」を追加すればOKです。

すると右の画像のように「QRコードの編集」が開くので、ブログにQRコードを載せるだけなら、QRコードの大きさを選んで完了です。

但し、他に何も手を加えなければ、ただQRコードを表示するだけになるので、何かしら文章を入れたい場合等は、「プラグイン説明(上部)」もしくは、「プラグイン説明(下部)」に任意の文章を入れるか、または【HTMLの編集】でソースを表示して編集します。

このブログのように、QRコードの画像の横に文章を入れたい場合は【HTMLの編集】を行う必要があります。

例えば「プラグイン説明(上部)」と「プラグイン説明(下部)」に文章を入れると、この様に表示されます。

分かり易くする為に「プラグイン説明(上部)」には “赤”
「プラグイン説明(下部)」には “青” で色付けしてます。
※この説明内でもHTMLタグをを使う事が可能です。
※タイトル表示(見出しの部分）は、このブログでの表示です。

※QRコードの画像は「コンテンツの文字設定」で 初期設定の“左寄せ”で表示してます。他に中央寄せ・右寄せがあります

そして、画像の横に文章を入れたい場合は【HTMLの編集】内にあるソースを下記のように変更します。

2-1.「QRコード」のHTMLを編集する

以下は、例としてHTMLにstyle属性を付けて文章を回り込ませた記述方法です。
※画像URL（http://～省略～/.jpg）の部分は、このブログの場合のURLです。

<div class="plugin-qrcode" &align>
<img src="http://blog-imgs-68.fc2.com/i/n/t/interest2014/246e9aac2.jpg" 
alt="QR"></div>

<div class="plugin-qrcode" style="float:right">
<img src="http://blog-imgs-68.fc2.com/i/n/t/interest2014/246e9aac2.jpg" 
alt="QR"></div>

画像の横に表示する文章をここに入れます。ああああああああああああああ
ああああああああああああああああああああああああああああああああああ
ああああああああああああああ

<p style="clear:both"></p>

【HTMLソースの変更点】

　「&align」を削除して、「style="float:right"」に変更
「&align」はプラグインの変数で、左右もしくは中央寄りの設定を反映させる部分ですが、ここを削除して回り込みのスタイルを新たに入れてます。また、“float:right”は画像が右に寄りますが、“float:left”とすると画像は左に寄ります。

　「画像の横に表示する文章を～...ああああ」の部分
ここには表示したい文章を入力します。改行したい場合は<br />タグを使えばOKです。

　「<p style="clear:both"></p>」の追加
この1行は、回り込み（"float:right"もしくは、"float:left"）の解除をしてます。

HTMLソースを上記のように変更をして、表示した「QRコード」が下記になります。
（左側の画像は“float:left”　右側の画像は“float:right”を記述してます。）


それぞれの表示位置が分かり易いように、「プラグイン説明(上部)」と「プラグイン説明(下部)」にも文章を入れてますが、実際は必要な箇所にだけ表示したい文章を入れればOKです。
また、上記の方法はHTMLにスタイルを書き加えてますが、「検索フォーム」と同じようにclass属性等を使ってHTMLとCSSで分けて記述してもOK。（今回はちょっとの変更で出来る方法を例に挙げました）

そして、このブログのQRコードのように他のサイトやツールで作ったQRコードを使う場合は、作ったQRコードの画像を「ファイルアップロード」を行って、その画像のURLに書き換えます。

上記HTMLソースの「src="http://blog-imgs-68.fc2.com/i/n/t/interest2014/246e9aac2.jpg"」
※赤字の部分が画像URLなので、ここを貼りかえれば表示される画像が変わります。
そもそも他でQRコードの画像を作るなら、この「QRコード」のプラグインを使う必要が無いです...ｗ

「検索フォーム」と同じで、ブログの好きな位置に表示したい場合は多少HTMLの知識が必要ですが、そう難しくない作業なので簡単に出来ると思います。
あと、もちろん最後にちゃんとQRコードが読めるかチェックをお忘れなく♪