サポート » テーマ » テーマ Raindrops ヘッダーまわりとサイドバーについて

  • いつもお世話になっています。かわねこと申します。
    2つの質問をさせて下さい。

    1)ヘッダー右に表示できる概要文が私の場合長いせいか、スマホ表示になると改行された下のほうが切れてしまいます。
    非表示にすると空白が寂しく感じ、ヘッダーをカスタマイズしようと考えましたが苦戦しています。

    Raindropsを利用させていただいているサイトはコンテンツの種類が増えていく可能性が高く
    ヘッダー周りに細かく多くの情報を置きたいと思っています。
    できればヘッダー上部にトップバーを一本引きSNSアイコンや別のメニューを置くなどしてメディアサイトの様相にしたいのですが、下記のようなレイアウトするにはどのような手順を踏めばよいでしょうか。

    ColorMag

    EasyMag

    2つは似たような見え方でも手法が違うので困惑中です。

    2)前述したようにHOMEに置きたいコンテンツの量が多いため3カラムにしていますが、POSTやPAGEに遷移するとくどくなる為、HOME以外は2カラムにしたいと思っております。
    しかしエキストラサイドバーを残せないため、(元が3カラムなので)細いレイアウトの方のメインサイドバーということになるのですが、個々のページでも表示ておきたい情報を移動させるなど管理が煩雑となったり表示が無理だったりと残念なのです。
    容易に右サイドバーを残せる方法はあるのでしょうか?

    質問が複数になり恐縮ですが、どうぞよろしくお願いいたします。

