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

このトピックには52件の返信、2人の参加者があり、最後にMoriにより9年、 8ヶ月前に更新されました。

52件の返信スレッドを表示中

投稿者

投稿
- 2016年8月21日 11:26 PM #44586
  
  Mori
  ゲスト
  
  こんばんは、いつもお世話になっています。
  
  タイトルのとおり、「特定のカテゴリーのみ1カラム表示を、子テーマの編集で行いたい」のですが、
  
  Simplicityの固定ページのみを1カラムにする方法
  https://wp-simplicity.com/1column-only-page-template/
  
  などを発見しました。
  page.phpに記述を加えるものであるので、テーマをアップデートする度に書き直しがいるのは手間だなと思っています。
  子テーマに書き込む形では、特定のカテゴリーのみ1カラムを実現できませんか？
- 2016年8月22日 12:03 AM #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%になると言うことです。
- 2016年8月22日 6:34 PM #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');
  }
?>
>
```
- 2016年8月22日 7:53 PM #44601
  
  わいひら
  キーマスター
  
  hidekichiさんの方法を行うなら、親テーマからheader.phpを引っ張ってくる必要があります。
- 2016年8月22日 8:54 PM #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は読みにくいですから、修正も大変ですしね。
- 2016年8月22日 8:56 PM #44605
  hidekichi
  ゲスト
  あ、間違えてた（笑）
```
.test .hoge {
  font-size: 18px;
}
.test .hoge .fuga {
  color: #333;
}
.test::after {
  content: "123";
}
```
  こうでした（笑）
- 2016年8月22日 9:33 PM #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が入ってしまいますが、プラスは、日本語でも指定出来るのでまあいいかと。
- 2016年8月22日 10:00 PM #44609
  
  Mori
  ゲスト
  
  ありがとうございます。まずはとりかかってみます
- 2016年8月23日 11:57 AM #44610
  
  hidekichi
  ゲスト
  
  jQueryのサンプルの方を複数カテゴリがある場合にも対応させました。
  
  .post-meta内のカテゴリが複数ある時に、いずれかにマッチしたのみ1カラムにします。
  カテゴリのチェックも複数対応できますので、カテゴリごとでチェックできます。
  
  #body-inにtransitionを入れたので、チラツキの若干の軽減にもなっています。
  
  javascript内のvar checkCategory= [配列]でカテゴリを指定できます。
  
  var checkCategory = ["カテゴリ名","他のカテゴリ名"];
  
  と言う形でカテゴリを複数指定できます。サンプルでは、test10は.post-metaの中にありませんが、.test5があるので1カラムになると言う寸法です。
- 2016年8月23日 11:59 AM #44611
  
  hidekichi
  ゲスト
  
  ☓ いずれかにマッチしたのみ1カラムにします。
  ○ いずれかにマッチした時のみ1カラムにします。
  
  サンプル: カテゴリで判別してbodyにクラス追加 | codepen(前レス#44590と同じ)
- 2016年8月23日 2:40 PM #44612
  
  わいひら
  キーマスター
  
  #44607
  補足：
  スラッグが日本語の場合は、エスケープされて組み込まれる模様です。エスケープされた文字列は、%を利用するので、CSSセレクタとしては利用できないっぽい。
  なので、スラッグ版を利用する場合は、半角英数字と-_のみのスラッグを設定しておく必要はあるかも。
- 2016年8月23日 10:35 PM #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に書き込む文章の意味がわかないので足踏みなのかなと
- 2016年8月23日 10:37 PM #44623
  Mori
  ゲスト
  ちなみに、スタイルシートには、以下のように1カラムコードを書き込んではいます。
```
.one-column {
	
	#body-in {
		width: 80%;
	}
	
	#main {
		width: 100%;
		max-width: 1070px;
		margin: 0 auto;
		float: none;
	}
	
	#sidebar {
		width: 100%;
	}
}
```
- 2016年8月23日 11:36 PM #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タグにそのクラスがある時だけのスタイルができると言うことです。
- 2016年8月23日 11:39 PM #44626
  
  hidekichi
  ゲスト
  
  おや？リンクのテキストを修正したはずだけども（笑）
  長ったらしいリンクが入ってますが、全部このトピックの各記事へのリンクです。
- 2016年8月24日 9:40 AM #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カラムに戻ったり、設定が反映されないなど不具合が起こります。）
- 2016年8月24日 11:20 AM #44641
  
  hidekichi
  ゲスト
  
  > サイドバーの追従ウィジェットが途中から出現して追いかけてくる
  
  これは例えばタブレット表示では非表示になってるので、1カラムのときも非表示にしておけばよいのではないですかね？
  親テーマのスクリプトをいじれば1カラムの時は動作させないと言うこともできますが、親テーマをいじったらせっかくいじらなくて済んだのに本末転倒なので。
- 2016年8月24日 11:21 AM #44642
  
  hidekichi
  ゲスト
  
  > サイドバーが下にスクロールしても表示されない
  
  重要なのは、#body-inです。メインの幅は100%でよいです。それの親に当たる#body-inで幅を決めたほうが良いのではないかと。
  
  またメインもサイドバーもfloatしていますので、これらも解除したほうが良いでしょうね。サンプルをみてもらえればわかるようにひとまず、メイン、サイドバーのいずれかが解除されていればまぁ問題なかろうかと。両方解除したほうが良いとは思いますけれども。
  
  更に、見ている画面がスマホ等の場合、単純に非表示されているだけかもしれません。ここらはセレクタをデベロッパーツールで確認しながらスタイルしていくしかないかと思います。
  
  もうひとつ原因があるとすれば、floatというのは高さを持ちません。そのためメインにサイドバーが重なっている可能性もあります。このあたりを調べて見る必要があるかもしれませんね。
- 2016年8月24日 11:23 AM #44643
  
  hidekichi
  ゲスト
  
  例えば現状のスタイルで、
  サンプル: 何故か403がでて投稿できなかったので、サンプルで | jsFiddle
  
  これを追記してサイドバーが表示されるなら間違いなくfloatが原因です。
- 2016年8月24日 11:24 AM #44644
  
  hidekichi
  ゲスト
  
  ひとつのレスにしてたんですが、なぜか403が出て投稿できなかったため、小分けにしてどこに原因があるかを探っていたのでレスが別れてます（笑）
  
  なぜあのサンプルコードで403が出るのかは不明ですが、ひとまずそういうことです。
- 2016年8月24日 6:31 PM #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');
```
- 2016年8月25日 11:30 AM #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に関しては表示が変わらなかったので削除しました。
  
  本当にここまでありがとうございました！
