Webツール

可愛い!オシャレなアメブロカスタマイズのやり方

皆さん、こんにちは!
Webデザインのお仕事もしています(メインは集客コンサル)ERIです。
このページではアメブロカスタマイズ方法について
Youtube動画で解説しています!

コードは本ページから受け取ってくださいね。

可愛いアメブロカスタマイズで使うツールCanvaのご紹介

デザイナーでなくても可愛いデザインができる無料ツールCanvaを使って
アメブロカスタマイズのやり方をご案内しています。

Canvaのご登録がまだの方はこちらから。



 

 

可愛いアメブロカスタマイズの完成はこちら!

デザイン初心者の方でも可愛いデザイン作れますよ!!

実際のブログはこちら

*スマホでは見れないのでパソコンでご覧ください。

 

可愛いアメブロカスタマイズのコード

アメブロカスタマイズを行うためには2箇所にコードが必要です。

  1. CSSの編集ページ
  2. フリースペース編集

こちらに貼り付けるコードを下記掲載していますので、
コピペでご使用ください。

cssの編集コード

/* ヘッダータイトル */
.skin-headerTitle {
padding-top: 80px;
padding-bottom: 80px;
text-align: center;
}
 
/* ヘッダー画像を設定する */
.skin-bgHeader {
  background: no-repeat scroll center top;
  background-image: url(https://stat.ameba.jp/user_images/20210419/15/mamakigyoulesson/30/26/p/o2240120014928828169.png);
background-size:100%;
width:1120px;
    margin: 0 auto;
    height: 600px;
}
 
/* ブログタイトルと説明文を非表示にする */
.skin-headerTitle {
  display: none;
}


/* グローバルメニュー(共通) */
.nav-wrap {
  position: absolute;
  margin: 0;
  padding: 0;
    margin: 5px 0;
background-color: #;
}
.skin-blogSubA, .skin-blogSubB {
position: relative;
}
.skin-columnB .skin-blogSubA .nav-wrap,
.skin-columnC .skin-blogSubA .nav-wrap,
.skin-columnE .skin-blogSubA .nav-wrap,
.skin-columnD .skin-blogSubB .nav-wrap {
  left: auto;
  right: 0;
}
.skin-columnA .skin-blogSubA .nav-wrap,
.skin-columnD .skin-blogSubA .nav-wrap,
.skin-columnC .skin-blogSubB .nav-wrap {
  left: 0;
  right: auto;
}
.skin-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: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  text-align: center;
}
.nav-body li a {
  display: block;
  text-decoration: none;
}
.nav-body {
  width: 1120px; /* メニューバー横幅 */
height:80px;/* メニューバー高さ */
  background: #FFFBFB; /* メニューバー全体の背景色 */
padding-top: 20px;/*上下の余白*/
}

/* 標準ナビの上にグローバルメニューを表示 */
.skin-bgHeader {
padding:10px 0; /* メニューバーの表示場所確保 */
}



.nav-wrap {
top: -180px; /* メニューバーの上下位置調整 */
}
.skin-blogBodyInner{
padding-top:0;
}

/* ヘッダー内Youtubeリンク先 */
.thumbnail{
position: absolute;
    margin-top: -420px;
    margin-left: -730px;
}


/* ヘッダー内ボタンリンク先 */
.Btn{
position: absolute;
    margin-top: -570px;
    margin-left: -5px;
}

フリースペースの編集コード

<div class="nav-wrap"><nav><ul class="nav-body">
<li><a href="#" target="_blank" rel="noopener noreferrer"><img src="画像①URL" width="140" height="50"></a></li>
<li><a href="#" target="_blank" rel="noopener noreferrer"><img src="画像②URL" width="140" height="50"></a></li>
<li><a href="#" target="_blank" rel="noopener noreferrer"><img src="画像③URL" width="140" height="50"></a></li>
<li><a href="#" target="_blank" rel="noopener noreferrer"><img src="画像④URL" width="140" height="50"></a></li>
<li><a href="#" target="_blank" rel="noopener noreferrer"><img src="画像⑤URL" width="140" height="50"></a></li>
<li><a href="#" target="_blank" rel="noopener noreferrer"><img src="画像⑥URL" width="140" height="50"></a></li>
<li><a href="#" target="_blank" rel="noopener noreferrer"><img src="画像⑦URL" width="140" height="50"></a></li>
<li><a href="#" target="_blank" rel="noopener noreferrer"><img src="画像⑧URL" width="140" height="50"></a></li>
</ul></nav></div>
<div class="thumbnail">
<a href="#" target="_blank" rel="noopener noreferrer"><img src="画像のURL" width="300" height="200"></a></div>
<div class="Btn">
<a href="#" target="_blank" rel="noopener noreferrer"><img src="ボタン画像のURL" width="200" height="50"></a></div>

