アメブロのヘッダーのタイトルと説明文の位置を移動する
アメブロのヘッダーに記載されている
タイトルと説明文の位置を移動する 方法を解説します。
上図のように、CSS編集用デザインの初期状態では、「ブログタイトル」と「ブログ説明文」はヘッダーの中央に表示されています。
簡単にヘッダー内の好みの位置に移動できるカスタマイズ方法をご紹介したいと思います。
[no_toc]
1.ブログ管理
①【デザインの変更】をクリックしてください。
2.デザイン変更
②【CSSの編集】をクリックしてください。
3.画面スクロール
③ デザインCSS画面を一番下までスクロールしてください。
次に、CSSタグをコピー＆ペーストします。
4.タグをコピーする
④ 以下のCSSタグをコピーしてください。
/* タイトルと説明文を移動する
——————————————–*/
.skin-headerTitle {
position: relative;
top: ★px;
margin-left: ★px;
}
——————————————–*/
.skin-headerTitle {
position: relative;
top: ★px;
margin-left: ★px;
}
5.タグをペーストする
⑤ CSSタグの一番最後にタグをペースト（貼り付け）してください。
6.タグの編集
ステップ５でペーストしたCSSタグを編集します。
⑥ ★に上下に移動する数値を上書きしてください。
⑦ ★に左右に移動する数値を上書きしてください。
7.保存
⑧【保存】をクリックしてください。
8.移動完了
タイトルと説明文の移動が完了しました。
カスタマイズ方法
文字を上下に移動する方法
サンプルタグ内の
top: 〇〇% の数値を変更してください。
※上へ移動する場合はマイナス、下へ移動する場合はプラスの値をピクセル数を設定します。
例）
top: 0px;
≫変更後
top: -50px;
文字を左右に移動する方法
※左へ移動する場合はマイナス、右へ移動する場合はプラスの値をピクセル数を設定します。
サンプルタグ内の
margin-left: 0px の数値を変更してください
例）
margin-left: 0px;
≫変更後
margin-left: -600px;
