ご返信ありがとうございます。
その項目ではサイドバー自体の幅の変更はできないようです。
サイドバー内の空白幅変更のオプションでした。
CG
(@du-bist-der-lenz)
そのとおりですよ。実用上をよく考慮された30px、20pxですね。モバイルサイドバーを表示せず、PCビューベースでレスポンシブも考慮しない方向でしょうか。それはアドオンの恩恵を放棄して詳細設定の追加CSSで行いましょう。
.col-3cm .main-inner {
padding-left: 300px;
}
.col-3cm .sidebar.s1 {
margin-left: -300px;
}
.sidebar.s1 {
width: 300px;
}
@media only screen and (max-width: 960px) and (min-width: 480px) {
.col-2cr .main-inner, .col-3cm .main-inner {
padding-left: 50px !important;
}
.col-3cm .s1.collapsed {
margin-left: -50px;
}
.s1.collapsed {
width: 50px !important;
}
}
@media only screen and (max-width: 479px) {
.content, .sidebar[class*=s] {
width: 100% !important;
}
}
とりあえず無理やりこんな実装すれば幅自体を変えることは出来るんですけど、このままだとタブレット表示でサイドバーの出る位置がおかしくなります。 (治すには JS をいじる必要あり)
あまり現実的とも言えないし、全く想定されてないカスタマイズっぽいので、あまりおすすめは出来ないです
CG様
Mirucon様
ご返答ありがとうございます。
自分なりにカスタマイズをしてみても、
ご指摘の通りタブレット端末での表示時の異常に対処できない為
サイドバーの幅の変更は控えます。
CG
(@du-bist-der-lenz)
サイドバーの幅を変えなければならない、必要がわからないのがなんともなところです。
CG
(@du-bist-der-lenz)
カスタマイズ以上の改造をしてまで目標としたことは、測りかねましたが Hueman テーマの変更は加えず、機能を使ってサイドバーでなく、ウィジェット幅を大きくしたページを作りました。今日はそのままにしています。
https://wp.me/P92sOc-12
ご返信ありがとうございます。
モデルサイトをご提示頂き大変恐縮しております。
また、私の説明不足があり誠に申し訳ございません。
私の目的はサイドバーの幅の縮小し、幅1280pxのモニターで閲覧時におけるメイン部分のスペースを確保する事でした。
というのも自サイトに訪問するPCユーザーのモニター幅は1280Pxである事が多く、
Hueman 3カラムでデザインされたサイトを1280pxで閲覧すると、メイン部分が圧縮され見にくい印象を持ちました。
その為左右サイドバーの幅を50pxずつ削り、メイン部分のスペースを少しでも確保したいと考えました。
デフォルトの1380pxで最適化されたデザインである事は承知しておりますが、
多数派の訪問客に合わせることができないかと模索した次第です。
しかし頂いたアドバイス等を参考にカスタマイズして、一応の幅の縮小はできても、
特にタブレットで表示時のエラーが解消できない等により、
これもアドバイス通り断念致しました。
この度は大変お世話になりました。
重ねて御礼申し上げます。
CG
(@du-bist-der-lenz)
午後の合間合間に手直ししました。PC向けのコンテナー幅1280pxに固定するのもHuemanアドオンで指定できますね。3カラムで左右サイドバーの幅を50px小さくするという動機と具体的な条件がわかってよかったです。明確な目標があるのですから、最初に前提として提示しましょう。サイドバーにはウィジェットやバナーを貼るケースが多いので、理想といわれる250pxを考慮されていて、Huemanテーマは設計されているのでしょう。コンテンツ幅が窮屈に感じられるケースも、サイドバーの余白で対処しようということだと、今回色々試していて発見がありました。コンテンツの文字サイズを変えたり、読みにくいと思われるものはサイドバーを一つにしたり、取り払うことで対応できるのではないでしょうか。さて両サイドバーがそれぞれ、３カラムで設計されているので、両サイドバーを２カラム同等でデザインしています。比較できるように、上下で分けました。作業はブレークポイントを1280pxにすればよいかと思ってとりかかりましたが、最大幅を1280pxに固定して、縦３分割で２：６：２に配置をなおしました。タブレットを縦にした時に、全幅で揃うはずです。
