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... 続きを読む

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」に続く数字で桁数を制御... 続きを読む

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にコードを書くことがあると思います。 基本的にこのコードをプラグインフォルダに入れるだけでプラグインになります。 そのテンプレートに依存したもの... 続きを読む

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

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

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

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> このような場... 続きを読む

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 で日付を入力... 続きを読む