- このトピックには19件の返信、2人の参加者があり、最後に
により10年、 8ヶ月前に更新されました。
-
投稿
-
-
初めまして。Simplicity 2.0.3と子テーマをダウンロードさせていただき、運営しているサイトのテーマに使わせていただくべくカスタマイズのテストをしております。
カスタマイズは自己責任とのこと、承知の上での質問をご了承いただきたくお願い申し上げます。
当方のデスクトップで使用しているブラウザは、モニタを縦置きにした場合やブラウザを開いてのマルチタスクも考えて、デフォルトで横幅が狭いものにしております。サイトも横幅が狭い表示にしてあります。
現在のサイトに合わせて、メインカラムを520px程度、右カラムのサイドバーを210px程度の横幅(max-width)にして、かつ、サイドバーのcssで「float: left;」と設定して両方のカラムをくっつけた状態にしたいと考えております。
Simplicityは横幅が広いと伺っておりましたし、実際に当方のブラウザのデフォルトの横幅にすると、右カラムのサイドバーが落ちてしまいます。
メインカラムと右カラムを上記のように設定したところ、header-inなどの横幅を760pxのまま弄らずとも、横幅をある程度狭めてしまうと、背景にタイル画像を表示させてある左右の余白がだいぶ余った状態でも、右カラムが落ちてしまいます。
当方の使用ブラウザのデフォルト横幅はだいたい1000pxで、この程度の幅にして、左右の余白があまりない状態にしても右カラムが下へ落ちずに、かつ、もっと狭くした場合には横方向のスクロールバーが出るようにしたいのですが、cssなど、どのあたりに設定を施せばよいのか、ご教示いただきたくお願い申し上げます。
質問させていただく前に、「PCで見たときにブラウザ幅をちぢめても2カラムを並んで表示させたい場合」、こちらのトピックを拝見させていただきましたが、お話が親テーマの改造などに及んでおり、解決策を見いだせずにおります。当方、cssは見よう見まねで弄るだけで、体系的に学習した経験はございません。
よろしくお願い申し上げます。 -
> 1000pxで、この程度の幅にして、左右の余白があまりない状態に
> しても右カラムが下へ落ちずに、かつ、もっと狭くした場合には
> 横方向のスクロールバーが出るようにしたいのですが、サイドバーのカラム落ちをせずに、#mainの幅を狭くすることは可能ですが、狭くするということは縦のサイズが伸びるということです。ここに横スクロールを発生するのはこれも可能ですが、縦に伸びたカラムの一番下に横スクロールのバーが出るので利便性はとても落ちます。
つまり、横スクロールを操作したい時に、ずっと画面下に横スクロールバーが出ていて、そこに移動するまでに欲しい部分があり、下まで行くと欲しい部分が見えなくなったりするので、使いづらいだけになります。例えばブラウザの画面内でスクロールバーを出そうとすると例えばmain(#mainの外(親)タグ)をwidth: 100%,height: 100%にした(あるいはタイトル部分を固定して)画面内に、position:absoluteで#mainを配置すればできなくはないかと思いますが、レスポンシブを完全に無視する形になりますので、他のデバイスに合わせるためのスタイルがとても複雑になるかと思います。
通常Simplicityでは、ブラウザの幅が狭くなった時はメインの記事部分が100%表示になって、サイドバーが下に行きますが、通常は背景に隠しておいて、何かしらボタンを押した時だけメインをずらしてサイドバーを表示することなどもできます。
#sidebarは広告を入れたりするので(入れない場合もありますが)、幅はある程度決められてしまいます。それを表示した状態で横スクロールバーを視認できる部分に入れるというのはcssだけでは無理かも知れませんが、カラム落ちさせないというのは可能です。
サンプルでは面倒だったのでflexでやりましたが、幅の指定をうまくすればflexを使わずにイケると思います。cssのcalcとか。flexで行う場合は、追従スクロールが正しく動作しない可能性が高いです。
calcの場合、
main { width: calc(100% - サイドバーの幅 - パディングやマージン幅); }とか。
サンプル: flexレイアウト例 | codepen
※ scssで書いてあります。css欄にあるview compiledボタンでcssになります。サンプルでは、画面幅が1000pxになった段階で#body-inを100%にして、mainの最小幅を320pxで設定。サイドバーは300px固定で、main部分はflexで勝手に320px以下になるまで幅を自動で伸縮させます。
jQueryでは、#sidebarに設定してあるインラインのスタイルを取り除くものです。
こんな感じにはできると思いますが、「かつ、もっと狭くした場合には横方向のスクロールバーが出るようにしたいのですが」この部分に関しては、cssのみでは難しいと言う感じです。
完璧ではありませんが、position: absoluteを使う方法としては、
サンプル: mainのサイズをjQueryで計算して、#mainをabsoluteで表示する | jsFiddle
こんなイメージです。
-
-
Hidekichiさん、わいひらさん、お返事ありがとうございます。
昨夜投稿させていただく際につい欲を出してしまい、「もっと狭くした場合には横方向のスクロールバーが出るようにしたいのですが」と書いてしまいました。実際のところ、メインカラムとサイドバーを合わせて横幅が狭いブログでも、それよりブラウザ幅を狭めてしまうとサイドバーのカラムが落ちるのが普通であり、無理な注文をしてしまって申し訳ありませんでした。
横方向のスクロールバーを出すことは考えずに、Simplicityのデフォルトの横幅よりももう少し狭くして、それでも右カラムが落ちずに済むように、ということでしたら、より容易になるでしょうか？
たとえば、先の投稿のように、まずブラウザでの横幅がせめて1000px程度でも右カラムのサイドバーが落ちないようにできればと思います。私が使っているブラウザの通常の幅はそのくらいで、たとえばこちらのページも右カラムが落ちた状態で表示されます。PCではワイドスクリーンが普及してますが、閲覧してくださる方々のなかには、あまり横長だとテキストも少し読みづらく感じるという方々もいらっしゃると思うのです。また、メインカラムとサイドバーの幅を狭くしても、左右の余白をだいぶ余らせておかないと右カラムを落とさずに済むようでは、アメーバブログのような見た目になってしまい少し抵抗を感じます。
サイドバーにつきましては、元々、広告も縦長のものしか表示させていなかったこともあり、余白(paddingで設定される分)も合わせて280px程度です。サイドバーの横幅が300px程度が望ましいとしても、現在のサイトのメインカラムは余白も含めて560px程度で、運営している私もこの程度の横幅が読みやすいと感じております。
先の投稿のように、左右のカラムをくっつけた状態にして、合わせて860px程度(可能であればサイドバー280pxとして合わせて840px程度)までは、ブラウザを狭めても右カラムが落ちないように設定できればと願います。これより左右の余白が多少あってもかまいません。スクロールバーについては考えないことにします。
わがままで恐縮ですが、レスポンシブ表示はできるだけ活かしておきたいです。
これでもまだ設定が難しくなるようでしたら、その旨ご指摘くださいましたら幸いです。ご教示よろしくお願い申し上げます。 -
最大幅を1000pxにして、サイドバーを落とさないようにしてみましたが、色んなシチュエーションで試してはないのであくまでも方法としてのサンプルになります。
サンプル: 最大幅1000pxで#mainの幅をcalcで求める | codepen
calcはopera mini以外では全て対応しているみたいなので(一部怪しいのもありますが)、主要なブラウザで利用する分には問題ないのではなかろうかと思います。
メディアクエリのオンパレードですが、設定したブレイクポイントは「750pxまで」と1110pxのスタイルを打ち消す感じのものだけです。まぁその間になる751〜1110pxのも一部使ってますが。
1110pxを堺に、グローバルメニューとヘッダ右上部のSNSフォロー、モバイルボタンが切り替わります。ここはSNSとモバイルボタンの表示非表示だけならメディアクエリでさっくりイケるんですけれども、ナビの部分が面倒なので今回は手を付けてません。
場合によっては、fork :: menu, vertical slide 主にWordpress theme Simplicity用 | codepenや、 WordPressTheme Simplicity jQuery&CSS Change global navigation side panel | codepenみたいにサイドパネルに表示する方法などで、自分でcssを加工できるようにしたほうが簡単かも知れません。
元々のものを対応させる場合でも、切り替わるあたり(1110pxあたり)でどのような記述になっているかを調べていけば、対応できると思います。
見本としては、responsive-pc.cssで、1110pxで設定を変える内容が書いてあるので、これを手がかりに1110pxを750pxなどにして読みかえ、ナビの部分がどうなっているのか、またどうすればそれを打ち消せるのかを子テーマstyle.cssで書けば対応できると思います。
-
#35711 のサンプルをアップデートしました。
メニューも変えてみました。がテストした範囲がアレなので上手く行かない場合もあるかも知れません。
javascript部分は、本来は不要な部分ですが、モバイルメニューをクリックした時に本来と同じ動作をするように設定してみました。 -
Hidekichiさん、ご親切にありがとうございます。
いかんせんcssは見よう見まねの素人ですので、これから試させていただきますが、わからない点などまたご質問させていただきます。よろしくお願いいたします。 -
まず、ご報告です。
Hidekichiさんが書いてくださったスタイルシートをいずれも試してみたのですが、やはり1110px辺りよりブラウザ幅が狭くなるとカラムが落ちてしまいます。
私としましては、メイン560px、右カラムサイドバー280px、ふたつをぴたりと寄せて合わせて840px、この辺りではブラウザを狭めてもカラムが落ちないようなデザインにしたいのですが、cssはまったく素人で、お手上げの状態です。
メインと右カラムを合わせた幅より狭い場合に右カラムが落ちるのは納得がいくのですが、通常使っているブラウザのデフォルトの幅が1000px辺りで、これだとSimplicityを使っているサイトはほとんど例外なく右カラムが下に落ちて表示されます。ネットでSimplicityをテーマにしていて、かつブラウザの幅が少し狭くても右カラムが落ちていないサイトを探してみたのですが、私では見つかりませんでした。
PCでの表示において高解像と低解像とで分ける、というのがSimplicityのコンセプトのようですが、私が使用しているブラウザを使って見てもメインとサイドバーとが並んで表示されるサイトがまだネットには多いので、どうしても違和感を感じてしまいます。
私のような素人でもわかりやすいカスタマイズができないのでしたら、Simplicityの使用を諦めざるを得なくなってしまいますが、何かいい対処法はないでしょうか？
度重なる質問、大変恐縮です。 -
codepenのサンプルのcssが適用された状態で上手く行っていない状態のサイトアドレスを公開してもらえれば、何が問題で何をどうすれば修復できるかはサンプルをあげることも可能です。なぜなら、公式のcssからijigenさんのサイトのcssに変更してスタイルできるようになるわけですから、邪魔なものは無効化しますし、jQueryで書き変えたりもして希望に沿う形にできる限り近く持って行くことはできるのです。
しかし、それができない状態では邪魔しているものをご自身で排除してもらう(スタイルの適用を打ち消すスタイルを書く)か、css等はあまり詳しくないと言われていますから、言われているように希望に沿うテーマがあれば、別のテーマを利用されるのが良いかと思います。
wordpressのブログを書くのにおいてSimplicityを利用されるのは個人の自由ですから、有料なテーマというわけでもないですし希望に沿うテーマを利用する方が手っ取り早いです。ijigenさんの言われているサイズは本来タブレットのサイズです。なのでレスポンシブに対応しているサイトとしてはSimplicityに限らず他のテーマでも、そのブレイクポイントは特におかしい状態ではありません。
実際、codepenのサンプルで公式のhtml、cssを利用して動作しているので個人的には動かないはずはないんですけどね。動かないのには動かないなりの原因があるので、それが外から見てわからない限りこれ以上は手の下しようがないのが現状です。
まさかですが、IEを利用しているとかではないですよね？
もしそうであれば、古いIEのサポートは終わってますから(IE11のみサポート。vistaのみIE9※)、早急にFirefox、chromeに変更されるか、edgeなどの新しいブラウザを利用するようにして下さい。
※ vista、windows7、windows8などは利用できるIEの最終バージョンのみがサポートInternet Explorerの旧バージョンは1月13日サポート終了 | ITMedia
IE11でもcss的には対応していない・対応が不十分というのがありますからFirefoxかchromeを利用されるのが良いかと思います。
-
Hidekichiさん、ご返信ありがとうございます。
まずはご報告とお詫び、それから新たに困ったことがありますので追加でご報告します。
Hidekichiさんが#35711で書いてくださったスタイルシートを元に若干のカスタマイズを加えて試したところ、「header-in」などで指定する幅よりもメインカラムと右カラムの合計幅を短くした場合には、カラムが落ちることがなくなりました。
感謝と、お騒がせしてしまってのお詫びを申し上げます。
ちなみに、ブラウザはMacintoshのSafariです。やや古いバージョンのものではデフォルトの幅がだいたい1000pxちょっとで、使い勝手の良さから使用しております。Safariも新しいものへバージョンアップが進んでいますが、IEのように不具合があって旧バージョンがサポートを終了したというものではありません。ほとんどのブログサイトは上記程度の幅のブラウザタブでも問題なくカラムが落ちることなしに表示されますが、ここ最近好評とのことで導入が増えておりますこちらのSimplicityを使ったブログサイトに限って、上記の幅のままではサイドバーのカラムが落ちた状態で表示されます。(フォーラムも含めたこちらのサイトもそうです) ワイドなモニタ画面に合わせての仕様なのだとは思いますが、こちらについての懸念はおかげさまで解消されました。
書いてくださったスタイルシートのおかげでカラム落ちの問題はクリアできましたが、新たに困った点がありますのでご報告します。
サイドバーの右カラムですが、フッターまで縦に下へ伸びているのは、私が運営しているサイトでもそのような仕様なのでありがたいのですが、「カテゴリー」や「最近の投稿」などのデフォルトのウィジェットがサイドバー内で下に落ちるという不具合が生じております。検索窓も落ちているのですが、なぜか「虫眼鏡」だけがサイドバーの上部に残っています。こちらの問題への対処法をご教示いただけましたら幸いです。
また、画像などのメディアがメインカラム内で若干のマージンを残してメインカラムの幅に合わせて拡大表示されており、こちらもどこをカスタマイズすればよろしいのか悩んでおります。(運営しているサイトでは、画像幅の値を常にメインカラムの幅より狭く指定して表示させています。画像によってはもっと幅の狭いものも使います) こちらにつきましても教えていただけましたら幸いです。
よろしくお願いいたします。 -
codepenのサンプルでも同様のことが起こっていますか？
ちなみにMacintoshのSafariも案外曲者ですよ(笑)
firefoxやchromeだったら上手く見える可能性はあります。
まぁすでに試されていてfirefoxやchromeでも同様に落ちる場合はcssに何かしら不備があるわけですけれども。サイドバーの中身が落ちるのは、色々と原因が考えられますがfloat:rightしてある要素の実際の幅が不足していて表示できずに下に落ちているように見ているのではないかなぁと思います。
そこにサイドバーはあるのに幅が足りない？と疑問に思われるでしょうが、そういうのがあるのがfloatなんです(笑)兎にも角にもこのfloatというのは扱いが難しいんです。なんせ浮いちゃってますから、高さを持っていませんし使い勝手がとても悪いんです。
スクロール追従を使用しないようにすればflexを利用するのが一番正しく表示できるわけですが、現物がどうなっているかを見ながらでないと、こうすれば直るというのは回答するのは困難かと思います。
寝ログでcloud9を利用したwordpressのインストールとかが書いてあったんで、それらを利用して中の記事は適当に、何かしら外部からどうなっているかを見る方法を探してもらえないでしょうか？
どうなっているかの想像は付きますが、何がどういう理由でそうなっていかまではわからないので。
-
Hidekichiさん、
>codepenのサンプルでも同様のことが起こっていますか？
好みにカスタマイズする前の、Hidekichiさんが書かれたスタイルそのままでもサイドバー内で要素が底へ落ちています。
また、Firefoxで見たところ、私がカスタマイズする前のサンプルそのままでも、メインカラムが横一杯に広がって右カラムは最初から落ちた状態で、カスタマイズしてメインカラムの幅を狭めたあと、ブラウザの幅を広くした状態でも右カラムは落ちたままです。Firefoxの場合、私が使っているモニタは20インチのものですが、画面一杯にブラウザの横幅を拡げても落ちたままです。
画像の幅がメインカラムの幅に合わせて拡大される問題についても合わせてご検討いただきたくお願いいたします。
使用しているレンタルサーバーのひとつで、空いているスペースとMySQLを使って独自ドメインを割り振らずにテストしています。Hidekichiさんにご確認いただいたあとで私の投稿を消していただけるのでしたら、URLをお教えしてもかまわないのですが……。 -
>>codepenのサンプルでも同様のことが起こっていますか？
これは、codepen上でと言う意味合いです。サンプルを適用した利用されているサイトのではなく、現在の利用されているブラウザでcodepenのサンプルを見た時にサイドバーが落ちているかどうかです。
-
#36003
hidekichiさんがURLを確認次第、URL部分は削除しますよ。
実際のものを見てみないと、何ともわからないところもあると思うので。
すぐには、削除できないかもしれませんが、多分一日内には削除できると思います。 -
calcで#mainの幅を計算する方を子テーマstyle.cssに丸ごとコピペすることで動作するのを確認しました。
確認サイト: blazechariot-cloud9-
寝ログの記事でcloud9が進化しているというのが書いてあったので、試したついでにwordpressを入れて、Simplicity2.0.5と子テーマを入れ、それ以外のスタイル(※)とかはは無しの状態です。
※ 追加で何かしらのcssを書いたというのではなく、Simplicityのデフォルトの状態にcodepenのcssを適用すれば動作すると言う意味合いです。確認自体はFirefoxでしてます。しばらくはクラウドを動かしっぱなしにするかと思いますが、たまに停止しているかも知れませんのでそこらはご了承下さい。
また、違う質問などでテストとして何かしらをクラウド上に実装するかも知れないので、その際にこのレスの内容が実装されていない場合もあります。時間がたってからこのレスを見られた方はリンク先が必ずしもこのトピックの内容では無いかも知れないというのを予め報告させて頂きます。
-
codepenの方はひとまず消す理由がない場合はそのままにしてあると思うので、いつでの参照できると思います。
#36049の「時間がたってからこのレスを見られた方…」うんぬんはcloud9上の内容についてです。 -
わいひらさん、お気遣いありがとうございます。Hidekichiさんがこちらのテストを確認されたい場合にはURLを出しますので、その時はよろしくお願いいたします。
Hidekichiさん、
codepenのほうは、こちらのブラウザではどれだけ横幅を拡げても右カラムがずれて落ちた状態に見えますが、サイドバー内の要素は下に落ちていません。
こちらのテストでは今のところ、サイドバーの幅を弄らなくても、要素が底に落ちた状態になります。 -
なんか原因がわかったような気がしたので、一度試してみて下さい。
ちょっとだけ親テーマをいじるので、元に戻せるように、該当ファイルのバックアップを取るか、わけがわからなくなったら新規で親テーマをインストールできるように、子テーマ側をバックアップしておいて下さい(子テーマをやむなしに削除しなくてはいけない場合に備えて。通常は親テーマだけ再インストールできると思うんですけど念の為)。親テーマheader.phpの部分ですが、11行目あたりに
[meta charset=[?php bloginfo(‘charset’); ?]]
こういうのがあります。の後に、
<?php //ビューポート //モバイルもしくはページキャシュモードの時 if ( is_mobile() || is_page_cache_enable() ): ?> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <?php else: ?> <meta name="viewport" content="width=1280, maximum-scale=1, user-scalable=yes"> <?php endif ?>こういうのがあります。モバイルの時にviewportを変更するものですが、これを常に、
[meta name=viewport content=width=device-width,initial-scale=1.0]
こちらにします。(※ クォートはわいひらさんの修正が入るまでコード化しているのでとってあります〈〉も同様に[]にしてあります)元々のスクリプトの意味は、モバイルの時には、width=device-widthにしてそれ以外はviewportをwidth=1280にするものです。しかし、viewportはデバイスの幅にしておけば特別問題ないので(※)、常にwidth=device-widthにしておけば良いかと思います。
※カスタマイザーの設定が一部アレかも知れませんけど、まぁ大丈夫です。問題があるとしたらズームやらができなくなることでしょうか。いや、PCとかならできると思うんですけども、スマホやらだけかな？
と言うことで、[meta name= viewport content=width=evice-width,initial-scale=1.0]の方をコピペして、meta charsetの下にペーストします。
この画像のような感じです。コピペ後「ついか」のようにしてPHPをコメントアウトします。
/* ...省略... */こんな感じです。半角英数字で。現在: blazechariot-cloud9-では、上記内容が適用してあります。一応chromeで確認しましたがイケました。でchromeでいけるということはfirefoxでももちろんイケますし、safariもwebkit系のブラウザなのでイケるかと思います。
当初、chromeでもいけましたが、ipadやら色々といじっていると、サイズがおかしいのに気が付きました。で、なんだろうこれ？って事で見てたらviewportに気がついた次第です。これら確認してみて下さい。
で、親テーマheader.phpですが、親テーマなので今後のアップデートの時にこのままだと、上書きされます。と言うことで、子テーマに修正したheader.phpをコピペすればよいのではなかろうかと思います。
もし子テーマにコピペして上手く行かない場合は、残念ながらアップデートのたびに同様の修正を行わなければならないことになります。(上手く行かない場合は、ひとまず子テーマにコピペしたheader.phpを削除して親テーマを元に戻します)子テーマにheader.phpに上記修正を施したファイルをコピペして、問題なく動作するのであれば、以降アップデートしてもheader.phpは子テーマのものが読み込まれることになります。
アップデートにより、header.phpに修正が行われた場合は、子テーマの方もその修正を追うか、無視するしか無いので、子テーマに移しても面倒臭いことには変わりないですが、どちらにせよ、これ(viewport)が原因でそうなっているのであれば、その部分を修正する必要があるということになります。
まぁおそらく何かしらでメタタグを追加できたりをfunctions.phpでできるのではないかと思うので、僕はソッチの方を調べてみようかと思います。
Attachments:
-
追加情報
iphoneの新し目なバージョンでは、minimal-uiが利用できるということで、こやつを設定すると、iOSの上下に表示されるステータスバーが非表示になるとのことです。
-
> 元々のスクリプトの意味は、モバイルの時には、width=device-widthに
> してそれ以外はviewportをwidth=1280にするものです。
> しかし、viewportはデバイスの幅にしておけば特別問題ないので(※)、
> 常にwidth=device-widthにしておけば良いかと思います。この内容から、もしかすると、コピペしなくてもwidth=1280を1000に修正しても良いかも知れません。ここらは好みで。
-
- フォーラム「Simplicityについての質問」には新規投稿および返信を追加できません。