【サイドバーの位置変更について】 トップページでは左、それ以外では右に配置したい

Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › 【サイドバーの位置変更について】 トップページでは左、それ以外では右に配置したい

  • このトピックには5件の返信、2人の参加者があり、最後にHidekichiにより10年、 11ヶ月前に更新されました。
5件の返信スレッドを表示中
  • 投稿者
    投稿
    • #33680
      net
      ゲスト

      お世話になります。
      自分で調べ弄ってみたところ反応が無かったため質問させていただきます。

      私のブログでは現在、右に#sidebar、左に#mainがある状態で、
      サイドバーをトップページでは左、それ以外のページでは右に配置したいと思っています。
      Simplicityでは「外観≫カスタマイズ≫レイアウト(全体・リスト)≫サイドバーを左側に表示」にて
      サイドバーを左に配置変更できるかと思います。
      ですが、これでは全ページに変更が適応されてしまいます。

      これを改善する方法は無いでしょうか。

      私が現在把握している部分は、
      1.style.cssの#mainと#sidebarのfloatを変更することで配置を変えることができる。
      2.if条件分岐をheader.phpに記述してみても変化なし(body前)。
      3.Add to hederウィジェットを使うことで、記事に個別で

      <style type="text/css"> 
      #main { 
      float: right; 
      } 
      #sidebar { 
      float: left; 
      } 
      </style>

      を記述し、変更することができることを確認できましたが、1記事毎に設定するのは少々つらいです。

      お力添えいただける方は、何卒宜しくお願い致します。

      • このトピックは10年、 11ヶ月前にアバター画像わいひらが編集しました。理由: コードの文字化けを修正
    • #33681
      net
      ゲスト

      誤字がありました・・・。
      Add to header → Add to head
      <style type="text/css"> → <style type=”text/css”>
      </style> → </style>

      申し訳ございません。

    • #33690
      Hidekichi
      ゲスト

      CSSで可能かとは思いますが、色々と他の部位にも影響されるかと思いますのでjQueryでトップページ以外はサイドバーのクラスを付け替えるってのはどうでしょうか?

      サイトアドレスがxxxx.com/の時、もし、xxxx.com/以外の時は通常
      それ以外はサイドバーを左

      var siteAddress = “http://xxxx.com&#8221;;
      if (location.href == siteAddress) {
      $(“#sidebar”).css({
      float: left;
      });
      } else {
      $(“#sidebar”).css({
      float: right;
      });
      }

      意味合い的にはこんな感じです。
      これに伴い、

      #sidebar {
        float: none;
      }

      としても良いかも知れません。しなくても、#sidebarのタグにインラインでjQueryがスタイルを書くのでfloatを打ち消す必要もないかも知れません。実際に試してないので何とも言えない部分がありますが、上記のようにcssを書き換えると言う方法と、もうひとつclassを書き換えるという方法があります。

      classを書き換えるあるいは追加するという場合は、#sidebarよりfloat部分を除去し、条件によって、例えば仮の名称ですが.sidebar-right、.sidebar-leftと言うようなfloatの記述を書いたclassを追加します。
      書き換えるのが面倒なので、.toggleClassを使うのが良いでしょうか。

      var siteAddress = “http://xxxx.com&#8221;;
      if (location.href !== siteAddress) {
      $(“#sidebar”).toggleClass(“f-right”);
      }

      例えば上記の場合、siteAddressが現在のアドレス欄のアドレスと違う時、つまりはトップページではない時なので、

      #sidebar {
        float: left;
      }
      
      #sidebar.f-right {
        float: right;
      }

      こんな感じのcssが必要になるかと思います。正しく動くかどうかは試してないのでわかりません。時間がある時に一度試してみたいと思いますが、想像では正しく動くんじゃないかなぁと思います。

    • #33696
      アバター画像わいひら
      キーマスター

      css-custom.phpの以下の部分に、トップページのみに有効な条件分岐を追加するというのではどうでしょうか?

      <?php //サイドバー左
      if ( is_sidebar_left() ): ?>
      #main{
        float:right;
      }
      
      #sidebar{
        float:left;
      }
    • #33698
      net
      ゲスト

      >Hidekichi 様
      ご回答いただきありがとうございます!

      ご提案頂いた対応を試してみましたが反映されませんでした。。。
      単純に設置場所がわかりませんでした。Simplicityの子テーマにある
      「header.php」「javascript.js」「footer.php」など、
      手当たり次第に記述してみましたが反応がありません。

      せっかくの良き回答をいただけたにも関わらず、私が初心者故に対応しきれず申し訳ございません;;

      >わいひら 様
      ご回答いただきありがとうございます!
      css-custom.phpにif( is_home())での条件分岐を追加し、
      「外観≫カスタマイズ≫レイアウト(全体・リスト)≫サイドバーを左側に表示」にしたところ
      変更が反映されました。

      お二人とも、お忙し中、お力添えいただき誠にありがとうございました。

    • #33702
      Hidekichi
      ゲスト

      あ、解決したみたいですが、一応設定の仕方としては、

      サンプル1: jQueryのcssでサイドバーの位置を変更する | codepen

      サンプル2: おそらくもっと高速に動作するサンプル | codepen

      こんな感じです。

      サンプル1では、jQueryのcssでサイドバー及びメインのfloatを変えています。
      サンプル2では、#bodyにクラスを付与することで、cssを分岐させています。つまり、cssを2種類用意しておいて、条件によって使い分けるということです。
      cssを切り替えるのが、#bodyに.topPgと言うクラスを付けるか外すかだけなので、jQuery自体の処理も少なくなり(軽くなり)、かつcssはfloatにて左右を切り替えているだけで更に予め読み込んであるので高速に動作するかと思います。

      .topPgはトップページですと言うclassです。これ自体は何もスタイルを持ちません。いわゆる識別用のclassになります。これが#bodyに付与されると、その子孫要素の#sidebarと#mainは設定した内容に、付与されない場合は、通常の設定になります。

      jQueryでは、
      if (location.href === siteAddress) {

      とあるように、現在のブラウザのアドレス欄に表示されているアドレスがvar siteAddressに設定されているアドレスであれば.topPgを付与します。それ以外は.toggleClassで設定しているので.topPgは外れます。

      codepenのcss欄はscssで書いてありますので、view compiledボタンからcssに変換したものを子テーマstyle.cssに適用します。scssのままだとスタイルが反映されません。

      つまり、

      /*
      デフォルトをサイドバー左、メイン右にしておく
      */
      #body.topPg #sidebar {
        float: left;
      }
      #body.topPg #main {
        float: right;
      }
      
      #body #sidebar {
        float: right;
      }
      #body #main {
        float: left;
      }

      こういうことです。何かの参考までに。

5件の返信スレッドを表示中
  • フォーラム「テーマファイルのカスタマイズに関する質問など」には新規投稿および返信を追加できません。
スポンサーリンク
アドセンス(大)
アドセンス(大)