金利の変動

賢威6.1プリティーカスタマイズ トップメニューを上に移動させる。

賢威6.1のプリティーの場合、トップメニューがヘッダーの中に設定されています。

 

ちょっとカスタマイズをして、トップメニューをヘッダーの上に・・・
どうでしょう?
移動させる方法をご紹介しますね。

 

 

このブログでは、小さいカスタマイズをいくつかしています。
小さいことに、こだわらない方もいるかもしれませんが、
私は以外にこだわったりしちゃうんですね。

 

トップのメニュー(サイトマップね)
このトップメニューって、賢威5の時は、一番上にあったんですね。

 

 

賢威6.1になって、デフォルト(初期設定)では、ヘッダーの中に入っています。
こんな感じです。
 
2013y09m07d_103849786

 

ヘッダーの中でも、いいかもなんですが、
ちょっとね・・・・と思う方もいるかも(それは私・・・)

 

このトップメニュー、ヘッダーの中ではなく一番上に移動した方が、
すっきりしません?

 

 

というわけで、トップメニューを一番上に移動する方法を、
ご紹介していきますね。
(移動させるというか、設定する方法かしらね)

 

CSSの変更でできますので、移動させたい方は、
ぜひやってみてください。

 

※このままでいいさーっていう方は、このままでOK!!

 

 

トップメニューを一番上に設定する方法

CSSは、基本スタイルのことです。

賢威の場合、CSSファイルもすごーく解りやすいし、見やすいです。
賢威5.0からファイル名がちょっと変更になったくらいですので、
すぐ理解できるかと思います。

 

「外観」から「テーマの編集」をクリックします。

 

 

右のメニューにある、「スタイル」から design.css ファイル
クリックして開いてくださいね。

 

 

design.cssファイルの中身は、ブログ装飾のためのスタイルシートです。

 

スタイルシートとは?
WEBページの見栄え(文字の色や種類・画像の装飾など)を効率的に、
定義するための技術のことです。

 

 

design.cssには、賢威テンプレートの装飾の部分がここに記述されています。

 

 

トップメニューは、上の方に記述があります。

 

/*——————————————————–
トップ
——————————————————–*/

という記述の下が、トップのデザインになります。

 

※controlキー+Fで、検索窓が下に表示されますので、
top と入力してみましょう。

 

初期設定のCSS

 

 

#top の記述で、トップのスタイルと位置を設定しています。

このトップの位置を上に移動するので、
下記の数字を変更します。

 

top: 0; → top: 5px;

 

コードの追加(この設定の一番下に追加してください。)

 

 

CSSの追加・変更が終わったら、ファイルの更新ボタンをクリックして、
ブログを確認してみてください。

※このCSSの記述では、下記の項目の変更も可能です。

  • フォントの色
  • フォントカラー
  • 背景色

 

 

トップのメニューが一番上に移動されていたら、OK!!です。
こんな感じで・・・

トップメニューを上に

 

 

余白や、設定の数字はもう感覚でしかないので、
自分が見て、いい!!という数字でOK!!

 

配置もそうですが、トップメニューも増やせることもできますので、
いい感じの場所に設置することも、お忘れなく。

 

 

 

賢威テンプレートのCSSは、美しく理解しやすい記述がされています。

 

 

 

初心者さんで、カスタマイズやCSSの勉強をしたいなーっていう方は、
お手本となるCSSだと思います。

 

いろいろいじって、自分流にカスタマイズを楽しんでくださいね。

 

 

※あんまりやりすぎると、疲れるのでほどほどにどうぞ!!
 

 

 

 

コメントを残す

サブコンテンツ

このページの先頭へ