【お知らせ】このサイトではWordPressテーマ Cocoonを採用しています。THE THORのカスタマイズ状況についてはZMASAa.blogをご参照下さい。
WordPress関連Cocoon

【Cocoon】サイドバーの位置をカスタマイズする

アイキャッチ画像 Cocoon
この記事は約2分で読めます。
スポンサーリンク

サイドバーの位置調整

「サイドバーの見出し」のカスタマイズに続いて、「サイドバーの位置」のカスタマイズについてまとめてみました。

テーマCocoonのサイドバーの位置

WordPressテーマ Cocoonの「サイドバー」はこのような感じになっています。

【WordPress】サイドバーの位置をカスタマイズする

特に問題はありません。

但し、今後色々とWordPressテーマ Cocoonを自分なりにカスタマイズするにつれて、サイドバーの位置が微妙に気になってくると思います。

そのための「サイドバーの位置」についてカスタマイズを行います。

サイドバーの位置調整カスタマイズ

今回サイドバーに対して位置調整を行うのは次の3箇所です。

  1. サイドバーの上側の空間
  2. サイドバーの下側の空間
  3. 縦幅(サイドバー全ての行の縦幅)

特に縦幅については、あまり広がりすぎても(自分的に)嫌なので狭めに設定しておきたいところです。

サイドバーの上下の空間については、左側のインデックスカラムに合わせて調整しておきます。

【WordPress】サイドバーの位置をカスタマイズする

カスタマイズ内容

「サイドバーの位置調整」のカスタマイズは、下記の通りです。

このカスタマイズ内容を「スタイルシート(style.css)」に追記します。

/************************************
** ■サイドバー カスタマイズ
************************************/
#sidebar .widget{
  margin-top:34px; /*サイドバー上隙間設定*/
  margin-bottom: 45px; /*サイドバー下隙間設定*/
  line-height: 120%; /*行の高さ指定*/
}

カスタマイズ後のサイドバー

今回のカスタマイズによって、「サイドバー」はこのようになりました。

【WordPress】サイドバーの位置をカスタマイズする

最後に

カスタマイズしても特に変わったようには見えないのですが、サイドバーをよく見ると

  1. サイドバーの上側の空間
  2. サイドバーの下側の空間
  3. 縦幅

の3箇所の長さ変わっています。

サイドバーの位置が気になる場合は試してみてください。

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

おすすめWordPressテーマ!
WordPressテーマ WING(AFFINGER6)
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver

下記バナーからスマホゲームのインストールお願いします!
ザ・グランドマフィア
少女ウォーズ
れじぇくろ! ~レジェンド・クローバー~
イース6 オンライン〜ナピシュテムの匣〜
極道のエデン
リネージュ2M
魔剣伝説
超次元彼女
ライフアフター
覇王の天下-戦略シミュレーション
グランドサマナーズ
The King of Fighters '98UM OL

MASAa.net

コメント