2012年11月 / カワズの唄

スポンサーサイト

            
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

スクロールの動きをカスタマイズ

            
Category : WEBデザイン
~2013.8.3追記~
急に一部ブラウザで動かなくなりましたので、原因が解るまで当ブログでは、このスクリプトは使用中断します。




ところで、このブログをマウスでスクロールしてみて何か気づきませんか?
なんだかヌルヌルと気持ちよく動くでしょ?

それに良く見ればスクロールバーも違うでしょ。

今回はjQuery.nicescrollを利用して、ページスクロールの挙動スクロールバーをカスタマイズしてみます。
非常に簡単です。

まずは配布先のinuyaksa / jquery.nicescrollにアクセス。
真ん中より少し上の『ZIP』からダウンロードして下さい。

FC2で使う場合は、管理画面の『ファイルアップロード』でjQuery本体とプラグインをアップしておいてください。
このとき気をつけないといけない事がひとつ。
FC2では、ファイル名に『.』(ドット)を含んだものは使えないらしいんです。
なので事前にドット無しのファイル名にリネームしておいて下さい。
(もちろん拡張子のドットはあっても大丈夫ですよ。ていうか無いと駄目ですよ。)

ヘッダ内の記述はこんな感じ↓

<script src="js/jquery.min.js"></script>
<script src="js/jquery.nicescroll.min.js"></script>
<script>
$(document).ready(
function() {
$("body").niceScroll({
cursorcolor:"#c00", // スクロールバーの色
cursorwidth:"10px", // スクロールバーの幅 
cursoropacitymax:"0.7", // スクロールバーのアクティブ時の透明度
cursoropacitymin:"0.4", // スクロールバーの非アクティブ時の透明度
cursorborderradius:"5px", // スクロールバーの角丸
});
});
</script>

デモサイトは、まさにあなたが今見ているこのページです。
上記のオプション指定で、ここと同じになります。

これ以外にもオプションが用意されてます。
こちらのサイトに詳しい解説がありますので、参考にして下さい。

実は僕も参考にしました。

めちゃ画期的なんですよ、このプラグインは。
だって今まで色んなjQueryを見てきましたけど、ソースに手を加えることなくスクロールバーをカスタマイズできるのは恐らく世界にコレだけですよ!(2012年現在)

簡単だし、使わな損ですよ!

いやマジで!
スポンサーサイト

画像テスト2

            
Category : インド
インドのシタール奏者、ラヴィシャンカール
ウッドストックでの名演はあまりに有名ですね。

 ← amazonに直リン。


ちなみに、ノラ・ジョーンズのお父さんです。
知ってた?


(この記事は極個人的なテスト投稿です。何のテストかはヒ・ミ・ツ♥)

ブロック要素の横幅を内容に合わせる

            
「記事の中で見出しに枠線をつけたい」
と妻から申し出が。

そりゃ簡単な話だとCSSを書いてあげました。

しかしご存知の通り、ブロック要素の高さ(height)は内容に合わせて変化するのですが、幅(width)はいちいち指定しないといけません。

めんどくさい・・・
どないかならないものか・・・?

なりますよ。
それが↓このコードです。

<span style=" border:solid 5px #8DC20E; padding:10px; border-radius:10px;
display:inline-block; margin-bottom:20px ">内容量にあわせる</span>

『display:inline-block;』がポイントです。ブロックではなくインラインブロックにすれば、要素の幅を内容に合わせることが出来るのですね。


内容量
内容量にあわせる
内容量によって幅が可変する
内容

ちょっとした便利技でした。

画像テスト

            
Category : テスト
この記事を閲覧するにはパスワードが必要です
パスワード入力

個別記事のCSS編集

            

FC2ブログを始めるに当たり、制作屋としての観点からテンプレートや記事の装飾の仕方を色々と模索し、皆さんに紹介していきたいと思います。

まずはその第1回。



個別の記事をスタイルシートにて装飾したいとき、どうしますか?
一番ポピュラーなのは、HTMLタグに直接スタイルを書き込む方法でしょうか。

クラスを指定して、『テンプレートの設定』→『スタイルシート編集』でCSSを追加する方も多いでしょう。

ただ、僕的には面倒くさい。
いま記事を書いているのに、いったん止めてまた設定を開き直さなくてはいけないし、CSSの中身も膨張する一方でしょ?

まぁ基本的にはそれしか方法が無いので、仕方ないんですけど。


というわけで基本的ではない方法、いわゆるタブーを侵してみます。

記事の中にCSSを書いちゃいました。
つまり、<BODY>の中に直接CSSを書いちゃいました。


↓これが、この記事の中に隠されているスタイルシートだ!


<style type="text/css">.geo {font: 17px Georgia; margin:0.5em; color:magenta; } .cur {font: 17px cursive; margin:0.5em; color:blue; }
</style>

※どうやらスタイルの記述は改行せずに横一線に書かないと効かないみたいです。

もちろん全ての記事に共通のスタイルなら話は別だが、今回しか使わないスタイルなら、あえてこんな方法もありかな~なんて・・・

で何をしたかというと、ただフォントを変更しただけです。

↓このようにクラスを指定しました。

<span class="geo">01.</span>Georgia<a href="https://www.google.co.jp/">フォント</a>
<span class="geo">02.</span>Georgia<a href="https://www.google.co.jp/">フォント</a>
<span class="geo">03.</span>Georgia<a href="https://www.google.co.jp/">フォント</a>
<span class="geo">04.</span>Georgiaフォント
<span class="geo">05.</span>Georgiaフォント
<span class="geo">06.</span>Georgiaフォント
<span class="geo">07.</span>Georgiaフォント

↓ちゃんと書いたらこうなりました。


01.Georgiaフォント
02.Georgiaフォント
03.Georgiaフォント
04.Georgiaフォント
05.Georgiaフォント
06.Georgiaフォント
07.Georgiaフォント


01.cursiveフォント
02.cursiveフォント
03.cursiveフォント
04.cursiveフォント
05.cursiveフォント
06.cursiveフォント

リンクを付けてるのは単なるお遊びですので、お気になさらないでね!

まぁこんなやり方はまさに邪道ですので、くれぐれも真似しないで下さいと切に願います。

Don't Try This at Home!

FC2Ad

カークランド

Back to Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。