スポンサーサイト

 

--.--.--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!
-------- | スポンサー広告 | | | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/23-c39250be

「スポンサーサイト」へのトラックバック

- TrackBack -


「スポンサーサイト」へのコメント

- Comment -

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

検索とQRコードの位置を変更してみた

 

2014.09.23

QRコード 検索フォームとQRコードの位置をサイドメニューから ページ上部に移動してみたっ!!

デフォルトなのか、最初からプラグインに入ってたからそのままにしてたけど、ページ上部の隙間を埋める&サイドメニューを少しシンプルにする為にレイアウトを変更♪
ページ上部の微妙な隙間をずっと放置してたので、これで一石二鳥w
てか、検索フォームは必要として、QRコードっているのかな?...
消しちゃおうかな?とも思ったけど、隙間を埋めるのに丁度良くて...w

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

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


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



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


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


※テンプレートの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コードの大きさを選んで完了です。

但し、他に何も手を加えなければ、ただ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”を記述してます。)

HTMLを編集した「QRコード」“float:left” HTMLを編集した「QRコード」“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コード」のプラグインを使う必要が無いです...w

「検索フォーム」と同じで、ブログの好きな位置に表示したい場合は多少HTMLの知識が必要ですが、そう難しくない作業なので簡単に出来ると思います。
あと、もちろん最後にちゃんとQRコードが読めるかチェックをお忘れなく♪
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!


関連記事
2014-09-23 | その他 | コメント(0) | トラックバック(0) | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/23-c39250be

「検索とQRコードの位置を変更してみた」へのトラックバック

- TrackBack -


「検索とQRコードの位置を変更してみた」へのコメント

- Comment -

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

▼クリックすると配色が変更されます  
このボタンの設置方法は こちら♪

White
Black

プロフィールClick

プロフィール画像

Author:あると♪
ブログ開始: 日目
公開記事数:

Webサイト製作の勉強にと思ってブログのカスタマイズに挑戦してる初心者です♪その他にも気になった事、興味がある事などを気ままに書いてますっ!!

当ブログのご案内は こちら♪

最新記事Click

最新コメントClick

カテゴリClick

月別アーカイブClick

アクセスカウンターClick

設置日
2014.11.19

スポンサーリンクClick

このページの目次Click

人気ランキングClick

ブログパーツ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。