【注意】このMASAa.netはWordPressテーマ Cocoonを使用しており、THE THORはZMASAa.blogで使用中です。クリックするとZMASAa.blogを開きます。
WordPressCocoon

【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の記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

……… THE THOR(ザ・トール)購入について ………
下記バナーからTHE THOR(ザ・トール)をご購入の方には、
当掲載のカスタマイズについて優先的にサポートさせて頂きます。

下記バナー経由でTHE THOR(ザ・トール)を購入した日付と時刻
を合わせてお問い合わせフォームからご連絡下さい。



気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
空島クロニクル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
MU:アークエンジェル
Cave Shooter
イース6オンライン
ザ・アンツ
リネージュ2M
クッキーランキングダム
ドラゴンとガールズ交響曲
魔剣伝説
パズにゃん
ブレイドエクスロード

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

MASAa.net

コメント