「シンブログ」ヘッダー サイズの調整（ベーシック系）

当サイトは、「シンクラウド株式会社」が提供するブログサービス「シンブログ（旧wpXブログ）」を使用しています。シンブログでは、機能が制限されたWordPressを利用することが可能です。

例えば、「指定されたテーマ以外をインストール出来ない」といった制限があります。ただし、提供されているテーマのデザインは完成度が高く、管理人のお気に入りは「ベーシック – ブラウン」です。ただ1点、ヘッダーメニューのサイズの大きさが気になったので、CSSで調整しています。

ベーシック　ヘッダーメニュー サイズの調整

ヘッダーメニューのサイズを調整するには、下記のCSSコードを追加で入力します。このコードは、「ベーシック – ○○」系のテーマであれば動作すると思われます。

※コメントアウトは削除して問題ありません。

/******************
 ヘッダーの設定
******************/
:root {
  --header-height-desktop:240px; /*PC環境でのヘッダーサイズ*/
  --header-height-mobile:190px; /*モバイル環境でのヘッダーサイズ*/
}

.header .headerImage {
  min-height: var(--header-height-desktop);
  width: 100%;
}

.header .headerImage img {
  height: var(--header-height-desktop);
}

.header .headerImage + .siteInfo {
  bottom: 70px;
  left: 60px;
  background-color: transparent;
}

/* モバイル対応 */
@media (max-width: 991.98px) {
  .header .headerImage {
    min-height:  var(--header-height-mobile);
  }

  .header .headerImage img {
    height:  var(--header-height-mobile);
  }

  .header .headerImage + .siteInfo {
    top: 30%;
    left: 15px;
  }
}

CSSの追加は、「WordPress管理ページ」→「外観」→「カスタマイズ」→「追加CSS」から可能です。

ヘッダーサイズの変更

ヘッダーの高さを変更したい場合は、以下の部分の数値を編集します。

:root {
–header-height-desktop:240px; /*PC環境でのヘッダーサイズ*/
–header-height-mobile:190px; /*モバイル環境でのヘッダーサイズ*/
}