jQuery/CSS3で雲をゆらゆらさせる
jQuery/CSS3で雲をゆらゆらさせる 雲の画像を背景に設定してゆらゆらさせてみました。 jQueryバージョンとCSS3バージョンでお送りいたします。 投稿日2013年03月29日 更新日2013年03月29日 はじめに雲の画像を用意します。 パララックス的にした方がクールだと思ったので大きい画像と小さい画像を作成しました。 わかりやすいように背景がブルーになっていますが、実際は透過pngです。 ちなみに雲の素材はこちらの素材サイト様からお借りいたしました。 商用フリーで使える影絵素材サイト シルエットデザイン jQueryバージョン 最初はjQueryバージョンです。 画像が2つあるのでdivを2つ作成して適当なidを割り当てます。 html <div id="main-img"><div id="bg"></div></div> CSSはそれぞれのdivに作成した画像を「back
CSSだけでレスポンシブで画像ナビゲーションをテキストに切り替える
Posted: 2012.11.09 / Category: HTML&CSS, javascript / Tag: jQuery, レスポンシブ グローバルナビゲーションはPCだと画像で作る場合が多いですが、スマホだとCSS3がフルに使えたりフォントが綺麗だったりするので、画像ではなくテキストで表示したいことがあります。 そこでレスポンシブで画像をテキストを切り替える方法をご紹介します。 html & css 画像をリストで配置した他にaタグにdata属性でaltと同じテキストを記述してます。 html <nav> <ul> <li><a href="#" data-label="ホーム"><img src="img/nav01.png" alt="ホーム" width="108" height="58" /></a></li> <li><a href="#" data-label="サ
jQueryのanimateで自由にアニメーションできるようになろう
Posted: 2011.12.27 / Category: javascript / Tag: jQuery, アニメーション jQueryにはアニメーションをするための機能がいろいろとありますが、ここでは「animate」メソッドの扱い方をご紹介いたします。 動かす前の準備 jQueryの前に動かす要素をhtml&cssで作成しておきましょう。 html <div id="box"></div> css #box { width: 100px; height: 100px; background: #3399FF; } jQueryコードを書くときの基本的な形は次のようになります。 javascript <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.m
jQueryでスクロールすると表示する系いろいろ
Posted: 2012.03.08 / Category: javascript / Tag: jQuery, アニメーション 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-
jQueryでスクロールすると上部に固定されるナビゲーション
Posted: 2012.02.21 / Category: javascript / Tag: jQuery グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">LINK</a></li> </ul> <!-- /#nav --></div> <div id="artic
WordPressでプラグインを使用しないでお手軽にメンテナンスモードにする方法
Posted: 2011.06.01 / Category: WordPress Wordpressにはメンテナンス中の場合に「メンテナンス中です」などと表示させるプラグインがありますが、ここではfunctions.phpにコードを記述してお手軽にメンテナンス画面を表示する方法をご紹介します。 以下のコードを現在使用しているテーマフォルダの「functions.php」に記述します。 「functions.php」がなければ作成しましょう。 functions.php function wpr_maintenance_mode() { if ( !current_user_can( 'edit_themes' ) || !is_user_logged_in() ) { wp_die('<h1>ただいまメンテナンス中です。</h1><p>ご迷惑をお掛けしています。</p>'); } } ad
WordPressのカスタム投稿タイプでイベント情報ページを作ってみる
もくじ カスタム投稿タイプの設定 カスタム分類（タクソノミー）の設定 カスタムフィールドで日付を入力 jQuery UI で日付を入力しやすくする イベント一覧画面に項目（カラム）を追加する 未来のイベントだけを表示するアーカイブテンプレート 月別にイベントを表示する 月別にイベントにリンクするナビゲーション また、タイトルいは「カスタム投稿タイプで」なんて書いてありますが、どちらかというとメタデータで日付の取り扱い的なことがメインとなっています、ベーシックなカスタム投稿タイプの例は「WordPressのカスタム投稿タイプで作るよくある質問（Q&A）ページ」 をご覧ください。 カスタム投稿タイプの設定 管理画面で入力するところから作っていきます。最初はカスタム投稿タイプです。 function.php function event_postype() { $labels = array(
WordPressのカスタム投稿タイプで作るよくある質問（Q&A）ページ
Posted: 2010.11.07 / Category: WordPress / Tag: テンプレートカスタマイズ Wordpress3.0に追加された目玉機能（？）としてカスタム投稿タイプというものがあります。 こちらの機能は通常のブログなら特に必要ない機能ですが、CMSとして使用する場合はかなり便利らしいです。 いまさらという感じはしますが、カスタム投稿タイプを使用してコーポレートサイトでありがちな「よくある質問（Q&A）ページ」の作成を行います。 カスタム投稿タイプとは 例えば「お知らせ」「よくある質問」などのページを作成したい場合、今までだったらカテゴリー分けなどでやりくりしていたと思います。 でもこれだと、しょせんブログでなんとかやってるって感じで、わかりやすいとは言えませんでした。 今までは投稿やページなど決まった項目にしか記事を書けませんでしたが、カスタム投稿タイプを使
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
