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

皆さまこんにちは!
本日はロリポップで複数のドメインにワードプレスをインストールしてみます。
ロリポの説明を読んでも意外とややこしかったので、備忘録として書き留めておきたいと思います(笑)

複数ドメインにワードプレスをインストールする前に、念のため今あるサイトのバックアップを取っておきましょう。
“ロリポップで複数ドメインにワードプレスをインストールしてみよう” の続きを読む

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

こんにちは!
やっと猛暑が去ったと思ったら、憂鬱な連日の長雨..(´・ω・`) 皆さまいかがお過ごしでしょうか?
秋晴れが恋しい今日この頃であります。

さて、皆さまはサイトのバックアップを定期的に取っていらっしゃいますか?
今日は案外やっていない?!ワードプレスのバックアップの取り方についてやってみたいと思います。

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

1.ワードプレスでバックアップを取る

まずは、ワードプレス側でバックアップを取ります。
ダッシュボード > ツール > エクスポート
エクスポートする内容を選択で、すべてのコンテンツにチェックを入れ、エクスポートファイル(xmlファイル)をダウンロードします。
画像の右がエクスポートされたxmlファイルです。ちなみに左は、次にやるphpMyAdminでのsqlファイルになります。
file

2.phpMyAdminでバックアップを取る

お使いのサーバーのデータベースからバックアップを取ります。ここではロリポップを例に説明いたします。
ロリポのFTPへログインし、webツール > データベース
ここでまだデータベースを作成されていない方は作成します。
すでにデータベースを作成されている方はphpMyAdminを開くをクリックしてphpMyAdminにログインしますが、その際にサーバー名のmysql◯◯◯の部分を覚えておいてください。
pma00
“ワードプレスのバックアップを取る方法” の続きを読む

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でパララックスのランディングページを作ってみよう〜追記あり〜” の続きを読む

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

全国のワードプレスラバーの皆さま、こんにちは(^^)/
今回はワードプレスに簡単にカスタム投稿ページを作成できるプラグイン、Custom Post Type UIの使い方です。

目次
1.カスタム投稿タイプとは?
2.プラグイン Custom Post Type UI をインストール〜設定
3.新しい投稿タイプのための固定ページを作る
4.Galleryの中にタクソノミー(分類)を作る
5.メニューに表示させる

“ワードプレスのカスタム投稿プラグイン、Custom Post Type UIの使い方” の続きを読む

svgアニメーションで動くロゴを作ってみよう

インターネッツの皆さまこんにちは。
2014年もあとわずか、ということで今年勉強したことなどを振り返りつつ、自分的に押さえておきたい項目を改めて記しておきたいと思います。

本日は、今じわじわ来てるSVGを使った表現方法をひとつやってみたいと思います。
こちらが今回作成したロゴです。まずはご覧ください。線と塗りをそれぞれアニメーションさせています。

☆svgのロゴ DEMO

SVGアニメーションで動くロゴを作る

使用するソフト:イラストレーター
css3でアニメーション設定

それでは順を追って作り方を説明いたします。

1.イラストレーターでロゴを作成する

テキストツールで文字を書きます。フォントは少し太めの方がいい感じに仕上がるかも。

2.テキストをアウトライン化する

テキストを選択して右クリック>アウトラインを作成します。
outline_03

3.SVGコードを取得

ファイル>別名で保存>ファイル名を付けたら保存するファイル形式をSVG(svg)を選択します。
(SVG圧縮(svgz)は圧縮ファイルですのでファイルサイズが1/3くらいに軽くなりますが、テキストエディタで編集出来ないのでここではSVG(svg)を使います。)
svg(svg)_03
“svgアニメーションで動くロゴを作ってみよう” の続きを読む

skrollrを使ってパララックスのシングルページサイトを作ってみました

skrollrでパララックスしよう!

更新していなかった間、な〜んにもしていなかった訳ではなく(^^;A 最近よく見るパララックスのシングルページサイトを作ってみました。
シングルページということで単調にならない様、ちょっとしたギミックを加えたかったので、前回の記事でやった簡単にパララックス(視差効果)を実装できるjQueryプラグイン、skrollrを使いました。
skrollrの使い方についてはこちらの記事をご参照下さい。

こちらが今回作成した↓↓↓
パララックスでポートフォリオサイト
です。

あるフォトグラファーのポートフォリオサイト、という設定です。(ご注意!PCでご覧下さい ><) パララックスは、画面いっぱいに画像を配置して見せるサイトにはぴったりだと思います。 サイトを作るにあたり用意したもの

  • skrollrlightboxのJqueryプラグイン
  • スライドショー用とサムネイル用に大きさの違う画像2種
  • icomoonで必要なアイコンフォントセットを作り、ダウンロード。(icomoonの使い方についてはこちらをご参照下さい。私も記事書いておりますので宜しくです。)

top画面は、以前りんごの勉強会にてcss3のアニメーションプロパティを使ってスクリーンセーバーを作った時と同じで要領で、画像を動かしています。作り方はこちらの記事を参考にしてみて下さい。

css3でスクリーンセーバー

bxsliderなどのJqueryを使うのもよいかもです。

さらにスクロールしていくと、スクロール量に応じてそれぞれのセクションが現れては消えるようになっています。イメージは紙芝居ですかね。
各セクションにskrollrのdata属性を付けて動かしています。

ページ内リンクをJqueryで制御する

“skrollrを使ってパララックスのシングルページサイトを作ってみました” の続きを読む

パララックスが簡単に実装出来る!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の使い方” の続きを読む

ワードプレスとツイッターを連携させる

大変お久しぶりになってしまいました(^^;。
今日はワードプレスとツイッターを連携させてみよう、の巻です。

目次
1.WP to Twitterをインストールする
2.Twitter側の設定をする
3.Twitterからキーを取得する
4.ワードプレス側の設定をする

なぜワードプレスとツイッターを連携させるのか?
以前の記事、ワードプレスにいいね!ボタンを設定してみようでも触れましたが、
ツイッターと連携させるメリットを挙げてみますと、
“ワードプレスとツイッターを連携させる” の続きを読む