【アメブロカスタマイズ】その５ メニュー項目準備

前回CSSを外部に移しましたので、

これ以降のCSS編集も、メニューバー項目の設定も外部で行います。

メニュー項目の設定

メニュー項目は5～７項目位がきれいに収まります。

５項目未満の場合は、読者登録、ペタ、アメンバー申請なども入れてバランスよくします。

メモ帳、TextEdit などで新規ファイルを開きます。

以下をコピーして名前と拡張子「  .js  」を付けて

DropBox フォルダ内のどこか適切な場所に保存します。

例： ameblo_menu.js

document.write('\
<div id="topMenu">\
<ul class="menu">\
<li><a href="http://************/" target="_top">メニュー項目名</a></li>\
<li><a href="http://************/" target="_top">メニュー項目名</a></li>\
<li><a href="http://************/" target="_top">メニュー項目名</a></li>\
<li><a href="http://************/" target="_top">メニュー項目名</a></li>\
<li><a href="http://************/" target="_top">メニュー項目名</a></li>\
<li><a href="http://************/" target="_top">メニュー項目名</a></li>\
<li><a href="http://blog.ameba.jp/reader.do?bnm=xxxxxxxx" target="_top">読者登録</a></li>\
</ul>\
</div>\
');

赤文字の部分はリンク先のURL、メニューバーに表示する文字列、とそれぞれ書き換えます。

一番下の読者登録は見本です。

ちなみにアメブロ関連では以下のようなURLになっています。
赤文字の部分をご自身のIDに変えてください。
読者登録
http://blog.ameba.jp/reader.do?bnm=xxxxxxxx
ペタ
http://peta.ameba.jp/p/addPeta.do?targetAmebaId= xxxxxxxx
アメンバー申請
http://amember.ameba.jp/amemberRequest.do?oAid= xxxxxxxx
プロフィール
http://profile.ameba.jp/xxxxxxxx

できましたらファイルを保存し右クリック

「パブリックリンクのコピー」を選びます。

コピーされたURLがメニュー項目のパスです。

一旦メモ帳などに書いておいてください。

メニューバー項目の設置

アメブロのフリープラグインのページに行きます。

一番下に以下の一行を追加します。

<script src="ここに先ほどのパブリックリンクのコピーを入れます"></script>

次にフリースペース内のどこかに

<div id="topMenu"></div>

と入れます。



これで、ヘッダー画像に下にメニューが現れます。



現段階では、

• ホーム
• プロフィール
• サービス内容
• アメンバー申請
• ペタしてね
• 読者登録
• お問い合わせ

のように小さく縦に並んでいます。



これをCSSで横一列に並べ替えます。


次のページへ

【アメブロカスタマイズ】その４ CSSを外部に移動

DropBox の設定が終わっているとして進みますね。

アメブロでバリバリにカスタマイズして完成！と思っていても。

やっぱり３カラムの方がいい！　とか
左メインで右サブの方がいい！　ってありますよね。

でも変更すると、

CSSの書き換えた部分、書き加えた部分は消えて無くなります。
ヘッダーも、背景色も、記事タイトルも、全部です。
（画像、プラグインとフリースペースの中は残ります）

また、やってみると分かりますが、
アメブロのCSS編集ページで作業をすると
待ち時間が長いです。
結構イライラします。

そこでCSSファイルを外部で管理すると、
アメブロの都合でなくなる事が無い。
作業が速い。
という利点があります。

なので私は外部にCSSファイルを置いています。

外部ってどこ？
と思われるかも知れませんが、
この前の記事で紹介したDropBox を使うと、とても簡単で、
しかも外部サーバーを揃える必要がありません。

CSSファイルをコピーする

まずは現在のCSSの状態を外に出します。

ブログデザインのCSSの編集のページにいきます。
CSSを全て選択してコピー

@charset "utf-8";
/*-----------------------------------------
【CSS編集 目次】
(1) 文字のスタイル　
(2) ボタンのスタイル
(3) エリアのスタイル
(4) その他、拡張

※CSS編集で広告を修正しないでください
（規約違反に該当する可能性があります）

から一番最後まで全て選択している事を確認してください。

CSSファイルを作成

手元のパソコン内でテキストエディタ（ウィンドウズならメモ帳、マックならTextEdit で十分です）にペースト。

適当に名前と、拡張子「  .css  」をつけてDropBox 内のどこかに保存します。
例： ameblo.css

CSSファイルをアメブロに設置

保存ができたらそのファイルを右クリック
「パブリックリンクのコピー」を選びます。

ここでコピーされたのが外部CSSのURLですが、
一旦別のメモ帳、TextEdit ファイルにペーストしておきます。

アメブロに戻り、マイページから、「フリープラグイン」の編集ページに行き

<script src="http://www.google.com/jsapi"></script>
<script>google.load('jquery','1')</script>
<script>(function(j){j(function(){$=jQuery=j})})($)</script>

<link rel="stylesheet" href="さっきのパブリックリンクのコピーをここに">

の4行を追加し保存します。
既に Jquery を取り込んでいる場合には最初の３行は要りません。
Jquery はこの段階では不要ですが、この先のメニューバーで必要になります。
できれば一番上に置きたいのでここで追加しました。



ブログの表示を確認します。
異常が無ければ、
「ブログデザインのCSSの編集」のページに戻り
先ほどコピーしたCSSを全て削除し

/* */