- 2016年8月25日 11:36 AM #44661
  
  Mori
  ゲスト
  
  解決と思いきや・・・・トップページが1カラム表示になってしまいました。。。
  うーむ・・・。
- 2016年8月25日 2:26 PM #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()だけだと投稿ページだけですけどね。
- 2016年8月25日 2:52 PM #44672
  
  わいひら
  キーマスター
  
  とりあえず、Simplicity2.2.8にアップデートするのが一番手っ取り早いかもしれません（カスタマイズ追加した関数は削除して）。
  最新版にでは、カテゴリIDは、投稿ページにしか適用されないようになっています。
- 2016年8月26日 9:18 PM #44702
  
  Mori
  ゲスト
  
  hidekichiさん、わいひらさん
  
  こんばんは。いろいろとありがとうございます。
  ひとまず、2.2.8にアップデートしたいと思います。
  本日は時間がないので明日取り組んで見たいと思います。
  
  自分の都合ばかりで申し訳ないです
- 2016年8月27日 7:33 AM #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カラムの欠点といいますか読みづらさになりそうですね。
  そのカテゴリーだけ大きな写真を載せたい、というのがやりたかったことなので、テキスト部分は工夫してみます。
  モバイル表示も問題なさそうでした。
  
  いろいろと最後までご親切にありがとうございました。自分ではできなかったです。
- 2016年8月27日 7:34 AM #44708
  
  Mori
  ゲスト
  
  あっ、body-inの幅はモバイルで崩れたので100%です。
