サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
アメリカ大統領選
www.webantena.net
以前に、このブログでも管理画面の「表示オプション」や「ヘルプ」リンクを非表示にする方法について紹介させていただきましたが、 今回は、管理画面の「表示オプション」リンクは表示させるものの、表示オプション内で不要なものを最初から非表示にしてしまう方法について紹介させていただきます。 functions.php で不要な表示オプションを非表示にする。 ご利用のテーマのfunctions.php に以下のコードを追加します。 function my_remove_meta_boxes() { remove_meta_box('authordiv', 'post', 'normal'); // オーサー remove_meta_box('categorydiv', 'post', 'normal'); // カテゴリー remove_meta_box('commentstatusdiv', 'pos
Bootstrap で、.navbar-collapse 内のメニューリンクをクリック（タップ）して同一ページのアンカーポイントへ移動すると同時に、.collapse メニューを閉じる処理についてメモ。 .navbar-nav 内のリンククリック時に.collapse メニューを閉じる Bootstrap からソースコードを拝借しますが、以下のようなヘッダーメニューがあるとして、 <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span>
稀に ol によるリストで丸数字を使う場合があるので備忘録としてまとめました。 ol li の list-style は none で消しておいて、替わりに ① や ② などの「丸数字」を表示させる方法です。 ol の リストで「丸数字」を表示させるサンプル li タグ内に ① ②…と丸数字も合わせて書いていき、丸数字は <span> タグで囲ってあげます。 <style> ol { position: relative; margin:0; padding:0 } ol li { list-style: none; list-style-position:outside; margin:0; padding-left:1.25em } ol li span { position: absolute; left:0; margin:0 } /*IE6*/ *html ol li span
Contact Form 7 プラグインのインストール 管理画面のプラグイン新規追加画面よりContact Form 7 を検索するか、以下のサイトよりプラグインファイルをダウンロードします。 Contact Form 7 で画像アップロードフィールドの追加 Contact Form 7 を有効化したら、管理画面左メニュー「お問い合わせ」よりメールフォームの編集ページへ進み、「タグの作成」メニューより「ファイルのアップロード」を選択します。 「ファイルのアップロード」の設定項目は以下の通りです。 ①アップロードを必須にする場合は「必須入力の項目ですか？」にチェックを入れます。 ②「名前」の部分は自由に変更できますが、後述する「メール」「メール（2）」欄の 「ファイル添付」フィールドに入力する名前と合わせておきます。 ③「ファイルサイズの上限」を指定します。 2MBまでのファイルであれば「2
IcoMoon の取扱アイコン IcoMoonページ上部の「IconMoon App」ボタンをクリックします。 WEBサービスでもよく使いそうなアイコンが多数掲載されています。 一部になりますが、ざっとこんな感じ↓ IconMoon Free Linecons Eighty Shades Entypo IcoMoon の使い方 使いたいアイコンをクリックして、 ページ下部の「Font」ボタンをクリックします。 確認ページへ遷移しますので、同じくページ下部にある「Download」ボタンをクリックします。 icomoon フォルダ内の構成 ダウンロードした icomoon.zip を解凍すると、中身はこのようになっています。 アイコンフォントを表示させるのに必要なファイルは、 style.css と、fonts フォルダ内の4つのフォントファイルです。 style.css 下記ソースコードの
ブログや企業サイトを問わず、WordPress で「固定ページに投稿記事を10件表示させる」のような処理を入れる機会も多いのではないかと思いますが、 単純に最近の投稿記事を指定件数表示させる以外にもカテゴリ別、オーサー別など色々なパターンがありますので、今回はそのような固定ページに記事一覧を表示させる方法をまとめてみました。
スマホサイトでリンクをタップすると、iPhone（iOS）ならリンク周りにグレーの影が、Android であればリンクの周りにオレンジの枠 が表示されると思います。 このグレーの影やオレンジの枠（ハイライト表示）をCSS の -webkit-tap-highlight-color で無効にしたり、ハイライトカラーを変更する方法をまとめました。
お問い合わせフォームや見積フォームで「住所」を都道府県から手打ちで入力するのは面倒ですので、郵便番号を入力するだけでその後の住所を自動入力してくれる javascript「ajaxzip3」が便利です。 郵便番号の入力フォームが3桁 + 4桁と分離されている場合も、7桁でひと続きで入力する場合も、両方対応しています。 また、住所の自動入力は都道府県と市町村以下を分離して自動入力できますし、都道府県以下ひと続きで自動入力することもできますので自由度の高いスクリプトです。 ajaxzip3 の設置 <head> 内に ajaxzip3.js ファイルを設置します。 <head> <script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script> </head>
Bootstrap を使ったシンプルなタブメニューの実装方法です。 今回はタブメニューの基本的な設置方法と合わせて、jQuery Cookie を利用して現在閲覧しているタブの情報を Cookie に保存する方法も合わせて紹介させていただきます。 これにより、ページをリロードしたり離脱して戻ってきた場合でも、タブの情報を保持できるようになります。 Bootstrap のタブメニュー実装 まずは Bootstrap によるタブメニューを用意します。 bootstrap-tab.js ファイルの設置 jquery ファイルと一緒に、bootstrap-tab.js を設置します。 <link href="./assets/css/bootstrap.css" rel="stylesheet"> <script src="./jquery.min.js"></script> <script sr
グローバルナビのメニューリンクを横並びにしたり、ギャラリー型サイトで画像をタイル状に横に並べたりと、サイト構築時に要素を横並びにするに当たってCSSの float や display を使うことが多いと思います。 float と display とでは見え方にどのような違いがあるか？について、サンプルも交えて紹介いたします。 float:left の場合 まずは float:left で要素を横並びにするサンプルです。 <style> .navi { width:100%; margin:0 auto } .navi li { float:left; border:1px solid #ccc; padding:5px 10px; text-align:center } </style> <ul class="navi clearfix"> <li><a href="#">リスト1</a>
jQuery を利用して画像を動かす方法には色々ありますが、指定した要素（画像など）を「ふわふわ」浮いているように見せるためのプラグインが jquery.yurayura.js です。 縦方向に「ふわふわ」動くイメージですが、移動距離とスピードの設定次第では面白い動きも実現できるかもしれません。
Bootstrap のモーダル機能ベースの「Bootstrap Lightbox」は、画像をクリックしてオーバーレイで拡大表示させるシンプルなLightbox 系プラグインです。 Colorbox や Fancybox のようにあれもこれも出来るという訳ではなさそうですが、今後使う可能性もあるので簡単に設置方法をまとめました。 Bootstrap Lightbox のダウンロード 以下のページから Bootstrap Lightbox のファイルをダウンロードします。 各ファイルを、<head> 内か </body> の直前に設置します。 <link rel="stylesheet" href="./bootstrap.css"> <link rel="stylesheet" href="./bootstrap-lightbox.css"> <script src="./jquery.mi
Pinterestのようなサイトをよく見るようになりました。 この手のサイトは jQuery Masonry を利用することが多いのですが、今回は The Wookmark jQuery plugin を使ったPinterest 風のタイル状サイトを構築しましたので、その備忘録です。 The Wookmark jQuery plugin の特徴 タイル状にコンテンツを横に並べていく分けですが、CSSの float: や display:inline-block で並べても、各要素の高さが異なるとその分隙間が出来てしまいます。 そこで jQueryプラグイン jquery-wookmark.js を利用することで、高さが異なる要素をタイル状に並べても、隙間を埋めて表示してくれるようになります。 ブラウザの幅を伸縮しても親要素の幅に合わせてコンテンツが上手く配置されますし、レスポンシブWEBデ
[WP]WordPressのテーブル用プラグイン「TablePress」の使い方と、レスポンシブWEBデザイン対応について <table> タグを使ったコーディングはまだまだ多いですが、例えばWordPressで作った企業サイトで「会社概要」のような表組を掲載する場合に便利なプラグインが、今回紹介させていただく「TablePress」です。 TablePress は、例えば「企業情報で使うテーブル」「会社沿革で使うテーブル」「商品情報で使うテーブル」のように、コンテンツ毎にテーブルを複数管理でき、投稿記事や固定ページでショートコードを使ってフロント画面に表示させることができる便利なプラグインです。 また、拡張機能を使えばテーブルコンテンツをレスポンシブWEBデザイン対応することができますので、<table> を使うサイトであれば是非導入しておきたいプラグインではないかと思います。 Tabl
jQuery Marquee のダウンロード 以下より javascript ファイルをダウンロードして、jquery.marquee.js のようにリネームします。 jQuery Marquee の設置 jquery ファイルと一緒に ダウンロードした jquery.marquee.js ファイルを設置します。 <script src="./jquery.min.js"></script> <script src="./jquery.marquee.js"></script> <script> $(function () { $('p.ticker').marquee(); }); </script> jQuery Marquee でマーキーっぽく文字を流してみる HTML 側の記述例ですが、マーキーのようにスクロール表示させる要素に ticker のクラスを当てます。 <p class
jquery.wpcf7.confirm.js のダウンロードと設置 以下のページより jquery.wpcf7.confirm.js ファイルをダウンロードします。 ダウンロードした jquery.wpcf7.confirm.js を、jquery ファイルと一緒に <head> 内か </body> 直前に設置します。 <script src="jquery.min.js" type="text/javascript"></script> <script src="jquery.wpcf7.confirm.js" type="text/javascript"></script> エラーメッセージやレイアウトの補正 「送信」「確認」「修正」などのボタンや、エラーメッセージのテキストを変更することができますので、jquery.wpcf7.confirm.js ファイルを開き、11 〜 19
このページを最初にブックマークしてみませんか？
『WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
