アメブロカスタマイズ 大 百 科
著 作 権 について 本 レポートは 著 作 権 法 で 保 護 されている 著 作 物 です 本 レポートの 著 作 権 は pinky に 属 します MAKI の 許 可 なく 本 レポートの 一 部 または 全 てを いかなる 手 段 におい ても 複 製 転 載 流 用 転 売 等 することを 禁 じます 使 用 許 諾 契 約 書 本 契 約 は 本 冊 レポートを 入 手 した 個 人 法 人 ( 以 下 甲 とする)と MAKI( 以 下 乙 とする)との 間 で 合 意 した 契 約 です 本 レポートを 開 封 した 時 点 で 乙 と 甲 の 契 約 は 成 立 したも のとみなします 第 1 条 本 契 約 は 乙 が 著 作 権 を 持 つ 本 レポートの 情 報 を 甲 が 非 独 占 的 に 使 用 する 権 利 を 認 め たものです 第 2 条 本 レポートの 情 報 は 秘 匿 性 の 高 い 内 容 が 多 いため 乙 の 書 面 による 事 前 許 可 を 得 ない 場 合 甲 はいかなる 場 合 においても その 内 容 を 第 三 者 に 公 開 することを 禁 じます 甲 は 自 ら の 事 業 所 属 する 会 社 および 関 連 組 織 においてのみ 本 冊 子 に 含 まれる 情 報 を 使 用 できるものと します 第 3 条 もし 甲 が 本 契 約 に 違 反 し 乙 に 損 害 が 生 じた 場 合 乙 は 甲 に 対 し 損 害 賠 償 を 請 求 する 場 合 がございますのでご 注 意 ください 第 4 条 甲 が 本 契 約 に 背 いたかの 判 断 は 乙 ができるものとします また その 際 甲 の 許 可 な く 使 用 許 諾 契 約 書 の 解 除 も 出 来 るものとします 第 5 条 本 レポートは 甲 が 稼 ぐことを 100% 保 障 したものではありません また 本 レポートの 情 報 を 使 用 する 際 の 責 任 は 甲 にあるものとします 甲 がこの 情 報 を 使 って 損 害 が 生 じたとしても 乙 は 一 切 の 責 任 を 負 いませんことをご 了 承 願 います
アメブロのヘッダーの 下 に 下 記 画 像 のようにグローバルナビを 設 置 する 方 法 は 初 心 者 には 難 しい かもしれませんが 今 回 初 心 者 でも 超 簡 単 にグローバルナビを 設 置 して 楽 してデザインの 見 栄 えを 劇 的 に 変 える 方 法 を 教 えていきます やはりブログはデザインが 命 です これによってたくさんの 読 者 を 惹 きつけてあなたの 媒 体 を 強 く していきましょう! では 早 速 始 めますね! 1. フリープラグイン 追 加 方 法 今 回 教 える 内 容 は 新 デザイン(CSS 編 集 用 デザイン) 旧 デザイン( カスタム 可 能 ベーシック) 両 対 応 です まずはアメブロにログインしてフリープラグインを 利 用 できるようにしていきます ブログを 書 く サイドバーの 設 定 管 理 フリープラグイン と 進 みます
フリープラグインが 見 当 たらない 場 合 はフリープラグインを 追 加 としてください できましたらフリープラグインにグローバルメニューのコードを 記 入 します 記 入 言 ってもコピペな ので 安 心 くださいね!
フリープラグインに 以 下 のコードを 貼 り 付 けるだけで ヘッダー 下 にグローバルナビが 表 示 されま す <script src="http://www.google.com/jsapi"></script> <script>google.load('jquery','1')</script> <script>(function(j) {j(function(){$=jquery=j})})($)</script> <script src="http://p.wazameba.com/njs/eznavi.js"></script> これだけです また アメブロのフリープラグインは 初 期 状 態 では 使 用 しない 機 能 になっています そのままでは フリープラグインにいくらカスタマイズ 用 のコードを 記 述 しても アメブロの 方 には 何 も 反 映 されませんので フリープラグインを 使 用 する 機 能 に 変 更 する 必 要 がありま す 変 更 は 配 置 設 定 から 使 用 しない 機 能 の 方 に 入 っているフリープラグインを マウスで 使 用 する 機 能 の 方 にドラッグ&ドロップして 移 動 して 保 存 すればOKです 移 動 先 は サイドバー 中 のフリープラグインを 表 示 したい 位 置 にしてください
2. メニューボタンの 設 定 次 にメニューボタンの 設 定 にうつります 要 するに 自 分 のホームページや SNS などにリンクさせるボタンの 設 定 ですね! グローバルナビに 表 示 されるボタンの 設 定 は フリースペースかフリープラグインに 次 のよ うに 記 述 します <div id="eznavi_data" style="display:none"> <a href=" http://... " target="_blank" > メニュー1 </a> <a href=" http://... " target="_blank" > メニュー2 </a> <a href=" http://... " target="_blank" > メニュー3 </a> <a href=" http://... " target="_blank" > メニュー4 </a> <a href=" http://... " target="_blank" > メニュー5 </a> <a href=" http://... " target="_blank" > メニュー6 </a> 赤 文 字 部 分 には 各 メニューボタンをクリックしたときにジャンプするページの URL を 記 述 します 橙 文 字 部 分 は 各 メニューボタンに 表 示 する 文 字 を 指 定 してください 緑 文 字 の target="_blank" は これを 指 定 したボタンをクリックしたときは 別 の 窓 ( タブ ) が 開 くようにする 設 定 です 別 窓 (タブ)で 開 く 必 要 のないボタンは target="_blank"を 消 しておいてください なお ここではボタンの 設 定 を 6 行 (つまりボタン 6 つ 分 ) 記 述 していますが 5 つでも 7 つ でも 必 要 な 数 の 設 定 を 記 述 すれば ボタンサイズも 自 動 で 変 わるようになっています 但 し あまりたくさんのボタンを 作 ると ボタンの 幅 が 狭 くなってしまうため 文 字 が 収 まらな くなってしまいますのでご 注 意 ください(2 行 にはなりません)
3. 色 の 設 定 このプラグインで 設 置 できるグローバルメニューは ブログに 合 わせて 色 の 変 更 ができるよ うになっています 変 更 したい 場 合 上 記 メニューボタンの 設 定 のコードの 1 行 目 に 次 のように data-colors 属 性 で 色 を 指 定 します <div id="eznavi_data" style="display:none"data-colors=" 色 1, 色 2, 色 3, 色 4, 色 5, 色 6"> 色 1~ 色 6 はそれぞれ ボタン 外 枠 の 色 ( 色 1) ボタン 外 枠 と 内 側 の 隙 間 の 色 ( 色 2) ボタ ン 文 字 の 色 ( 色 3) ボタン 内 側 背 景 の 色 ( 色 4) オンマウス 時 のボタン 文 字 の 色 ( 色 5) オン マウス 時 のボタン 内 側 背 景 の 色 ( 色 6)になります 例 として <div id="eznavi_data" style="display:none"datacolors="#ff0000,#ffffff,#ffffff,#ff0000,#ff0000,#ffffff">( ボタンの 設 定 ) のようになります web カラーについてはこちらから 選 んで 好 きな 色 に 変 えてみてください 原 色 大 辞 典 http://www.colordic.org/
4. ボタンの 形 の 設 定 ボタンを 角 丸 にするには <div id="eznavi_data" style="display:none"data-design="rrect"> ボタンの 角 をもっと 丸 くするには <div id="eznavi_data" style="display:none"data-design="round"> ボタンの 上 側 のみ 角 丸 にするには <div id="eznavi_data" style="display:none"data-design="toptab"> ボタンの 下 側 のみ 角 丸 にするには <div id="eznavi_data" style="display:none"data-design="btmtab"> ボタンに 影 を 付 けるには <div id="eznavi_data" style="display:none"data-design="shadow"> さらに ボタンを 角 丸 にして 影 を 付 けるには <div id="eznavi_data" style="display:none"data-design="rrect,shadow">
サイドバーのカスタマイズ グローバルメニューの 色 を 変 えるとサイドバーや 枠 線 の 色 も 気 になるかと 思 います 6.サイドバー 色 変 更 のやり 方 CSS の 編 集 エリアのスタイル の 中 の サイドバー メニュー を 探 し 出 して 以 下 のピンク 文 字 部 分 を WEB カラーで 好 みの 色 に 書 き 換 えます /* (3-8) サイドバー メニュー --------------------------------------------*/ /* (3-8-1) skinmenu サイドバー メニューのエリア */.skinmenu{ /* 注 ベースの css に margin-bottom の 記 述 有 り */ background:#f5f5dc; /* 外 枠 の 色 */ }.skinmenu2{} /* suba subb 別 に 記 述 する 場 合 */.skinsuba.skinmenu{}.skinsubb.skinmenu{} /* (3-8-2) skinmenuheader サイドメニューヘッダー */.skinmenuheader{ padding:5px 10px; background:#eee8aa; /* メニュー 名 部 分 の 背 景 色 */ } web カラーについてはこちらから 選 んで 好 きな 色 に 変 えてみてください 原 色 大 辞 典 http://www.colordic.org/
6. 記 事 カスタマイズ 今 日 は サイドバー 外 枠 サイドバーヘッダー 背 景 の 色 変 更 をしました の 続 きで 記 事 エリアを 囲 む 枠 線 の 色 と 記 事 エリアの 背 景 色 記 事 タイトルの 前 にある 縦 のラインの 色 を 変 更 するタグです CSS の 編 集 から エリアのスタイル の 中 の 記 事 を 探 して 以 下 のピンク 文 字 の 部 分 を WEB カラーで 好 みの 色 に 変 更 してください //* (3-6) 記 事 --------------------------------------------*/ /* (3-6-1) skinarticle 記 事 エリア */.skinarticle{ /* 注 ベースの css に margin-bottom の 記 述 有 り */ padding:16px 0; border:1px solid #f5f5dc; /* 記 事 エリア 外 枠 の 色 */ background:#fff; /* 記 事 エリア 背 景 色 */ }.skinarticle2{}.skinarticle3{} /* (3-6-2) skinarticleheader 記 事 ヘッダー(タイトル)エリア */.skinarticleheader{ margin:0 29px; padding:2px 10px; border-left:5px solid #f5f5dc; /* 記 事 タイトル 先 頭 のラインの 色 */ }.skinarticleheader2{} うす 紫 の 文 字 部 分 は 説 明 のために 加 えたものです 必 要 に 応 じて 付 け 加 えてくださいね web カラーについてはこちらから 選 んで 好 きな 色 に 変 えてみてください 原 色 大 辞 典 http://www.colordic.org/
7.ツール ちなみにアメブロで 一 番 私 自 身 使 って 良 かった 自 動 ツールはこちらの amebaking です Amebaking は1 日 フォロー MAX500 できるもはもちろんのこと 自 動 読 者 自 動 アメンバー 自 動 メッセージまでも 可 能 という 機 能 にかかわらず 低 価 格 で 使 うことができます 費 用 対 効 果 が 最 も 高 いツールなのでぜひまずは 体 験 版 から でもいいので 使 ってみることをおすすめします もちろん 私 も 毎 日 使 っています 8.ヘッダーテンプレート 今 回 アメブロのヘッダーテンプレートとして8 種 類 ご 用 意 させて 頂 きました 画 像 もぴったりに 修 正 してありますのでぜひ 活 用 ください ダウンロードはこちら http://new.socialshare.jp/ametenp.zip
今 回 のレポートは 以 上 になります ぜひアメブロをカスタマイズして 素 敵 なブログを 作 ってみてください pinky ネットビジネスで 人 生 を 変 える 自 由 への 道 http://new.socialshare.jp/