twitter

←こういうのって、よく見かけますよね。
あれって面倒臭いんじゃないかなと思っていたら、思いのほか簡単だったので、やり方を簡単に。
 
ちなみに、これって自分のツィートだけじゃなくて他人のIDでも作れちゃいます。意味があるかどうかわかりませんけど。
 
ここ(Twitter活用術 › ウィジェット › ウェブサイトのプロフィールウィジェット)にID入れるだけ。
ここで出てくる javascriptのコードを表示したい場所に<div>かなにかに入れて貼りつけるだけでOKです。簡単ですね。

WordPressでは jQuery は、Prototype など $ 関数を使用する他のライブラリと同時に使用することを想定して、jQuery.noConflict() が実行されており、$ 関数はそのまま使えません。
まぁ、$を使うべきところを jQuery と書けばいいだけなんで、いいっちゃいいんですが、字数も 1文字から 6文字に増えて面倒です。
そういうときは先人の知恵でよくわからずに、こうやって $を使っていたんですが、・・・


  jQuery(function($) {
    $("div > p").click(function() {
      $(this).slideUp("slow");
    });
  });

stacktrace

ちゃんとわかろうと思って、いろいろググって勉強してみました。
こちら(jQueryと他のライブラリを同時に使用する方法)です。勉強になります。

scrollsmoothly

いままで食わず嫌い(シュルシュルシュルってスクロールして何が楽しんじゃい?!)していたスムーズスクロールですが、縦幅3400pxもあるページをデザインしていて、一番下からすぐ上にページが切り替わっても、ありがたみがないんじゃないかと思って、使ってみることにしました。
 
使ってみたのは、こちら(こだわりのページ内リンクスムーズスクロール scrollsmoothly.js)。
設置簡単、指定いらず、依存ライブラリなしと、いまのところ言うことなし。ありがとうございます。

そんなに難しいことをしようと思ったわけではなく、ホームページ・ビルダーにおまけで付いてくるウェブ・アニメータ程度のことができればいいかなと思って、調べたら意外とやさしく書いてあるところがなかったので、超簡単な導入部だけメモしておきます。

1.まず、PhotoShopで新規ページを開きます。画像がある場合はそれを開けばいいです。
2.ウィンドウでアニメーションを表示させます。そうするとアニメーションのウィンドウが画面下に出てくるはず。

3.最初、アニメーション・ウィンドウはタイムラインになっていると思いますので、画面右下のアイコンをクリックして、フレームにしておきます。

4.あとは、この画像のアイコンをクリックするとフレームがコピーされますから、フレームごとに表示するものを変えていけばOKです。レイヤーで制御(表示・非表示や移動など)するということです。
have a nice animation!
 
GIFアニメーションの作成はやさしく書いてあって参考になりました。

サイドバーを固定にしたサンプル
あとで試してみる
こことか、かっこいい!
 
くるくる回るナビゲーションメニュー
もあとで試してみる


※ 見づらいのでクリックして拡大してください。
 
赤丸のところがポイント。▼があって、いかにも左隣の多角形のバリエーションを選択させるボタンのように見えるけど、ここで矢印の指定をします。
ここの開始点か終了点にチェックが付いていると、ラインを引こうとしたとき、勝手に矢印になってしまいます。
 
あと、右側の赤丸のところの「アンチエイリアス」も地味にポイント。これを外さないと勝手にアンチエイリアスがかかって、1pxだけの線なんかが引けなくなります。