レスポンシブでハンバーガーメニューになる固定サイドバー
レスポンシブでハンバーガーメニューになる固定サイドバー 近年ではモニターサイズが広くなってきた影響もあり、サイドバーを固定表示させてるサイトが多くみられるようになった気がします。 そこでここでは画面が狭くなるとハンバーガメニューになるレスポンシブに対応した固定サイドバーの作成方法をご紹介します。 投稿日2017年09月21日 更新日2017年09月21日 ロゴもサイドバーに含むレイアウトで、サブメニューがある場合はマウスオーバーすると右に表示するタイプです。 HTML 幅を狭めた時にはロゴ部分とメニューは別にしたかったので、構造的に分けてCSSで調節するようにします。 html <header id="global-head"> <h1 id="brand-logo">Logo</h1> </header> <div id="nav-toggle"> <div> <span></span>
WordPressのビジュアルエディタをカスタマイズする
Posted: 2010.12.17 / Category: WordPress / Tag: 管理画面 Wordpressのビジュアルエディタは基本的にデフォルトのままでも問題ないかと思いますが、不便なところもありますよね。 この記事ではfunctions.phpを編集してビジュアルエディタをカスタマイズしてみます。 TinyMCE Advancedとかプラグイン入れた方がはやくね？ とか言ってはいけない！ オリジナルのスタイルを適用する。 ビジュアルエディタはそのままだとテンプレートとスタイルが違うので、最終的なイメージがつかみにくいですよね。 テンプレートと同じスタイルを適用して、ある程度イメージの確認ができるようにしてみましょう。 現在使用しているテンプレートフォルダの「functions.php」に以下を記述します。なければ作成しましょう。 functions.php add_e
WordPressでheader.phpやfooter.phpに変数を渡す方法
WordPressでheader.phpやfooter.phpに変数を渡す方法 requireやincludeを使用すれば、読み込み元で宣言した変数は、header.phpやfooter.phpでも使用することができますが、WordPressは「get_header()」という関数で各パーツを読み込むので普通に宣言すると変数を使用することができません。 そこで「get_header()」でも変数を渡す方法をご紹介いたします。 投稿日2016年01月27日 更新日2016年01月27日 読み込み元テンプレートの設定 変数をに入れる前にglobalで宣言して、get_headerを実行します。 index.php global $page_title; $page_title = "読み込み元の変数"; get_header(); header.php（footer.php） header.p
GoogleMapをData属性から指定して表示できるjQueryプラグイン「jquery-findus」
Posted: 2015.08.06 / Category: javascript / Tag: jQuery GoogleMapをData属性などタグで指定して表示できるjQueryプラグイン「jquery-findus」をご紹介します。 プラグインのダウンロード GitHubで公開されています。下記からクローンするかダウンロードしてください。 benignware/jquery-findus JavaScriptの読み込み 「jQuery」「GoogleMap API」とダウンロードした「jquery.findus.js」を読み込みます。 <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="http://maps.googleapis.com/maps/api/js"></s
HTML5+Canvasでパーティクルっぽいのを作ってみる
Posted: 2015.07.16 / Category: javascript / Tag: HTML5, アニメーション HTML5+Canvasを使用して簡単な横に流れるパーティクルを作成してみます。 パーティクルオブジェクトを作成して動かす 基本的な作りは下記記事をベースに作成します。 HTML5で作るCanvasアニメーションの基礎 上記の記事では一つの円を動かすだけだったので描画関数だけ作成しました。 function drawCircle(x, y, scale, color) { ctx.beginPath(); ctx.arc(x, y, scale, 0, 2*Math.PI, false); ctx.fillStyle = color; ctx.fill(); } パーティクルの場合、粒子一つ一つに位置情報や速度の設定をしたいので、少し拡張してオブジェクトとして作成
HTML5で作るCanvasアニメーションの基礎
Posted: 2015.07.10 / Category: javascript / Tag: アニメーション HTML5のCanvasを使用して簡単なアニメーションを作成してみます。 円を描画する アニメーションさせる為にはなにか物が必要なので、とりあえず円を描いてみましょう。 HTMLにcanvasタグを作成し、適当なidを割り当てます。 <canvas id="canvas-container" width="600" height="300"></canvas> 次はJSです。 window.onload = function() { // Canvas未サポートは実行しない if (!window.HTMLCanvasElement) return; var canvas = document.querySelector('#canvas-container'); var ct
CSS3で画像の一部をiOS（曇りガラス）風にぼかす方法：レスポンシブ対応
Posted: 2015.05.07 / Category: HTML&CSS, javascript / Tag: CSS3, jQuery iOS風のぼかしは画像が全画面表示だったら色々jQueryプラグインがあったのですが、今回は一部の要素の背景に重ねたかったのでちょっと試してみました。 確認環境： Chrome42, Firefox37, Safari7, iOS8, Android 4.4 均一の余白で配置するバージョン paddingのみでぼかすパネルを配置する方法です。これならCSSオンリーでいけます。 html&cssは下記のようにします。 html <div class="panel"> <div class="panel-in"> <div class="panel-main"> 内容文が入ります。 </div> </div> </div> css *::before,
ワンポイントに使えるCSS3マウスオーバーアニメーション5種
ベースHTML ベースのHTMLです。っていっても基本aタグだけです。 html <a href="#" class="btn01">BUTTON</a> 1.くるくるって回るアニメーション くるくるっと２回転するアニメです。 くるっと１回転の場合は「rotate」を360にすればOKです。 css .btn01 { color: #fff; text-decoration: none; background-color: #dda0dd; display: block; width: 150px; height: 150px; line-height: 150px; border-radius: 50%; /* ここで動く速度とか設定 */ transition: all 1s ease; -webkit-transition: all 1s ease; } .btn01:hover {
記事情報をXMLで出力してWordPressの入ってないサイトに表示する方法
Posted: 2011.12.07 / Category: WordPress 以前「WordPressの入っていないサイトにRSSを取得してブログの情報を載せる」という記事を書きました。これは基本的なデータだったら問題ないのですが、アイキャッチだったり、カスタムフィールドを取得して表示させたい場合はできません。 Feed情報をカスタマイズする手もあるのですが、ここではオリジナルのXMLファイルを作成して表示する方法をご紹介します。 xmlの出力用のテンプレートファイル Wordpressのページ機能を使用してXMLを出力します。 下記コードを使用しているテンプレートフォルダに配置します。 outxml.php <?php /* Template Name: OUT XML */ ?> <?php echo "<?xml version='1.0' encoding='UTF-8' ?>
JavaScriptを短く書くためのショートコード集
Posted: 2014.12.25 / Category: javascript 知っておくとちょっとだけコードが簡潔に書けるかもしれないショートコード集です。 小数点以下切り捨て 「Math.floor」で切り捨てですが、 Math.floor(12.6598); //12 数値の前に「~~」付けるだけでもできます。 ~~12.6598; //12 桁数の制御 「～e」に続く数字で桁数を制御できます。 1e1 //10 1e2 //100 1e3 //1000 1e4 //10000 1e5 //100000 2の累乗はシフト演算子 2の累乗は左シフト演算子（<<）でできます。 200 << 1; //400 200 << 2; //800 200 << 3; //1600 逆は右シフト演算子（>>）です。 200 >> 1; //100 200 >> 2; //50 200 >> 3
iPhone(iOS)開発環境まとめ2014年版
Posted: 2014.05.08 / Category: iOS iPhoneが出た頃は開発するにはApple公式のXcodeしか選択肢はありませんでしたが、最近では開発環境の選択肢が増えてきたようなのでまとめてみました。 Xcode [ Objective-C ] 安心・安全のApple公式開発環境Xcodeです。 最大の問題はほぼMac開発用のObjective-Cという言語を使用しないといけないことでしょうか。 でも最近ではバージョンアップを重ねてかなり書きやすくなってるっぽいです。 他の環境で開発する場合でも最終的にApp Storeで配布するならインストールしておく必要があります。 デベロッパツールの概要 – Apple Developer RubyMotion [ Ruby ] iOS SDK の API を使用することになるのでメソッド名などRubyっぽくなかったり、Ru
WordPressのサイト内検索の検索条件をカスタマイズする
※WordPress3.3.2を使用しています。 2012.06.01 「投稿記事だけ検索したい」に抜けている部分があったので修正しました。 検索フォームの設置 一つのテキストフォームだけで検索する場合は以下のコードを表示させたい位置に配置するだけですね。 wp template <div id="search-box"> <form method="get" action="<?php bloginfo( 'url' ); ?>"> <input name="s" id="s" type="text" /> <input id="submit" type="submit" value="検索" /> </form> </div> あとは「search.php」を作成して適当にループさせれば検索結果が表示されます。 投稿記事だけ検索したい 標準のサイト内検索は固定ページも検索範囲に含まれて
PhotoshopってFireworksと違ってここがダメだよねって思ってたけど使い方知らないだけだった件
Posted: 2013.04.23 / Category: WebDesign WebデザインツールとしてFireworksとPhotoshopがよく挙げられますが、私はFireworksをメインに使用しています。理由はFireworksと比べるいろいろと不便な点があったからなのですが、ちょっと調べたらいろいろと知らないだけだったのでメモしておきたいと思います。 Photoshopってキャンバスで直接選択できなくね？ Fireworksは選択ツールでキャンバスでオブジェクトを直接選択できるのに、Photoshopはレイヤーから選択しないといけないから直感的じゃないですよね。いえいえ直接選択もできますよ。 左パレットから「移動ツール」を選択ます。そのままだと選択されているレイヤーを移動させるだけのツールですが、「cmd + 左クリック」することで選択することができます。 ドラッグすれば範囲
jQueryでリストを一つずつ遅延して表示する
Posted: 2013.03.15 / Category: javascript / Tag: jQuery リストじゃなくてもいいのですが、羅列されたリストなどを表示するときjQueryで一つずつ表示してみます。 とりあえずhtmlでリストを作成します。 html <ul class="delay-show"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> ...... </ul> jQueryのコードはこんな感じです。 javascript $(function() { $('ul.delay-show li') .css({opacity: 0}) .each(function(i){ $(this).delay(500 * i).animate({opacity:1}, 1500); }); }); delay メソッドでタイミングを遅らせて
jQueryでFacebookページのウォールを自分のサイトに表示する方法（簡易バージョン）
Posted: 2012.08.21 / Category: javascript / Tag: jQuery FacebookページのウォールはFeedを出力しています。 これをGoogle AJAX Feedを利用してjsonpへ変換してjQueryで表示する方法をご紹介します。 FacebookページのID確認方法 FacebookページのURLを設定していない場合、URLの末尾がIDになります。 もしURLの設定をしている場合、IDはURLではわかりませんので「graph.facebook.com」にアクセスすると簡単に確認することができます。 たとえば「Nike Japan」だったら、Facebookページは下記ですね。 http://www.facebook.com/nikejapan そのままドメイン名を「graph.facebook.com」にしてアクセスします。 http
WordPressで数を変更できてドラッグで並び替もできるカスタムフィールドを実装する方法
「WPAlchemy MetaBox」の使用方法 カスタムフィールドは「WPAlchemy MetaBox」というライブラリを使用します。 基本的な使用方法は下記の過去記事を参考にしてください。 WordPressでカスタムフィールドをお手軽に実装できるクラスライブラリ「WPAlchemy MetaBox」 （実はこれだけでカスタムフィールドの数は変更できてしまいますね、、、） カスタムフィールドの設定 「wp-content」内に「wpalchemy（ライブラリ本体）」を設置したら、使用しているテーマディレクトリに「metaboxes」というディレクトリを作成して、その中に「setup.php」「metabox.php」「meta.js」「meta.css」を作成します。 ファイルの内容はそれぞれ下記のようになります。 「setup.php」で基本設定をします。 setup.php <?
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
jQueryで画面遷移のないサイトを作ろうとしたときのちょっとしたメモ
Posted: 2012.02.03 / Category: javascript / Tag: jQuery jQueryを使って画面遷移のないサイトを作ろうとしたときのちょっとしたメモです。 サーバーとやり取りをする、Ajax的なことは書いていないのであしからず。 リンク（href）を無効にする 画面遷移のないWebサイトでもJSのない環境やSEOも考慮して href にリンク先を設定したいときがあります。 hmtl <a href="hoge.html" id="btn">ボタン</a> このような場合だと #btn にイベントを設定しても画面遷移してしまいます。 click イベントに「e.preventDefault()」と記述すればhrefを無効にになり画面遷移が行われません。 javascript $('#btn').click(function(e){ e.preventD
CSS+jQueryで左右別々の背景にする
Posted: 2012.01.12 / Category: HTML&CSS, javascript / Tag: jQuery センターのコンテンツを固定幅にして、その左右の背景を別の画像にしたいときtableを使用すれば簡単ですが、今の時代tableで囲んでしまうのはあれですね。 そこでcss+jQueryでなんとかしてみます。 中心で分かれた背景 とりあえず中に配置するコンテンツは考えないで左右で別々の背景画像を設定してみます。 デザインによっては左右でdivを配置する必要があるかもしれませんが、今回は全体を囲うdivと半分だけのdivを配置してみます。 html <div id="wrap"> <div id="left-bg"></div> </div> css html, body, #wrap, #left-bg { height: 100%; } #wrap { back
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
