特定のカテゴリーのみ1カラム表示を、子テーマの編集で行いたいのですが

Simplicityの特徴 フォーラム Simplicityについての質問 特定のカテゴリーのみ1カラム表示を、子テーマの編集で行いたいのですが

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

      こんばんは、いつもお世話になっています。

      タイトルのとおり、「特定のカテゴリーのみ1カラム表示を、子テーマの編集で行いたい」のですが、

      Simplicityの固定ページのみを1カラムにする方法
      https://wp-simplicity.com/1column-only-page-template/

      などを発見しました。
      page.phpに記述を加えるものであるので、テーマをアップデートする度に書き直しがいるのは手間だなと思っています。
      子テーマに書き込む形では、特定のカテゴリーのみ1カラムを実現できませんか?

    • #44590
      hidekichi
      ゲスト

      カテゴリは、.post-metaにあるので、そこをjQueryで見てbodyタグに何かしらの識別クラスを入れれば、中身は好きにスタイルできます。

      サンプル: カテゴリで判別してbodyにクラス追加 | codepen

      同様に、phpでカテゴリを調べて、bodyタグにタグを入れることで同じようにスタイルできます。

      <body
      <?php
        if ( in_category( 'CATEGORY_ID' ) ) {
          body_class('class-name');
        }
      ?>
      >

      こんな感じで追加できるそうです。仮に、bodyタグに.testを追加すると、

      .test #sidebar {
        width: 100%;
      }

      とすると、.testのある時だけ#sidebarの幅が100%になると言うことです。

    • #44598
      Mori
      ゲスト

      >hidekichiさん

      ありがとうございます。遅くなりましたが、ちょこちょこと試してみたんですが、
      子テーマには以下のようなファイルがありますが、どちらに記入したら良いでしょうか?
      それとも、本体からbody関連のファイルを子テーマにアップロードしていじる形になるのでしょうか?

      before-main.php
      footer-insert.php
      functions.php
      header-insert.php
      next.php
      style.css
      editor-style.css
      mobile.css
      responsive.css

      適当にこんなコードを使ってみましたが、style.cssに書き込んでも全く反応ないので、試行錯誤もできていない状況です

      .test{
        #sidebar{display:none;}
        #main{width:1010px;}
        .ad-right{float:left;}
      }
      <body
      <?php
        if ( in_category( '3' ) ) {
          body_class('test');
        }
      ?>
      >
    • #44601
      わいひらわいひら
      キーマスター

      hidekichiさんの方法を行うなら、親テーマからheader.phpを引っ張ってくる必要があります。

    • #44604
      hidekichi
      ゲスト

      header.phpに書くのもあれなので、

      add_filter( 'body_class', 'body_add_cat_class'); 
      function body_add_cat_class( $classes ) { 
      	if ( is_single() && in_category("未分類") ) {
      		$classes[] = 'notYet'; 
      		return $classes;
      	}
      }

      こんなのを子テーマfunctions.phpに書けばよいのではないですかね?

      カテゴリが未分類の場合、.notYetをBODYタグに追加します。

      参考: in_category()

      cssの部分は、それではダメです。サンプルではscssでかいてあるので、cssの欄の下向き三角からview compiledを選んでcssにしたものを適用します。適用しなくても、普通にcssを書けばよいだけです(笑)

      例えば、

      .test {
        .hoge {
          font-size: 18px;
          
          .fuga {
            color: #333;
          }
        }
      
        &::after {
          content: "123";
        }
      }

      こういうのがあったとしたら、これは、

      .test .hoge {
        font-size: 18px;
      }
      .test .fuga {
        color: #333;
      }
      .test::after {
        content: "123";
      }

      こんな感じに出力されます。scssでサンプルを書いてるのは、単純にこういった.testを何度も書くのが面倒くさいのと、必要であればベンダープレフィックスを自動でつけてくれるからです。cssは読みにくいですから、修正も大変ですしね。

    • #44605
      hidekichi
      ゲスト

      あ、間違えてた(笑)

      .test .hoge {
        font-size: 18px;
      }
      .test .hoge .fuga {
        color: #333;
      }
      .test::after {
        content: "123";
      }

      こうでした(笑)

    • #44607
      わいひらわいひら
      キーマスター

      カテゴリIDで指定するならfunctions.phpに以下を

      //カテゴリIDクラスをbodyクラスに含める
      function add_category_id_classes_to_body_classes($classes) {
        global $post;
        foreach((get_the_category($post->ID)) as $category)
          $classes[] = 'categoryid-'.$category->cat_ID;
        return $classes;
      }
      add_filter('body_class', 'add_category_id_classes_to_body_classes');

      カテゴリスラッグで指定するなら以下を記入すればカテゴリごとにスタイルを指定することができます。

      //カテゴリスラッグクラスをbodyクラスに含める
      function add_category_slug_classes_to_body_classes($classes) {
        global $post;
        foreach((get_the_category($post->ID)) as $category)
           $classes[] = $category->category_nicename;
        return $classes;
      }
      add_filter('body_class', 'add_category_slug_classes_to_body_classes');

      スラッグが日本語なら、日本語のclassが入ってしまいますが、プラスは、日本語でも指定出来るのでまあいいかと。

    • #44609
      Mori
      ゲスト

      ありがとうございます。まずはとりかかってみます

    • #44610
      hidekichi
      ゲスト

      jQueryのサンプルの方を複数カテゴリがある場合にも対応させました。

      .post-meta内のカテゴリが複数ある時に、いずれかにマッチしたのみ1カラムにします。
      カテゴリのチェックも複数対応できますので、カテゴリごとでチェックできます。

      #body-inにtransitionを入れたので、チラツキの若干の軽減にもなっています。

      javascript内のvar checkCategory= [配列]でカテゴリを指定できます。

      var checkCategory = ["カテゴリ名","他のカテゴリ名"];

      と言う形でカテゴリを複数指定できます。サンプルでは、test10は.post-metaの中にありませんが、.test5があるので1カラムになると言う寸法です。

    • #44611
      hidekichi
      ゲスト

      ☓ いずれかにマッチしたのみ1カラムにします。
      ○ いずれかにマッチした時のみ1カラムにします。

      サンプル: カテゴリで判別してbodyにクラス追加 | codepen(前レス#44590と同じ)

    • #44612
      わいひらわいひら
      キーマスター

      #44607
      補足:
      スラッグが日本語の場合は、エスケープされて組み込まれる模様です。エスケープされた文字列は、%を利用するので、CSSセレクタとしては利用できないっぽい。
      なので、スラッグ版を利用する場合は、半角英数字と-_のみのスラッグを設定しておく必要はあるかも。

    • #44622
      Mori
      ゲスト

      hidekichiさん、わいひらさん

      ご親切にありがとうございます。
      いろいろと試行錯誤をしてみましたが、エラーの連続で結局、うまくいっていません。。。

      function.phpに「カテゴリーIDが3ならば、1カラムで表示」ということを書き込めばいいのかなという安易な考えなんですが、いただいたコードが理解できずです。

      //カテゴリIDクラスをbodyクラスに含める
      function add_category_id_classes_to_body_classes($classes) {
        global $post;
        foreach((get_the_category($post->ID)) as $category)
          $classes[] = 'categoryid-'.$category->cat_ID;
        return $classes;
      }
      add_filter('body_class', 'add_category_id_classes_to_body_classes');

      body_classの部分に、style.cssの1カラム表示のコードのクラス名を入れて、$categoryには数字の3の入れて、という感じで勝手に解釈をしているんですが。
      ここでつまずいています。

      あとは、1カラムのためのコードも何をどうなのかはさっぱりですが、function.phpに書き込む文章の意味がわかないので足踏みなのかなと

    • #44623
      Mori
      ゲスト

      ちなみに、スタイルシートには、以下のように1カラムコードを書き込んではいます。

      .one-column {
      	
      	#body-in {
      		width: 80%;
      	}
      	
      	#main {
      		width: 100%;
      		max-width: 1070px;
      		margin: 0 auto;
      		float: none;
      	}
      	
      	#sidebar {
      		width: 100%;
      	}
      }
    • #44624
      hidekichi
      ゲスト

      https://wp-simplicity.com/suport/topic/%e7%89%b9%e5%ae%9a%e3%81%ae%e3%82%ab%e3%83%86%e3%82%b4%e3%83%aa%e3%83%bc%e3%81%ae%e3%81%bf1%e3%82%ab%e3%83%a9%e3%83%a0%e8%a1%a8%e7%a4%ba%e3%82%92%e3%80%81%e5%ad%90%e3%83%86%e3%83%bc%e3%83%9e%e3%81%ae/#post-44604をもう一度読み直してみてください。

      それはcssではなくscssです。
      ブラウザはscssを読み込めません。

      https://wp-simplicity.com/suport/topic/%e7%89%b9%e5%ae%9a%e3%81%ae%e3%82%ab%e3%83%86%e3%82%b4%e3%83%aa%e3%83%bc%e3%81%ae%e3%81%bf1%e3%82%ab%e3%83%a9%e3%83%a0%e8%a1%a8%e7%a4%ba%e3%82%92%e3%80%81%e5%ad%90%e3%83%86%e3%83%bc%e3%83%9e%e3%81%ae/#post-44622のわいひらさんのスクリプトは、現在見てるページのカテゴリを全部取得して、それを

      <body class="categoryid-1 categoryid-2 categoryid-3">

      と言うようなクラスを出力するものです。なので、css側で「カテゴリーIDが3ならば、1カラムで表示」としたい場合は、

      .categoryid-3 任意のセレクタ {
        width: 80%;
      }

      と言うふうにスタイルできますよと言うスクリプトです。
      一方、https://wp-simplicity.com/suport/topic/%e7%89%b9%e5%ae%9a%e3%81%ae%e3%82%ab%e3%83%86%e3%82%b4%e3%83%aa%e3%83%bc%e3%81%ae%e3%81%bf1%e3%82%ab%e3%83%a9%e3%83%a0%e8%a1%a8%e7%a4%ba%e3%82%92%e3%80%81%e5%ad%90%e3%83%86%e3%83%bc%e3%83%9e%e3%81%ae/#post-44604の僕のは、投稿ページのカテゴリが「カテゴリーIDが3」ならば、in_category(3)で、$classes[] = '任意のセレクタ';としてbodyタグに書き出せますと言うことです。in_categoryはIDでもスラッグでも指定することができます。

      この任意のセレクタが仮に.testだとしたら、

      .test 任意のセレクタ {
        width: 80%;
      }

      と言うふうにスタイルできると言うことです。いずれにしても、必要なのは、「どのカテゴリの時に1カラムにするか」と言うことと、「そのカテゴリの時にどういうクラスをBODYタグに入れるか」そして「そのクラスの時にどのように1カラムのスタイルにするか」と言うことがポイントです。
      なので、cssをスタイルする前にデベロッパーツールを開いてBODYタグを見てみてください。注意として、#bodyというのもSimplicityにはあります。これではなくて、bodyタグの方です。

      ☓ <div id="body">
      ○ <body>

      bodyタグは全ての要素の親になります(その上にhtmlタグもありますが)、このbodyについているクラスを指定してその子要素(任意のセレクタ)を指定すれば、その中身(子要素)は、bodyタグにそのクラスがある時だけのスタイルができると言うことです。

    • #44626
      hidekichi
      ゲスト

      おや?リンクのテキストを修正したはずだけども(笑)
      長ったらしいリンクが入ってますが、全部このトピックの各記事へのリンクです。

    • #44638
      Mori
      ゲスト

      hidekichiさん

      粘り強くありがとうございます。心強いです。

      style.cssに

      .categoryid-3 #main {
        width: 100%;
      }

      function.phpに

      function add_category_id_classes_to_body_classes($classes) {
        global $post;
        foreach((get_the_category($post->ID)) as $category)
          $classes[] = 'categoryid-'.$category->cat_ID;
        return $classes;
      }
      add_filter('body_class', 'add_category_id_classes_to_body_classes');

      という形にしたところ、できました!!
      functionの書き込みがあることで、あとはスタイルシートのところで色々と設定ができるということですね。
      ありがとうございました。

      ただ、現状としては
      ・サイドバーの追従ウィジェットが途中から出現して追いかけてくる
      ・サイドバーが下にスクロールしても表示されない

      という事態になっています。
      あれこれとstyle.cssをいじるもののうまくいっていません(いじりすぎると1カラムも2カラムに戻ったり、設定が反映されないなど不具合が起こります。)

    • #44641
      hidekichi
      ゲスト

      > サイドバーの追従ウィジェットが途中から出現して追いかけてくる

      これは例えばタブレット表示では非表示になってるので、1カラムのときも非表示にしておけばよいのではないですかね?
      親テーマのスクリプトをいじれば1カラムの時は動作させないと言うこともできますが、親テーマをいじったらせっかくいじらなくて済んだのに本末転倒なので。

    • #44642
      hidekichi
      ゲスト

      > サイドバーが下にスクロールしても表示されない

      重要なのは、#body-inです。メインの幅は100%でよいです。それの親に当たる#body-inで幅を決めたほうが良いのではないかと。

      またメインもサイドバーもfloatしていますので、これらも解除したほうが良いでしょうね。サンプルをみてもらえればわかるようにひとまず、メイン、サイドバーのいずれかが解除されていればまぁ問題なかろうかと。両方解除したほうが良いとは思いますけれども。

      更に、見ている画面がスマホ等の場合、単純に非表示されているだけかもしれません。ここらはセレクタをデベロッパーツールで確認しながらスタイルしていくしかないかと思います。

      もうひとつ原因があるとすれば、floatというのは高さを持ちません。そのためメインにサイドバーが重なっている可能性もあります。このあたりを調べて見る必要があるかもしれませんね。

    • #44643
      hidekichi
      ゲスト

      例えば現状のスタイルで、
      サンプル: 何故か403がでて投稿できなかったので、サンプルで | jsFiddle

      これを追記してサイドバーが表示されるなら間違いなくfloatが原因です。

    • #44644
      hidekichi
      ゲスト

      ひとつのレスにしてたんですが、なぜか403が出て投稿できなかったため、小分けにしてどこに原因があるかを探っていたのでレスが別れてます(笑)

      なぜあのサンプルコードで403が出るのかは不明ですが、ひとまずそういうことです。

    • #44647
      わいひらわいひら
      キーマスター

      とりあえず、以下のコードは、次のバージョンで適用するつもりで書いたので、次期バージョンをインストールしたときには削除する必要があるかもしれません。

      //カテゴリIDクラスをbodyクラスに含める
      function add_category_id_classes_to_body_classes($classes) {
        global $post;
        foreach((get_the_category($post->ID)) as $category)
          $classes[] = 'categoryid-'.$category->cat_ID;
        return $classes;
      }
      add_filter('body_class', 'add_category_id_classes_to_body_classes');
    • #44660
      Mori
      ゲスト

      ようやくできました!!
      ここまでお付き合い頂きありがとうございました

      わいひらさんにいただいた上記のコードをfunction.phpに書き込み、style.cssに以下のコードを書き込むことで実現しました。

      .categoryid-3 #main{
      		width: 100%;
      		max-width: 1070px;
      		margin: 0 auto;
      		clear:both;
      }
      .categoryid-3 #sidebar {
      		width: 100%;
      		clear:both;
      }

      コードの詳細は今ひとつ理解していませんが、メインとサイドバーが同時に表示されていた感じです。
      clear:both; を入れることで落ち着きました。
      body_inに関しては表示が変わらなかったので削除しました。

      本当にここまでありがとうございました!

    • #44661
      Mori
      ゲスト

      解決と思いきや・・・・トップページが1カラム表示になってしまいました。。。
      うーむ・・・。

    • #44664
      hidekichi
      ゲスト

      ちなみにfloatに対してclear:bothを入れれば見た目は改行されますが、floatされていることに違いはないので場合によってはfooterとかその後に続く要素が繰り上がって、見た目に消えてしまったり、位置がズレたりする場合があるので注意してください。幅の指定によりますけどね。

      #body-inでサイズを決めない場合は、常に#body-inのサイズになるので、ここらも注意が必要かもしれません。つまり、まぁ100%なので問題ないですが、幅によってはセンター寄せができないことがあったりする場合があるかもしれません。

      PCで見た場合、#body-inは1070pxなので、#mainの幅が100%だとすると、そのサイズは1070pxです。#body-inを80%とした場合、#mainが100%だったら、結果的に856pxになります。1070pxの#body-inに856pxの#mainが入ったらスペースができますよね?つまりそのままだと左寄せになってセンタリングされないことがあります。#mainにmargin: 0 autoなどが入っていれば別ですが。

      なので、clearを入れるよりは、float: none;で解除したほうが間違いありません。floatは回り込みのタグです。文章の中に画像があって、その画像の周りに文章を入れるなら大体の場合文章のほうに高さがあるのでよほど短い文章でなければ問題ないですが、このあたりは特に注意が必要です。

      更に幅が広がると言うことは中身も広がると言うことです。各々の要素のサイズを設定するべきですしできればレスポンシブにしておくほうが何かと都合が良いです。
      一番の問題は、記事のテキストが横に広がることでの読み難さです。だいたい読みやすいと感じる文字数は40文字前後と言われるので、よくみる1カラムのサイトでは文字サイズを大きくしているわけです。
      首を振らないと読めないぐらいに広がってしまうと、行を追うのが難しくなるそうです。ここらも注意が必要です。

      ここからも#mainのサイズはできるだけ大きくしすぎないほうが良いのではなかろうかと思います。するのであれば中身の文字サイズも変更する必要があるかなと。よって、

      #body-in {
        width: 100%;
        max-width: 1070px;
      }
      #main {
        width: 100%;
        flaot: none;
      }
      #sidebar {
        width: 100%;
        float: none;
      }

      こうしておけば、#body-inは1070pxまでしか大きくならず、またそれより小さい時は100%(画面幅)で、かつその中の#mainと#sidebarも#body-inに追従します。
      これが基本だとして、

      #body-in {
        width: 80%;
        max-width: 1070px;
      }

      としたら、画面幅の80%になりますが、最大でも1070pxまでと言う設定ができます。
      1070pxより大きな画面サイズになっても最大で1070px、つまりSimplicityのデフォルトの幅にしかならないと言うことです。

      小さい画面の時に80%だと画面が有効に使えないため、例えばスマホを想定するなら、

      @media screen and (max-width: 48em) {
        #body-in {
          width: 100%;
          max-width: 100%; /*あるいはunset*/
        }
      }

      として、画面いっぱい使うこともできます。

      わいひらさんのコードはもしかしたらエントリーカードのカテゴリーも拾うかもしれません。

      function add_category_id_classes_to_body_classes($classes) {
      		global $post;
      		foreach((get_the_category($post->ID)) as $category){
      			if (!is_home() || !is_front_page() || !is_archive()){
      				$classes[] = 'categoryid-'.$category->cat_ID;
      			}
      		}
      		return $classes;
      }
      add_filter('body_class', 'add_category_id_classes_to_body_classes');

      こんな感じでトップページじゃない時はと言う処理をする必要があるかと。僕が#44604で書いたのにも条件があるでしょう?そういうことです。
      まぁis_single()だけだと投稿ページだけですけどね。

    • #44672
      わいひらわいひら
      キーマスター

      とりあえず、Simplicity2.2.8にアップデートするのが一番手っ取り早いかもしれません(カスタマイズ追加した関数は削除して)。
      最新版にでは、カテゴリIDは、投稿ページにしか適用されないようになっています。

    • #44702
      Mori
      ゲスト

      hidekichiさん、わいひらさん

      こんばんは。いろいろとありがとうございます。
      ひとまず、2.2.8にアップデートしたいと思います。
      本日は時間がないので明日取り組んで見たいと思います。

      自分の都合ばかりで申し訳ないです

    • #44707
      Mori
      ゲスト

      おはようございます!
      無事にすべて解決しました!

      2.2.8にアップデートすることで、トップページが2カラム表示となりました。
      コードの方は

      .categoryid-3 #body-in {
        width: 80%;
        max-width: 1070px;
      }
      .categoryid-3 #main{
      		width: 100%;
      		margin: 0 auto;
      		float: none;
      }
      .categoryid-3 #sidebar {
      		width: 100%;
      		clear:both;
      }

      という感じで最終調整しました。
      サイドバーは float:none; では追従ウィジェットが本文にかぶる現象が起こるためしていません。

      hidekichiさんが言われるとおり、テキスト部分が横にガンガン長くなるというのが1カラムの欠点といいますか読みづらさになりそうですね。
      そのカテゴリーだけ大きな写真を載せたい、というのがやりたかったことなので、テキスト部分は工夫してみます。
      モバイル表示も問題なさそうでした。

      いろいろと最後までご親切にありがとうございました。自分ではできなかったです。

    • #44708
      Mori
      ゲスト

      あっ、body-inの幅はモバイルで崩れたので100%です。

    • #44714
      hidekichi
      ゲスト

      > そのカテゴリーだけ大きな写真を載せたい、
      > というのがやりたかったこと

      小さいサムネイルで表示しておいて、クリックしたら全画面のモーダルの中に大きな画像表示がおそらくは画像の最大表示方法です。つまりlightboxのような方法ですね。
      小さいサムネイルを使うのでページも高速に表示され、必要な人だけが大きな画像を待てば良いと言うメリットが有ります。

      1カラムにした場合、サイドバーが下に繰り下がると言うのが弱点です。つまり縦スクロールが頻発してしまうと言うことです。これはコメントにも影響するかもしれません。

      僕がおすすめするなら、メインは広く使いたい、しかし縦スクロールはなるべく発生させたくないと言うことなのでサイドバーをスライドインパネルにするのが良いのではなかろうかと思ったりもします。
      まぁ希望があれば何かしらサンプルを作ります。

    • #44717
      Mori
      ゲスト

      こんにちは。
      サイドバーをスライドインパネルにすることが可能なんですか?
      コード打ちができる方は違うんですね・・・。いやー、すごい。

      1カラムで、スライドインボタンのみが追従していて、ボタンを押すと通常表示の2カラムになるとすごいですね。
      再びボタンを押すと再び1カラム表示になり、画像が大きくなる。
      こういうことが実現すると鬼に金棒ですね。
      現状としては、、、コメントの下にサイドバーが出てくるので使いにくいですね

      画像のサムネイル表示に関しては、1クリック → 表示拡大 という流れで手間と時間がかかるので、不便だと思うのでしたくはないんです。

    • #44725
      hidekichi
      ゲスト

      見直しも何もしてないので、ここまま適用はまだストップしておいて欲しいんですが、例えばこんな感じではなかろうかと言うサンプルを作ってみました。

      サンプル: スイッチで1カラム<->2カラム切り替え | codepen

      1カラムと2カラムの切り替えだけだったらほんの数行なんですが、スクロールしたりリサイズしたり色々とあると思うのと、それ以外のおまけ部分に結構な行数が必要になりました。だいたい世間では本末転倒と言うやつですが、イメージとしてこういうのはできますと言う感じです。

      問題点やらあったらまた夜にちょっと触るので書いておいてもらうと助かります。

    • #44728
      Mori
      ゲスト

      おおーーーーhidekichiさん、これはすごいですね!!
      写真をでかくしたいカテゴリーでこれを実装できたら相当にすごいです!!
      これいいじゃないですか!これを実装したいです

    • #44739
      hidekichi
      ゲスト

      とりあえずの所、スクリプトをまとめて、若干色々と修正しました。

      以前作ったモバイル判別のスクリプトも導入して、完璧ではありませんがモバイル端末以外はスイッチが表示するようにしました。これはつまり、画面サイズがそこそこあるタブレット等では機能しないようにするためです。元々Simplicityはタブレット時に1カラムになるので、不要だろうと言うことですね。
      よってこのカラムスイッチの機能はPCのみの機能となります。

      PCでも画面サイズが狭い場合、普通に2カラムになってしまうので、2カラム時にサイドバーの一部(もしくは全部)が画面外になります(横スクロールが発生すると言うことです)。

      動作原理としては、bodyタグのクラスに、javascript内の「チェックするカテゴリ」で指定してある任意のカテゴリがある場合にボタンが出現します。ここでマッチするidがない場合は通常の1カラムのままです。
      つまりボタンが表示されませんが、css側で1カラムの設定がしてあるためそのまま表示すると言うことです。

      jQuery側では、切り替えスイッチの機能提供だけで、cssを邪魔しているわけではありません。

      どのようにして1カラムと2カラムを変えているかですが、単純にbodyタグの中のjQueryで指定したcategoryidを一時的に消したり加えたりしているだけです。
      bodyタグから1カラム用にcssで指定したクラスが消えれば自ずと2カラムになります。

      ウチでテストしたhtmlで目立ってレスポンシブにならなかったものはレスポンシブにしましたが、利用される環境によってレスポンシブにならないものもありますので、そこらは随時これまで同様に、例えば、

      .categoryid-3 #the-content .レスポンシブにしたい要素のセレクタ {
        //何かしらのプロパティ
      }

      などとして、スタイルしていってください。
      アイキャッチが有効になっている場合は、16:9で表示するようにしました。画像の幅が大きくなれば高さもそれだけ大きくなるのをひとまず何とかするためです。

      設定しなくてはいけないこととしては、javascriptの冒頭部分の「チェックするカテゴリ(配列で)」にある、checkClass = ["categoryid-3","categoryid-9"];を指定して、1カラム用のcssを追加していくだけかと思います。
      このcheckClassは、上記のように配列で指定します。簡単に言えばカンマ区切りで指定すれば複数指定できると言うことです。上記の場合、categoryid-3、categoryid-9いずれかがbodyタグに含まれているとボタンが表示されます。
      1カラムになっていないと意味がないスイッチなので、ここは1カラムにするカテゴリのclassを入れてください。もちろん1つだけcategoryidを入れておいても大丈夫です。

      Simplicity2.2.8で実験してみましたが、firefox、chrome共に特にエラーはありませんでした。IE、edgeは検証できないのでわかりません。

    • #44748
      Mori
      ゲスト

      hidekichiさん

      いろいろとありがとうございます。
      style.cssに書き込みをしました。

      JSは、、、これはファイルにするのでしょうか?
      function.phpに書き込むとエラーになってしまったので、、、。
      この辺の呼び出しの関係がよくわからないです・・・教えていただけると助かります

    • #44752
      hidekichi
      ゲスト

      子テーマjavascript.jsにまんま追記です。
      で、1カラムの時のカテゴリのクラスを修正です。

    • #44755
      Mori
      ゲスト

      おおーーー、そうでした!
      FFFTPとか使わないとそのファイルは見せませんね!

      Style.cssとjavascript.jsに http://codepen.io/Hidekichi/pen/rLXroX のコードをそのまま貼り付けたんですが、、、1カラムボタンが出ません・・。
      あれれ・・・・。

      カテゴリー3だけは1カラム表示にはなるんですが・・・なんでしょうかね

    • #44760
      hidekichi
      ゲスト

      >> 1カラムの時のカテゴリのクラスを修正です。

      設定しなくてはいけないこととしては、javascriptの冒頭部分の「チェックするカテゴリ(配列で)」にある、checkClass = [“categoryid-3″,”categoryid-9”];を指定して、1カラム用のcssを追加していくだけかと思います。

      これはされました?

      またcssはscssで書いてあるので、cssに変換が必要です。css欄下向きの三角のボタンから、view compiledでcssにして、それを子テーマstyle.cssです。

    • #44761
      hidekichi
      ゲスト

      > カテゴリー3だけは1カラム表示にはなるんですが

      これは、そうされているんで1カラムになると思います(笑)
      ボタンの表示はstyle.cssとjavascript.jsに追記した内容が正しく動作すれば、javascript.jsに追記した部分の冒頭にあるcheckClassの指定クラスをチェックして、bodyタグの中にそのクラスが含まれている場合はボタンが表示されます。

      1カラムになっているかどうかはcssだけの問題です。これはすでにされているのでそうなります。

      今回のボタンの機能としては、bodyタグの中のにあるクラスの中で、checkClassにて指定されたクラスをつけたり外したりしているだけです。
      その他のスクリプト部分はスクロール追従であったり、モバイル判断であったり、本来のスイッチ機能からすればおまけみたいなものです(笑)

    • #44764
      Mori
      ゲスト

      おはようございます!
      サイトの使い方がまったくわかってなかったようです。
      CSSに変換したらいけました!!!

      これはいいですね!!本当にいい!!!

      ちなみに、切り替えボタンは追従ではなくて、「ページトップに帰るボタン」の上にずっと表示されることは可能でしょうか??
      追従すると追いかけられてる感があるので

    • #44766
      hidekichi
      ゲスト

      サンプルをアップデートしました。

      javascripの冒頭にあるonThePageTopの値が true か falseで、ボタンの表示する位置を変えています。
      さっくりと実装するのであれば、#page-topの中に入れてしまえばより簡単なんですが、今回は#page-topが非表示の時は画面右下、表示されたらアニメーションしながら上に移動と言うことをしました。

      またonThePageTopの値をtrueにした場合(トップへ戻るボタン上の表示)、スイッチボタンとデザインを同じにするべくjQuery側でトップへ戻るのボタンサイズ等を変更しています。なので、トップへ戻るボタンはデフォルトで利用してもらうことになるかと思います。
      色の変更とかは問題ないですが、css側でサイズを変更していたり、画像に変えたりしている場合は、それらをjQueryの設定で上書きするために、問題が出る可能性があると言うことです。

      $(セレクタ).is(":hidden")

      と言うのでトップへ戻るボタンの表示・非表示を判断しているのですが、jQueryのバージョンが3.0よりも前の場合は、この指定はあまりオススメできない遅いセレクタの指定なんですけれども、jQueryのバージョンが3.0より新しい場合、以前の17倍の速さで処理できると言うことです。
      元が遅ければ17倍速くなっても、普通になったぐらいの話かもしれませんし、それでもまだ遅いのかもしれませんが(笑)
      特別、処理の遅さを体感するほど多用していないので問題なかろうと思います。

      まぁ別に3.0にする必要もないんですけどね。すれば速くなると言うことです。逆に親テーマのjavascript.jsに別の問題が出る可能性も無きにしも非ずですが。

      うちのサイトはほぼSimplicity2のデフォルトで、javascriptもそのまま使っていますが大きく問題はなかったように思います。snsの部分はウチ用の設定に修正しましたし、その時におかしかった部分は直したかもしれませんが…。

    • #44768
      hidekichi
      ゲスト

      ちなみに、サンプルでトップへ戻るボタンを動作させるために、サンプルのjavascript欄の下部に親テーマのjavascriptの一部を書いています。

      これは、既に親テーマが持っているものですから必要ありません。
      とりあえずjavascript部分を、前の追記部分を削除した上で、新たに追記し、追記した下部にある親テーマのトップへ戻るスクリプトを削除してください。

      「/*テスト用 親テーマtopへ戻るスクリプト*/」以下全部が必要ありません。

      またcssも新たにトップへ戻るの上に表示するために追記してありますので、以前追記した分を削除した上で、新たにscssをcssに変換した後追加してください。
      ※ 追記した部分がわかるなら、その部分だけを追記しても良いです。
      ※ .switch-column.show-pagetopの部分がそれです。

      cssは別に削除しなくても後からのものが優先されますが、容量の無駄なので、不要なものは削除しておいたほうが良いかと思います。

    • #44788
      Mori
      ゲスト

      おーーーーすごい!いろいろできるんですね。コード打ちができるって偉大ですね。
      1カラムボタンが無事にページトップの上にきました!!

      ところで、このプログラムだとインデックスページや別カテゴリーの個別記事中にボタンが表示されてしまいませんか??
      ボタン自体は反応しないのですが、ずっと表示されています
      消せるでしょうか???

    • #44789
      Mori
      ゲスト

      あと、対象外のカテゴリーでカエレバのアフィリエイトリンクに影響を及ぼして、かなり行がぶっ飛ぶ表示になっています。
      外部ブログカードは通常のように表示されています。
      なかなか難しいですね

    • #44790
      hidekichi
      ゲスト

      ボタンが表示されるかはbodyタグにそのカテゴリがあるかどうかです。
      インデックスページを避けることは簡単にできます。
      が、別カテゴリーの個別記事中は例えばどういう時ですか?

    • #44791
      hidekichi
      ゲスト

      カエレバのリンク先の例を見ましたが、その構造に影響を及ぼすセレクタ等は無いと思うんですよね。またカエレバのサンプルではstyleタグでcssを直接指定してあるので、それらを上書きするスタイルは今回のサンプル中にはありません。

      今回のサンプルでのcssは、何かしらの要素の中に対して限定的にスタイルしているため、外部の要素に影響があるはずもないと思います。

      例えば、

      .switch-column .one {
        //なんちゃら
      }

      みたいな感じですね。これは他の要素に仮に.oneと言うセレクタがついてあったとしても、.switch-columnの子要素にしか適用されません。

      それを考えると、影響がありそうなところとしては、#the-content img あたりでしょうか。実際にどうなっているかを見ないとこれはなんとも原因がわかりませんね。

    • #44820
      Mori
      ゲスト

      こんばんは。

      #the-content imgをごっそりと消すと表示はいつもどおりになりました。

      ボタンが常に表示されるのはブログを見てもらえるとありがたいです
      http://moriaquarium.com/

      支障はないレベルではありますが、消えるとありがたいです

    • #44821
      hidekichi
      ゲスト

      カエレバの質問をもらった時に既にアップデートしてあったのを報告するのを忘れてました。
      サンプルのjavascriptをまるごと入れ替えて、最後の親テーマのjavascriptの一部で「/*テスト用 親テーマtopへ戻るスクリプト*/」以下をごっそり削除してください。

      トップページにと言うわけではなく、#listが存在する場合は表示しないようにしてあります。
      つまり、アーカイブ(カテゴリのリストにしかり、検索時にしかり)リスト一覧時には表示しないと言う感じです。

    • #44822
      hidekichi
      ゲスト

      常時表示される理由がなんとなしにわかったので、今修正しました。
      一度テストしてみてください。

    • #44824
      hidekichi
      ゲスト

      カエレバの件ですが、例えば、

      .categoryid-1 #the-content img {
        width: 100%;
        height: auto;
      }

      こうすると、.categoryid-1の時の#the-content(記事部分)の中のimgはwidth:100%でその時の高さは自動と言う感じになります。カエレバの中には隠されたというか、いくつかimgが仕込んであったので、上記cssに続いて、

      .category-1 #the-content .kaerebalink-box img {
        width: unset;
        height: unset;
      }

      こうしておけば、.kerebalink-box中のimgのstyle属性のcssのが優先されるのでカエレバ自体は通常表示になり、他の画像は横100%になるのではなかろうかと。

      うちには実験できる環境がないので、あくまでサイトを見せてもらってcssを弄った結果ですが、イケる気がする感じです。

      意図としては、1カラムの時に画像を大きくしたいけれども、カエレバ部分にそれが適用するとレイアウトが崩れると言うことだったので、1カラム時にまず#the-contentの画像を幅いっぱいにしておいて、カエレバ部分だけキャンセルするようなイメージです。

    • #44825
      hidekichi
      ゲスト

      ついでにもう一つ、ボタンの色を合わせるために、

      .switch-column.show-pagetop {
        background-color: 任意の背景色;
        color: 任意の文字色;
      }

      この部分を修正すれば統一感が出るかと思います。
      いま設定されているのは、背景色 #5DACDD なので、上記のbackground-colorだけ変更すれば統一感が出るのではなかろうかと。もちろん別の色に変更しても良いですし、今のまま変更しなくても良いです。

    • #44829
      Mori
      ゲスト

      hidekichiさん、毎回毎回ありがとうございます!
      おかげさまで、やりたいことができたと思います!

      #the-content imgの部分に関しては削除しています。
      削除することによって、もともと小さな(650px)画像が拡大されなくなるので画像が変に荒くならないし、カエレバも表示がそのままになりました。
      http://moriaquarium.com/?p=439

      この部分が今回の1⇔2カラムの仕様にどういう影響を持っているのかはわかりませんが、今のほうが自然かなと思います。

      1,000pxの大きな画像をアップして挙動も確認しました。
      http://moriaquarium.com/?p=714

      スマホ表示も問題なさそうです。

      イメージしたとおりの出来になりました!!本当にありがとうごさいました!!

    • #44830
      hidekichi
      ゲスト

      サンプルでは、1カラムで折角広い画面を使えると言うことから、関連記事を十分横幅がある場合に2列にしました。
      1カラム時に横幅一杯だとちょっと読みにくいかと思いまして。

      まぁ1カラムの時は2列で、2カラムで1列と言うふうに考えれば、ほぼ間違いないかと。ただし、1カラムでも幅が狭い場合(960px以下)は1列です。

      一応、cssにカエレバのものも追加しておきましたが、#the-content img部分が不要であれば併せて削除してください。

      blog-cardも幅100%だと逆にメリハリがないかと思い、最大で740pxにし、センタリングしてます。
      その他諸々の細かい部分はまた随時手を入れていってください。

      またトップページのリスト下ページャーでカレント(現在のページ)部分がちょっとおかしなことになっています。
      先日同様の現象でトピックが立ち、そこではプラグインのwp_external_linkだったかを停止すると言うことで解決されましたが、そこのトピックにwp_external_linkと併用してもおそらくはイケるであろうjQueryのスクリプトも書いておきました。
      一度試してみてください。

      色やらはcssをいじればいけると思います。

    • #44843
      Mori
      ゲスト

      hidekichiさん

      なにからなにまでありがとうございます。
      ページネーションもばっちりとなりました!!
      関連記事の2カラム表示はいいですね。この方がすっきりと見やすいです。

      本当にありがとうございました!!

52件の返信スレッドを表示中
  • トピック「特定のカテゴリーのみ1カラム表示を、子テーマの編集で行いたいのですが」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)