- 2016年8月27日 10:53 AM #44714
  
  hidekichi
  ゲスト
  
  > そのカテゴリーだけ大きな写真を載せたい、
  > というのがやりたかったこと
  
  小さいサムネイルで表示しておいて、クリックしたら全画面のモーダルの中に大きな画像表示がおそらくは画像の最大表示方法です。つまりlightboxのような方法ですね。
  小さいサムネイルを使うのでページも高速に表示され、必要な人だけが大きな画像を待てば良いと言うメリットが有ります。
  
  １カラムにした場合、サイドバーが下に繰り下がると言うのが弱点です。つまり縦スクロールが頻発してしまうと言うことです。これはコメントにも影響するかもしれません。
  
  僕がおすすめするなら、メインは広く使いたい、しかし縦スクロールはなるべく発生させたくないと言うことなのでサイドバーをスライドインパネルにするのが良いのではなかろうかと思ったりもします。
  まぁ希望があれば何かしらサンプルを作ります。
- 2016年8月27日 11:43 AM #44717
  
  Mori
  ゲスト
  
  こんにちは。
  サイドバーをスライドインパネルにすることが可能なんですか？
  コード打ちができる方は違うんですね・・・。いやー、すごい。
  
  1カラムで、スライドインボタンのみが追従していて、ボタンを押すと通常表示の2カラムになるとすごいですね。
  再びボタンを押すと再び1カラム表示になり、画像が大きくなる。
  こういうことが実現すると鬼に金棒ですね。
  現状としては、、、コメントの下にサイドバーが出てくるので使いにくいですね
  
  画像のサムネイル表示に関しては、1クリック　→　表示拡大　という流れで手間と時間がかかるので、不便だと思うのでしたくはないんです。
- 2016年8月27日 5:24 PM #44725
  
  hidekichi
  ゲスト
  
  見直しも何もしてないので、ここまま適用はまだストップしておいて欲しいんですが、例えばこんな感じではなかろうかと言うサンプルを作ってみました。
  
  サンプル: スイッチで１カラム<->2カラム切り替え | codepen
  
  1カラムと2カラムの切り替えだけだったらほんの数行なんですが、スクロールしたりリサイズしたり色々とあると思うのと、それ以外のおまけ部分に結構な行数が必要になりました。だいたい世間では本末転倒と言うやつですが、イメージとしてこういうのはできますと言う感じです。
  
  問題点やらあったらまた夜にちょっと触るので書いておいてもらうと助かります。
- 2016年8月27日 5:51 PM #44728
  
  Mori
  ゲスト
  
  おおーーーーhidekichiさん、これはすごいですね！！
  写真をでかくしたいカテゴリーでこれを実装できたら相当にすごいです！！
  これいいじゃないですか！これを実装したいです
- 2016年8月28日 12:19 AM #44739
  hidekichi
  ゲスト
  とりあえずの所、スクリプトをまとめて、若干色々と修正しました。
  
  以前作ったモバイル判別のスクリプトも導入して、完璧ではありませんがモバイル端末以外はスイッチが表示するようにしました。これはつまり、画面サイズがそこそこあるタブレット等では機能しないようにするためです。元々Simplicityはタブレット時に１カラムになるので、不要だろうと言うことですね。
  よってこのカラムスイッチの機能はPCのみの機能となります。
  
  PCでも画面サイズが狭い場合、普通に2カラムになってしまうので、2カラム時にサイドバーの一部(もしくは全部)が画面外になります(横スクロールが発生すると言うことです)。
  
  動作原理としては、bodyタグのクラスに、javascript内の「チェックするカテゴリ」で指定してある任意のカテゴリがある場合にボタンが出現します。ここでマッチするidがない場合は通常の１カラムのままです。
  つまりボタンが表示されませんが、css側で1カラムの設定がしてあるためそのまま表示すると言うことです。
  
  jQuery側では、切り替えスイッチの機能提供だけで、cssを邪魔しているわけではありません。
  
  どのようにして1カラムと２カラムを変えているかですが、単純に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は検証できないのでわかりません。
- 2016年8月28日 4:49 PM #44748
  
  Mori
  ゲスト
  
  hidekichiさん
  
  いろいろとありがとうございます。
  style.cssに書き込みをしました。
  
  JSは、、、これはファイルにするのでしょうか？
  function.phpに書き込むとエラーになってしまったので、、、。
  この辺の呼び出しの関係がよくわからないです・・・教えていただけると助かります
- 2016年8月28日 8:51 PM #44752
  
  hidekichi
  ゲスト
  
  子テーマjavascript.jsにまんま追記です。
  で、1カラムの時のカテゴリのクラスを修正です。
