高知で働くフリーランサーのブログ

【アメブロカスタマイズ】アメブロのヘッダーの位置を下げてStingerっぽくしてみた。

      2016/07/09

当ブログのテーマ、Stinger3のブログタイトルとヘッダーのレイアウトが気に入っているのでアメブロでもそれっぽくしてみました。

あめかす5
アメブロCSS編集が初めての方はアメブロCSS編集始めの一歩 まずはここから。が参考になると思います。

ヘッダー設定用CSSを追記する

フォーマットの「skinHeaderArea」をいくらいじっても上手くいかなかったので今回は一番下に追記しました。
追記した内容はこれ。

/* アメブロヘッダー画像設定用CSS貼り付けコード */
.skinHeaderArea{
height:300px;
background-image:url(http://stat.blogskin.ameba.jp/blogskin_images/20140105/22/21/f4/j/o09860246takuroo71388929874862.jpg);
background-repeat:no-repeat;
background-position:right;
}

 

アメブロカスタマイズのブログでとても有名なブログから抜粋。
参考:【新】アメブロのヘッダー画像を設定する

画像はもちろん私の手書きです^^

ヘッダーを画像のサイズより大きめに設定

ヘッダーにする画像より高さを大きくします。
高さを指定している部分は上記の「height」の部分です。初期値は300pxになっているので使用する画像+100pxに設定します。
今回画像を約300pxで作っていたのでCSSの高さを400pxに変更しました。+100pxが丁度くらいだと思います。

アメカス3

 

するとこんな感じで空白が出来ます。
画像の高さが300pxに対してCSSでヘッダーの高さを400pxにしているので100px空白が出来ています。

ヘッダー画像の位置を下げる

追記したヘッダー設定コードの「height」のすぐ下くらいに

margin-bottom:-50px;

と追記します。
margin-bottomは下からの位置決めを指定します。数値が正の数なら数値を大きくすればするほど下から遠ざかります。
今回ヘッダーの下の空白の部分を消したかったのでマイナス数値を使って空白の部分を重ね合わせています。
かなり強引なので環境によっては正しく表示されないかも・・・

タイトルと説明文を上に上げる

(1-2)ブログタイトル文字のところに表示位置を上げるコードを追記します。

/* skinTitle ブログタイトル文字 */
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus{
color:#000080;
font-weight:bold;
font-size:2.11em;
position:relative;
top:-20px;
}
/* skinDescription ブログの説明文字 */
.skinDescription{
color:#000080;
position:relative;
top:-20px;

}

 

赤いところが追加したところ。タイトルと説明文の2箇所です。

アメカス4

 

 

ついでに文字を紺色にしました。
いろいろやってみたんですがこの方法しか思いつかず結構強引です・・・
もっと勉強しないとね。

 - ブログカスタマイズ

TKalice

TKalice

高知県でブログ及びアフィリエイトアフィリエイト収入で生活してます。

Feedlyで購読

関連記事

アメブロCSS編集始めの一歩 まずはここから。

スポンサーリンク 目次1 アメブロカスタマイズ始めの一歩1.1 まずはCSS編集用テンプレートを選択1.2 ブログレイアウトはどれがいいか1.3  いよいよCS …

pocket(Read it Later)がすごく便利だったのでstingerにも追加しました

実は以前からブックマークの管理とかすごく適当でなんかいい方法ないかと思っていてちょっと気になっていたのがpocketというアプリ。 以前はRead it Lat …

WordPress話題のテーマ、Stinger3をカスタマイズしてみたりしてます。

アメブロと並行して始めたこのブログですがテーマは話題のStinger3を使用しています。 デフォルトでも十分スタイリッシュでかっこいいんですがやっぱり個性を出し …

【stinger3カスタマイズ】フォントを変えるまとめ。タイトル、サイドバー、NEWENTRY etc

フォントは一つ変えたら全部変えたくなります。こだわりです。 ブログ開設1月半でやっとほぼフォントの変更が出来たのでまとめてみました。     …

stinger子テーマ、yukiguniを使ってブログをリニューアル。ヘッダーを横幅いっぱいに。

前々から気になっていた@Daisuke_9taroさんが作成しているstingerの子テーマ、yukiguniを導入してみました。 yukiguniは元々雪国ら …