アルバトロスの記事とサイドバーの幅を超簡単に広げるカスタマイズ方法

albatros-customize01

アルバトロスは当サイトで使っているテンプレートです。

ブロガーに人気のテンプレートですが、使っているとカスタマイズしたくなる箇所が結構出てきます。

ぱっと見で気になるのが、幅がちょっと狭い!アルバトロスはデフォルトでは1100pxです。
もうちょっと幅広のテンプレートがpcで見た場合にちょっと欲しくなってきます。(スマホはいいんですけどね)

今回は記事とサイドバーの幅を超簡単に広げるカスタマイズ方法を備忘録として書いておきますので参考にしてみてください。

全体の幅をCSSで編集する

まず外観のテーマ編集から「スタイルシート (style.css)を選択します。

1100px」をコピペして任意の位置を探してください。

【変更前】

/*********************
DESKTOP ONLY
*********************/
@media only screen and (min-width: 1100px) {
  .wrap {
    width: 1100px; }
  .cta-inner{
    padding: 1em 2em;
  }
}

「min-width: 1100px」というのが全体のサイト幅になります。

これをいじるので、「min-width: 1100px」を任意のサイズに変更しましょう。
今回は「max-width: 1250px」にしてみます。

「min-width: 1100px」が2カ所あるので「max-width: 1250px」に直します。

【変更後】

/*********************
DESKTOP ONLY
*********************/
@media only screen and (min-width: 1250px) {
  .wrap {
    width: 1250px; }
  .cta-inner{
    padding: 1em 2em;
  }
}

これだけで簡単に修正出来ていると思うので確認してみてください。

 

さらに記事幅とサイドバーの幅もカスタマイズする

そして、記事幅やサイドバーの幅も簡単に変更出来ます。

スタイルシート (style.css)から、下記の部分を探します。

「デスクトップの時だけグリッドシステムを使わない」をコピペして任意の位置を探してください。

メインカラム、サイドバー、1カラムの幅の割合を設定出来ます。

【変更前】

/* デスクトップの時だけグリッドシステムを使わない */
  #main{
    width: 65.454545%;
    padding-right: 0;
  }
  .page-full #main{
    width: 100%;
  }
  .page-full .hentry header {
    padding:1.5em 4em;
  }
  .page-full .entry-content {
    padding: 1.8em 4em 4em;
  }
  #sidebar1{
    width: 30.545455%;
    float:right;
  }

「#main{ width: 65.454545%;」と書いてある部分が記事幅の割合です。
全体の約65%ということです。

サイドバーの割合は、「#sidebar1{width: 30.545455%;」と書いてある部分です。

65.454545+30.545455で足すと96になるので4%が余白になっています。

この数値をいじる事で自由に記事幅とサイドバーの幅をカスタマイズする事が出来ます。

【変更後】

/* デスクトップの時だけグリッドシステムを使わない */
  #main{
    width: 70%;
    padding-right: 0;
  }
  .page-full #main{
    width: 100%;
  }
  .page-full .hentry header {
    padding:1.5em 4em;
  }
  .page-full .entry-content {
    padding: 1.8em 4em 4em;
  }
  #sidebar1{
    width: 27%;
    float:right;

 

各自、任意の数値に変更してみてください。

この数値は当サイトの数値です。

 

検索フォームの幅も広げてサイドバーに合わせる

トップにある検索フォームもサイドバーの幅に合わせて修正しました。

デフォルトだと小さくて、検索しようと考えている人が見つけにくい様に感じます。

現在だとこんなかんじ。

albatros-customize01-1

検索フォームも、スタイルシート (style.css)から調整出来ます。

「デスクトップの時だけグリッドシステムを使わない」をコピペして任意の位置を探してください。

メインカラム、サイドバー、1カラムの幅の割合を設定出来ます。

【変更前】

/* サイドバーの検索フォーム調整 */
  .subnav form{
    width:210px;
    float: right;
    }

「width:210px;」と書いてある210が検索フォーム幅です。

これを任意の数値にします。当サイトだと325px位がちょうど良いので変更しました。

【変更後】

/* サイドバーの検索フォーム調整 */
  .subnav form{
    width:325px;
    float: right;
    }

 

広くなりました。

albatros-customize01-2

 

以上で終了です。

 

まとめ

いかがでしたでしょうか?

『アルバトロス』はかなりCSSが分かりやすく作ってあるのでカスタマイズも簡単です!

テンプレートが気になったらチェックしてみてくださいね。

「アルバトロス」WordPressテーマ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です