イラストレーターでシームレスなパターンを作ろう

皆さまごきげんよう。
厳しい残暑が続いておりますがですがいかがお過ごしでしょうか?まだまだ日中は暑いとはいえ日の入りが早くなってきて、季節は着々と秋に向かっているのだなぁ..と嬉しいような寂しいような今日この頃です。

さて、本日はイラストレーターでシームレスなパターンを作ってみようと思います。
使用するソフトはCS6です。

イラストレーターでモチーフを作る

まず、適当なモチーフを描きます。私は円に適当に直線を交差させたものにライブペイントで色を塗ってみました。

描いたモチーフの背面に、長方形ツールで、塗りなし、線なし、の四角形を配置(四角形を右クリック > 重ね順 > 最背面へ)します。

モチーフを密に配置したければモチーフの大きさ同等の大きさで、逆に間隔を空けたければモチーフより大きめの四角を作ると良いと思います。
p_01
配置出来ましたら、四角形とモチーフ両方を選択し、そのままスウォッチパネルへドラッグします。(又は、両方を選択した状態で オブジェクト > パターン > 作成)

p_02

パターンを編集する

スウォッチパネルに登録されましたら、サムネイルをダブルクリックしてパターンの編集画面へ入ります。この画面では、モチーフの大きさの変更や変形、更に、新しいモチーフを付け足す等のことが出来ます。ちなみに、1.でモチーフの背面に配置した透明な四角形も、パターンオプションの幅と高さで調節してモチーフの並びの密度を変えられます。

今回は先ほどのモチーフに更に円を一つ足してみようと思います。タイルの種類やモチーフの配置をいろいろと変えてみて、良いバランスを探してみてください。OKなら上部にある ○完了 をクリックします。(何度でも編集出来るのもgoodです ^^b)

p_03

元の画面に戻ったら↓、適当な長方形の塗りを先ほど作ったパターンにしてみます。

p_04

これだと背景が透明なので、この長方形をコピー(ctrl+c)、背面にペースト(ctrl+b)して、塗りを好きな色に変更します。

p_05

見方によっては手毬のような、はたまたCDのような?パターンの完成です(笑)

いくつか作っていくうちに作業もだんだん慣れてくると思います。
サイトの壁紙にしてみたり、プリントアウトして包装紙を作ったり。最近では、自分でデザインしたTシャツやグッズなどを作って売れる、という便利なサービスもたくさんあることですし、オリジナルなデザインをオンラインで売ってみるのもいいですね!

ぜひ皆さまも色々作ってみてください!それでは次回まで、ごきげんよう(^^)/

スマホでもパララックスを実装してみよう、の巻

皆さまごきげんよう!梅雨も明けいよいよ夏本番、いかがお過ごしでしょうか?

皆さまも、部屋でお仕事や勉強をしている時にBGMをかけたりすると思うのですが、集中力を高めるのにホワイトノイズがいいらしい、ということで私、久々に使ってみて良かったのがこちら、noisliです。説明するまでもないですが、アイコンをクリックして表示されるバーを動かして音量調節します。直感的に操作できるシンプルさと、自分で好きなように音をミックスできるところがいいんです。聞いているだけで心落ち着きますし、ほんとお勧めです。ぜひお試しあれ♪

さて、本日はスマートフォンでのパララックス(視差)的な動きを、cssを使って演出してみようと思います。

以前、パララックスを簡単に実装できるskrollrというjsライブラリを使って、シングルページを作ってみたのですが、PCでは思い通りのパララックスが表現出来るものの、skrollrはスマホに対応していないため、せっかくの効果がスマホで見ることが出来ませんでした。そこで、今回はskrollrを使わずにスマホでパララックスを実装してみようと思います。

●以前の記事、skrollrでパララックスのランディングページを作ってみよう〜追記あり〜こちらの続編となりますので、ざっと目を通しておいていただきますとよりわかりやすいと思います。

