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

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

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

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

CSSの編集をしますので、やり方がわからない場合は先にチェックしておいて下さい。

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

ブログタイトルとブログ説明文をヘッダー内で移動する方法はいくつもありますが、今回は、比較的扱いが簡単な方法を一つご紹介します。

CSSの末尾に以下のようなコードを追加して下さい。

.skin-blogMainTitle, .skin-blogSubTitle {
  transform: translate(【左右方向の移動量】, 【上下方法の移動量】);
}

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

ちなみに、左右方向は右が＋で左がー、上下方向は下が＋で上がーになります。移動しない方向は「0」を設定すれば問題ありません。

例えば、

.skin-blogMainTitle, .skin-blogSubTitle {
  transform: translate(-300px, -50px);
}

であれば「左へ300ピクセル、上へ50ピクセル」移動します。

あるかどうかわかりませんが、もしブログタイトルだけを移動させたいという場合は、

.skin-blogMainTitle {
  transform: translate(【左右方向の移動量】, 【上下方法の移動量】);
}

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

.skin-blogSubTitle {
  transform: translate(【左右方向の移動量】, 【上下方法の移動量】);
}

で可能です。

例えば、ブログタイトルとブログ説明文の移動量をそれぞれ変えたい場合など、このやり方でできると思います。

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

よかったら参考にして下さい。