CSS3で画像キャプションのマウスホバーアニメーション5種 | webOpixel

2015/12/25 32 users CSS3

Posted: 2015.12.25 / Category:  HTML&CSS  / Tag:  CSS3 CSS3オンリーで画像をマウスオーバーするとキャプションがアニメーションして表示するというサンプル集です。 ディレイやイージングを使用してちょっとだけ凝った感じに見える風にしてみました。 基本的なHTML 基本的なHTMLは下記になります。figureでマークアップしてみました。 HTML... 続きを読む

jQuery+CSS3で固定ナビゲーション→レスポンシブでハンバーガーメニューに切り替える | webOpixel

2015/12/09 157 users tag Category Posted jQuery+CSS

Posted: 2015.12.09 / Category: HTML&CSS, javascript / Tag: jQuery jQuery+CSS3を使用してスマホではハンバーガーメニューに切り替わる、固定ナビゲーションを作成してみます。 PC版のナビゲーションは基本構造は下記を使用します。 jQuery+CSS3でスクロールするとアニメーションして狭くなる固定ナビゲーション HTML #m... 続きを読む

HTML5+Canvasでパーティクルっぽいのを作ってみる | webOpixel

2015/07/16 45 users

Posted: 2015.07.16 / Category: javascript / Tag: HTML5, アニメーション HTML5+Canvasを使用して簡単な横に流れるパーティクルを作成してみます。 パーティクルオブジェクトを作成して動かす 基本的な作りは下記記事をベースに作成します。 HTML5で作るCanvasアニメーションの基礎 上記の記事では一つの円を動かすだけだったので描画関数... 続きを読む

JavaScriptを短く書くためのショートコード集 | webOpixel

2014/12/25 334 users Category Posted 制御 数値 小数点以下

Posted: 2014.12.25 / Category: javascript  知っておくとちょっとだけコードが簡潔に書けるかもしれないショートコード集です。 小数点以下切り捨て 「Math.floor」で切り捨てですが、 Math.floor(12.6598); //12 数値の前に「~~」付けるだけでもできます。 ~~12.6598; //12 桁数の制御 「～e」に続く数字で桁数を制御... 続きを読む

Appleの商品スライダーを再現したjQueryプラグイン「Kiwi-slider」 | webOpixel

2014/10/28 40 users jQuery CSS tag Category Posted

Posted: 2014.10.28 / Category: javascript / Tag: jQuery 「Kiwi-slider」はAppleの商品ページのスライダー動作を再現したjQueryプラグインです。 プラグインのダウンロードと準備 デモ＆ダウンロードは下記から Kiwi-slider html & css ダウンロードした「kiwi.css」「kiwi-slider.js」を読み... 続きを読む

iPhone(iOS)開発環境まとめ2014年版 | webOpixel

2014/05/08 91 users iPhone iOS Objective-C 言語 選択肢

iPhoneが出た頃は開発するにはApple公式のXcodeしか選択肢はありませんでしたが、最近では開発環境の選択肢が増えてきたようなのでまとめてみました。 Xcode [ Objective-C ] 安心・安全のApple公式開発環境Xcodeです。 最大の問題はほぼMac開発用のObjective-Cという言語を使用しないといけないことでしょうか。 でも最近ではバージョンアップを重ねてかなり書... 続きを読む

PhotoshopってFireworksと違ってここがダメだよねって思ってたけど使い方知らないだけだった件 | webOpixel

2013/04/23 156 users 使い方

WebデザインツールとしてFireworksとPhotoshopがよく挙げられますが、私はFireworksをメインに使用しています。理由はFireworksと比べるいろいろと不便な点があったからなのですが、ちょっと調べたらいろいろと知らないだけだったのでメモしておきたいと思います。 Photoshopってキャンパスで直接選択できなくね？ Fireworksは選択ツールでキャンパスでオブジェクトを... 続きを読む

WordPressのプラグインを開発しよう（初級編） | webOpixel

2012/09/11 192 users WordPress 初級編 プラグイン テンプレート コード

WordPressのプラグインを作れるようになればネットでちやほやされるかもしれない！？ ということでプラグイン開発方法をさらっと解説してみます。 プラグインってなんだろう。 WordPressのテンプレートをカスタマイズしてるとfunctions.phpにコードを書くことがあると思います。 基本的にこのコードをプラグインフォルダに入れるだけでプラグインになります。 そのテンプレートに依存したもの... 続きを読む

jQueryでFacebookページのウォールを自分のサイトに表示する方法（簡易バージョン） | webOpixel

2012/08/21 95 users 末尾 www.facebook.com jQuery URL

FacebookページのID確認方法 FacebookページのURLを設定していない場合、URLの末尾がIDになります。 もしURLの設定をしている場合、IDはURLではわかりませんので「graph.facebook.com」にアクセスすると簡単に確認することができます。 たとえば「Nike Japan」だったら、Facebookページは下記ですね。 http://www.facebook.com... 続きを読む

WordPress3.4のテーマカスタマイザーで自由度の高いテーマを作ろう | webOpixel

2012/06/20 98 users 外観 カスタマイズ リアルタイム WordPress ボタン

WordPress3.4からテーマカスタマイザーとい機能が追加されテーマファイルを編集しなくても管理画面から色や画像などリアルタイムで確認しながら編集できるようになりました。 この記事ではテーマカスタマイザーの使用方法とカスタマイズ方法をご紹介します。 テーマカスタマイザーの使い方 WordPressの管理画面で左メニュー「外観」→「テーマ」で「テーマ管理画面」を表示し、「カスタマイズ」ボタンをク... 続きを読む

WordPressのサイト内検索の検索条件をカスタマイズする | webOpixel

2012/05/31 177 users WordPress 検索条件 サイト内検索

