賢威でサイドバーの文字、色、背景、幅を変更する方法
賢威でサイドバーをカスタマイズする方法をご紹介します。
サイドバーは何かメインとなる項目を探す時などに
意識的にも無意識的にもかなり見られる部分です。
サイドバーに関する項目としては、
文字、見出し、背景、幅に関する設定を説明しますので、
この１記事でほぼ、賢威使用のサイドバーカスタマイズはある程度
できるのではないでしょうか。
では早速、順番に説明していきたいと思います。
目次
賢威サイドバーカスタマイズ
サイドバーとは２カラムでいえば、右側に表示される縦長のバーのことです。
１カラムのサイトには関係ないですが、１カラムよりも２カラムでサイトを作成していく
ことの方が一般的には多いかと思われます。
以下にそれぞれ賢威を使った際のサイドバーのカスタマイズ方法を
説明していますので必要な部分の設定を行ってください。
エラーが起こって直せなくなってしまっては困るので必ず作業に入る前には
元のソースは全部コピーしていつでも元に戻せる対策をとっておきましょう！
文字の大きさの変更方法
外観→テーマ編集→design.cssを開きます。
中間辺りにサブコンテンツ／サイドバーという項目があるので、
まずはそこの部分を探します。
上記画像の部分の１．２emと記述してある部分があると思います。
こちらの数字を変更することでサイドバーの文字の大きさが変更できます。
メインコンテンツ部分の文字の大きさとのバランスを考えて
設定した方がいいかもしれませんね。
メインコンテンツ部分の文字の大きさや行間の設定については下記リンクで
書いていますので参考にしてください。
背景色を変更する方法
外観→テーマ編集→design.cssの中に
サブコンテンツ／サイドバーの項目があります。
上記画像の示す部分にコードを付け足すことで背景色がつきます。
記述するコードは下記で説明します。
こちらに記述するコードは
background-color: 色コード
を入力します。カラーコードの部分は自分の好きな色を指定してください。
見出しの背景色を変更する方法
外観→テーマ編集→design.cssの中に
サブコンテンツ／サイドバーの項目があり、そのすぐ下にコンテンツという
項目があるかと思います。
上記画像の示す部分にコードを付け足すことで
見出しの背景色を変更することができます。
記述するコードは上記の背景色で示したコードと同じ
background-color: 色コード
を入力します。先程指定した色コードとは違う色コードにしなければ
背景色が一緒になってしまいますので注意してください。
コード挿入時の状態は上記画像のようになります。
この赤丸の部分に色コードを入力してください。
見出しの色を変更する方法
こちらも文字の大きさを変えた時と同様に外観→テーマ編集→design.cssを開きます。
中間辺りにサブコンテンツ／サイドバーという項目があるのでそちらを探します。
先程、文字の大きさを変更した部分のすぐ下あたりにコンテンツという部分があると思います。
コンテンツ内の下部の方にコードが書いてある部分があり、コード部分が
見出しのカラーコードの指定となっています。
こちらを変更することで見出しに関する設定ができるので見出しをカスタマイズしたい方は
ここの部分を設定してみてください。
幅の大きさを変更する方法
サイドバーの幅のカスタマイズに関しては
ダッシュボード→外観→テーマ編集→layout.cssを開きます。
その中で自分が使っているレイアウトの部分の項目を探してください。
私は２カラムなので２カラムレイアウトの中のソースを編集することとなります。
２カラムレイアウトの項目の下の方に上記画像のような部分があるので探して
ください。
私のサイトは元々、全体のサイト幅を限界値まで大きくしています。
そして、px指定をしているため、赤枠で囲んだ部分が３００pxと８００pxと
表示されていますが、デフォルトの状態では２９．５％、６６．８％といったように
％表示がされていたと思います
その場合はそのまま％の数字を変えてみてください。
すると普通は変更されるはずなのですが、
それでも変更できない場合は、私みたいにpxでの表示としてみてください。
注意しておきたい点としては、上下の％数字は合計が９６．３％になるように
設定することが重要となってきます。
まとめ
サイドバーの文字の大きさ、背景色、見出し、幅に関する設定を説明しました。
サイドバーはとても見られやすい部分なので見やすくなるようにカスタマイズ
することは非常におすすめです。
カスタマイズの際に注意したい点としては、
メインコンテンツ部分とのバランスを考えて設定することが重要です。
メインコンテンツ部分がそこまで目立たない配色なのにサイドバーだけ
かなり目立つ、メインコンテンツ部分よりも文字が大きい…
などのアンバランスな設定は極力しないようにしておきましょう！
