質問編集履歴

2 コードの書き換え

mokemoke

mokemoke score 44

2019/02/01 15:42  投稿

STINGER PLUS2のサイドバー・記事エリアのサイズ変更
WordPressで無料テーマ「STINGER PLUS2」をカスタマイズしながらサイトを作っております。
デフォルトではサイドバーの幅が広く、記事ページ・固定ページの幅が狭く感じるので、サイドバーを幅を狭くして
記事ページ・固定ページの幅を広げたいと思っております。
まずはstyle.cssの「PCのレイアウト(左サイドバー)」の部分のwidthの値を変えながら確認しておりますが、
見た目余り変化が無く、どの様に変えるのかが良く判りません。
とりあえずstyle.cssの「PCレイアウト(左サイドバー)」のところを以下の様に変えてみましたが、
特に変化がありませんでした。
```style.css(変更前)
```CSS
       style.css(変更前)
   /*--------------------------------
   PCのレイアウト(左サイドバー)
   ※st-kanricss.phpで制御されています
   #contentInner {
       float: right;
       width: 100%;
       margin-left: -320px;
   }
   main {
       margin-right: 0px;
       margin-left: 320px;
       background-color: #fff;
       border-radius: 4px;
       -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
       padding: 30px 50px 30px;
   }
   #side aside {
       float: left;
       width: 300px;
   ---------------------------------*/
```
```style.css(変更後)
```CSS
       style.css(変更後)
   /*--------------------------------
   PCのレイアウト(左サイドバー)
   ※st-kanricss.phpで制御されています
   #contentInner {
       float: right;
       width: 60%;/* 100 --> 60 */
       margin-left: -220px;/* -320 --> -220 */
   }
   main {
       margin-right: 0px;
       margin-left: 220px;/* 320 --> 220 */
       background-color: #fff;
       border-radius: 4px;
       -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
       padding: 30px 50px 30px;
   }
   #side aside {
       float: left;
       width: 200px;/* 300 --> 200 */
   ---------------------------------*/
```
次にstyle.cssのコメント「st-kanricss.php」を確認した所、「PCのレイアウト(左サイドバー)」の箇所があり、
こちらを同じように変えてみたところ、サイドバーの幅は狭くなりましたが、合せて記事エリアの幅も狭くなって
しまいました。(サードバーと記事エリアの間隔が広くなった)
```st-kanricss.php(変更前)
```PHP
       st-kanricss.php(変更前)
   /*--------------------------------
   PCのレイアウト(左サイドバー)
   ---------------------------------*/
   #contentInner {
       float: right;
       width: 100%;
       margin-left: -320px;
   }
   main {
       margin-right: 0px;
       margin-left: 320px;
       background-color: #fff;
       border-radius: 4px;
       -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
       padding: 30px 50px 30px;
   }
   #side aside {
       float: left;
       width: 300px;
       padding: 0px;
   }
```
```st-kanricss.php(変更後)
```PHP
       st-kanricss.php(変更後)
   /*--------------------------------
   PCのレイアウト(左サイドバー)
   ---------------------------------*/
   #contentInner {
       float: right;
       width: 60%;/* 100 --> 60 */
       margin-left: -220px;/* -320 --> -220 */
   }
   main {
       margin-right: 0px;
       margin-left: 220px;/* 320 --> 220 */
       background-color: #fff;
       border-radius: 4px;
       -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
       padding: 30px 50px 30px;
   }
   #side aside {
       float: left;
       width: 200px;/* 300 --> 200 */
       padding: 0px;
   }
```
PHPに関して余り詳しくない為、アドバイス等を頂けると非常に助かります。
よろしくお願い致します。
  • WordPress

    15691 questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

1 試してみた内容とコードを追記

mokemoke

mokemoke score 44

2019/02/01 15:39  投稿

STINGER PLUS2のサイドバー・記事エリアのサイズ変更
WordPressで無料テーマ「STINGER PLUS2」をカスタマイズしながらサイトを作っております。
デフォルトではサイドバーの幅が広く、記事ページ・固定ページの幅が狭く感じるので、サイドバーを幅を狭くして
記事ページ・固定ページの幅を広げたいと思っております。
まずはstyle.cssの「PCのレイアウト(左サイドバー)」の部分のwidthの値を変えながら確認しておりますが、
見た目余り変化が無く、どの様に変えるのかが良く判りません。
アドバイス等を頂けると非常に助かります。
よろしくお願い致します。
とりあえずstyle.cssの「PCレイアウト(左サイドバー)」のところを以下の様に変えてみましたが、
特に変化がありませんでした。
```style.css(変更前)
   /*--------------------------------
   PCのレイアウト(左サイドバー)
   ※st-kanricss.phpで制御されています
   #contentInner {
       float: right;
       width: 100%;
       margin-left: -320px;
   }
   main {
       margin-right: 0px;
       margin-left: 320px;
       background-color: #fff;
       border-radius: 4px;
       -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
       padding: 30px 50px 30px;
   }
   #side aside {
       float: left;
       width: 300px;
   ---------------------------------*/
```
```style.css(変更後)
   /*--------------------------------
   PCのレイアウト(左サイドバー)
   ※st-kanricss.phpで制御されています
   #contentInner {
       float: right;
       width: 60%;/* 100 --> 60 */
       margin-left: -220px;/* -320 --> -220 */
   }
   main {
       margin-right: 0px;
       margin-left: 220px;/* 320 --> 220 */
       background-color: #fff;
       border-radius: 4px;
       -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
       padding: 30px 50px 30px;
   }
   #side aside {
       float: left;
       width: 200px;/* 300 --> 200 */
   ---------------------------------*/
```
次にstyle.cssのコメント「st-kanricss.php」を確認した所、「PCのレイアウト(左サイドバー)」の箇所があり、
こちらを同じように変えてみたところ、サイドバーの幅は狭くなりましたが、合せて記事エリアの幅も狭くなって
しまいました。(サードバーと記事エリアの間隔が広くなった)
```st-kanricss.php(変更前)
   /*--------------------------------
   PCのレイアウト(左サイドバー)
   ---------------------------------*/
   #contentInner {
       float: right;
       width: 100%;
       margin-left: -320px;
   }
   main {
       margin-right: 0px;
       margin-left: 320px;
       background-color: #fff;
       border-radius: 4px;
       -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
       padding: 30px 50px 30px;
   }
   #side aside {
       float: left;
       width: 300px;
       padding: 0px;
   }
```
```st-kanricss.php(変更後)
   /*--------------------------------
   PCのレイアウト(左サイドバー)
   ---------------------------------*/
   #contentInner {
       float: right;
       width: 60%;/* 100 --> 60 */
       margin-left: -220px;/* -320 --> -220 */
   }
   main {
       margin-right: 0px;
       margin-left: 220px;/* 320 --> 220 */
       background-color: #fff;
       border-radius: 4px;
       -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
       padding: 30px 50px 30px;
   }
   #side aside {
       float: left;
       width: 200px;/* 300 --> 200 */
       padding: 0px;
   }
```
PHPに関して余り詳しくない為、アドバイス等を頂けると非常に助かります。
よろしくお願い致します。
  • WordPress

    15691 questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る