【ｊａｖａｓｃｒｉｐｔ】HighSlideで画像表示をかっこよくしよう
HighSlideでアメブロの画像をかっこよく表示させる方法です。
外部サーバーにjavascriptをアップし、そこからデータを引っ張ります。
アメブロのフリープラグインにそれを設置し、記事を書くときにタグで編集します。
今回は少し難しいかもしれません。
「外部サーバー」がわかる方なら問題なしだと思います。
※参考 ゲバ先生のブログ → ★
ハピブロ
http://ameblo.jp/hapico1173/entry-10647401932.html
http://ameblo.jp/hapico1173/entry-10643660846.html
① まずはゲバっちのブログにある圧縮ファイルをダウンロードしてください。
② 圧縮ファイルを解凍すると、以下のような階層にわかれると思います。
[ highslide_ameba ] //フォルダ
/ demo.html //デモページHTML
/ [commons] //ｊｓ、CSSフォルダ
/ document.css //CSSファイル
/ obj.js //フリープラグイン（その他）にonload属性がない場合はこのファイル
/ obj_a.js //フリープラグインにonload属性がある場合はこのファイル
/ [highslide]
・
・
・
/ [images] //サンプル画像フォルダ
③ 解凍されたファイルの [highslide]フォルダ丸ごと、obj.jsファイル（もしくはobj_a.jsファイル）、document.cssファイル を外部サーバーにアップロードしてください。
※obj.jsファイル と obj_a.jsファイル の両方をアップロードしても構いません。
注意：アップロードする際は、元のファイルと同じように、階層ごとにアップしてください。（解凍されたのと同じようにアップしてください。）
フォルダーを丸ごとアップできない場合は、「highslideフォルダー」をサーバーに作成し、HighSlideフォルダーに入っているファイルはすべてその中に入れてください。
※HighSlideが表示されない原因の多くは外部サーバーのURL間違いです。
外部サーバーにアップロードする際は階層を変えずにアップしてください。
④ 外部サーバーにアップできたら、以下のタグをフリープラグインの一番初めに記述してください。
+++++++++フリープラグイン内にonload属性が無い場合+++++++++++
<link rel="stylesheet" href="外部サーバURL/document.css" type="text/css" />
<script type="text/javascript" src="外部サーバURL/highslide/highslide.js"></script >
<script type="text/javascript">hs.graphicsDir = '外部サーバURL/highslide/graphics/';</script>
<script type="text/javascript" src="外部サーバURL/obj.js"></script >
+++++++++フリープラグイン内にonload属性がある場合+++++++++++
<link rel="stylesheet" href="外部サーバURL/document.css" type="text/css" />
<script type="text/javascript" src="外部サーバURL/highslide/highslide.js"></script >
<script type="text/javascript">hs.graphicsDir = '外部サーバURL/highslide/graphics/';</script>
<script type="text/javascript" src="外部サーバURL/obj_a.js"></script >
貼り付けるのは onload属性が ある場合／ない場合 のどちらか一方です。
両方貼り付ける必要はありません。
ご自分のブログがどちらなのか、見分ける方法は、フリープラグインに貼り付けてあるタグの中に
window.onload = function(){●●●();}
という記述があるかないかで判断します。
ハピブロの場合は時間で変わるメッセージのタグの中に window.onload が記述されていました。
ご自分のブログのフリープラグインの中に window.onload = function(){●●●();} がある場合は
+++++++++フリープラグイン内にonload属性がある場合+++++++++++のタグを
ない場合は
+++++++++フリープラグイン内にonload属性がない場合+++++++++++のタグを記述してください。
⑤ フリープラグイン内にonload属性がある方は、onload属性の箇所に赤字のようなタグを追加してください。
window.onload = function(){●●●();addObj();}
⑥ それでは記事を書いてみましょう。
「記事を書く」にし、画像を挿入します。
サイズは「縮小して表示」を選択してください。（オリジナルで表示しない。）
HTMLタグを表示し、
<a class="highslide" href="http://stat.ameba.jp/user_images/ 画像のURL.jpg">
<img border="0" alt="" src="http://stat.ameba.jp/user_images/ 画像のURL.jpg " />
</a>
と、 class="highslide" を付け足してください。
⑦ 全員に公開 もしくは アメンバーに限定公開 のボタンを押し、記事を投稿します。
ご自分のブログを確認し、画像にカーソルを合わせると虫眼鏡マークが出て、画像をクリックするとニョキッ！と飛び出してくれば大成功です。
いかがでしたか？今回は少し複雑でしたね。
挑戦する前には、メモ帳などに、現在フリープラグインに貼り付けてあるタグをコピー＆ペーストをして保存しておきましょう。
わからないことは ゲバっちに聞いてね。
アメブロカスタマイズスキン
※参照 さえらちゃんのブログ
最近アメブロをカスタマイズする人が増えてきました。
まず最初に気をつけていただきたいことは、ブログのスキンの選び方です。
アメブロはHTMLを編集できないので、カスタマイズをするにはCSSを編集します。
以前は「スタンダード」の「グリーン」「ブルー」「ピーチ」「グレー」スキンがカスタマイズしやすいブログスキンでした、いつの間にか、なくなってしまったようですね。（あったら教えてください）
変わりに今は【カスタム可能】というスキンが増えました。
【カスタム可能】ベーシック、【カスタム可能】グリーン、【カスタム可能】ピーチ、などを選択してください。
ちなみにハピブロは以前のブログスキン、「スタンダード」の「グリーン」2カラム（右サイドメニュー）です。
「アメブロをカスタマイズ編集してもうまくいかない！」「表示が崩れる！表示されない！！」と言う方はまず、使用しているブログスキンを確認してください。
お使いのパソコンの環境（使用しているインターネット閲覧ソフト（IE、FF、GC、safariなど）によって
表示されない場合もあります。
相性もあることを念頭においてください。
【CSS】時間で変わるメッセージボードの設置方法
時間によって変わるメッセージボードの設置方法です。
※参照 → アメブロ向上企画書様
フリープラグインにjavascriptを貼り付け、CSSで位置や文字の大きさなどを調整します。
ハピはブログトップ画像のすぐ下に設置してあります。
まずはフリープラグインに下記のタグを貼り付けてください。
<!-- 時間で変わるメッセージ ここから -->
<script type="text/javascript">
function myT() {
myDate=new Date();
myHour=myDate.getHours();
if(myHour<=5){/*0:00-5:59*/
var myTm =('おやすみなさい。夢で逢いましょう♪');
} else if(myHour<=8){/*6:00-8:59*/
var myTm =('おはようございます。お仕事テキトーにね♪');
} else if(myHour<=11){/*9:00-11:59*/
var myTm =('こんにちわ。ハピブロで癒されてね。');
} else if(myHour<=14){/*12:00-14:59*/
var myTm =('お昼ごはんは食べた？午後からもファイト！<img alt="ラブラブ" src="http://stat.ameba.jp/blog/ucs/img/char/char2/035.gif
" width="16" height="16" />');
} else if(myHour<=17){/*15:00-17:59*/
var myTm =('お疲れさま。早く帰ってにゃんにゃんしよ♪');
} else if(myHour<=20){/*18:00-20:59*/
var myTm =('お帰りなさい。ご飯にする？お風呂にする？それともハ・ピ・子？ｗ');
} else {/*21:00-23:59*/
var myTm =('ギタ練終了！にゃんにゃんしましょ♪');
}
var myObj = document.getElementById('main');
myObj.innerHTML = ( '<div id="tme">'+ myTm + '</div>') + myObj.innerHTML;}
</script>
<script language="javascript"><!--
//http://ameblo.jp/exlink/
window.onload = function(){myT();}
// --></script>
<!-- 時間で変わるメッセージ ここまで -->
表示される時間やメッセージは適宜変更してください。
if(myHour<=5){/*0:00-5:59*/ ←表示される時間帯
var myTm =('おやすみなさい。夢で逢いましょう♪'); ←表示されるメッセージ（画像も挿入可能）
次にCSSで設置する場所を指定します。
ハピブロのようにブログトップ画像の下に設置する場合は以下のタグをCSSに貼り付けてください。
/*時間によってメッセージが変わる欄 文字大きさなど ここから*/
#tme{
padding:15px 25px;/*上下、左右*/
border:1px solid #D4D4D4;/*枠線 太さ 線種 線色*/
font-size: 12px;
}
/*時間によってメッセージが変わる欄 文字大きさなど ここまで*/
枠線がいらない場合は
border:1px solid #D4D4D4;/*枠線 太さ 線種 線色*/
↑この一文を削除してください。
文字色の変更はcolor＝色番号で指定してください。
（以下余談）
メッセージボードとページリンク（次のページ、次のページとクリックする部分）の距離を変えるには
/* ----- page : ページリンク ----- */
.page{
margin-right:auto;
margin-left:auto;
text-align:center;
margin-top:7px;/* この数字で距離が変わる*/
margin-bottom:10px;
}
外部サーバーとは
カスタマイズでたまに出てくる言葉「外部サーバー」。
要は「別宅・別荘」という意味です。
アメブロ内にアップロードできないファイルを、それ以外のサイト（サーバー）に保存し、そこから情報を引っ張ってくる、ということです。
無料のホームページサーバーからデータを持ってくるという方法がよく知られています。
いわゆる「倉庫・素材置き場」ですね。
倉庫利用を許可しているサイトはありませんが、暗黙の了解をせざるを得ないでしょう。
世の中に沢山ある全てのサイトをチェックできないですからね。
倉庫利用をしているとＩＤが削除されてしまうこともあります。
思い出したときにそのサイトを更新しておきましょう。
一ヶ月に一度でも「利用している」という意思表示になりますからね。
【colette】新作つぶつぶピアスが出来ました♪
小さなルビーにガーネットを合わせた、流れるようなピアスです。
ぜひ、コレットさんのブログ やホームページ でご確認ください。
コレットさんはツイッターもやっていらっしゃいます。
日々の出来事や、日常の小さな幸せをつぶやいています。
機会がございましたら一度のぞいてみてください。
coletteさんツイッター → http://twitter.com/colettecom