本 資 料 では アメブロのヘッダー 画 像 とメニューバーの 設 定 をご 自 身 で 行 っていただくた めのものです < 目 次 > 1. ヘッダー 画 像 の 設 定 方 法 1-1: 自 分 の 指 定 した 画 像 をヘッダー 画 像 に 設 定 方 法 1-2: 自 分 で 簡 単 な

アメブロ ~ヘッダー 画 像 メニューバーの 設 定 方 法 ~

本 資 料 では アメブロのヘッダー 画 像 とメニューバーの 設 定 をご 自 身 で 行 っていただくた めのものです < 目 次 > 1. ヘッダー 画 像 の 設 定 方 法 1-1: 自 分 の 指 定 した 画 像 をヘッダー 画 像 に 設 定 方 法 1-2: 自 分 で 簡 単 なヘッダー 画 像 を 作 成 する 方 法 2. メニューバーの 設 定 方 法 2-1:フリースペースへ メニューバーの HTML コードを 設 定 2-2:CSS の 追 加

1.ヘッダー 画 像 の 設 定 方 法 1-1: 自 分 の 指 定 した 画 像 をヘッダー 画 像 に 設 定 方 法 まず アメブロにおいて ご 自 身 でアレンジしたヘッダー 画 像 を 設 定 するためには CSS を 編 集 する 必 要 があります CSS を 編 集 するためには マイページにいき アメーバのサービス 一 覧 デザインの 変 更 で カスタム 可 能 デザインから CSS 編 集 用 デザイン を 選 択 してください ただし 既 に デザインを 変 更 すると それまでの CSS 変 更 内 容 は 全 て 失 われます 変 更 の 際 には 十 分 にご 注 意 ください 既 に CSS の 編 集 を 行 っている 方 は 必 ずバックアップを 取 ってから 編 集 を 行 うように してください

次 に 下 記 の 図 のようなページに 移 りますので お 好 きなレイアアウトを 選 択 してくださ い 基 本 的 には 人 は 左 から 見 る 傾 向 があるので 3カラム 左 ワイドメニュー がオス スメです その 後 下 記 の CSS の 編 集 を 選 択 してください

次 に 下 記 のようなページに 移 りますので 横 300px 縦 980px の 画 像 を ファイルを 選 択 から 選 び 右 側 の アップロード を 選 択 してください 本 来 は 画 像 のサイズを 変 更 できますが 複 雑 な 説 明 を 省 くために 適 切 なヘッダー 画 像 サイズを 指 定 させていただいております また 後 のほど 簡 単 なヘッダー 画 像 を 無 料 で 作 成 できるツールをご 紹 介 します そうすると 画 像 一 覧 の 中 に ヘッダー 画 像 に 指 定 したい 画 像 が 表 示 されるようになります

次 に 同 ページにおいて 下 へスクロールすると 下 記 のような CSS を 編 集 できる 部 分 が あります 上 記 の CSS を 編 集 できる 部 分 の 最 下 部 に 下 記 のソースを 張 り 付 けてください

