サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Switch 2
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
IcoMoon の取扱アイコン IcoMoonページ上部の「IconMoon App」ボタンをクリックします。 WEBサービスでもよく使いそうなアイコンが多数掲載されています。 一部になりますが、ざっとこんな感じ↓ IconMoon Free Linecons Eighty Shades Entypo IcoMoon の使い方 使いたいアイコンをクリックして、 ページ下部の「Font」ボタンをクリックします。 確認ページへ遷移しますので、同じくページ下部にある「Download」ボタンをクリックします。 icomoon フォルダ内の構成 ダウンロードした icomoon.zip を解凍すると、中身はこのようになっています。 アイコンフォントを表示させるのに必要なファイルは、 style.css と、fonts フォルダ内の4つのフォントファイルです。 style.css 下記ソースコードの
スマホサイトでリンクをタップすると、iPhone(iOS)ならリンク周りにグレーの影が、Android であればリンクの周りにオレンジの枠 が表示されると思います。 このグレーの影やオレンジの枠(ハイライト表示)をCSS の -webkit-tap-highlight-color で無効にしたり、ハイライトカラーを変更する方法をまとめました。
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
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
このページを最初にブックマークしてみませんか?
『WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く