可愛いアメブロカスタマイズを作る手順(動画解説)

ではコードも用意したところで始めていきましょう!

ポイント

すでにブログを書いている方はテスト用アカウントなどを作成して、そちらで一度完成させたもののコードコピペでされることをおすすめします。コードやURLミスによりブログがうまく反映しない場合もあるのでテストアカウントでまずはトライしてみてくださいね!

STEP 1 可愛いアメブロカスタマイズの初期設定

可愛いアメブロカスタマイズを作っていく上でアメブロの中での初期設定が必要となります。

動画をご覧いただいて進めてください。

 

 

STEP 2 ヘッダー画像の作り方

初期設定ができたらヘッダー画像を作っていきます!

ヘッダー画像の作り方は下記記事からどーぞ!

画像作成方法
アメブロのヘッダーをおしゃれに作る方法

本ページではアメブロのヘッダーをおしゃれに作る方法をご案内していきますね。 動画では下記サイトのヘッダーを作っていきます。 実際のブログはこちら *スマホでは見れないのでパソコンでご覧ください。 Co ...

続きを見る

 

STEP 3 ヘッダー画像の設置方法

画像を作った後は設置です!

設置方法
アメブロのヘッダー設置方法!変更できない方もコピペで解決!

本記事ではアメブロのヘッダー設置方法について解説してきます。 記事下には変更できない場合の対処法も記載していますので、アメブロのヘッダーが変更できなくて悩んでいらっしゃる方も参考にされてくださいね! ...

続きを見る

 

STEP 4 ヘッダー画像ボタンのデザインと設置方法

ヘッダー画像の上のボタンの作り方です。

設置方法
アメブロのヘッダー画像ボタン(リンク)を作る方法

アメブロのカスタマイズ方法をご案内しています。 デザインサンプルはこちら 実際のブログはこちら *スマホでは見れないのでパソコンでご覧ください。 Contents1  アメブロのヘッダー内にリンクを貼 ...

続きを見る

 

STEP 5 メニューボタン(グローバルナビゲーション)のデザインと設置方法

グローバルナビゲーションボタンの作り方と設置方法です

設置方法
アメブロのメニューバーを画像にする方法

アメブロのカスタマイズ方法をご案内しています。 デザインサンプルはこちら 実際のブログはこちら *スマホでは見れないのでパソコンでご覧ください。 Contents1  アメブロのメニューボタンを画像に ...

続きを見る

 

アメブロカスタマイズのデザインは全て無料ツールCanvaを使用

今回の動画は皆さんがデザインしやすいようにPhotoshopではなく、
無料ツールCanvaを使用しました!

有料会員になると選択できる写真の数やリサイズ等の活用ももっとでいますが
無料でも十分活用できます!

まだ使ったことない方は是非ご登録されてみてくださいね!



メルマガ登録はこちら

SNS・ブログ集客だけで 会社員以上の売上を手に入れる方法!
「無料動画プログラムプレゼント中!」

  • この記事を書いた人

有田 絵梨(WEB集客コンサルタント)

熊本市在住。夫・娘(5歳)・愛犬
青山学院大学 経営学部卒。

株式会社テイクアンドギヴ・ニーズ ウェディングプランナー・ファーストリテイリング傘下のアパレルマネージャーを経て結婚を機に専業主婦に。産後自由な働き方をしたいと思い、デジタルハリウッドSTUDIO渋谷にてWebデザインを学び、2017年フリーランスWebデザイナーとして活動を始める。

女性起業家のためのWeb集客コンサルタントとして弊社主催のスクールPFRを立ち上げ、現在40名以上の女性起業家が在籍。
デジタルハリウッド主婦ママクラスのクラスアシスタントやオンライン講座の講師、コペンカレッジ様の外部講師などを行う。

2020年12月に法人化。2021年10月より熊本市中央区新屋敷にオフィスを構え、熊本の女性の起業サポート事業も開始。

-Webツール
-