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

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

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

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

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


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

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

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

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

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

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

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

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

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

ヘッダー画像部分の設定

背景色の設定

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

 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: #fff; /* 文字の色 */
  background: #505050; /* ボタンの色 */
}
 
もう書いてある通りなんですが、文字の色、ボタンの色の設定を行います。

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

もう覚えましたか?

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

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

ボタンの設定

今度は、ボタンのタイトル、リンク先の指定です!
 
まずはこのコードをアメブロのフリースペースにコピペしてください。
ルールとしては【URL*】にリンク先のURLを入れ、【ボタンの文字*】にボタンのタイトルを入れるだけです。

【】は不要です!

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

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

まとめ

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

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

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

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

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

20170325 大阪・あべの
みんなでからあげを楽しむ会

~からあげバトル 持ち寄り食べ比べ~