Re: 検索ブロックの文字と検索窓の縦並びを 横並びにしたい。

2014年4月7日 at 20:17

ざっとみたところ、h3要素とinput要素ですよね。
concrete5の問題というよりも、HTMLやCSSの問題だと思うので、
適切なマークアップとスタイルがあれば出来ると思いますよ。

h3要素がブロック要素なので、そのままでは改段落しますよね。
なので、CSSで回避するとしたらdisplayプロパティでインライン要素にするなどでしょうか。

Re: 検索ブロックの文字と検索窓の縦並びを 横並びにしたい。

2014年4月7日 at 20:53
CSSでの対応方法は、隊長のアドバイス通り、display: inline; でいいと思います。

適用方法:
1. 編集モードで変更したい検索ブロックのメニューを開き、「デザイン」を選択
2. 「CSS」タブの「CSSクラス名」に「inline-search-form」と入れで保存しましょう(クラス名は何でもいいです)
3. ページの「設定」ウィンドウを開き、「カスタム属性」タブから「追加ヘッダー要素」を選択。中に下記のCSSを記述して保存しましょう。


<style type="text/css">
.inline-search-form h3 { display: inline; }
&lt/style>


サイト全体に適用したい場合は、テーマのCSSを変更した方がいいですね。とりいそぎ wink
 

Re: 検索ブロックの文字と検索窓の縦並びを 横並びにしたい。

2014年4月8日 at 15:11
隊長さんhissyさんありがとうございます。

早速試してみましたが、どうも、うまくいきません。
1. 編集モードで変更したい検索ブロックのメニューを開き、「デザイン」を選択
2. 「CSS」タブの「CSSクラス名」に「inline-search-form」と入れで保存
(その他の項目・・CSS ID:  や 追加CSS:  は空白のまま)
3. ページの「設定」ウィンドウを開き、「カスタム属性」タブから「追加ヘッダー要素」を選択。中に上記のCSSを記述して保存

追加ヘッダー要素に記入して、「この編集を公開」ボタンを押したところで、そのページだけ、画面がエラー表示も何も無い真っ白になってしまいます。
真っ白で何も出来ないので、トップページに戻って、管理画面から、「追加ヘッダー要素」から、先ほどのタグを削除したら、元にもどりました。

同じ事を3回トライして、同じ結果です。

「追加ヘッダー要素」ではなく、main.css に記述しても同じく真っ白で同じ結果です。

なにか、いけない事をしたのでしょうか?
 

Re: 検索ブロックの文字と検索窓の縦並びを 横並びにしたい。

2014年4月8日 at 23:23
仮でページを作って、検索ブロックを表示して、追加ヘッダー要素を設定し、見せていただくことは可能ですか?
 

Re: 検索ブロックの文字と検索窓の縦並びを 横並びにしたい。

2014年4月11日 at 5:22
hissyさん、返信ありがとうございます。

◆今回のテストは 下記の http://www.hattoriwood.jp/ を丸ごとコピーしたサイトで検証しています。

丸コピサイトで、下記のページに真っ白になった状態を再現しました。

http://0304.coredayo.net/others/search/

該当ページの管理画面の 追加ヘッダー要素 の画像も載せておきます。


◆このサイトでは失敗しましたが、同じく、concrete5 - 5.6.1.2 から concrete5 - 5.6.2.1 にアップグレードした、製作途中の下記のサイトでは、御指導のとおりの内容で 横並びに成功しています。

http://marianz.com/search/


◆サイトの規模が全然違うのですが、両方とも、プレーンヨーグルトを改変していて、スタイルシート以外は、ほぼ、同じような作りになっています。

ソースを見ましたが、良く判りませんでした。 宜しくお願いします。
添付: 20140411.jpg
 

Re: 検索ブロックの文字と検索窓の縦並びを 横並びにしたい。

2014年4月11日 at 7:08
ソースを見ると、下記のようになっていました。styleタグの閉じタグがうまく閉じられていません。

<style type="text/css">
.inline-search-form h3 { display: inline; } &lt/style>


このフォーラムからコピペしたのが良くなかったのかもしれません。同じ内容をヘッダー要素にタイプして入力することで正しく表示できると思います。
 

Re: Re: 検索ブロックの文字と検索窓の縦並びを 横並びにしたい。

2014年4月11日 at 14:12
hissyさん、いつもありがとうございます。

御指導のとおりでした、上手くできました。
http://0304.coredayo.net/others/search/

ところで、サイト全体に反映させようとして、テーマの main.css  入れても反応しないので、
header.php に入れたら上手くできました。これでよいでしょうか?

それと、240ページあるのですが、検索ブロックのメニューを開き、「デザイン」の追加を、一ページずつしないといけないんですよね?

ほとんどの検索窓がスタックの検索窓から作られているので、文字と同様に、インスタンスされていると思い、スタックの検索ブロックのメニューからデザインを変更してみましたが、他のページは、反応はしませんでした。

240ページをなるべく早く変更できる方法がありましたら、ヒントを下さい。
 

Re: 検索ブロックの文字と検索窓の縦並びを 横並びにしたい。

2014年4月11日 at 15:06
サイト全体にCSSを追加するには、管理画面の「テーマ」のページで「カスタマイズ」ボタンをクリックして表示される画面で、「CSSを追加」の欄に記載するのが便利です。ただし、テーマがカスタマイズに対応していることが条件なので、お使いのテーマに「CSSを追加」欄がない場合もあります。CSSはキャッシュされているので、キャッシュのクリアが必要です。管理画面から「キャッシュのクリア」を実行してみてください。