11件の返信を表示中 - 1 - 11件目 (全11件中)
  • 管理者様

    返信の修正を行ったところ、投稿が消えました。長文なので、可能であれば復旧していただきたくお願いします。

    こんにちは!
    私のところに投稿頂いた内容がメールできていました。
    できる限りで復旧させてみます。
    以下———————————————————

    nobita さんの投稿:

    こんにちは

    1)ヘッダー右に表示できる概要文が私の場合長いせいか、スマホ表示になると改行された下のほうが切れてしまいます。
    非表示にすると空白が寂しく感じ、ヘッダーをカスタマイズしようと考えましたが苦戦しています。

    ご質問内容から察すると、現在の設定では、ヘッダー画像上部に、サイトタサイトル 右にスローガン(タグライン)が表示される設定ですね。
    このブロックは、サイトタイトルが75%の幅、スローガンが残りの幅を使用しているため、ブラウザの幅によっては、スローガンの文字が切れます。
    全文を表示したい場合は、スタイルを調整する必要がありますので、サイトタイトルとスローガンに入る文字列を教えてください。

    ヘッダー上部にトップバーを一本引きSNSアイコンや別のメニューを置くなどしてメディアサイトの様相にしたいのですが、下記のようなレイアウトするにはどのような手順を踏めばよいでしょうか。

    このテーマは、いろいろな部分に簡単にコンテンツを挿入出来るようになっています。頻繁に使われる挿入ポイントは、テンプレートを追加するだけで可能ですし、functions.phpにフィルターを書けば、グリッドレイアウトの中に、コンテンツの差し込みを行う事もできます。

    ページにコンテンツを追加したい場合は、まず、カスタマイズ/高度な設定/開発者設定を「はい」に設定してください。

    プリビューの各部分に、

    アクションフック add_action( ‘raindrops_prepend_doc’, ‘your_function’ ) あるいは hook-prepend-doc.php テンプレートを追加していただく事で、この場所にコンテンツを追加できます。

    等という表示が行われるので、「ヘッダー上部にトップバー」でしたら、テーマ(子テーマ、親テーマ)ホルダー内に、hook-prepend-doc.phpというファイルを作成して、そのファイルにhtmlを記述すれば、その部分に表示することが出来ます

    前述したようにHOMEに置きたいコンテンツの量が多いため3カラムにしていますが、POSTやPAGEに遷移するとくどくなる為、HOME以外は2カラムにしたいと思っております。

    カスタマイザーの、外観/レイアウトとサイドバーを表示してください。

    個別投稿、アーカイブや検索結果などそれぞれのサイドバーを個別に指定する方法があります。

    サイドバー設定の選択を詳細を選択すると、数秒後に詳細メニューが表示されますので ここで、目的のページのカラム数を指定します。

    2カラムの場合は、デフォルトサイドバーウィジェットとメインコンテンツの組み合わせになります。

    サイドバーの位置は、サイドバーの幅と位置で位置と幅を指定できます。(左右各三種)

    ややっこしいですが、これ以外に サイドバーの折り畳み機能というのがあります。

    「デフォルトサイドバーのレスポンシブ設定」「エキストラサイドバーのレスポンシブ設定」を「はい」
    に設定すると、それぞれに、「サイドバーのブレークポイント」という項目が表示されます。

    この項目に960とか数字を入力すると、そのサイドバーは、ブラウザサイズが960px以下になると、サイドバーが折りたたまれて、プライマリーメニューの脇に、ハンバーガーボタンが表示されるようになります。

    レスポンシブのブレークポイントを自由に変更できる便利な機能なので、一度お試しいただくといいと思います。(デフォルトでは、エキストラサイドバーだけが有効になっています)

    それと、個別投稿やページでも、その投稿だけは「1カラム」といった指定が出来ます。

    [raindrops color_type="minimal" col="1″]
    といった記法です(ショードコードではありません)
    詳細は、
    http://www.tenman.info/wp3/raindrops/2016/08/31/html-element-and-wordpress-tag/

    nobitaさま、いつも丁寧にお答えくださってありがとうございます。
    まだ内容をよく読んでいませんので、またあとでお返事させて頂きます。
    取り急ぎお礼申し上げます。

    ありがとうございます!
    [raindrops …]の部分が、テキスチャライズされていて、そのままでは動かないので、リンク先の方を参照してください。

    • この返信は4 ヶ月、 3 週間前に  nobita さんが編集しました。

    おはようございます。
    nobitaさま、改めてお答え頂きありがとうございます。

    質問の順番が入れ替わりますが、2)の方を先にお願い致します。
    ブレ-クポイントの指定など詳細に設定できるのでとても便利に使わせていただいています。

    今回の希望は、デスクトップでの表示設定です。
    HOMEで3カラム、以外のページで2カラムの場合、
    「メインコンテンツ+右サイドバー(エキストラサイドバー)」という配列・組み合わせができればベストなのですが、それが既存の設定から可能でしょうか?

    お答え頂いた中にあるURLのトップ(時々拝見させていただいています)のようなレイアウトです。
    (Raindropsベースだと思いますが、エキストラサイドバーなのでしょうか?)
    http://www.tenman.info/wp3/raindrops

    *ここでのハンバーガーメニューですが、私の場合、現れるとき(ブレークポイントを過ぎたときだと思いますが、おおよそ横の表示にしているとき)はフッターの中央に立て並びに間が空いて表示されます。(
    3カラムの場合)
    それは仕様でしょうか、私の設定に依る表示でしょうか。

    *1)の件は私にはハードルが高いので少しお時間ください。タイトルはロゴにしています。概要文は変わる可能性がありますが、現在37文字で変わってもそのくらいです。

    どうぞ宜しくお願いします。

    「メインコンテンツ+右サイドバー(エキストラサイドバー)」という配列・組み合わせができればベストなのですが、それが既存の設定から可能でしょうか?

    既存の設定では、メインコンテンツ+右サイドバー(デフォルトサイドバー)しかできません。
    (技術的には、不可能ではありませんが Raindropsのカスタマイザーでの設定可能な範囲全域での正常な動作という意味では、出来ませんといったほうがいい という意味です。ある特定条件下だけでカスタマイズすると、カスタム内容がレイアウトなので、後々設定を変更したいという場合に、サイトが破たんする可能性が高い)

    http://www.tenman.info/wp3/raindrops

    は、メインコンテンツ+右サイドバー(デフォルトサイドバー)の組み合わせで表示してます。

    *ここでのハンバーガーメニューですが、私の場合、現れるとき(ブレークポイントを過ぎたときだと思いますが、おおよそ横の表示にしているとき)はフッターの中央に立て並びに間が空いて表示されます。(
    3カラムの場合)
    それは仕様でしょうか、私の設定に依る表示でしょうか。

    ヘッダー画像下のプライマリーメニューに表示されるようにしてありますので、おかしな挙動です。

    ハンバーガーメニューの位置の説明
    サイドバーが左にセットされている場合は、メニューの左側サイドバーが右にセットされている場合は、メニューの右側に表示されます。

    それ以外の場所に表示される場合は、スタイルの干渉か、テーマのバグかもしれません。

    まずは、ご利用になっているプラグインを停止していただき、正常な位置に表示されるかどうか確認していただけますようお願いします。

    nobitaさま、お世話になります。

    サイドバーの件、承知しました。
    レイアウトの理想というか希望であって機能の問題ではないため、前に行っていた「デフォルトサイドバーの内容をHOME以外で非表示」で当面の間対応してみます。
    表示されるべきデフォルトサイドバーの領域は空白で残る?という力技で、理想的ではなく応急処置ということは分っていております(^_^;)

    ハンバーガーメニューですが、プラグイン停止をしてみたり、to TOP で施したものをコメントアウトしたりしましたが変わりませんでした。
    スマホ横・パッド時の表示で起こるのでブレークポイントとのせめぎあいかと思い、ナビのフォントサイズを小さめに変更してみましたら、お示し頂いた画像位置に表示されました。
    メニュー項目が多いのも関係あるかと思うので(現在6つ)すが、各項目1文字ですので、領域や子項目も関係出てくるかもしれません。
    設定がスライダーなので、具体的なサイズが数字ではお伝えしきれないので申し訳ありません。

    そういったことから、
    外観>メニュー>自動レスポンシブ表示
    の設定を「no」に変えたところ、改行してしまいますがナビバーにハンバーガーが現れるようになりました。

    しかし、スクロールしていくとフッターにも先程書いたように縦並びで現れています。
    思案したところ、その現れるフッターの場所に振られているウィジェットが「カスタムメニュー(WPに用意されているウィジェット)」だったのでそれを除いてみると、フッターに出ていたほうのハンバーガーメニューは消えました。

    Raindropsは1つのカスタムメニュー(プライマリーメニュー)に対応していますが、私は3つのカスタムメニューを作成しています。
    もしかしたらそれが影響したのでしょうか。

    ご指摘ありがとうございます。

    なるほど、テーマの問題ですね。

    どうするか、考えてみます。ちょっと時間をください。

    Raindrops1.481まもなくライブになると思いますので、アップデートをお願いします。

    スクロールしていくとフッターにも先程書いたように縦並びで現れています。

    ハンバーガーメニューは、プライマリーメニューだけで表示するように変更しました。

    グリッドレイアウト時に、ブラウザ幅が640px以下の場合青のポップアップボタンが正常に機能しない問題の修正

    翻訳文字列の修正を行いましたのでご確認ください。

    メニュー項目が多いのも関係あるかと思うので(現在6つ)すが、各項目1文字ですので、領域や子項目も関係出てくるかもしれません。

    調整しずらい部分があると思いますが、文字のサイズの設定や、リンクの幅の調整でしのいでいただけるとうれしいです。

    nobitaさま、早々のご対応ありがとうございます。

    ご指摘ありがとうございます。

    滅相もございません。指南などできるはずもなく、
    プラグイン過剰かコードのミス等またなにかやらかしたかと思いました(^_^;)

    調整しずらい部分があると思いますが、文字のサイズの設定や、リンクの幅の調整でしのいでいただけるとうれしいです。

    表示サイズをレスポンシブテンプレートに頼っているので調整しづらいなんて思いませんし充分です。
    それに日本語の表記が美しく、これほど多機能な公式テーマはそう見かけません。
    大事になさっていることも伝わります。

    アップデートを楽しみにしていますので
    引き続きよろしくお願いします。

    おはようございます、かわねこです。

    nobitaさま、お世話になります。
    アップデートお疲れさまです。
    先週さっそく適用させていただきました。

    スマホ・タブレット等の表示での
    ・ヘッダー内の概要文表示
    ・サイドバーのハンバーガメニューのプライマリーメニューだけへの表示
    ともに、表示が修正されています。ありがとうございました。

    このスレでの質問の 1)に関しての本題にメドが立ちましたら当該サイトを開ける予定ですが、
    仕事が少し詰まっており、このサイトを少し離れております。
    解決済に出来ないままでご迷惑をおかけしますが、しばらくご猶予くださるようお願い致します。m(_ _)m

11件の返信を表示中 - 1 - 11件目 (全11件中)
  • このトピックに返信するにはログインが必要です。