2012-07-01から1ヶ月間の記事一覧
ローカルサーバーにインストールした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のサイズで新規作成。 ↓角丸…
プレビュー 作り方 【1】ボタン類などを作る 【2】再生ボタン、停止ボタンを「シンボルに変換」 【3】新規レイヤーを作りアクションを記述する 【4】サーバーにアップロードしたファイルパスを指定 コード var snd1:Sound=new Sound(); var snd2:Sound=new S…
Javascript / CSS Crossfader : CSS . XHTML . Javascript . DOM : Brand Spanking New ポイント 必要なのは「bsn.Crossfader.js」のみ id 属性を任意で付けておく var 変数名 = new Crossfader( new Array('id名','id名','id名'), クロスフェード時間, 静止…
昨日はjQuery tools scrollableとjQuery lightBox pluginを組み合わせましたが、今度は「lightBox2」を試してみました。Lightbox 2 ポイント lightbox2はLightbox 2からダウンロードし、「lightbox.js」、「lightbox.css」と画像(close.png/loading.gif/next…
jQuery tools scrollableとlightBoxがなかなか同時に動作しませんでしたが試行錯誤の上やっと動いてくれました。 プレビュー ↓拡大表示にすると見やすいです（右上のボタンが拡大表示）。 ↓スマートフォンの方はこちらからプレビューできます。 scrollableと…
プレビュー ↓スマートフォンの方はこちらからプレビューできます。 jQuery Tools scrollable コード HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery Tools scrollable</title> <script src="jquery.tools.min.js"></script> <link rel="stylesheet" href="standalone.css"> </link></meta></head></html>
プレビュー ↓スマートフォンの方はこちらからプレビューできます。 jQuery UIでアコーディオンメニュー - js do it コード HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery UIでアコーディオンメニュー</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> </meta></head></html>