と入力し、保存します。

ブログの表示を確認します。

異常が無ければ、

CSSを外部に移動は完了です。

次はメニュー項目の準備です。

【アメブロカスタマイズ】その３ バックアップで、一石何鳥？

アメブロカスタマイズの最中ですが、
バックアップのお知らせです。

私は今回、カスタマイズもバックアップも「無料で超簡単」にこだわっています。

一応さらっとバックアップの重要性を書きますと、

ハードディスクは機械です。
壊れない機械は世の中にありません。
ハードディスクが壊れると中に有ったデータは無くなります。

ソフトウェアや音楽などのデータはオリジナルのCDやDVDがありますし、
万一無くしてしまっていてもまた買えばいいのですが、
自分で撮影した写真、ビデオ、自分で作成した書類などはお金を積んでも買えません。
無くなってしまいます。

「いや、あれあるでしょ、データ復旧サービスっての」

とお気軽にお考えの方、
こちらの記事を読んでください。
http://gigazine.net/news/20070328_hdd_repair_01/

可愛い我が子の写真を取り戻せるなら多少高価でも払いますよ、
と意気込んでみても、

23GBのハードディスクに100万円です。
払います？

普段から適切にバックアップをとっていれば１円もかけずにもとに戻す事ができます。

このバックアップの導入は非常に簡単なので
パソコンを使う全ての人にお勧めですが、

何故か、

• アメブロのメニュー設置が簡単になる
• アメブロのカスタマイズがうっかりミスで消えてしまうのを防ぐ
  という効果も期待できます。

もちろん、

• 大切なファイルも守ってくれます。
• ワードプレスのファイルもデータベースも丸々全部バックアップがとれます。
  （最近アメブロからワードプレスに移行される方が多いので）

くり返しますが全て無料でできます。
そしてセットアップが済めば超簡単、
というか何もしなくていい、というものです。

それではまず、

DropBox の導入

今、私が知る限りパソコンのデータをバックアップするのに
DropBoxより使いやすいサービスはありません。
（個人的見解ですが、何十というサービスを実際に購入して調べました）

非常に充実した有料サービスもありますが、
標準的な環境でしたら無料で使える2GBの容量で十分でしょう。

DropBoxのサイトで無料のソフトをダウンロードしてインストールすると「 DropBox 」もしくは「My DropBox 」というフォルダが作られます。

そこに何かのファイルを入れると瞬時にバックアップが取られ、
DropBox のサーバにコピーが保存されます。
ファイルの大きさや数にもよりますが、本当に瞬時にバックアップが完了します。

パソコンを２台、またはそれ以上持っている場合には、
それぞれにインストールして同じアカウントでログインすれば
２台目、３台目のパソコンにも同じファイルがコピーされます。

マックでも、ウィンドウズでも、
どれか一台のパソコンの DropBox フォルダーに、
例えば「 プロジェクトA.doc 」というファイルを入れると
次の瞬間、他のパソコンのフォルダにもそのファイルが現れます。

別のパソコンでそのファイルに変更を加え、保存すると
やはり瞬時に他のパソコンのファイルも更新されています。

誤って変更してはいけないファイルを変更してしまっても大丈夫、
各変更毎のファイル（バージョン/リビジョン）が無料アカウントでも30日間保存されていますので、
「このファイル、先週の火曜日のバージョンに戻したい！」とかいう我がままにも応えてくれます。

またうっかり大切なファイルを削除してしまった、という場合も安心。
DropBox のサイトで取り戻すことができます。
（無料の場合最大30日まで、有料オプションで永遠に保存）

実はパソコン以外に iPhone や iPad、Android携帯でも同じファイルを見る（開く）ことができます。
また、DropBox をインストールしていない他人のパソコン（ネットカフェなど）でも DropBox のサイトから自分のファイルにアクセスすることができます。
これだけ機能と容量がついてたったの無料！

しかもここのリンクからアカウントを作成すると2GBから2.5GBに容量アップ。
と、私も容量アップ！の筈ですが、
既に紹介で貰える容量の限界に達したので私は貰えません。

DropBox 容量アップ


このサイトに行って名前、メールアドレス、パスワードを入力
ソフトをダウンロード
ダウンロードしたファイルを開きインストール

「DropBox」というフォルダが自動的に作成されていれば完了です。

長くなりましたのでメニュー設置は次回、、以降に書きますね。