有田 絵梨

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

ウェディングプランナー・アパレルマネージャーを経て結婚を機に専業主婦に。産後自由な働き方をしたいと思い、フリーランスWebデザイナーとして活動を始める。

ホームページを作ったら集客できると思われているクライアントが多いことに気づき、制作前段階に必要なブランディングからのサポートを始め、現在はコンサルティングをメインとした活動を行っている。

2020年12月に法人化。女性起業家のためのWeb集客コンサルタントとしてオンラインコンテンツ中心に全国のフリーランスママさんをサポート中

Webツール

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

アメブロのカスタマイズ方法をご案内しています。

デザインサンプルはこちら

可愛いアメブロカスタマイズのやり方解説ページ

実際のブログはこちら

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

 アメブロのヘッダー内にリンクを貼る方法

これはフリースペース編集のコードを触っていきます。

本来はサイドバーであるフリースペースの編集場所を
‎position:absolute;を使ってヘッダー内に持っていくやり方をとっています。

デザインのことはわからないよ!って方のために動画を作っていますので
とにかく下記手順で進めてください^^

  1. 以下のコードをコピーして「フリースペース編集」に貼り付ける
  2. 動画内で話している通りの画像を作成
  3. 作ったらアメブロにアップロードして画像URLとリンク先のURL差し替える

アメブロヘッダー内のボタンサイズ

今回の動画で話しているボタンサイズは2種類です。

 

■サムネイル
600px × 400px
コードは半分のサイズで貼り付けてますが、制作はこちらのサイズでお願いします。

■ボタン画像
400px × 100px
コードは半分のサイズで貼り付けてますが、制作はこちらのサイズでお願いします。

 

アメブロのヘッダーにリンクを貼るコード

コードは下記の通りです。

貼り付け場所はフリースペース編集です。

<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>



 

アメブロのヘッダー画像にリンクを貼る方法【動画解説】

動画解説はこちら

メルマガ登録はこちら

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

  • この記事を書いた人

有田 絵梨

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

ウェディングプランナー・アパレルマネージャーを経て結婚を機に専業主婦に。産後自由な働き方をしたいと思い、フリーランスWebデザイナーとして活動を始める。

ホームページを作ったら集客できると思われているクライアントが多いことに気づき、制作前段階に必要なブランディングからのサポートを始め、現在はコンサルティングをメインとした活動を行っている。

2020年12月に法人化。女性起業家のためのWeb集客コンサルタントとしてオンラインコンテンツ中心に全国のフリーランスママさんをサポート中

-Webツール
-