枠を横に並べるCSSコードを追加する方法

次は、枠を横に並べるCSSコードを追加する方法をします。

枠を横に並べるCSSコードを追加する方法

ワードプレスの管理画面を開きます。

左下の「外観」を押します。

左下の「外観」の下の「カスタムCSS」を押します。

一番下の行に移動します。
キーボードの「Enter」を押して、１行ふやします。

下記のCSSコードをコピーして、一番下の行に貼り付けます。

/*横並び枠*/
.float-hidari-waku {
  float:left; /*左よせ*/
  background-color:  #e9e9e9; /* 背景色指定 */
  padding:  20px; /* 余白指定 */
  height: 350px; /* 高さ指定 */
  width: 30%; /*横幅*/
  border: solid 1px gray; /*枠線*/
  margin-left: 3%; /*余白*/
  box-sizing: border-box; /*枠線はみだし対策*/
}
/*枠タイトル*/
.w-title{
  border-bottom: solid 5px red; /*タイトル下線*/
  font-size: 1.2em; /*タイトル文字サイズ*/
  font-weight:bold; /*タイトル太字*/
}
/*画像変更用*/
.float-hidari-waku img{
  width:100%; /*画像幅*/
  height:100px; /*画像高さ*/
  margin-top: 1em; /*余白*/
  border: solid 1px black; /*枠線*/
  margin-bottom: 1.2em; /*余白*/
  box-sizing: border-box; /*枠線はみだし対策*/
}

貼り付けました。

一番下の「カスタムCSSの更新」を押します。