jQueryで雪を降らせてみよう

2022.1.29 更新

皆さまごきげんよう。

本日はjQueryで雪を降らせてみようの巻です。

今回はdivを雪の一粒に仕立て、jQueryでランダムな数値を取得・複製し、それをcssのアニメーションでループさせて雪を降らせてみようと思います。

今回作ってみるものはこちらです。

目次

  1. htmlファイルを作る
  2. windowsサイズを取得する
  3. ランダムな数値を取得して、forで繰り返し処理を行う
  4. cssでアニメーション設定をする
“jQueryで雪を降らせてみよう” の続きを読む

jQuery でタブを実装してみよう

2022.1.30 更新

皆さまごきげんよう。

本日はjQueryとcssを連携させて、タブでページを切り替えて表示させてみます。

今回作ってみるものはこちら↓

jq-tab

目次

  1. jQueryの本体を読み込む
  2. jQueryでcssのクラスを追加してみよう
  3. style要素にjQueryの読み込み前と読み込み後のcssを書く
  4. ダブルクリックでページが切り替わって表示されるためのjQueryを書く
“jQuery でタブを実装してみよう” の続きを読む

ロリポップで複数ドメインにワードプレスをインストールしてみよう

2022.1.23 更新

皆さまこんにちは。
本日は、ロリポップで複数のドメインにワードプレスをインストールしてみます。

ロリポップの説明がややこしかったので、備忘録として書き留めておきたいと思います。

複数ドメインにワードプレスをインストールする前に、念のため今あるサイトのバックアップを取っておきましょう。

●ワードプレスのバックアップを取る方法

目次

“ロリポップで複数ドメインにワードプレスをインストールしてみよう” の続きを読む

ワードプレスのバックアップを取る方法

2022.1.29 更新

皆さまはサイトのバックアップをは定期的に取っていますか?

本日はワードプレスのバックアップの取り方についての備忘録です。

ワードプレスのバックアップを取ろう!

目次

  1. ワードプレスでバックアップを取る
  2. phpMyAdminでバックアップを取る
  3. FTPでワードプレスの全てのファイルをダウンロードする
“ワードプレスのバックアップを取る方法” の続きを読む

Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その弐〜

2022.1.23 更新

皆さまこんにちは。
本日は前回の続き、Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみます。

〜その壱〜を読んでいただくと理解が深まりますので、ぜひ目を通してみてくださいませ

Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その 壱

さて、前回の設定だけでうまくいった方もいらっしゃるかも知れません。しかし私はこの後、投稿した画像が重なって表示されてしまうという現象に悩まされました。

そこで今回は、画像をきちんと読み込んでから表示させるような設定を追加します。

“Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その弐〜” の続きを読む

Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その壱〜

2022.1.23 更新

皆様こんにちは。

本日は、ワードプレスでピンタレスト風レイアウトに挑戦してみようと思います。

前回の記事「ワードプレスプラグインCustom Post Type UIの使い方」の続きになります。こちらを読んでいただくとより理解が深まりますので、ぜひ目を通してみてくださいませ。

さて、前回はカスタム投稿タイプでgalleryという投稿ページを新たに作ってみましたが、今回はそれをJSライブラリ「Masonry」を使って、コンテンツをレンガ状に並べて表示させてみようと思います。

ちなみにmasonryとは石工[れんが工]職、石[れんが]造りの建造物、石造建築っていう意味なんですね。

“Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その壱〜” の続きを読む

skrollrでパララックスのランディングページを作ってみよう〜追記あり〜

2022.1.16 更新

皆さまこんにちは。

本日はskrollr再び!skrollrを使ってペラいちのランディングページを作ってみます。

まずはこちらにDEMOを作ってみましたのでご覧ください。
(※firefoxブラウザではきちんと表示出来ないかもしれません。その際はお手数ですが他のブラウザでお試し下さいませm(_ _)m )

skrollrってなに?

パララックス(視差)効果で立体感のあるページが簡単に作れるJavaScriptライブラリです。スマホにも対応してます。まずはダウンロードしてみよう。

“skrollrでパララックスのランディングページを作ってみよう〜追記あり〜” の続きを読む

ワードプレスの翻訳ファイルを書き換えるの巻

2022.1.29 更新

皆さまごきげんよう。

本日はワードプレスで子テーマの翻訳ファイルをいじって、日本語表記を他言語表記に書き換えてみます。

目次

  1. 日本語表記を多言語表記に書き換えとは
  2. moファイルとpoファイルについて
  3. Poeditをインストールする
  4. function.phpファイルに翻訳ファイルを読み込ませる
“ワードプレスの翻訳ファイルを書き換えるの巻” の続きを読む

Jetpackのタイルギャラリーで画像をタイル風に並べてみよう

2022.2.12 更新

皆さまごきげんよう。
本日はワードプレスの人気プラグイン、Jetpackのタイルギャラリーを使ってみた感じをレポートいたします。

Jetpackとは、30種類以上の機能を備えたプラグインです。これひとつ入れておけば大体のことは出来てしまうというくらい多機能ですのでぜひお試しください。

“Jetpackのタイルギャラリーで画像をタイル風に並べてみよう” の続きを読む

ワードプレスのカスタム投稿プラグイン、Custom Post Type UIの使い方

2022.2.6 更新

皆さま、ごきげんよう。
本日はワードプレスに簡単にカスタム投稿ページを作成できるプラグイン、Custom Post Type UIの使い方です。

目次

  1. カスタム投稿タイプとは?
  2. プラグイン Custom Post Type UI をインストール〜設定
  3. 新しい投稿タイプのための固定ページを作る
  4. 新しい投稿タイプの中にタクソノミー(分類)を作る
  5. 新しい投稿タイプにメニューに表示させる
“ワードプレスのカスタム投稿プラグイン、Custom Post Type UIの使い方” の続きを読む

LINEスタンプの作り方 作成編

2022.2.6 更新

皆さまこんにちは。

今回は前回の続き、LINEスタンプ作成編をお送りします。

今回はスキャンしてPCへ取り込んだ画像をフォトショップとイラストレーターを使って仕上げていきます。

使用ソフトは Photoshop cs6、Illustrator cs6 です。

前回の準備編はこちらです。

“LINEスタンプの作り方 作成編” の続きを読む

©2012 freyjasrm.com