皆さまごきげんよう。
本日は前回の続きになります。jQueryでワードプレスの背景画像を時間で切り替えを実装してみますよ〜。
今回は当サイトで使用中のワードプレス公式テーマ、twenty seventeenをベースにやってみますが、調べ方や導入の仕方は大体同じなのでぜひ参考にしてみて下さい。
メディアに切り替え用の画像を数枚いれておく
メディアに新規追加で、切り替えたい画像を必要な枚数入れておきましょう。
jQueryで背景画像を時間で切り替える
jQueryで画像を書き換える
皆さまごきげんよう。
ようやく春めいてきた今日この頃というのに、既に花粉と戦う日々を送っております(><);皆さんは大丈夫ですか？
さて、実は何気に当サイトのトップ画像（＝ヘッダーの画像）が、1日のうちに4回入れ替わっているんですよ。びっくりですよね∑(ﾟДﾟ)
一体何の意味があるのか？というツッコミは置いといて、今回はjQueryを使って背景画像を時間で切り替えてみる、ということをやってみます。
“jQueryで画像を書き換える” の続きを読む
javascriptで作ったカウントダウンタイマーをワードプレスに実装する
Photo on Foter.com
皆さまごきげんよう。
本日は前回作ったjavascriptのカウントダウンタイマーをワードプレスに実装してみます。
前回の記事はこちら javascriptでカウントダウンタイマーを作る
ワードプレスに実装してみる
前回作ったscriptの部分を、新たにjsファイル（○◯.js）にしてFTPサーバの任意の場所に保存します。
“javascriptで作ったカウントダウンタイマーをワードプレスに実装する” の続きを読む
ワードプレスをカスタマイズする方法
皆さま、ごきげんよう。
ワードプレスのカスタマイズといえば色々な方法があると思いますが、本日は私のカスタマイズの仕方について語ってみたいと思います。
twenty seventeenをベースにしたこのブログをカスタマイズした時の注意点や、調べ方についての備忘録です。
ベースとなるテーマを決める
ワードプレスの背景に雪を降らせてみよう
皆さまごきげんよう！
暮れも押し迫ってまいりましたが、いかがお過ごしでしょうか？
大晦日までには不要なものを全部捨ててやろう！と張り切っている私ですが、まだ何も手を付けていません（^^;
ところで、最近ネットで魔夜峰央先生の 全埼玉県民が泣いた！伝説の埼玉Disマンガ『翔んで埼玉』が今頃になって話題になっているということで、大変気になっていたのですが、既に持ってた（笑）『やおい君の日常的でない生活』という本の中に収録されていました。昭和時代に買ったもんですっかり忘れてましたが、よく今まで取っておいたもんだ。こんなんで「不要なものを全部捨ててやろう！」なんて本当に出来るのでしょうか？！(^^;A
ま、それはさておき（笑）今日は、前回のjQueryで雪を降らせてみようのファイルを元に、ワードプレスの背景に雪を降らせてみようと思います。
“ワードプレスの背景に雪を降らせてみよう” の続きを読む
Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その弐〜
皆さまこんにちは！厳しい残暑の候、いかがお過ごしですか？
本日は前回の続き、Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その弐〜をお送りします。
〜その壱〜を読んでからでないと何のこっちゃ？だと思いますので、ぜひ目を通してみてくださいませ(^^)ゞ
前回の記事はこちらです。
さて、前回の設定だけでうまくいった方もいらっしゃるかも知れません。しかし私はこの後、投稿した画像が重なって表示されてしまうという現象に悩まされました(笑)
そこで今回は、画像をきちんと読み込んでから表示させるような設定を追加します。
“Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その弐〜” の続きを読む
Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その壱〜
インターネッツの皆様こんにちは！
各地で猛暑記録更新ですね〜(++); こう毎日毎日暑いと、もはや出掛ける気力も無いのでブログが捗ります（笑）
本日は、ワードプレスでピンタレスト風レイアウトに挑戦してみよう！の巻です。
ちょっと間が空いてしまいましたが、前回の記事「ワードプレスプラグインCustom Post Type UIの使い方」の続きになります。こちらを読んでからの方がより分かりやすいと思いますので、ぜひ目を通してみてくださいませ(^^)ゞ
さて、前回はカスタム投稿タイプでgalleryという投稿ページを新たに作ってみましたが、今回はそれをJSライブラリ「Masonry」を使って、コンテンツをレンガ状に並べて表示させてみようと思います。
masonryって石工［れんが工］職、石［れんが］造りの建造物、石造建築っていう意味なんですね。
“Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その壱〜” の続きを読む
skrollrでパララックスのランディングページを作ってみよう〜追記あり〜
パララックスもすっかり定着した感のある今日この頃( ˘ω˘)…
webデザイナー同志の皆さま、こんにちは(^^)ゞ
本日はskrollr再び！skrollrを使ってペラいちのランディングページを作ってみようの巻です。
まずはこちらにDEMOを作ってみましたのでご覧ください。
（※firefoxブラウザではきちんと表示出来ないかもしれません。その際はお手数ですが他のブラウザでお試し下さいませm(_ _)m )
skrollrってなに？
パララックス（視差）効果で立体感のあるページが簡単に作れるJavaScriptライブラリです。スマホにも対応してます！まずはダウンロードしてみよう。
“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ファイルとしてテーマのフォルダの中に入れておくと良いです。設定はこちらに記述していきます。間違えても安心ですね。)
“ワードプレスに外部ファイルを読み込ませる” の続きを読む