- 2016年8月28日 11:17 PM #44755
  
  Mori
  ゲスト
  
  おおーーー、そうでした！
  FFFTPとか使わないとそのファイルは見せませんね！
  
  Style.cssとjavascript.jsに http://codepen.io/Hidekichi/pen/rLXroX のコードをそのまま貼り付けたんですが、、、1カラムボタンが出ません・・。
  あれれ・・・・。
  
  カテゴリー3だけは1カラム表示にはなるんですが・・・なんでしょうかね
- 2016年8月29日 12:57 AM #44760
  
  hidekichi
  ゲスト
  
  >> 1カラムの時のカテゴリのクラスを修正です。
  
  設定しなくてはいけないこととしては、javascriptの冒頭部分の「チェックするカテゴリ(配列で)」にある、checkClass = [“categoryid-3″,”categoryid-9”];を指定して、1カラム用のcssを追加していくだけかと思います。
  
  これはされました？
  
  またcssはscssで書いてあるので、cssに変換が必要です。css欄下向きの三角のボタンから、view compiledでcssにして、それを子テーマstyle.cssです。
- 2016年8月29日 1:06 AM #44761
  
  hidekichi
  ゲスト
  
  > カテゴリー3だけは1カラム表示にはなるんですが
  
  これは、そうされているんで１カラムになると思います（笑）
  ボタンの表示はstyle.cssとjavascript.jsに追記した内容が正しく動作すれば、javascript.jsに追記した部分の冒頭にあるcheckClassの指定クラスをチェックして、bodyタグの中にそのクラスが含まれている場合はボタンが表示されます。
  
  1カラムになっているかどうかはcssだけの問題です。これはすでにされているのでそうなります。
  
  今回のボタンの機能としては、bodyタグの中のにあるクラスの中で、checkClassにて指定されたクラスをつけたり外したりしているだけです。
  その他のスクリプト部分はスクロール追従であったり、モバイル判断であったり、本来のスイッチ機能からすればおまけみたいなものです（笑）
- 2016年8月29日 7:32 AM #44764
  
  Mori
  ゲスト
  
  おはようございます！
  サイトの使い方がまったくわかってなかったようです。
  CSSに変換したらいけました！！！
  
  これはいいですね！！本当にいい！！！
  
  ちなみに、切り替えボタンは追従ではなくて、「ページトップに帰るボタン」の上にずっと表示されることは可能でしょうか？？
  追従すると追いかけられてる感があるので
- 2016年8月29日 12:04 PM #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の部分はウチ用の設定に修正しましたし、その時におかしかった部分は直したかもしれませんが…。
- 2016年8月29日 12:13 PM #44768
  
  hidekichi
  ゲスト
  
  ちなみに、サンプルでトップへ戻るボタンを動作させるために、サンプルのjavascript欄の下部に親テーマのjavascriptの一部を書いています。
  
  これは、既に親テーマが持っているものですから必要ありません。
  とりあえずjavascript部分を、前の追記部分を削除した上で、新たに追記し、追記した下部にある親テーマのトップへ戻るスクリプトを削除してください。
  
  「/*テスト用親テーマtopへ戻るスクリプト*/」以下全部が必要ありません。
  
  またcssも新たにトップへ戻るの上に表示するために追記してありますので、以前追記した分を削除した上で、新たにscssをcssに変換した後追加してください。
  ※ 追記した部分がわかるなら、その部分だけを追記しても良いです。
  ※ .switch-column.show-pagetopの部分がそれです。
  
  cssは別に削除しなくても後からのものが優先されますが、容量の無駄なので、不要なものは削除しておいたほうが良いかと思います。
- 2016年8月29日 11:21 PM #44788
  
  Mori
  ゲスト
  
  おーーーーすごい！いろいろできるんですね。コード打ちができるって偉大ですね。
  1カラムボタンが無事にページトップの上にきました！！
  
  ところで、このプログラムだとインデックスページや別カテゴリーの個別記事中にボタンが表示されてしまいませんか？？
  ボタン自体は反応しないのですが、ずっと表示されています
  消せるでしょうか？？？
- 2016年8月29日 11:28 PM #44789
  
  Mori
  ゲスト
  
  あと、対象外のカテゴリーでカエレバのアフィリエイトリンクに影響を及ぼして、かなり行がぶっ飛ぶ表示になっています。
  外部ブログカードは通常のように表示されています。
  なかなか難しいですね
