プレビュー ↓別ウィンドウを開いて見る jquery.mousewheel.jsポイント jquery.mousewheel.js Downloads · brandonaaron/jquery-mousewheel · GitHub jquery 1.7.2とmousewheel.js ver.2.2：動作× jquery 1.6.1とmousewheel.js ver.2.2：動作○ jquery 1.7.2と…
横スライドギャラリーが作れるjQueryプラグイン「easySlider.js」を試してみました。プレビュー ↓別ウィンドウを開いて見る jquery easySliderポイント easySlider.js Easy Slider 17 Numeric Navigation jQuery Slider | CSS Globe ↓基本 $(function(){ $("…
ステップ１：ヘッダー部分を編集 管理画面の「設定」＞「ヘッダー部分を編集」 ステップ２：smoothScroll.js smoothScroll.jsをコピーしてscriptタグで囲んで記述欄にペーストし、「保存」をクリック <script> コピーしたソースコード </script> ステップ３：ウィジェット/htm…
自宅のローカルサーバー（XAMPP）にインストールしたWordPressをマルチサイト化（複数サイト管理化）してみました。
プレビュー ↓別ウィンドウを開いて見る no3designポイント jQuery Easing Plugin 加速・減速など動きに強弱のついたエフェクト（イージング処理）をつけられるjQueryプラグイン jQuery Easing Plugin jquery.vgrid.js 可変グリッドレイアウトjQueryプラグイ…
デフォルトテーマ「Twenty Ten」を記事ごとにサムネイルを表示するようにカスタマイズしました。 使っていないphpファイルもありますが、見た目はお手本に近い形になりました。授業で習い次第、修正していきたいと思います。プレビュー 全体像（↓クリックす…
ローカルサーバーにインストールしたWordPressをDreamweaverのライブビューを見ながら編集できるようにしてみました。＜実験環境＞ OS：Windows 7 64bit Dreamweaver:CS6 ローカルサーバー：XAMPP ver1.7.7 ステップ1 ↓「wordpress」フォルダー直下のindex.p…
シンプルなデザインにカスタマイズしてみました。プレビュー 全体像（↓クリックするとより大きい画像を見れます） ナビゲーション部分（↓ホバーすると色が変わるように指定） 記事部分（↓記事内の写真に枠線とシャドウを指定） コード CSS（元のテンプレート…
プレビュー ↓別ウィンドウを開いて見る Kitchenware Clubポイント アコーディオンパネル jQuery UIを使用。オプションでアイコンの画像などを変更してみました。 $(function(){ $("#nav").accordion({ header: "h3", collapsible:true, animated: 'bouncesli…
Wordpressのテンプレートタグをまとめてみました。ヘッダー関連 ブログ名 コンテンツタイプ エンコードの種類 ブログの説明 スタイルシートのURL 記事関連 トップページのURL 記事のタイトル
初めてローカルサーバーに1からWordpressのテーマを構築することができました。制作時間は約8時間です。2回目以降はもっと短縮できるようにしたいです！第7章の背景画像の表示に戸惑いましたが、 E BISUCOM TECH LAB : WordPress 3.3.xにおけるカスタム背景…
現在、IE9はCSS3でグラデーションを適用させることができません。そこでIE9でも簡単にグラデーションを表示させることができるジェネレーターを見つけたのでシェアしたいと思います。 SVG Gradient Background Maker SVG Gradient Background Maker ↓グラデ…
しっぱさんがブログで興味深いサービスを発見されていたので他にも便利なジェネレーターがないか自分でも探してみました。どれも機能は限定的ですが簡単に写真を補正してくれます。 料理の写真をおいしそうに変換したい！ 室内で撮るとどうしても暗めになっ…
Mosaic Mosaic - Sliding Boxes and Captions jQuery Plugin デモはこちら jCaption jCaption - Plugin for Simple, Custom Image Captions デモはこちら jCapSlide jCapSlide: A jQuery Image Caption Plugin | Codrops デモはこちら
写真の上にカーソルを乗せると写真の説明を表示してくれる「jQuery Image Overlay Plugin」を試してみたのでその使い方と注意点を挙げていきたいと思います。FerretArmy.com jQuery Image Overlay Plugin 使い方 【1】サンプルソースファイルをダウンロード …
自宅のPC(windows 7 64bit)に日本語されたEclipse 4.2をインストールしてみました。 ステップ１ Pleiades - Eclipse プラグイン日本語化プラグイン | MergeDoc Project ↓Pleiades All in One 「Eclipse 4.2 Juno」をクリック ↓開発対象となる言語を選択 ステ…
Creating a polaroid photo viewer with CSS3 and jQuery ポイント Google AJAX Libraries API（参考：Google Loader Developer's Guide - Google Loader ― Google Developers） ↓書き方例 <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("search", "1"); g…
IE8以下でもCSS3 Media Queriesが使えるようになるスクリプトとして主に「css3-mediaqueries-js」と「Respond.js」があります。今回はRespond.jsが動作するか試してみました。 Respond.js導入のポイント cssファイルはエンベッドしない。 cssファイルはHTML…
昨日、divを使ってグリッドレイアウトを作りましたが（グリッドレイアウト（divバージョン） - ウェブ学のすすめ）、今度はarticleやsectionを使って書き直してみました。書き直すと同時に以下の機能を追加してみました。 スクロールするごとに画像を読み込…
プレビュー ↓別ウィンドウを開いて見る グリッドレイアウト（divバージョン） コード HTML <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <title>グリッドレイアウト（divバージョン）…</meta></meta></meta></head></html>
プレビュー ↓スマートフォンの方はこちらからプレビューできます。 jQuery でドロップダウンメニューver2 - js do it コード HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery でドロップダウンメニューver2</title> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery-1.7.2.min.js"></script> </link></meta></head></html>
プレビュー ↓スマートフォンの方はこちらからプレビューできます。 画像スライドメニュー コード HTML <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <title>画像スライドメニュー</meta></meta></meta></head></html>
WordPress 3.4.1を自宅のPC(Windows 7 64bit)のXAMPP上にインストールしてみました。↓XAMPPのインストール方法はこちら Windows 7 64bitにXAMMPをインストールする方法 - ウェブ学のすすめ ステップ１ ↓WordPressにアクセスし、「WordPress 3.4.1 をダウンロ…
プレビュー ↓スマートフォンの方はこちらからプレビューできます。 jQuery でドロップダウンメニュー - js do it コード HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery でドロップダウンメニュー</title> <link rel="stylesheet" href="css/style.css"> <script src="js/index.js"></script> </link></meta></head></html>
プレビュー ↓スマートフォンの方はこちらからプレビューできます。 CSS3を使ったアコーディオンパネル - js do it ポイント transition: transitionを適用するプロパティ 時間 変化の具合; コード HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>垂直タイプのアコーディオン式メニュー</title> <link rel="stylesheet" href="css/style.css"> </link></meta></head></html>
プレビュー ↓スマートフォンの方はこちらからプレビューできます。 タブ切り替えパネル - js do it コード HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>タブパネル</title> <link href="css/style.css" rel="stylesheet"> <…</link></meta></head></html>
Yetii - Yet (E)Another JavaScript Tab Interface Implementation | kminek.pl プレビュー ↓スマートフォンの方はこちらからプレビューできます。 Yetii コード HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>Yetii</title> <link rel="stylesheet" href="css/style.css"> <script src="js/yetii-min.js"></script> </link></meta></head></html>
プレビュー ↓スマートフォンの方はこちらからプレビューできます。 jQuery Tools tabs コード HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery Tools standalone demo</title> <link rel="stylesheet" href="css/standalone.css"> <link rel="stylesheet" href="css/tabs.css"> </link></link></meta></head></html>
プレビュー ↓スマートフォンの方はこちらからプレビューできます。 jQuery UIでtabメニュー - js do it コード HTML <html lang="ja"> <head> <meta charset="utf-8"> <title>jQuery UI Example Page</title> <link href="css/ui-darkness/jquery-ui-1.8.21.custom.css" rel="stylesheet"> <script src="js/jquery-1.7.2.min.js"></script> </link></meta></head></html>
PhotoshopでアップルのiCloudアイコンを作ってみました。↓参考にしたサイト How to Draw Apple iCloud Icon – Photoshop Tutorial ※使用したソフト：Photoshop CS6（windows版） ステップ 1 アイコンのベース ↓幅512px、高さ512pxのサイズで新規作成。 ↓角丸…
