最近、ほぼ更新してませんが・・・諸事情によりしばらくの間このブログでの更新をお休みさせてもらいます・・・よろしくお願いします。
最近、Jqueryの偉大さがわかってきた・・・
って、言うより難しく考えてただけなのかな・・・
良いんです・・・僕はプログラマーじゃなくてデザイナーなので、プログラマー脳みそは持ってませんがそんな僕でも簡単なプログラムが書けるます。
ノンプログラマーでも簡単な一行コードならだれでも書ける
それがjqueryです・・・
まず、基本的に
$(document).ready(function(){
// 実行する命令
});
見たままです。Documentがreadyになったら、要はDocumentの読み込みが完了したら実行しますって命令です。
この省略形が
$(function(){
// 実行する命令
});
これが結構見るんじゃないですかね・・・
(document).readyを省略してます。
$マークって何？
簡単です。
$ = jQueryです。
※ただPrototype.jsを一緒に使ってる場合、$だとバッティングする可能性があるみたいですが、詳しくは調べてみてください・・・
これで初めてのJqueryの半分はマスターしました（笑）
後、実行命令文を書くだけ！
初歩の基本的な考えは、｢何を｣｢何らかの処理をする｣です。
難しく言うと｢セレクタ｣を｢メゾット｣でつないであげます。
$(“｢何を｣、｢セレクタ｣”).｢何らかの処理｣、｢メゾット｣();
これが実行命令文です。まず、何かを隠すという命令文を書いてみます。
今回はbodyを隠すという命令文を書いてみます。
<script type="text/javascript">
$(function(){
$('body').hide();
});
</script>
これで、bodyは隠れました。セレクタがbodyでメゾットが.hideです。
メゾットは、jQuery メゾットで調べれば出てきます。
ここで、もう一個命令文を追加してあげます。
<script type="text/javascript">
$(function(){
$('body').hide();
$('body').fadeIn(3000);
});
</script>
こんどは、.fadeInと言うメゾットを書いてあげます。名前の通りフェードインさせるっていう命令になります。後ろの（3000）は3秒でフェードインするって意味です。ここの後ろの()の中は、色々あるのですが今回は省略します。
どうですか？見事にページを開いたら3秒でフェードインさせて表示するって言う命令文がかけました。
本当に簡単ですね・・・・こんだけのコードで書けちゃうのがJqueryです。
でも、本来ならbodyじゃなくてdivでwrapperとか作ってあげて、それをCSSでdisplay:none;として
フェードさせてあげるのが多いみたいです。ってか、調べた範囲では.hideを使ってるのはほぼありませんでした・・・
<style type="text/css">
#wrapper{
display:none;
}
</style>
<script type="text/javascript">
$(function(){
$('#wrapper').fadeIn(3000);
});
</script>
もちろん、Jquery本体は読み込んでくださいね。
Jqueryを使えば簡単なプログラムなら誰でも書けますね！
って、言うより難しく考えてただけなのかな・・・
良いんです・・・僕はプログラマーじゃなくてデザイナーなので、プログラマー脳みそは持ってませんがそんな僕でも簡単なプログラムが書けるます。
ノンプログラマーでも簡単な一行コードならだれでも書ける
それがjqueryです・・・
まず、基本的に
$(document).ready(function(){
// 実行する命令
});
見たままです。Documentがreadyになったら、要はDocumentの読み込みが完了したら実行しますって命令です。
この省略形が
$(function(){
// 実行する命令
});
これが結構見るんじゃないですかね・・・
(document).readyを省略してます。
$マークって何？
簡単です。
$ = jQueryです。
※ただPrototype.jsを一緒に使ってる場合、$だとバッティングする可能性があるみたいですが、詳しくは調べてみてください・・・
これで初めてのJqueryの半分はマスターしました（笑）
後、実行命令文を書くだけ！
初歩の基本的な考えは、｢何を｣｢何らかの処理をする｣です。
難しく言うと｢セレクタ｣を｢メゾット｣でつないであげます。
$(“｢何を｣、｢セレクタ｣”).｢何らかの処理｣、｢メゾット｣();
これが実行命令文です。まず、何かを隠すという命令文を書いてみます。
今回はbodyを隠すという命令文を書いてみます。
<script type="text/javascript">
$(function(){
$('body').hide();
});
</script>
これで、bodyは隠れました。セレクタがbodyでメゾットが.hideです。
メゾットは、jQuery メゾットで調べれば出てきます。
ここで、もう一個命令文を追加してあげます。
<script type="text/javascript">
$(function(){
$('body').hide();
$('body').fadeIn(3000);
});
</script>
こんどは、.fadeInと言うメゾットを書いてあげます。名前の通りフェードインさせるっていう命令になります。後ろの（3000）は3秒でフェードインするって意味です。ここの後ろの()の中は、色々あるのですが今回は省略します。
どうですか？見事にページを開いたら3秒でフェードインさせて表示するって言う命令文がかけました。
本当に簡単ですね・・・・こんだけのコードで書けちゃうのがJqueryです。
でも、本来ならbodyじゃなくてdivでwrapperとか作ってあげて、それをCSSでdisplay:none;として
フェードさせてあげるのが多いみたいです。ってか、調べた範囲では.hideを使ってるのはほぼありませんでした・・・
<style type="text/css">
#wrapper{
display:none;
}
</style>
<script type="text/javascript">
$(function(){
$('#wrapper').fadeIn(3000);
});
</script>
もちろん、Jquery本体は読み込んでくださいね。
Jqueryを使えば簡単なプログラムなら誰でも書けますね！
こんなのあったんですね・・・
なんどか見たけどスルーしてたけど
実際サイト見てみたらすごいね・・・
デザイン性が抜群にいいです・・・
どうやら、日本語にはまだ対応してない部分もあるみたいですが、きっと普及すればどんどん対応してくれるでしょう・・・
完全に、デザイナー泣かせですね・・・！
これほどのクオリティのものが無料ならわざわざ何十万もかけてWebサイト作るより全然いいですよ・・・
独自ドメインも使えて広告は年間1万円ぐらいで消せるみたいです。
なんか、最近思うのは、SNSの信頼性が高いような・・・特にFACEBOOKとか完全に普及してみんな周知してますよね・・・
なら、わざわざオリジナルでお金かけてサイトを作るよりFacebookなどのFacebookページがこのWixみたいにカスタマイズ出来て簡単なサイトが作れるようになれば絶対いいですよね！
マーク・ザッカーバーグ氏考えてください・・・
あくまで、個人、小規模サイトの話ですが・・・
ようやく完成と思いきや・・・
ずっとChromeで確認作業してたのでIEやFirefoxで確認してみたら案の定、トップフェードするスライダー位置がずれてました・・・
CSSを確認したところ変な所にpadding-bottomが入っていてpositioの位置関係もぐちゃぐちゃだったので綺麗に直しました。そしたらどのブラウザでもちゃんと同じ表示になりました。
今回のおかげで、恥ずかしながらpositioの使い方がいまいちわからなかったのですがおかげで理解しました（笑）まっ、ふつうにコーディングする際はpositionなんてめったに使わないんですが・・・
そして、ヘッダーのフェードもIEではフェードしてくれない事に気づきました・・・
これは、どうやらIEでは理解してくれないCSSの
ずっとChromeで確認作業してたのでIEやFirefoxで確認してみたら案の定、トップフェードするスライダー位置がずれてました・・・
CSSを確認したところ変な所にpadding-bottomが入っていてpositioの位置関係もぐちゃぐちゃだったので綺麗に直しました。そしたらどのブラウザでもちゃんと同じ表示になりました。
今回のおかげで、恥ずかしながらpositioの使い方がいまいちわからなかったのですがおかげで理解しました（笑）まっ、ふつうにコーディングする際はpositionなんてめったに使わないんですが・・・
そして、ヘッダーのフェードもIEではフェードしてくれない事に気づきました・・・
これは、どうやらIEでは理解してくれないCSSの
opacityを使ってたためです・・・
そうopacityはIEでは使えないのでした・・・
別の方法でなんとかIEでも動くようになってくれました！
こんな、苦労もしてきて最後に試しにアメブロのソースコピーしてDreamweaverでローカルで開いてみたら普通にちゃんとリモートで見るのと一緒な状態で表示してくれました・・・
あれ・・・？ローカルでは以前はグッチャグチャで見れなかったのに・・・
どうやら、パスが全部絶対パスになったんですね・・・
これだったら、最初からローカルでDreamweaverで編集したほうが格段に楽だったわ・・・
ショック・・・
長かったアメブロカスタマイズもようやく終わりました。
どうでしょうか？
アメブロもここまでカスタマイズ出来ればたいしたもんです・・・
新しいデザインの特徴は｢HTML5｣で作られてるところと、今まで知らなかったんですがプラグイン追加でJavascriptが書き込めること（3000文字まで）
まず、HTML5は今後どんどん普及していって、CSS３での色々な事が出来るのでいいんじゃないでしょうか？！現状はブラウザ問題やら面倒臭いので全く使う気になりませんが・・・
後、Javascriptを書き込める事は知りませんでした・・・もちろん、Google AJAX APIでjQueryを読み込んであげることが出来るのは素晴らしいです！このおかげで、フェードするスライドショーや｢BACK TO TOP｣ボタンや｢SNS｣ボタンを簡単に実装してます。ただ、書き込めるのは3000文字まで・・・外部ファイルで読み込んであげたんですが3000文字超えてますって出てしまいました・・・
でも、やはり読み込みに弱冠時間かかりますね・・・複雑なスクリプトは向いてないです。
とりあえずスクロールすると出現する｢BACK TO TOP｣ボタン設置↓
1.プラグイン追加→フリープラグインの中に書き込みます。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
var topBtn = $('#backtotop');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 250) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>
2.フリースペース編集
<div id="backtotop"><a href="#fb-root" >Back To Top</a></div>
3.CSS編集で書き込む
/*Back To Topボタン_位置を決めてあげます。お好みの場所へ*/
#backtotop{
position:fixed;
bottom:30px;
right:20px;
z-index:100;
}
/*空のurlに画像をいれる*/
#backtotop a{
width: 60px; /*ボタン画像 横サイズ*/
height: 0px;
display: block;
overflow: hidden;
padding-top: 37px; /*ボタン画像の高さサイズに合わせる_テキスト文字消す為*/
text-decoration: none;
background: url("") no-repeat left top} /*画像の絶対パスをいれる*/
/*ホバー時の設定_空のurlにホバー時の画像の絶対パスをいれる*/
#backtotop a:hover{
background: url("") no-repeat left bottom}
/*デフォルトのフッター付近のナビ消す_必要な方だけ*/
.footerNav{
display:none !important;
}
比較的簡単に実装できます。
万が一、僕が間違ってコードを書き込んでる場合があるかもしれません。ご了承下さい・・・
そのほかのポイントはまた後日書きます！！！
かっこいいっす！！！
ってか、いつのまにか、You Tubeアメブロに埋め込む対応したんっすか・・・・？！知らなかった（笑）
どうでしょうか？
アメブロもここまでカスタマイズ出来ればたいしたもんです・・・
新しいデザインの特徴は｢HTML5｣で作られてるところと、今まで知らなかったんですがプラグイン追加でJavascriptが書き込めること（3000文字まで）
まず、HTML5は今後どんどん普及していって、CSS３での色々な事が出来るのでいいんじゃないでしょうか？！現状はブラウザ問題やら面倒臭いので全く使う気になりませんが・・・
後、Javascriptを書き込める事は知りませんでした・・・もちろん、Google AJAX APIでjQueryを読み込んであげることが出来るのは素晴らしいです！このおかげで、フェードするスライドショーや｢BACK TO TOP｣ボタンや｢SNS｣ボタンを簡単に実装してます。ただ、書き込めるのは3000文字まで・・・外部ファイルで読み込んであげたんですが3000文字超えてますって出てしまいました・・・
でも、やはり読み込みに弱冠時間かかりますね・・・複雑なスクリプトは向いてないです。
とりあえずスクロールすると出現する｢BACK TO TOP｣ボタン設置↓
1.プラグイン追加→フリープラグインの中に書き込みます。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
var topBtn = $('#backtotop');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 250) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>
2.フリースペース編集
<div id="backtotop"><a href="#fb-root" >Back To Top</a></div>
3.CSS編集で書き込む
/*Back To Topボタン_位置を決めてあげます。お好みの場所へ*/
#backtotop{
position:fixed;
bottom:30px;
right:20px;
z-index:100;
}
/*空のurlに画像をいれる*/
#backtotop a{
width: 60px; /*ボタン画像 横サイズ*/
height: 0px;
display: block;
overflow: hidden;
padding-top: 37px; /*ボタン画像の高さサイズに合わせる_テキスト文字消す為*/
text-decoration: none;
background: url("") no-repeat left top} /*画像の絶対パスをいれる*/
/*ホバー時の設定_空のurlにホバー時の画像の絶対パスをいれる*/
#backtotop a:hover{
background: url("") no-repeat left bottom}
/*デフォルトのフッター付近のナビ消す_必要な方だけ*/
.footerNav{
display:none !important;
}
比較的簡単に実装できます。
万が一、僕が間違ってコードを書き込んでる場合があるかもしれません。ご了承下さい・・・
そのほかのポイントはまた後日書きます！！！
DJ Sammy feat. The Jackie Boyz - Shut Up and Kiss Me
かっこいいっす！！！
ってか、いつのまにか、You Tubeアメブロに埋め込む対応したんっすか・・・・？！知らなかった（笑）