- 2016年8月29日 11:30 PM #44790
  
  hidekichi
  ゲスト
  
  ボタンが表示されるかはbodyタグにそのカテゴリがあるかどうかです。
  インデックスページを避けることは簡単にできます。
  が、別カテゴリーの個別記事中は例えばどういう時ですか？
- 2016年8月29日 11:51 PM #44791
  hidekichi
  ゲスト
  カエレバのリンク先の例を見ましたが、その構造に影響を及ぼすセレクタ等は無いと思うんですよね。またカエレバのサンプルではstyleタグでcssを直接指定してあるので、それらを上書きするスタイルは今回のサンプル中にはありません。
  
  今回のサンプルでのcssは、何かしらの要素の中に対して限定的にスタイルしているため、外部の要素に影響があるはずもないと思います。
  
  例えば、
```
.switch-column .one {
  //なんちゃら
}
```
  みたいな感じですね。これは他の要素に仮に.oneと言うセレクタがついてあったとしても、.switch-columnの子要素にしか適用されません。
  
  それを考えると、影響がありそうなところとしては、#the-content img あたりでしょうか。実際にどうなっているかを見ないとこれはなんとも原因がわかりませんね。
- 2016年8月30日 9:09 PM #44820
  
  Mori
  ゲスト
  
  こんばんは。
  
  #the-content imgをごっそりと消すと表示はいつもどおりになりました。
  
  ボタンが常に表示されるのはブログを見てもらえるとありがたいです
  http://moriaquarium.com/
  
  支障はないレベルではありますが、消えるとありがたいです
- 2016年8月30日 10:13 PM #44821
  
  hidekichi
  ゲスト
  
  カエレバの質問をもらった時に既にアップデートしてあったのを報告するのを忘れてました。
  サンプルのjavascriptをまるごと入れ替えて、最後の親テーマのjavascriptの一部で「/*テスト用親テーマtopへ戻るスクリプト*/」以下をごっそり削除してください。
  
  トップページにと言うわけではなく、#listが存在する場合は表示しないようにしてあります。
  つまり、アーカイブ(カテゴリのリストにしかり、検索時にしかり)リスト一覧時には表示しないと言う感じです。
- 2016年8月30日 10:26 PM #44822
  
  hidekichi
  ゲスト
  
  常時表示される理由がなんとなしにわかったので、今修正しました。
  一度テストしてみてください。
- 2016年8月30日 10:52 PM #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の画像を幅いっぱいにしておいて、カエレバ部分だけキャンセルするようなイメージです。
- 2016年8月30日 11:00 PM #44825
  hidekichi
  ゲスト
  ついでにもう一つ、ボタンの色を合わせるために、
```
.switch-column.show-pagetop {
  background-color: 任意の背景色;
  color: 任意の文字色;
}
```
  この部分を修正すれば統一感が出るかと思います。
  いま設定されているのは、背景色 #5DACDD なので、上記のbackground-colorだけ変更すれば統一感が出るのではなかろうかと。もちろん別の色に変更しても良いですし、今のまま変更しなくても良いです。
- 2016年8月31日 9:47 AM #44829
  
  Mori
  ゲスト
  
  hidekichiさん、毎回毎回ありがとうございます！
  おかげさまで、やりたいことができたと思います！
  
  #the-content imgの部分に関しては削除しています。
  削除することによって、もともと小さな（650px）画像が拡大されなくなるので画像が変に荒くならないし、カエレバも表示がそのままになりました。
  http://moriaquarium.com/?p=439
  
  この部分が今回の1⇔2カラムの仕様にどういう影響を持っているのかはわかりませんが、今のほうが自然かなと思います。
  
  1,000pxの大きな画像をアップして挙動も確認しました。
  http://moriaquarium.com/?p=714
  
  スマホ表示も問題なさそうです。
  
  イメージしたとおりの出来になりました！！本当にありがとうごさいました！！
- 2016年8月31日 11:07 AM #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をいじればいけると思います。
- 2016年9月1日 7:29 AM #44843
  
  Mori
  ゲスト
  
  hidekichiさん
  
  なにからなにまでありがとうございます。
  ページネーションもばっちりとなりました！！
  関連記事の2カラム表示はいいですね。この方がすっきりと見やすいです。
  
  本当にありがとうございました！！
投稿者

投稿