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

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

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

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

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

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

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

ブログデザインCSSに以下のようなコードを追加しましょう。

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

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

【上下方法の移動量】

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

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

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

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

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

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

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

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

コード例

というわけで、アメブロのブログタイトルとブログ説明文を移動させるカスタマイズの、CSSコード例を一つ書いておきます(記事冒頭の画像のように移動する場合です)

もしよろしければ、実際のカスタマイズをする際の参考にして下さい。

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

応用

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

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

というコードを使うと可能です。

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

まとめ

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

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

よろしければフォローお願いします

コメントを残す

メールアドレスが公開されることはありません。

ご覧いただきありがとうございます。どうぞお気軽にコメント下さい。ただし、コメントでのご質問の方は、記事内容に関することだけに限定させていただきます。ご了承下さい。