Wordpress横スクロール - CSSで可能ですか？

Question

テーマのCSSを修正して、Wordpressの水平スクロールを可能にすることはできますか？

コンテンツコンテナは非常に幅広く設定する必要があると私は考えていますか？コンテンツコンテナは、まだ私のテーマのラッパー幅に含まれる必要があります。ここで

が私のテーマからCSSコーディングです：

#wrapper{width: 90%; max-width: 980px; margin: auto;} 

#header-container{max-width: 95.918367%; padding: 2.127660%; margin: 0px auto 20px; background: #fff; border-bottom: 1px solid #ddd;} 

#content-container{padding: 0px; margin: 0px auto 20px; background: #fff; border-bottom: 1px solid #ddd;} 

#left-column{float: left; width: 63.265306%; padding: 20px 2.040816%;} 
#right-column{float: right; width: 28.265306%; padding: 20px 2.040816%; border-left: 3px solid #f0f0f0;} 

.portfolio #left-column{float: left; width: 69.387755%;} 
.portfolio #right-column{float: right; width: 22.142857%; border-left: 3px solid #f0f0f0;} 

#full-width{padding: 20px 2.127660%; margin: auto;} 

#footer-container{margin: 0px auto; padding: 0px; background: #293037; overflow: hidden;} 

.post-image img{width: 100%; height: auto;} 

これが不可能な場合は、あなたがすべてのワードプレスでこれを作成する必要があります他の提案があるのですか？ http://www.gouldevans.com/portfolio/ku-debruce-center 私はスクロールしてもページ全体を占めてはいけませんが、スクロール情報が何らかのフレーム内に収まるようにしたいのですが、私はこのサイトと同じようにスクロールするサイトを作ろうとしています。

すべての情報をお待ちしております。

Answer 1

質問に答えるには... はい、Wordpressでこれを行うことができます。またはCSSを編集できる他のHTML/CSSベースのアプリケーション。

概念は非常に簡単です：

1. あなたがscrollとビューポートの100%のwidthに設定overflow-xプロパティを持つラッパーの容器を持っています。
2. コンテンツの幅がビューポートより大きい内部コンテナがあります。

このシナリオでは、ラッパーの水平スクロールバーが有効になります。あなたはWordpressの構造とCSSに同じ概念をかなり簡単に適用することができます。 私はの下に整えられた例を提供しました。

警告：

• overflow-xあなたは あなたは別のアプローチを取ることになるでしょうCSS3をサポートしていないブラウザをターゲットにしているので、もしCSS3プロパティです。
• 私はWordpressのテーマを直接変更しないでお子さんのテーマを作成し、それを使ってstyles.cssファイルを上書きすることをお勧めします。さもなければ、あなたのテーマをアップグレードするときに、将来合併症に直面します。それはかなり簡単なプロセスであり、簡単なGoogle検索で簡単に見つかります。

幸運！

.wrapper { 
 
    width: 100%; 
 
    overflow-x: scroll; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.container { 
 
    width: 2000px; 
 
    
 
} 
 

 
img { 
 
    float: left; 
 
}

<div class="wrapper"> 
 
    <div class="container"> 
 
    <img src="http://fillmurray.com/200/200" /> 
 
    <img src="http://fillmurray.com/200/200" /> 
 
    <img src="http://fillmurray.com/200/200" /> 
 
    <img src="http://fillmurray.com/200/200" /> 
 
    <img src="http://fillmurray.com/200/200" /> 
 
    <img src="http://fillmurray.com/200/200" /> 
 
    <img src="http://fillmurray.com/200/200" /> 
 
    <img src="http://fillmurray.com/200/200" /> 
 
    <img src="http://fillmurray.com/200/200" /> 
 
    <img src="http://fillmurray.com/200/200" /> 
 
    </div> 
 
</div>