test

解決済

clip!clip!
Ads By Google

記事検索のタグ(?)を教えて下さい

ライブドアブログのプラグインに標準装備されている 「記事検索」 のタグ(?)はCSSのどの部分なのでしょうか?


私のブログのサイドバーは基本的に左寄せなのですが、、
「記事検索」プラグインのみ中央寄せに変更したいのです。

御存知の方 御教授下さい m(_ _)m

2008-11-10 17:00の質問
この質問と回答を読んで役に立った場合は「役に立つ質問」に投票してください。投票が多い質問は、役に立つ質問一覧に掲載され、より多くの人に見てもらうことができます。

回答(2)

3.

2008-11-10 20:28:55ベスト
ページのソースを見るとこのようなタグが生成されるのが分かると思います。
<form name="a_s" action="ブログURL/search" method="get" style="margin: 0px; padding: 0pt;">
 <input name="q" class="sf" type="text">
 <input value="検索" class="sfbtn" type="submit">
</form>
class="sf"のinputタグがテキスト入力、
class="sfbtn"のinputタグが検索ボタンです。

この2つはインライン要素なので、その親・・・ブロック要素のformタグに
text-align: center;

と指定すると、センター配置にできます。
問題なのは、そのformタグにclassもidも割り振られていないので、少し工夫が必要になることですね。


◎案1・・・サイドバーにある全てのformタグに指定
検索プラグイン以外のformタグ内も左寄せになりますが、特に問題が無ければ一番のオススメです。
div.side form {
	text-align: center;
}


◎案2・・・name属性に対して指定
この方法はIE6未対応ですが、シンプルなのがいいです。
form[name="a_s"] {
	text-align: center;
}


◎案3・・・フリーエリアを使う
検索プラグインのソースをフリーエリアに丸ごと貼り付けて、formタグのstyle属性にtext-alignを追加、元々あったプラグインは削除します。
やや複雑ですが、ある意味万能な方法です。
<form ~中略~ style="margin: 0px; padding: 0pt; text-align: center;">
(注、↑は1行目)

◎案4・・・JavaScriptを使う
ブラウザを選びませんが、内容の割に大げさ。なんとなく作りましたが非推奨です^^;
検索プラグインより後ろのフリーエリアまたはテンプレートに設置してください。
<script type="text/javascript">
//<![CDATA[
(function() {
  var el = document.getElementsByTagName('form');
  for(var i = 0; i < el.length; i++)
    if(el[i].name == 'a_s') {
      el[i].style.textAlign = 'center';
      break;
    }
})();
//]]>
</script>


よろしくお願いいたします。

imq様 御教授有難う御座いますm(_ _)m

「案1」をCSSに追加する方向で解決しました!!^o^

IE6使用中のPCも使っていますので「案2」はチョッと・・^^;

「案3」と「案4」もやってみたのですが、、
私が使用中のプラグインでは全く問題が無いので、オススメの「案1」でいってみようと思います♪

有難う御座いました m(_ _)m

1.

2008-11-10 20:00:58ベター
反則のような気がしますが・・・。^^

<div align="center">
   <form action="http://blog.livedoor.jp/自分のID/search" 
method="GET" style="padding:0;margin:0px;">
       <input type="TEXT" name="q" class="sf">
       <input type="SUBMIT" value="検索" class="sfbtn">
   </form>
</div>

上のタグをフリーエリアにつっこんだほうが早いと思います(「自分のID」部分は変えて)。
その気になれば、検索窓のサイズを変えたり、あらかじめ中に文字を入れておいたり、ボタンの「検索」の字を変えたりと、いろいろいじれるし。
タイトルまで中央揃えにしたいとなると、それもフリーエリアに入れなくちゃならなくなるけど、それはまた別に、ということで。

改行されてる~~search" とmethod="GET"~~はつなげてください。

ponue様 御教授有難う御座います m(_ _)m

編集して確認したPCのブラウザがIE6だったせいなのか(?)、、何度か試したのですが、自分のアドレスを入力して 改行の修整をしても左寄せのままなのです・・

私のやり方が何処か拙かったのかも.. ^_^;;


(PS) これは反則技でしたか~・・^^;
「カレンダー」みたいに自由に修整出来る独自タグ(?)があるものと考えていました(汗)

Ads By Google

コメント(6)

#1.  imq
2008-11-10 20:03:29

あ、かぶっちゃった^^

#2.  imq
2008-11-10 20:31:58

しかも回答2ではcenterとleftを間違えたので、書き直しました。

#3.  HS
2008-11-10 21:32:42

ponue様。。imq様。。御教授有難う御座いました m(_ _)m

しかし、、お二方とも博学ですね~^^
オイラも もっと勉強しなければ(大汗)

2008-11-11 06:04:40

流石阿闍梨(´∀`*)


HSさんの向上心を見習いたい万年床生活者でした(-ω-)(_ _)モニュ

#5.  imq
2008-11-11 09:57:36

あ、いえ、、
普段ここ以外では使わない知識なので、少しは役立ててもらってよかったです^^ゞ


あと、基本的にはponueさんの方法でもできます。
formタグへのCSSが残っているとそちらが優先されるので、効かなかったのかもしれないですね。

#6.  HS
2008-11-11 15:11:29

万年床生活者さんコメント有難う御座います

向上心ですか~?
チョッと足りないかも ^_^;;


imqさん御教授有難う御座いました

おお~・・ponueさんの書かれた方法で出来る筈! と自分も考えていたのですが、、
そんな原因があったんですね~^^;

やはり私のやり方が拙かったか..

トラックバック(2)

トラックバックURL:

★長澤まさみ乳首見えちゃった!! 【動画】

★長澤まさみ乳首見えちゃった!! 【動画】

★長澤まさみ乳首見えちゃった!! 【動画】 at 2009年06月27日 18:17:37