メインカラムの位置を上下方向に移動させる

Cocoon
スポンサーリンク

この記事ではWordPress無料テーマCocoonのメインカラムとサイドバーの位置を上下方向にずらす方法を説明しています。

メインカラム、サイドバーを上にずらす

実行環境 Windows8.1

記事概要

Cocoonのメインカラムとサイドバーの位置を上下方向にずらすには「外観」→「カスタマイズ」→「追加 css」と進み「追加 css」にcssコードを記述します。

スポンサーリンク

方法

WordPress管理画面の左カラムから「外観」→ 「カスタマイズ」をクリックします。

外観→カスタマイズをクリック

左カラムで「追加 css」をクリックします。 

追加cssをクリック

cssのエディタが開きます。

cssエディタが開く

以下のコードをエディタに貼り付けます。

.main {
  top: -20px;
  position: relative;
}

.sidebar {
  top: -20px;		
  position: relative;
}	

.mainの直後の括弧がメインカラムについての指定で、.sidebar直後の括弧がサイドバーについての指定です。

メインカラム、サイドバーのそれぞれについて top: -20; とすることでメインカラム、サイドバーの位置を20px上に移動させます。 

メインカラム、サイドバーを上に20pxずらす

メインカラム、サイドバーの底辺の位置もそれぞれ上に20px移動しています。

メインカラム、サイドバーのそれぞれの底辺の位置も上に20px移動する

下にずらしたいときは top; 30px; のように正の数にします。 

下の画像はメインカラムだけ下へ30pxずらしたものです。 

メインカラムだけ下へ30pxずらす

この記事は以上です。