横幅が増やせるようにして欲しい

Simplicityの特徴 フォーラム 要望・機能追加など 横幅が増やせるようにして欲しい

このトピックには4件の返信が含まれ、2人の参加者がいます。1 年、 9 ヶ月前 GGG さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #56179 返信

    GGG

    本文部分の横幅が狭く感じるので横幅を選べるようにして欲しいです
    横幅を弄るとレイアウトが崩れる可能性もあると思うので任意の数値ではなく固定値で構わないので選べると嬉しいです
    普通(本文+0px)
    大きい(本文+100px)
    もっと大きい(本文+200px)
    など
    ご検討頂けたら嬉しいです、よろしくお願い致します

  • #56182 返信

    かうたっく

    横幅を弄るとレイアウトが崩れる可能性もあると思うので任意の数値ではなく固定値で構わない

    この件についてですが、レイアウトを崩さないことを考慮したスタイルは以下です。
    ※コピペする場合、子テーマのstyle.css、/* Simplicity子テーマ用のスタイルを書く */の真下に追記。

    大きい(本文+100px)

    div {
    	max-width: 100%;
    }
    /*header画像*/
    #site-title a img {
    	width: 1170px;
    	height: auto;
    }
    /*サイドバーが表示されるときの横幅*/
    #header-in, #navi-in, #body-in, #footer-in {
    	width: 1170px;
    }
    /*コンテンツが表示される領域:再度バーの左側の幅*/
    #main {
    	width: 840px;
    }
    /*画面サイズが最大1210pxまでの表示*/
    @media screen and (max-width: 1210px){
    	div#header-in, div#navi-in, div#body-in, div#footer-in{
    		width:840px;
    	}
    /*サイトタイトルとディスクリプションの左右外側余白を10px:不要なら消す*/
    	#site-title,
    	#site-description {
    		margin-right: 10px;
    		margin-left: 10px;
    	}
    /*PCビュー上部にあるSNSを消す*/
    	#header .alignright {
    		display: none;
    	}
    /*モバイル用メニュー*/
    	#mobile-menu{
    		display:block;
    		position:relative;
    	}
    /*PC用グローバルナビを消す*/
    	#navi ul {
    		display: none;
    		border: 0;
    	}
    }
    /*画面サイズが最大840pxまでのスタイル*/
    @media screen and (max-width: 840px){
    	#main{
    		padding-left:0;
    		padding-right:0;
    		border-width:0;
    		padding:10px;
    	}
    }

    もっと大きい(本文+200px)

    div {
    	max-width: 100%;
    }
    #site-title a img {
    	width: 1270px;
    	height: auto;
    }
    #header-in, #navi-in, #body-in, #footer-in {
    	width: 1270px;
    }
    #main {
    	width: 940px;
    }
    
    @media screen and (max-width: 1310px){
    	div#header-in, div#navi-in, div#body-in, div#footer-in{
    		width:940px;
    	}
    	#site-title,
    	#site-description {
    		margin-right: 10px;
    		margin-left: 10px;
    	}
    	#header .alignright {
    		display: none;
    	}
    	#mobile-menu{
    		display:block;
    		position:relative;
    	}
    	#navi ul {
    		display: none;
    		border: 0;
    	}
    }
    @media screen and (max-width: 940px){
    	#main{
    		padding-left:0;
    		padding-right:0;
    		border-width:0;
    		padding:10px;
    	}
    }

    基本親テーマの数値を変更しただけです。ただ横揺れしないよう作ってます。※完全レスポンシブに変更しても、下にスクロールバーが出ない。

    ※スマホビューをどのサイズからするかは、考慮一切してません。
    ※headerに画像を置いている場合、サイズが大きくなる毎に画像が汚くなる。横幅にあわせ作り直せば問題ないと思いますが

    導入されるか分かりませんが、されなかったときはコピペして、好きなように数値を変更して使ってください

  • #56183 返信

    かうたっく

    ※完全レスポンシブに変更しても、下にスクロールバーが出ない。

    完全レスポンシブがオフの場合でも、したにスクロールバーが出ない。一見すると完全レスポンシブ風になる。ってことでした。

  • #56190 返信
    わいひら
    わいひら
    キーマスター

    横幅を変更できるように設定として追加してしまうと、全ての設定に影響が出てしまう(不具合が出てしまう可能性がある)ため、現状では機能追加の予定はないです。
    申し訳ないですが、今のところ、自己責任で、カスタマイズしていただくしかないです。

  • #56199 返信

    GGG

    返信ありがとうございます
    やはり横幅を変更すると不具合が出る可能性もあるので難しいですね
    かうたっくさんが書いてくれたコードを参考にしてカスタマイズします、ありがとうございました

返信先: 横幅が増やせるようにして欲しい
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)