元になるhtmlとcssファイルは、前回の「skrollrでパララックスのランディングページ」で使ったものをskrollr用の記述だけを外して使用しました。

スマホではbackground-attachmentが効かない?

スマホではなぜかcssのbackground-attachment: fixed;が効かないため、背景を固定するといったパララックス的な動きが出せません。しかもbackground-size: cover;もPCでは問題無く表示されるのに、スマホで見るとなぜか拡大されてしまい画像がきちんと表示されません。(><);; そこで、今回は背景画像が置いてある「div class="section1"」に擬似要素::beforeを使い、その疑似要素のpositionをfixedにする、という方法で対処しました。具体的にはbackground-attachment: fixed;の代わりにposition: fixed;と指定して、z-index: -1;で画像をコンテンツの背後に置く、といった感じです。


.section1 {
 height: 100vh;
 padding:10% 0;
}

.section1::before{
 background: url("../img/008-s.jpg");
 background-position: center center;
 background-repeat: no-repeat;
 background-size: cover;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 /*background-attachment: fixed;*/
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 padding: 10% 0;
 content: "";
 z-index: -1;
}

メディアクエリでPC用の記述もしておきます。


@media screen and (min-width: 980px) {
 /*980px以上用(PC用)の記述 */
.section1 {
 background: url("../img/008.jpg") no-repeat fixed center center /cover;
 padding: 10% 0;
}

背景画像にパースペクティブ感を出す

前回の「skrollrでパララックスのランディングページ」ではsection1、section3に置いた画像に対してtransform: scaleで画像が微妙に遠ざかっていく感じを出しましが、これを今回はsection3にcssアニメーションで表現してみました。(スマホではfixedした背景画像が一枚しか見えないため、このアニメはPCでご覧下さいませ)


.section3 {
 background: url("../img/006.jpg") no-repeat fixed center center /cover;
 -webkit-animation: bg_anime1 20s -2s infinite linear alternate;
 animation: bg_anime1 20s -2s infinite linear alternate;
}

@-webkit-keyframes bg_anime1 {
 0% {-webkit-transform: scale(1) ;}
 100% {-webkit-transform: scale(1.1) ;}
}

@keyframes bg_anime1 {
 0% {transform: scale(1) ;}
 100% {transform: scale(1.1) ;}
}
}

まとめ

スマホ対応パララックス完成!
skrollrを使った時のように文字やアイコンまで動きは付けられませんが、「スマホでもパララックス風」な背景を固定させることが出来ました。背景画像が1枚だけでしたらこの方法で出来ると思います。

