ファンブログのサイドバーの見出しを変更しよう

更新日:

みなさん、こんにちは!

 

ファンブログのタイトルと背景のカスタマイズの続き、

サイドバーの見出し部分の変更に挑戦してみようと思います!

 

サイドバーの背景をオリジナル画像にしよう

サイドバーの背景になる画像を用意します。

今回は元のサイドバーから、

デザインを変えて縦の高さも大きくしました

 img_blogmenu_01

 

この画像をブログアップします。

アップしたら画像のurlをコピーします。

(※一旦記事に挿入をしてみるとurlが確認できますよ!) 詳しくはこちら

 

次に、デザイン設定>カスタマイズしたいテンプレートCSSの編集に移ります。

 img_blogmenu_02

 そして、テンプレートのナチュラルコスメのデザインでは、

ここのサイドタイトル部分の背景に画像urlを指定します。

 img_blogmenu_03

 するとこうなります♪

 img_blogmenu_04

 

背景が変わりましたね。でも、高さが足りなくて背景が切れてます。

なので、サイドバーの高さを調整してあげましょう。

 img_blogmenu_05

 

このように、height(高さ)を指定しました。

なぜheight(高さ)25pxを指定したかというと、paddingが関係しているためです!

今回の例では35pxの高さがある画像を表示させたいのに、テンプレートは24pxしか表示しません。
どうやって24pxを表示させているかというと、文字の高さ+上下に5px分ずつ余白(padding)を指定しているのです。

 img_blogmenu_06

 絵のようにpaddingは領域内のスペースのことです。

そして、padding:5px;は padding:5px 5px 5px 5px; と同じ意味ですので、

この例では上下に、5pxずつ合計10px余白が入っていると分かります。

そのために、必要な高さが35pxの場合、paddingの10pxを抜いた25pxで高さを指定すればぴったりになります!

 img_blogmenu_07

 これで背景をカスタマイズできました!!

でも、背景に文字が被っていて、読みづらいですね。

なので、次のスタップで文字の位置と色を変えてみましょう。

 

サイドバーの文字の位置と色を変えよう

今度はサイドバーの文字の位置と色を調整します。

調整はpaddingで行います。

 img_blogmenu_08

 

絵のように、上、下、左部分に余白の数を変更しました。

ここで重要なことは、先にも言及した上、下のpaddingの合計により、

高さを変更してあげないといけないことです。

例では、文字が表示される場所を

さらに下へ7px、右へ30px動かすことにします。

なので、paddingにそれぞれの数値を足して記入します。

padding:5px 5px 5px 5px;

padding:12px 5px 0 35px;

背景画像は35px表示させたいので、
paddingとheigntの合計を35pxになるよう調整します。

 

 img_blogmenu_09

 

いい感じになりましたね♪では、文字の色変更です。

 img_blogmenu_10

上の色の部分を指定すればOKです!

 img_blogmenu_11

 完成しました!是非チャレンジしてみてくださいね。

 

 

ファンブログについてもっと詳しくはこちら

stepup_fanblog_375x55

 

A8.netの会員ではない方はこちらをチェック!

A8スタッフブログで紹介しているコンテンツは、会員様向けです。
会員ではない方は、セルフバックやその他サービスをご利用できません。

-デザインテクニック

特集

  • かに特集
  • ブラックフライデー特集
  • 年賀状特集
  • お歳暮特集
  • スキンケア特集
  • インスタ映えアイテム特集
  • おせち特集

当ページに掲載している情報・画像などの複写・転載は禁止しております。

Copyright© A8スタッフブログ , 2020 All Rights Reserved Powered by STINGER.

ページのトップへ