アメブロのブログタイトルやブログ説明文の位置を移動させる方法

  • アメブロ
  • このエントリーをはてなブックマークに追加

アメブロのCSS編集用デザインのブログタイトルとブログ説明文(サブタイトル)は、初期状態では、ヘッダーの中央に表示されるようになっています。

この中央に表示という状態、文字を消さずにヘッダー画像を設置した時に、表示するヘッダー画像によっては「もう少しこちらに寄せたい・・・」となることがよくあります。

そこで当記事では、アメブロのブログタイトルとブログ説明文を、簡単にヘッダー内の好みの位置に移動できるカスタマイズ方法をご紹介したいと思います。

アメブロのブログタイトルとブログ説明文を、簡単に好みの位置に移動できる

ブログタイトルとブログ説明文を簡単に好みの位置に移動する

今回は、アメブロのブログデザインCSSの編集でカスタマイズを行いますので、やり方がわからない場合は先にチェックしておいて下さい。

CSS編集用デザインを適用したアメブロで、ブログタイトルとブログ説明文をヘッダー内で移動するには、ブログデザインCSSに以下のようなコードを追加します。

.skin-blogMainTitle, .skin-blogSubTitle {
  position: relative;
  top: 【上下方法の移動量】;
  margin-left: 【左右方向の移動量の2倍】;
}

このコードの、【上下方法の移動量】【左右方向の移動量の2倍】の部分を適切に設定すれば、ブログタイトルと説明文のレイアウトはそのまま(つまり中央揃えのまま)で、位置だけを上下左右に移動させることが可能です。

(ただし左右方向は、ヘッダー部のリンクになっている範囲から外にはみ出すような設定にすると、外には出ず、文字が折り返して表示されます。)

【上下方法の移動量】

【上下方法の移動量】は、上へ移動する場合はマイナス、下へ移動する場合はプラスの値をピクセル数などで設定します。

例えば、「-50px」を設定すると50ピクセルだけ上へ移動し、「50px」を設定すると50ピクセルだけ下へ移動し、ます。

上下方向への移動が不要な場合は「0」にしておけばOKです。

【左右方向の移動量の2倍】

【左右方向の移動量の2倍】は、左へ移動する場合はマイナス、右へ移動する場合はプラスの値をピクセル数などで設定します。

例えば、「-600px」を設定すると300ピクセルだけ左へ移動し、「600px」を設定すると300ピクセルだけ右へ移動します。

設定した値ではなく、その値の半分だけ移動しますのでご注意下さい。

左右方向への移動が不要な場合は、こちらも「0」にしておけばOKです。

コード例

というわけで、念のため、アメブロのブログタイトルとブログ説明文を移動させるカスタマイズのCSSコード例を一つ書いておきます(上の画像のように移動する場合です)ので、もしよろしければ、カスタマイズする際の参考にして下さい。

.skin-blogMainTitle, .skin-blogSubTitle {
  position: relative;
  top: -50px;
  margin-left: -600px;
}

これで、上へ50ピクセル、左へ300ピクセル移動します。

応用

ちなみに、ブログタイトルだけを移動させたい場合は、

.skin-blogMainTitle {
  position: relative;
  top: 【上下方法の移動量】;
  margin-left: 【左右方向の移動量の2倍】;
}

また、ブログ説明文だけを移動させたい場合は、

.skin-blogSubTitle {
  position: relative;
  top: 【上下方法の移動量】;
  margin-left: 【左右方向の移動量の2倍】;
}

というコードになります。

ブログタイトルとブログ説明文の移動量をそれぞれ変えたい場合には、こちらでカスタマイズしてみてください。

まとめ

以上、アメブロのブログタイトルとブログ説明文をヘッダー内の好みの位置に簡単に移動できるカスタマイズ方法をご紹介しました。

例えば、アメブロにヘッダー画像を設置した時に「もうちょっと文字がこちらのほうが見やすい」と思った時などに使えると思いますので、よかったら参考にして下さい。

関連記事

  • アメブロ
  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す