jQueryのサイドバー固定サブメニュー実装パターン
jQueryのサイドバー固定サブメニュー実装パターン 最近はモニターのサイズがワイドなってきていることもありサイドバーを固定する機会が増えてきましたね。 そこでjQueryを使用したサイドバー固定にしたときのサブメニューの動きをいくつかご紹介します。 投稿日2018年04月27日 更新日2019年09月19日 基本構造 navの子要素にulでマークアップします。 サブメニューはliの子要素のさらに子要素にulを入れ込みます。 HTML <aside id="sidebar"> <h1 id="brand-logo">Logo</h1> <nav id="global-nav"> <ul> <li><a href="#">Home</a></li> <li class="sub-menu"> <a href="#">About</a> <ul class="sub-menu-nav"> <l
GoogleMapをData属性から指定して表示できるjQueryプラグイン「jquery-findus」
GoogleMapをData属性から指定して表示できるjQueryプラグイン「jquery-findus」 GoogleMapをData属性などタグで指定して表示できるjQueryプラグイン「jquery-findus」をご紹介します。 投稿日2015年08月06日 更新日2015年08月06日 プラグインのダウンロード 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.goo
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,
JavaScriptを短く書くためのショートコード集
JavaScriptを短く書くためのショートコード集 知っておくとちょっとだけコードが簡潔に書けるかもしれないショートコード集です。 投稿日2014年12月25日 更新日2014年12月25日 小数点以下切り捨て 「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
WordPressのカスタムフィールド・カスタム投稿タイプ・カスタム分類をまとめて管理するプラグイン「Types」
WordPressのカスタムフィールド・カスタム投稿タイプ・カスタム分類をまとめて管理するプラグイン「Types」 一つのプラグインでカスタムフィールド・カスタム投稿タイプ・カスタム分類を管理できる、「Types」をご紹介いたします。 投稿日2013年01月09日 更新日2013年01月09日 カスタム投稿タイプの作成 プラグインをインストールするとメニューに「Types」という欄が作成されます。 カスタム投稿タイプを作成する場合「Custom Post Types及びTaxonomy」というメニューを選択します。 「Custom Post Type追加」「Custom Taxonomy追加」というボタンが表示されますので、カスタム投稿タイプを追加する場合は「Custom Post Type追加」を選択します。 「新規Custom Post Typeを追加」画面が表示されます。 カスタム投
WordPress3.4のテーマカスタマイザーで自由度の高いテーマを作ろう
Posted: 2012.06.20 / Category: WordPress / Tag: テンプレートカスタマイズ, 管理画面 WordPress3.4からテーマカスタマイザーとい機能が追加されテーマファイルを編集しなくても管理画面から色や画像などリアルタイムで確認しながら編集できるようになりました。 この記事ではテーマカスタマイザーの使用方法とカスタマイズ方法をご紹介します。 テーマカスタマイザーの使い方 WordPressの管理画面で左メニュー「外観」→「テーマ」で「テーマ管理画面」を表示し、「カスタマイズ」ボタンをクリックします。 テーマカスタマイザー画面が表示されます。 何も設定していなくても「サイトタイトルとキャッチフレーズ」と「固定フロントページ」という項目があります。 たとえばテーマファイルで下記のように設定してあると、「サイトのタイトル」などの変更箇所がリアルタイムで
WordPressのユーザーページ(author.php)テンプレートをカスタマイズする
WordPressのユーザーページ(author.php)テンプレートをカスタマイズする Wordpressを複数人で管理する場合ユーザーページ（authorテンプレート）を利用すれば、ユーザーごとの自己紹介ページを簡単に作成できます。 この記事では管理画面の「ユーザー編集」で入力した情報をユーザーページ（authorテンプレート）に表示させることから始め、「ユーザー編集」での不要な項目の削除や、最終的にはオリジナルのフィールドを追加するということをやったりしてみます。 投稿日2010年08月28日 更新日2011年04月03日 ユーザーページを確認してみる。 まずユーザーページを確認してみましょう。 ブログURLのあとに「/author/[ユーザー名]」でユーザーごとのページが表示されます。 http://www.example.com/author/[ユーザー名] 何も設定していないと
WordPressのショートコードを自作してみる
WordPressのショートコードを自作してみる Wordpressで記事を書いていると、投稿記事からテンプレートタグを使いたくなったり、自作のプログラムを動かしたいくなる場合があると思います。 そんなときに便利なのがショートタグです。 投稿日2010年07月11日 更新日2011年04月03日 ショートタグは投稿記事に[]（ブラケット）内にショートコード名を記述することで、あらかじめ設定しておいた関数を呼び出すことができます。 で、肝心の関数を記述する場所はというと、プラグインとして読み込ませたり、テンプレートフォルダのfunctions.phpに記述します。 プラグインというとちょっと大げさな気がするので、今回はfunctionsファイルの方を試してみたいと思います。 たぶん一番シンプルなショートコード ショートコード第一号は呼び出すと決められた文字列を返すだけという、実用性0のコード
jQueryでスクロールすると表示する系いろいろ
jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 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-decoration
jQueryで画面遷移のないサイトを作ろうとしたときのちょっとしたメモ
jQueryで画面遷移のないサイトを作ろうとしたときのちょっとしたメモ jQueryを使って画面遷移のないサイトを作ろうとしたときのちょっとしたメモです。 サーバーとやり取りをする、Ajax的なことは書いていないのであしからず。 投稿日2012年02月03日 更新日2012年02月03日 リンク（href）を無効にする 画面遷移のないWebサイトでもJSのない環境やSEOも考慮して href にリンク先を設定したいときがあります。 hmtl <a href="hoge.html" id="btn">ボタン</a> このような場合だと #btn にイベントを設定しても画面遷移してしまいます。 click イベントに「e.preventDefault()」と記述すればhrefを無効にになり画面遷移が行われません。 javascript $('#btn').click(function(e){
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
