パララックスが簡単に実装出来る!skrollrの使い方

お久しぶりでございます。
年初に今年は”アウトプット宣言”しておきながら、長らく更新STOPしてしまいました。
というのも、記事を書こうとするといつもこう、ヤツにPCを占拠されてしまう有様でどうにもこうにも…
というのはただのいい訳です。もう少し更新頻度上げてく様頑張らねば(^^;

さて、今日はパララックス(視差効果)が簡単に実装出来る、skrollrの使い方をやってみたいと思います。

デモを作ってみましたので、こちらをご覧下さい。

まずGitHubからskrollr.jsをダウンロードします。
html側にはskrollr.min.jsファイルjqueryを読み込ませます。
下のコードをhtmlのどこかにペースト、以上です。簡単ですね!

<script src="js/skrollr.min.js"></script>
  <script>
      var s = skrollr.init();
  </script>

デモではほぼ全てのdivにdata属性をつけて動かしています。
ポイントは…

  1. data-○○=”ここに普通にcssを書けばよい”
  2. 色はrgb(a)かhsl(a)で指定する。
  3. 単位を揃える。%とかpxとかを混ぜて使わない。
  4. ベンダプレフィックスは必要なし。
  5. skrollrにはmodeが二つあって、[absolute mode] とは、スクロール量で変化させるモード。
  6. [relative mode] とは、data-anchor-targetを指定し相対的に変化させるモード。

“パララックスが簡単に実装出来る!skrollrの使い方” の続きを読む

ワードプレスに外部ファイルを読み込ませる

明けましておめでとうございます!

一年の計は元旦にあり!今年はもっと更新頻度を上げて行く様、頑張ります☆

さて、本日はワードプレスに外部ファイルを読み込ませる方法についてです。
ワードプレスで外部ファイルを読み込ませるのには、ワードプレス用のphp関数である、wp_enqueue_script を使います。
今回は、指定したテキストを縦書きにすることが出来る、『竹取』というjsファイルとcssファイルをこのブログの本文に対して指定してみようという試みです。

1.縦書きにするためのファイル、『竹取』をダウンロード

『竹取』から、taketori_js.zipをダウンロードします。これを解凍しますと、中に taketori.js と taketori.css というファイルが入っています。

2.外部ファイルをセッティングする

次に、ご自分のFTPへアクセスします。
私の場合は現在子テーマを使っていますので、そのフォルダの中へ1.でダウンロードした taketori.js と taketori.css を入れます。そうでない方はご自分で使用しているテーマのフォルダの中にこの二つのファイルを入れて下さい。

3.自分用の設定を書くためのjsファイルを作る

二つのファイルを入れたテーマのフォルダの中に、新たに自分用の設定を書くためのjsファイルを作ります。名前は何でも良いです。拡張子は.js です。
(ちなみに子テーマを使用している方は、親テーマのheader.phpファイルを丸ごとコピーして、これを子header.phpファイルとしてテーマのフォルダの中に入れておくと良いです。設定はこちらに記述していきます。間違えても安心ですね。)
“ワードプレスに外部ファイルを読み込ませる” の続きを読む

MAMPを設定してみる

mamp

web上に公開する前にローカル環境であれこれテスト出来れば、失敗を恐れずにあれこれ試せるし便利ですよね。プラグインやテーマも使い勝手を試してからインストール出来ますし。そんなローカルのテスト環境を作ってくれるのがmamp(mac),xampp(win)です。

これはうちにもぜひとも設置しておきたい!と、早速MAMPをインストールしてみました。
※ちなみに、MAMPとは「Macintosh+Apache+MySQL+PHP」の略です。

1.MAMPをインストールする

MAMP&MAMP PROへ
mamp

Mac OS X 10.6.6、OS X 10.7 Lionをお使いの方はここからインストール。
それ以前のMac OS X 10.4〜をお使いの方はメニューバーにある「downloads」をクリック→「MAMP & MAMP PRO 1.9.6.1」のバージョンをどうぞ。
クリックしたら、ファイルを保存でダウンロードが始まります。
インストールが終わったら、「使用許諾契約」から「続ける」をクリック。
PCのApplicationsに「MAMP」をドラッグして追加。(※「MAMP PRO」は有料版です。)

2.MAMPを起動する

MAMPを起動させると自動でApacheサーバとMySQLサーバが立ち上がります。
状態が緑になっていればOKです!
mamp-1a

3.環境設定を変更する

それでは「環境設定」をクリックし、設定を変更していきましょう。

★「起動・停止」をクリック
MAMPを起動するたびにスタートページが開いてしまわないよう、「起動時にスタートページを表示」のチェックを外しておきます。
mamp-2

★「ポート」をクリック
ここで、マルチサイト化をしている方、する予定の方はポート番号を変更しておきます!
(※マルチサイト化しない場合は必要ありません。)

デフォルトのApacheのポート番号「8888」→「80」に変更し、「ApacheとMySQLの標準ポートに設定」をクリックします。
mamp-3

すると、後に使うアドレスに変化が起きます。
「http://localhost:8888/wordpress/」(デフォルト)となるところが、
「http://localhost/wordpress/」となります。

4.データベースの設定をする

“MAMPを設定してみる” の続きを読む

wordpressをマルチサイト化する

WordPressをマルチサイト化してみよう

ジャンルごとにサイトを分けたい、アイディアがいっぱいあり過ぎて、ひとつのサイトだけじゃ物足りない!そんな貴方は、wordpressを「マルチサイト化」してみましょう。なんと、ひとつwordpressをインストールするだけで、複数のサイトを持つ事が出来るのです。しかも一元管理が出来るのでサイトが増えても管理が楽々です。

1. サブドメイン型とディレクトリ型とは?

まず初めに、アドレスをサブドメイン型にするかサブディレクトリ型にするかを決めましょう。

◆サブドメイン型<例>
http://blog1.wpress.com/
http://blog2.wpress.com/

◆サブディレクトリ型<例>
http://wpress.com/blog1/
http://wpress.com/blog2/
“wordpressをマルチサイト化する” の続きを読む