=== /* ヘッダー */ /*ヘッダー 画 像 */.skinheaderarea { background:url( 画 像 の URL) no-repeat bottom; /* 画 像 */ height: 300px; /* 画 像 の 高 さ*/ margin-bottom:10px;/* 画 像 下 のマージン*/ /* タイトル 画 像 化 の 場 合 */ /*ブログタイトル 説 明 文 位 置 初 期 化 */ h1.skintitlearea,h2.skindescriptionarea{ margin:0; /*マージン*/ padding:0; /* 余 白 */ /*ヘッダー 画 像 のリンク 設 定 */ h1.skintitlearea a{ width:980px;/* 画 像 の 横 幅 */ height:300px;/* 画 像 の 高 さ*/ display:block; /* 表 示 設 定 */ position:absolute; /* 位 置 設 定 */ text-indent:-9999px; /*ブログタイトルを 隠 す*/ /*ブログ 説 明 文 を 非 表 示 */ h2.skindescriptionarea{ display:none; /* 表 示 設 定 */ /*ヘッダー 広 告 下 の 余 白 をなくす*/ div.headerbnrarea{ padding-bottom:0px; ===

そして 黄 色 く 塗 りつぶした 画 像 の URL と 記 載 された 部 分 に ヘッダー 画 像 に 指 定 し たい 画 像 の URL を 貼 り 付 けてください 画 像 の URL は 下 記 の 赤 丸 部 分 から 指 定 したい 画 像 の URL をコピーしてください 上 記 の 設 定 が 完 了 しましたら 下 記 の 保 存 を 選 択 し ご 自 身 のブログを 確 認 してみてく ださい

1-2: 自 分 で 簡 単 なヘッダー 画 像 を 作 成 する 方 法 ご 自 身 で 簡 単 なヘッダー 画 像 を 制 作 したいという 場 合 は 下 記 の Pixlr という 無 料 の 画 像 作 成 ツールをオススメしています 無 料 の 割 には 機 能 性 が 高 く 品 質 の 高 い 画 像 を 制 作 することが 可 能 です Pixlr:http://pixlr.com/editor/ ご 利 用 には Abobe Flash Player10 が 必 要 です こちらも 無 料 ですのでダウンロードし インストールしておいてください http://get.adobe.com/jp/flashplayer/ まず 新 しい 画 像 を 作 成 からヘッダーの 土 台 となるキャンバスを 作 ります 新 しい 画 像 の 幅 と 高 さを 手 入 力 します ブログ 幅 が 980px の 場 合 は 980px を 高 さは 300px 選 択 してください

ここまで 準 備 が 整 いましたら 下 記 の 動 画 で 細 かい 画 像 編 集 についてお 伝 えしていますの で ご 覧 ください < 動 画 解 説 > ヘッダーの 簡 単 な 作 り 方 http://www.youtube.com/watch?v=jfwkwwnwspa 幅 980px で 解 説 しています < 動 画 解 説 > 文 字 に 縁 をつける http://www.youtube.com/watch?v=kyvmusjxmk8 < 動 画 解 説 > 画 像 の 縁 をぼかす http://www.youtube.com/watch?v=utpl_lkhizk < 動 画 解 説 > 人 物 を 切 り 抜 く http://www.youtube.com/watch?v=trt5hk9fkwu < 動 画 解 説 > 画 像 に 効 果 をつける http://www.youtube.com/watch?v=hceyytbdcoe

2.メニューバーの 設 定 方 法 下 記 の 青 丸 部 分 のようなメニューバーの 設 置 方 法 について お 伝 えします メニューバーの 設 定 については 1.フリースペースへ メニューバーの HTML コードを 設 定 2.CSS の 追 加 の2 段 階 の 作 業 があります 今 回 は 5 項 目 のメニューを 作 成 する 方 法 をお 伝 えします

2-1:フリースペースへ メニューバーの HTML コードを 設 定 まずは 下 記 の 黄 色 く 塗 られている リンク URL の 部 分 に リンク 先 の URL を 緑 色 に 塗 られている メニュー の 部 分 に ブログのメニューバーに 表 示 する 文 字 を 入 力 してください 上 から 順 に 実 際 のブログでは 左 から 並 んでいきます === メニューバー 編 集 後 1 行 にしてフリースペースに 挿 入 <div id="headermenu"> <ul> <li><a href="リンク URL" class="menu1">メニュー1</a></li> <li><a href="リンク URL" class="menu2">メニュー2</a></li> <li><a href="リンク URL" class="menu3">メニュー3</a></li> <li><a href="リンク URL" class="menu4">メニュー4</a></li> <li><a href="リンク URL" class="menu5">メニュー5</a></li> </ul> </div> ===

(サンプル) === <div id="headermenu"> <ul> <li><a href=" http://exwill.jp/lp/7step_lp/" class="menu1"> Web 集 客 無 料 ノウハウ</a></li> <li><a href=" http://exwill.jp/shishijyuku/profile/" class="menu2"> 塾 長 プロフィール</a></li> <li><a href=" http://exwill.jp/shishijyuku/voice/dokuritukaigyou/" class="menu3"> 卒 業 生 の 声 </a></li> <li><a href=" http://www.facebook.com/dokuritu.kaigyou" class="menu4"> Facebook</a></li> <li><a href=" http://exwill.jp/lp/kaigyou/" class="menu5"> 独 立 開 業 セミ ナー</a></li> </ul> </div> ===

次 に 上 記 の 設 定 が 完 了 した 後 に メニューバーのソースをコピーし マイページから フ リースペース 編 集 で ソースを 貼 り 付 けます 貼 り 付 け 後 ソースを1 行 にしてください ページの 関 係 で 改 行 されて 見 えますが 1 行 にしています URL は 例 です 最 初 の <div id から 最 後 の </div> までが 1 行 ということです 改 行 が 入 ってしまうと 正 しく 表 示 されません

最 後 に マイページからサイドバーの 配 置 設 定 を 選 択 し 下 記 のように フリースペー ス を 左 側 の 欄 に 移 動 してください

2-2: CSS の 追 加 まずは マイページから デザインの 変 更 CSS の 編 集 を 選 択 してください 次 に ヘッダー 画 像 を 設 定 した 時 と 同 じように 下 記 のようなページに 移 りますので CSS を 編 集 できる 部 分 へ 移 動 してください

上 記 の CSS を 編 集 できる 部 分 の 最 下 部 に 下 記 のソースを 張 り 付 けてください === /* メニューバー */ /* 基 準 調 整 */.skinframe{ position:relative; /*メニューエリア*/ #headermenu{ position:absolute; width:980px; margin:0; padding:0; height:40px; /*メニューエリアの 高 さ*/ top:300px; /* 画 面 上 からの 位 置 */ /*メニューリストグループ*/ #headermenu ul { width:980px; padding:0; margin:0; /*メニューリスト*/ #headermenu ul li { float:left; width:196px; height:40px /*メニューリストリンク*/ #headermenu ul li a{ font-size:15px; font-weight:normal; color:#ffffff; /* 文 字 色 */ background-color:#333333; /* 背 景 色 */ 黄 色 く 塗 りつぶしてい る 部 分 が マウスを 乗 せていない 状 態 ( 通 常 時 )の 文 字 色 と 背 景 色 を 変 更 する 部 分 です カラーコードを 参 考 に 色 を 調 整 してくだ さい

display:block; text-decoration:none; /* 項 目 の 文 字 装 飾 */ text-align:center; /* 項 目 の 文 字 寄 せ 位 置 */ line-height:40px; /*メニューリストリンク マウスオーバー 時 */ #headermenu ul li a:hover{ color:#000000; /* 文 字 色 */ background-color:#ffffff; /* 背 景 色 */ display:block; text-decoration:none; /* 項 目 の 文 字 装 飾 */ text-align:center; /* 項 目 の 文 字 寄 せ 位 置 */ /*メニュー 下 の 位 置 下 げ*/.skinContentsArea{ padding-top:40px!important; /*メニューバー 縦 線 */ #headermenu ul li a.menu1, #headermenu ul li a.menu2, #headermenu ul li a.menu3, #headermenu ul li a.menu4{ border-right:1px solid #FFFFFF; 黄 色 く 塗 りつぶしてい る 部 分 が マウスを 乗 せている 状 態 の 文 字 色 と 背 景 色 を 変 更 する 部 分 です カラーコードを 参 考 に 色 を 調 整 してくだ さい === 上 記 の 設 定 が 完 了 しましたら 下 記 のカラーコードを 参 考 にして 文 字 色 と 背 景 色 を 変 更 してみてください ソースの 黄 色 く 塗 られている 部 分 が 変 更 箇 所 です 好 きな 色 のカラーコードを 置 き 換 えて みてください カラーコード:http://www5.plala.or.jp/vaio0630/hp/c_code.htm

ヘッダー 画 像 の 上 に 重 なってしまった 場 合 CSS で 追 加 した /*メニューエリア*/ #headermenu{ position:absolute; width:980px; margin:0; padding:0; height:40px; /*メニューエリアの 高 さ*/ top:200px; /* 画 面 上 からの 位 置 */ この 数 字 を 変 更 します background-color:#664332; /*メニューエリア 背 景 色 */ 赤 文 字 部 分 の 数 字 を 変 更 することで 位 置 を 調 整 します 以 上 で アメブロのヘッダー 画 像 設 定 と メニューバーの 設 定 が 完 了 となります ぜひ アメブロを 上 手 くカスタマイズして 成 果 に 繋 げてくださいね 何 かあれば wada@exwill.jp( 和 田 )まで ご 連 絡 ください それでは 引 き 続 き よろしくお 願 いします