しかしデモでは本来、PC用ではsection1とsection3に違う画像を配置してあり、スマホでも全く同じように見せることは出来ていません。画像を表示したい位置をjavascriptで取得する、という方法がありそうですが、スマホで複数の背景画像をパララックスさせるには、私がもう少し勉強する必要があるようです(^^;A

他にもこんな方法があるよ!と良いアイデアをお持ちの方、いらっしゃいましたらぜひご教授下さいませ!コメントいつでもお待ちしております(^^)ゞ

ソース

html


<!DOCTYPE html>
<html lang="ja">
 <head>
	<title>LandingPage</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="css/style_2.css">
  <link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="icomoon/style.css">
 </head>

 <body>
  <div>
   <div class="section1">
    <h1>VIEW FROM<br>A DIFFERENT ANGLE</h1>
    <p class="words">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, tempora voluptatum porro. Harum odio, sapiente dicta.</p>
    <p class="kigou">▽</p>
   </div>

   <div class="section2"><!-- メニュー -->
    <ul>
     <li class="nav"><a href="">about us</a></li>
      <p>Morbi aliquet enim nisi, vel sollicitudin dui vulputate a. Sed interdum volutpat tortor id feugiat. Donec condimentum malesuada diam, et sodales elit accumsan quis.</p>
     <li class="nav"><a href="">members</a></li>
      <p>Mauris cursus tellus nec condimentum aliquam. Vivamus varius pretium ullamcorper. Phasellus odio neque, imperdiet pulvinar euismod id, tempor id metus.</p>
     <li class="nav"><a href="">blog</a></li>
      <p>Proin eu enim vitae magna tempor maximus vitae sit amet velit. Donec id felis dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
     <li class="nav"><a href="">gallery</a></li>
      <p>Nullam nibh velit, sagittis a semper et, faucibus eu odio. Maecenas commodo suscipit leo sed vestibulum. In ultrices cursus tincidunt. Sed laoreet leo lacus, sit amet vestibulum dolor tristique vel. </p>
    </ul>
   </div>

   <div class="section3"><!-- 画像 -->
    <h2>Section3</h2>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam venenatis tristique risus nec ornare. Praesent et justo et ipsum fermentum dignissim vel eget odio. Aliquam feugiat ornare neque non pellentesque. Fusce accumsan, sem et lobortis commodo, lacus enim rutrum tellus, et iaculis augue tortor a mi. Nullam id aliquet elit, at luctus justo. Aliquam cursus, arcu sed sagittis tincidunt, lacus mauris malesuada justo, eu dapibus risus mi vitae elit.</p>
    <p>Praesent congue tincidunt sagittis. In vestibulum sodales enim, sit amet lobortis risus ornare sit amet. Ut sed augue lacus. In hac habitasse platea dictumst. Donec rutrum auctor nisi, vel finibus diam congue ut. Aliquam vel gravida nulla. Sed finibus gravida tincidunt. Suspendisse in neque sodales, rutrum massa ut, gravida mauris. Vivamus erat libero, consectetur ac blandit sit amet, tempor tincidunt tortor.</p>
    <p></p>
   </div>

   <div class="section4"><!-- ソーシャルボタン -->
    <h2>contact</h2>
    <p>Proin eu enim vitae magna tempor maximus vitae sit amet velit. Donec id felis dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    <br>
    <p class="follow">follow us</p>
    <ul class="web-logo-font">
     <li class="twitter-btn-icon">
      <a href="#" class="twitter-btn-icon-link"><span class="icon-twitter"></span></a>
     </li>
     <li class="facebook-btn-icon">
      <a href="#" class="facebook-btn-icon-link"><span class="icon-facebook"></span></a>
     </li>
     <li class="google-plus-btn-icon">
      <a href="#" class="google-plus-btn-icon-link"><span class="icon-googleplus"></span></a>
     </li>
     <li class="line-btn-icon">
      <a href="#" class="line-btn-icon-link"><span class="icon-line"></span></a>
     </li>
    </ul>
   </div>
  </div>
 </body>
</html>

css


html, body {
 height: 100%;
}

body {
 position:relative;
 margin: 0;
 padding: 0;
 height:100%;
 text-align: center;
 overflow-y: scroll;
 overflow-x: hidden;
 text-shadow:0.02em 0.02em 0.02em #777;
}

div{
 margin:0;
 color:#fff;
 letter-spacing: 0.2em;
 text-align: center;
 width:100%;
 min-height:45em;
 padding:0;
}

h1{
 margin:0;
 font: 4em bold;
 padding:2em 0;
}

h2{
 margin:0;
 font: 3em bold;
 padding: 1.5em;
}

a, a:visited {
 color: #fff; text-decoration: none;
}

a:hover {
 color: #ec5637;
}

p{
 margin:0 20%;
 padding:4% 0;
 font-weight: normal;
}

.kigou{
 font-size: 2em;
 margin: 0;
 padding:1em;
}

ul{
 margin:0;
 padding:0;
}

.nav{
 font: 3em bold;
 list-style: none;
 color:#444;
}

.section1 {
 height: 100vh;
 padding:10% 0;
}

.section1::before{
 background: url("../img/008-s.jpg");
 background-position: center center;
 background-repeat: no-repeat;
 /*background-attachment: fixed;*/
 background-size: cover;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 padding: 10% 0;
 content: "";
 z-index: -1;
}

.section2 {
 background: #222;
 padding:10% 0;
}

.section4 {
 background:#222;
 padding: 10% 0 20%;
}

.follow{
 font-size: 1.5em;
}

ul.web-logo-font {
 margin:0 auto;
 padding-left: 0;
 padding-top: 1em;
 font-family: sans-serif;
}

ul.web-logo-font li {
 display:inline;
 list-style-type: none;
 margin-right: 5px;
 padding-right: 5px;
}

ul.web-logo-font li a{
 font-size: 5em;
 text-decoration: none;
 color: #fff;
 padding: 7px;
 border-radius: 5px;
}

ul.web-logo-font li a:hover{
 opacity: 0.6;
}

/*背景色などの設定*/
ul.web-logo-font a.twitter-btn-icon-link{
 background-color:#55ACEE;
 padding:0.1em 0 0 0.1em;
}
ul.web-logo-font a.facebook-btn-icon-link{
 background-color:#3C5A99;
 padding:0.1em 0 0 0.1em;
}
ul.web-logo-font a.google-plus-btn-icon-link{
 background-color:#DD4B39;
 padding:0.1em 0 0 0.1em;
}
ul.web-logo-font a.line-btn-icon-link{
 background-color:#00C300;
 padding:0.1em 0 0 0.1em;
}


@media screen and (min-width: 980px) {
 /*980px以上用(PC用)の記述 */
.section1 {
 background: url("../img/008.jpg") no-repeat fixed center center /cover;
 padding: 10% 0;
}
.section3 {
 background: url("../img/006.jpg") no-repeat fixed center center /cover;
 -webkit-animation: bg_anime1 20s -2s infinite linear alternate;
 animation: bg_anime1 20s -2s infinite linear alternate;
}

@-webkit-keyframes bg_anime1 {
 0% {-webkit-transform: scale(1) ;}
 100% {-webkit-transform: scale(1.1) ;}
}

@keyframes bg_anime1 {
 0% {transform: scale(1) ;}
 100% {transform: scale(1.1) ;}
}
}

@media screen and (max-width: 768px) {
 /* 768px以下用(タブレット) */
 div{
  min-height:35em;
  }
}

@media screen and (max-width: 479px) {
 /* 479px以下用(スマホ) */
 div{
  min-height:20em;
  }
 h1{
  font-size: 2em;
 }
 h2{
  font-size: 2em;
 }
 ul{
 padding:20% 0;
 }
 .nav{
 font-size: 2.5em;
 }
 .section4{
 padding-top: 3em;
 }
 ul.web-logo-font li a{
 font-size:3em;
 }
 .kigou{
 font-size: 1.8em;
 margin: 0;
 padding:0.5em;
}
.words{
 margin-top: -1.5em;
}
}

コードをハイライトさせるワードプレスプラグイン「WP Code Highlight.js」を使ってみた

皆さまごきげんよう。ジメジメとうっとおしい季節、いかがお過ごしですか?
これから梅雨明けも間近に控えて、夏が大の苦手な私が最近気になっているのが「空調ざぶとん」って云うんですか?お尻にヒンヤリ空気を運ぶという、ファンが付いた座布団です。どの程度の音がするのか?気になるところですが、これを会社で使いたい(笑)。あと冷房服。すごく着てみたい(笑)。

さて、今まで使っていたコードをハイライトさせるプラグイン、「Crayon Syntax Highlighter」が一体いつ頃からなのか?なぜか今まで通りに表示されなくなっていまして、まぁ、動作が重かったこともありますし、この度これに代わるプラグイン「WP Code Highlight.js」を使ってみることにしました。

プラグイン「WP Code Highlight.js」を設定する

●プラグイン → 新規追加 からプラグインの検索窓に WP Code Highlight.js と入れて検索 → インストール → ネットワークで有効化します。

●設定 → WP Code Highlight.js から設定します。
set

Packageの Common で足りない方は▼から All、または Custom を選んで必要な言語にチェックを入れます。

Color Schemeは、こちらから、Styles でデモを見ることが出来ます。気に入ったものを▼から選びます。
codehl

●あとは特にいじらずにSaveボタンをクリック。

使い方も簡単で、コードを

<pre><code> ここにコードを書く </code></pre>

で囲むだけでOKという手軽さです。言語も自動で判別してくれます。
ちなみにハイライトさせたくない場合は

<pre><code class="nohighlight"> </code></pre>

これで囲むそうです。(ですが、単に <code> </code>を外してもハイライトされませんね。)

ただし、htmlなどで使われる特殊文字(&、”、<、>)は、マークアップ文字(&amp、&quot、&lt、&gt)に変換してから、

<pre><code>  </code></pre>

で囲んであげてくださいね。

こちらなどの文字変換サイトが便利です。

Crayon Syntax Highlighter ほど多機能ではないですが、その分気持ち軽くなったようではあります。それほどがっつりコードを載っけるわけでもないので、これくらいで充分かなと思います。

この記事を読んでくださった皆さま、他にもお勧めのシンタックス・ハイライト系のプラグインなどありましたら、ぜひ私にも教えてくださいませ!宜しくお願いします(^^)ゞ

photoshopで画像加工の巻

皆さまごきげんよう。
本日はスマホで普通に撮った写真をフォトショップ(cs6を使用)を使って色々と加工してみようと思います。どれも2、3ステップで出来るとっても簡単なものばかり!ではさっそくやってみましょう(^^)/

目次

1.ミニチュアジオラマ風に加工する

ミニチュア風は、対象物以外をボカす、カラフルな色合いする、とそれっぽくなります。ではこの写真を加工してみます。
station
まずレイヤーパネルの▼≡から、レイヤーを複製で背景コピーを作ります。
その背景コピーを、フィルター > ぼかし > チルトシフト
station-ss00
いい感じになるまで位置やぼかし具合を調整します。
station-ss01
今回は更に虹彩絞りぼかしも加えて円形にもぼかしてみました。
続きを読む photoshopで画像加工の巻

jQueryでティッカーを作ってみよう

皆さまごきげんよう。
よく、駅なんかで右から左へ情報が流れてくる電光掲示板てあるじゃないですか。最近のwebではめっきり見かけなくなりましたが、そんな今コレを取り入れたら逆に新しいんじゃないの?!ということで、(笑) 本日はjQueryで電光掲示板のようなもの(ティッカー)を作ってみようと思います。

なにもわざわざjQuery使わなくてもcss3のアニメーションでいいんでない?とも言えますが、流す文章が一つのみならそれで良いのですが、リストになった文章がいくつかあり、それが増えたり減ったりする場合、jQueryでプログラムを書いておくと便利です。

それでは早速やってみましょう。

1.css3でアニメーションの設定

まず、bodyの中にulとliがいくつか入っただけの簡単なhtmlファイルを作成します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ticker</title>

</head>
 <body>
   <ul>
     <li>居候三杯目にはそっと出し</li>
     <li>人間万事塞翁が馬</li>
     <li>馬も買わずに鞍を買う</li>
     <li>実るほど頭を垂れる稲穂かな</li>
   </ul>

 </body>
</html>

続きを読む jQueryでティッカーを作ってみよう

jQueryで座標を取得してみる

どうも!前回からちょっと間が空いてしまいましたが、すっかり花粉の季節ですね(>< ); 皆さまいかがお過ごしでしょうか?私はマスクとメガネの日々を過ごしております。マスクとメガネ、二つも耳に掛かっていると本当にストレスなんですよね(´・ω・`)…
さて、今回はjQueryで座標を取得してみようの巻です。
マウスカーソル(タッチデバイスでは指)を画面上で滑らせると、その軌跡に沿って★が描かれるというものです。
このような物を作ってみます。↓

zahyo-wp01

目次
1.座標を取得するには〜offsetとclientX、clientY
2.変数を定義する
3.clone関数で要素にappendToする
4.setTimeout関数とは
5.タッチイベントとマウスイベント
6.まとめ
7.ソース

まず簡単なhtmlファイルを用意しました。
★が入った、元になるdiv id=”box”を用意し、★を描くキャンバスとなる、div id=”box2″と、座標が取得できているか確認用に座標の位置を表示するためのdiv id=”count”(中にXとYそれぞれの座標をカウントするためのdivが二つ)という構成です。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>zahyo</title>
<link rel="stylesheet" href="zahyo-wp.css" type="text/css">
</head>
 <body>
  <h1>画面上をなぞってみよう</h1>
  <div id="box">★</div>
  <div id="box2"></div>
  <div id="count">
    <div class="zahyou">
     <h3>x座標</h3>
     <p id="x-pos"></p>
    </div>
    <div class="zahyou">
     <h3>y座標</h3>
     <p id="y-pos"></p>
    </div>
  </div>
 </body>
</html>

1.座標を取得するには〜offsetとclientX、clientY

座標を取得する、とざっくり言ってもどこが基準のどの部分の?と最初は悩んでしまうと思います。座標は取得したい場所によってプロパティも使い分けなくてはなりません。
今回の座標の取得に使うプロパティはふたつ、
要素の座標を取得するにはoffsetというプロパティを使います(ここでの要素とは★を出すキャンバスであるdiv id=”box2″)。
ブラウザのウィンドウ内での座標を取得するにはclientX、clientYというプロパティを使います。

座標の位置と取得方法についてはこちらを参考にさせて頂きました!図解でとてもわかりやすく説明されております。
イベントが発生した時のマウス情報を取得するには?
jQueryでのサイズ、座標の取得方法まとめ
続きを読む jQueryで座標を取得してみる

ワードプレスの背景に雪を降らせてみよう

皆さまごきげんよう!
暮れも押し迫ってまいりましたが、いかがお過ごしでしょうか?
大晦日までには不要なものを全部捨ててやろう!と張り切っている私ですが、まだ何も手を付けていません(^^;

ところで、最近ネットで魔夜峰央先生の 全埼玉県民が泣いた!伝説の埼玉Disマンガ『翔んで埼玉』が今頃になって話題になっているということで、大変気になっていたのですが、既に持ってた(笑)『やおい君の日常的でない生活』という本の中に収録されていました。昭和時代に買ったもんですっかり忘れてましたが、よく今まで取っておいたもんだ。こんなんで「不要なものを全部捨ててやろう!」なんて本当に出来るのでしょうか?!(^^;A

ま、それはさておき(笑)今日は、前回のjQueryで雪を降らせてみようのファイルを元に、ワードプレスの背景に雪を降らせてみようと思います。

1.cssをワードプレス用に書き換える

さて、ワードプレスにどうやって雪を降らせるか?考えたのは、画面の一番上に雪の降るレイヤーを乗っける、という方法です。
前回はdivを一粒の雪片としましたが、ワードプレスの中にはたくさんのdivが存在していますので、区別するためにまずidを付けたいと思います。
今回はsnoowというidを作り、設定を以下のようにしてみました。


 #snoow{
    position: fixed;
    top:0;
    left:0;
    overflow: hidden;
    z-index: 99;
    width: 100%;
    height: 100vh;
    pointer-events: none;
  }

z-index: 99;で画面の一番上の層にくるようにします。(Photoshopのレイヤー構造のイメージです)

また、pointer-events: none;にすることで、リンクへのタップ、クリックが可能になります。これを書き加えないと、画面に一枚のガラス板が張られたかのごとく、リンク先をクリック、タップしても動作しませんのでご注意!

あとは前回とほぼ一緒ですが、divに#snoowを付けたところと、スマホでの見え方も考慮してanimationの雪の落下速度をゆっくり目にして単位をemからvwなどに変更しています。以下cssの全文です。

続きを読む ワードプレスの背景に雪を降らせてみよう

jQueryで雪を降らせてみよう

皆さまこんにちは!

早いもので今年も残すところあと1ヶ月、光陰矢の如し、ですね。皆さま今年の目標は達成出来ましたでしょうか?
私は残念ながら、未だ何ひとつ達成出来ないままムダに年だけ取るという(笑)ってまだまだあと残り1ヶ月、最後まで頑張りますよ!(^^;A

ま、それはさておき(笑)今日はちょっと季節を感じる、jQueryで雪を降らせてみようの巻です。

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

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

htmlファイルを作る

今回は htmlファイル、cssファイル、jsファイル の3つのファイルを作ります。
ファイル名は、それぞれsnow.html、snow.css、yuki.jsとしました。

簡単なhtmlファイルはこんな感じで。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>雪を降らせてみる</title>
<link rel="stylesheet" href="snow.css" type="text/css">
</head>

 <body>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <!-- jQueryを読み込むためのリンク -->
    <script type="text/javascript" src="yuki.js"></script>
 </body>
</html>

続きを読む jQueryで雪を降らせてみよう

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

皆さまこんにちは!
暑さ寒さも彼岸まで。ようやく過ごしやすい季節になってまいりましたね!スポーツの秋、読書の秋、色々な秋がありますが、私はやはり「食欲の秋」でしょうか(笑)
さて本日は勉学の秋、jQueryとcssを連携させて、タブでページを切り替えて表示させてみようと思います。

今回作ってみるもの↓
jq-tab

jQueryの本体を読み込む

まずは簡単なhtmlファイルを作っておきます。
今回は4つのタブを作りますので、bodyの下にsectionを4つ作ります。その4つのsectionを一つのdivで囲み、id=”j-tab”としておきます。pタグの中には適当にダミーテキストを入れておきます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>tabをjQueryで実装してみよう!</title>
</head>
<body>
  <h1>tabをjQueryで実装してみよう!</h1>
  <div id="j-tab">
    <section>
      <h1 class="selected">page1</h1>
      <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
      </div>
    </section>
    <section>
      <h1>page2</h1>
      <div>
        <p>Vestibulum ante ipsum primis in faucibus orci luctus.</p>
      </div>
    </section>
    <section>
      <h1>page3</h1>
      <div>
        <p>Donec cursus odio vitae quam interdum, vitae vestibulum dolor luctus.</p>
      </div>
    </section>
    <section>
      <h1>page4</h1>
      <div>
        <p>Vivamus venenatis sapien elit, id aliquam libero ullamcorper in.</p>
      </div>
    </section>
  </div>
</body>
</html>

それでは、jQueryを読み込ませてみましょう。
まず、bodyの閉じタグ</body>の直前にscript要素を作ります。

jQueryを利用するにはjQueryライブラリを読み込ませる必要があります。その際、CDN(コンテンツ・デリバリー・ネットワーク)を利用したほうが、キャッシュを活用することでページの読み込みの高速化も期待できますので、CDNで指定します。

jQueryCDN で検索すると、jQuery本家やgoogleから提供されているものがあります。どれでも良いのでリンクをコピーし、先ほどbodyの閉じタグ</body>の直前に作ったscript要素のsrc=” “内にペーストします。

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</body>

●CDNのリンク

続きを読む jQuery でタブを実装してみよう!

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

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

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

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

ネームサーバー(DNSサーバー)設定の変更

まずは、取得しているドメインをロリポップで使えるように設定します。ここでは、ロリポとセットでよく使われているムームードメインを例にご説明いたします。

ムームードメインにログインし、 ドメイン操作 > ネームサーバ設定変更 から、ネームサーバ設定変更ボタンをクリックしましたら、次の画面で「ロリポップ」にチェックを入れネームサーバ設定変更ボタンをクリックしておいてください。反映されるのに2〜3日、時間がかかる場合もあるとのことです。

●ムームードメイン ネームサーバのセットアップ方法
続きを読む ロリポップで複数ドメインにワードプレスをインストールしてみよう

wordpressで素敵サイト作成に奮闘中!な私の備忘録的徒然日記。