アメブロdeアクセスアップ

アメブロカスタマイズサイドバータイトルの文字をセンターに配置する | アメブロのテンプレートやツールを使って、アクセスアップする方法やアメブロカスタマイズの方法をご紹介します。


テーマ:サイドバーカスタマイズ

アメブロのカスタマイズです。

 

サイドバーのヘッダーメニューに関して質問がありましたので、
記事にしていきますね。

 

ヘッダーメニューの文字をセンターに配置する方法をご紹介していきます。

 

 

 

 

アメブロのCSS編集可能デザインスキンでは、
みなさんにカスタマイズを自由にしてもらうために、
大まかなベースのCSSが組まれています。

 

 

 

CSSの知識がある方は、どんどんCSSを書き換えて
自分の思うようなブログデザインにしていってほしいと思います。

 

 

 

ですが、カスタマイズは時間がちょっとかかるものです。
しかも終わりはありません。

 

 

日々読者さんも訪問してくださいますし、いい情報があったとしても、
ブログの外見で判断する方が多いのも、また事実です。

 

 

 

時間がかかる作業だからこそ、ベースのテンプレートを決めてから、
カスタマイズをしていくのが一番いい方法かと思います。

 

 

それは、読者さんにとっての思いやりだと私は思っています。

 

 

 

テンプレートを購入してもいいでしょうし、既存のテンプレートを使ってもいいでしょう。

 

 

 

記事を書く前に、やっぱりブログの体裁は整えておきましょう。

(とりあえずでいいので・・・・)

 

 

 

さて、メールで質問をいただいたので解説していきます。

 

 

 

サイドバーのメニュー部分の文字の配置変更についてです。

 

 

サイドバーメニューを画像にした場合、文字を大きくしたり、
画像ではなく、ワンポイントの画像を挿入するときなども、
このサイドバーメニューのCSSを変更するだけです。

 

 

 

文字配置も一緒です。

 

 

 

だた、デフォルト(初期設定)の場合は、
予め、余白の設定があります。
ここもちょっと変更していきます。

 

 

 

 

 

サイドバーのメニューの大きさなどで、後から調整してみてくださいね。

 

 

 

hana2サイドバーメニューの文字の配置設定(センター寄せ)

 

※CSS編集可能デザインスキンを例にしています。

 

 

【CSS編集可能デザイン】からCSSの記述を見てくださいね。

 

 

コメントアウトで

/* (3-7) サイドバーエリア
——————————————–*/

 

を探してくださいね。

 

 

サイドバーエリアの下、

 

 

/* skinMenuHeader サイドメニュータイトルエリア */

 

 

 

ここが、サイドメニュータイトルのスタイルです。

 

 

今回は、タイトル文字(テキスト)の配置変更だけですが、

通常ですと、左寄りになっています。

 

 

 

ですが、デフォルト(初期設定)でちょっと余白が入っています。

 

こんな感じです。

 

メニュータイトルデフォルト

 

※ちょっと文字のカスタマイズをしてあります。

 

 

初期設定の余白は、 padding:5px 10px;

 

※padding ← 枠内の余白です。
この設定ですと、上下の余白が 5px で左右の余白が10px だということです。

 

 

この記述も変更しつつ、下記のコードをコピーして、
.skinMenuHeader{ の記述の一番下に追加してください。

 

 

 

 

 

 

コードを追加したら、保存をしてブログを確認してください。
※プレビューで見れない場合は、保存をして確認してくださいね。
その時に、F5キーを押下して更新をかけてください。

 

 

 

出来上がりは、こんな感じです。

 

 

メニュータイトル中央寄せ

 

 

ヘッダータイトル文字が中央(センター)配置になりました。

 

 

 

text-alignは、行揃えのプロパティです。

 

これは、通常でもよく使われるので、覚えておくと便利ですよ。

 

 

例えば、表組(テーブル)内のテキストを揃えるときなど、
このtext-alignを使うと便利です。

 

 

 

サイドバータイトルの配置ですが、
これもまたブログのバランスによって使い分ける必要があります。

 

 

 

先頭にマークを付けてある場合は、センターにすると
あまりバランス的にはよくないような感じがします。

 

 

 

ブログは、レイアウトとカラーと配置のバランスです。

 

 

総合的に見た、カスタマイズをしていきましょう!!

 

 
 

 

テンプレートデザイン・カスタマイズのこと、アクセスアップのこと、
アメブロのことならお任せあれ!

Copyright © アメブロdeアクセスアップ All Rights Reserved.