これさえ読んだら最低限必要なアメブロ新デザインカスタマイズがわかる!!

この記事は2016/3/8以降使えるようになったアメブロの新しいCSS編集用デザインのカスタマイズ方法について書いています。

※プロフィール画像が丸いタイプ

まずは上記の基本レイアウトの中からお好きな物を選んでください。

あきら
ちなみに私はリストタイプにしています☆あなたにあったタイプを選んでください!
>>私のアメブロはこちらから


それぞれ、目的、用途によって向き不向きがあるかと思うのですが、私のような情報提供、ノウハウ系のブログですと、リストタイプが良いのかな?って思います。

タイルタイプは写真が大きく一覧で表示されるので、スタイリッシュなスタイリスト系の方や色鮮やかなお弁当ブログだったり、ペットブログも良いかもしれません。

スタンダードタイプはトップページでの記事一覧がないタイプになります。

ヘッダー画像・メニュー・フォント

もう、一気に行っちゃいます!!

ヘッダー画像メニューの設置とフォントをメイリオフォントに変更してしまいましょう!!

もうこれだけで十分って方も多いのではないでしょうか?

早速、ブログデザインのCSSの編集の末尾にこちらのコードをコピペしてください。

/* ヘッダーの背景色とヘッダー画像を設定する */
.skin-bgHeader {
  background: no-repeat scroll center;
  background-color: #FFFFFF;
  background-image: url(https://・・・・・.jpg);
}
/* ヘッダーの横幅を設定する */
.skin-bgHeader [amb-layout="headerInner"] {
  width: 1120px;
}
/* ヘッダーの高さを設定する */
.skin-bgHeader [amb-layout="headerInner"]>a {
  height: 300px;
}
/* ブログタイトルと説明文を非表示にする */
.skin-headerTitle {
  display: none;
}

.skin-blogHeaderNav {
  display: none;
}

/* グローバルナビゲーションメニュー */
.nav-wrap {
  position: absolute;
  margin: 0;
  padding: 0;
}
.skin-blogSubA, .skin-blogSubB {
  position: relative;
}
[amb-layout="columnB"] .skin-blogSubA .nav-wrap,
[amb-layout="columnC"] .skin-blogSubA .nav-wrap,
[amb-layout="columnE"] .skin-blogSubA .nav-wrap,
[amb-layout="columnB"] .skin-blogSubB .nav-wrap {
  left: auto;
  right: 0;
}
[amb-layout="columnA"] .skin-blogSubA .nav-wrap,
[amb-layout="columnD"] .skin-blogSubA .nav-wrap,
[amb-layout="columnC"] .skin-blogSubB .nav-wrap {
  left: 0;
  right: auto;
}
[amb-layout="columnE"] .skin-blogSubB .nav-wrap {
  left: auto;
  right: -360px;
}
.nav-body {
  margin: 0;
  padding: 0;
}
.nav-body:after {
  display: block;
  clear: both;
  content: " ";
  height: 0;
  visibility: hidden;
}
.nav-body>br {
  display: none;
}
.nav-body li {
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
}
.nav-body li a {
  display: block;
  text-decoration: none;
}
.skin-blogBodyInner {
  padding-top: 90px; /* メニューバーの表示場所確保 */
}
.nav-wrap {
  top: -90px; /* メニューバーの上下位置調整 */
}
.nav-body {
  width: 1120px; /* メニューバー横幅 */
  background: #FFFFFF; /* メニューバー全体の背景色 */
}
.nav-body li a {
  width: 224px; /* ボタンの横幅 */
  line-height: 50px; /* ボタンの高さ */
  color: #505050; /* 文字の色 */
  background: #FFFFFF; /* ボタンの色 */
}

/* メイリオフォントで表示する */
body {
  font-family: メイリオ, Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'MS Pゴシック', 'MS PGothic', sans-serif;
}

貼付したコードの内容を上から説明していきます。
説明に従って変更してください。

ヘッダー画像部分の設定

背景色の設定

まず、
/* ヘッダーの背景色とヘッダー画像を設定する */ のところの

 backgroundcolor: #FFFFFF;
 backgroundimage: url(http://・・・・・.jpg);
 

ヘッダー画像の背景色が backgroundcolor: #FFFFFF;で#FFFFFFがカラーコード(色の指定:現在は白になっています)です。

お好きな色をカラーコードで設定してください。

カラーコードを調べるには >>こちらから


ヘッダー画像の設定

横幅:1120px、高さ:ご自由に(おすすめは400px程度、大きめが良い方は800pxとか)をご用意していただいて、

ブログデザインヘッダ・背景用画像追加という部分に5枚まで保存が可能ですので、こちらに保存していただいて、画像のURLを取得してください。そのURLをコピーし、http://・・・・・.jpg 部分に貼付してください。

 

これで、ヘッダー画像の設定が完了です!


ヘッダーナビを表示させたい方は

.skinblogHeaderNav {
  display: none;
}
 
を消してください。
こちらのことです↓
なかったら、結構スッキリするし、でもある方がいいなぁ~って思われる方は消してください。

メニューボタンの設定

色の設定

まずは色の設定からです。コードのしたから2番目にある
 
.navbody li a {
  width: 224px; /* ボタンの横幅 */
  lineheight: 50px; /* ボタンの高さ */
  color: #505050; /* 文字の色 */
  background: #FFFFFF; /* ボタンの色 */
}
 
もう書いてある通りなんですが、文字の色、ボタンの色の設定を行います。

文字の色も変更しなくていいよって方はボタンの色だけ決めてください。

もう覚えましたか?

backgroundの部分がボタン背景の色です。backgroundは基本背景を表しています。

#FFFFFFをお好きな色に変更してください。
カラーコードを調べるには >>こちらから

ボタンの設定

今度は、ボタンのタイトル、リンク先の指定です!
 
まずはこのコードをアメブロのフリースペースにコピペしてください。
<div class="nav-wrap"><nav><ul class="nav-body"><li><a href="【URL1】"><span>【ボタンの文字1】</span></a></li><li><a href="【URL2】"><span>【ボタンの文字2】</span></a></li><li><a href="【URL3】"><span>【ボタンの文字3】</span></a></li><li><a href="【URL4】"><span>【ボタンの文字4】</span></a></li><li><a href="【URL5】"><span>【ボタンの文字5】</span></a></li></ul></nav></div>

ルールとしては【URL*】にリンク先のURLを入れ、【ボタンの文字*】にボタンのタイトルを入れるだけです。

【】は不要です!

例えば、TOP、プロフィール、サービスメニュー、イベント情報、お問い合わせっといった感じで5つのメニューを入れる事ができます。

こんな感じでスタイリッシュなブログを作ることができます。

まとめ

もうこれだけでも十分あなたオリジナルのブログを作れちゃうかと思います。重要となるのが画像ですね。フルサイズのヘッダー画像を入れることでかなりスタイリッシュになるかと思います。

またシンプルに極めたい方は下地が白で画像を大きく、メニューボタンも白でメニュータイトルは濃い目の色が良いかもしれません。

ちなみにフルサイズの画像は設定で1120pxとしていても大きいサイズを入れる事ができるので、今回私が例で入れた画像は1480✕600pxです。(高さの設定は必要です)

横幅1120pxはアメブロトップページのリンク貼られる位置になるので、大きくても小さくても問題はないです。ただし、スマホ、タブレットで表示した時(パソコン表示)横幅が1120pxの位置で切れてしまうので、タイトルや文字を入れる場合は1120px以内の位置で入れるようにすると良いでしょう

動画で流れを見たい方はこちら

 

 

宜しければ、Facebookページに『いいね!』をお願いします

2017614 大阪・高槻
LINE@導入&活用講座

~スタジオおててくらぶ~

ABOUTこの記事をかいた人

流れ構築プロデューサー岩本あきら

起業家、サロン経営者、人気カウンセラー、セラピスト、飲食店などにブログ、SNSを使ったマーケティング、コンサルティングを行っています。WEBサイトの制作、WEBツールの活用でサポートを行っています。