WordPress検索フォームを設置するだけで簡単にテキスト検索機能実装することができますが、カスタムフィールドやカスタム投稿タイプなど駆使したCMSっぽい使い方をする場合、テキスト検索だけでは物足りなかったりします。 そこでさまざまな条件を指定してサイト内検索する方法をご紹介します。 検索フォームの設置 一つのテキストフォームだけで検索する場合は以下のコードを表示させたい位置に配置するだけですね... 続きを読む

ソースコードで面白いことしているサイトまとめ | webOpixel

2012/05/02 45 users ソースコード サイトまとめ

POPULAR ENTRY jQueryで簡単に作れるマウスオーバーでアニメーションするボタン５種 49,414 viewsjQueryでスクロールすると表示する系いろいろ 34,071 views可変グリッドレイアウトなWebデザイン集めてみました 30,088 viewsjQueryでjsonデータを扱ってみる【入門編】 29,890 viewsjQueryでスクロールすると上部に固定されるナ... 続きを読む

Wordpressのhtmlエディターをハイライト表示するプラグイン「HTML Editor Syntax Highlighter」 | webOpixel

2012/04/24 45 users WordPress HTMLエディター HTMLタグ 標準

Wordpressの標準のhtmlエディターはタグでも文字でも全て同じ色になってしまい、タグベースで記事を書くには不便ですね。 そこで、htmlタグをハイライト表示してくれるプラグイン「HTML Editor Syntax Highlighter」をご紹介いたします。 続きを読む

css+jQueryでチェックボックス&ラジオボックスをオリジナルデザインのボタンにする | webOpixel

2012/04/10 129 users clearfix div CSS cssオンリー クール

ブラウザ標準のチェックボックス&ラジオボタンのデザインだと俺のクールなサイトには合わん。 といったときの為にボタン風なオリジナルデザインにする方法をご紹介します。 cssオンリーの場合 まずはcssのみでやってみます。 隣接セレクターやcheckedセレクターを使用している関係でieでは動きません。 <div class="check-group clearfix"> <div> <input i... 続きを読む

jQueryでスクロールすると表示する系いろいろ | webOpixel

2012/03/08 1658 users jQuery

最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p>... 続きを読む

jQueryでスクロールすると上部に固定されるナビゲーション | webOpixel

2012/02/21 649 users jQuery NAV グローバルナビゲーション 上部 HTML

グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HO... 続きを読む

jQueryで画面遷移のないサイトを作ろうとしたときのちょっとしたメモ | webOpixel

2012/02/03 718 users jQuery hmtl btn 画面遷移 メモ

jQueryを使って画面遷移のないサイトを作ろうとしたときのちょっとしたメモです。 サーバーとやり取りをする、Ajax的なことは書いていないのであしからず。 リンク（href）を無効にする 画面遷移のないWebサイトでもJSのない環境やSEOも考慮して href にリンク先を設定したいときがあります。 hmtl <a href="hoge.html" id="btn">ボタン</a> このような場... 続きを読む

Wordpressの投稿フォーマットをタブ化して入力欄も切り替えるプラグイン「CF Post Formats」 | webOpixel

2012/01/05 20 users GitHub WordPress タブ インストール さり気

Wordpressの投稿フォーマットはラジオボタンでさり気なく配置されているので、よく目をこらさないと気づきませんね。 「CF Post Formats」を導入すれば投稿フォーマットをタブにしてくれるので、チェックするの忘れてしまったなんてこともなくなると思います。 プラグインのダウンロードとインストール 「CF Post Formats」はGitHubで公開されてますので、下記からダウンロードし... 続きを読む

jQueryのanimateで自由にアニメーションできるようになろう | webOpixel

2011/12/27 189 users animate jQuery

jQueryにはアニメーションをするための機能がいろいろとありますが、ここでは「animate」メソッドの扱い方をご紹介いたします。 動かす前の準備 jQueryの前に動かす要素をhtml&cssで作成しておきましょう。 html <div id="box"></div> css #box { width: 100px; height: 100px; background: #3399FF; } ... 続きを読む

CSSをシンプルに書くことができるLESS使ってみた | webOpixel

2011/12/13 181 users less margin border auto width

CSSはシンプルなのでとてもわかりやすい言語ではありますが、その分サイトが肥大化していくとメンテナンス性が悪くなりますね。 LESSを使えばプログラム的な書き方ができるので、ムダなくしやすくなるらいしいです。 ネスト（階層）化できる たとえばこんなCSSがあります。 css div.section { width: 500px; margin: 0 auto; border: solid 1px ... 続きを読む

jQueryでマウスオーバーすると全体的にピカーンってなるやつ | webOpixel

2011/10/11 111 users jQuery マウス ヤツ

マウスオーバーは普通同じ大きさの画像を切り替えたりしますが、他の要素の背景画像を変えることで派手なマウスオーバーにすることができます。 あの某制作会社様っぽいことをしてみようかなと。 準備 htmlは特に変わったことはしません、適当な要素にクラスを割り当てます。 html <p class="button"><a href="#">ボタン</a></p> その他マウスオーバーしたときの大きめの画像... 続きを読む

Wordpressのカスタム投稿タイプでイベント情報ページを作ってみる | webOpixel

2011/05/10 173 users WordPress タクソノミー jQuery UI 日付

Wordpressでイベント情報ページを作るには、専用のプラグインが色々ありますので、それらを使用した方が簡単だしちゃんとしたものが作れると思いますが、ここではカスタム投稿タイプや、カスタム分類などを使用して作成します。 （結果的に微妙な感じになってますが、、、） もくじ カスタム投稿タイプの設定 カスタム分類（タクソノミー）の設定 カスタムフィールドで日付を入力 jQuery UI で日付を入力... 続きを読む