サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
都知事選
www.webantena.net
Mac のメールソフト(Mail)を使っていると、稀に「winmail.dat」という添付ファイル付きでメールを受信する時があります。 過去に「ゴミファイルかな?」と思って添付ファイルを消したら、実はかなり重要なファイルだった…なんて経験があるのですが、 Mac のMail からは .datファイルの中身の直接確認することが出来ないので、今回はwinmail.dat ファイルの開く方法をまとめました。 TNEF’s Enough で.datファイルを開く まずはTNEF’s Enough というアプリケーションを使って、.dat ファイルをMac で開く方法です。 以下のサイトより、OS のバージョンにあったTNEF’s Enough ファイルをダウンロードします。 ダウンドードしたTNEF’s Enough を開いて、ツールバーの「File」>「Open」から開きたい.dat ファイルを
Google が提供している無料のパブリックDNSサービス Google Public DNS は、インターネットの接続速度の高速化が見込めるということで使ってみました。 今回はMac で Google Public DNS を設定する方法の紹介になりますので、Windowsの設定方法はこちらの記事を参考にしてみてください。 Mac で Google Public DNS を利用する 「環境設定」 » 「ネットワーク」へと進み、ネットワークサービスが一覧で表示されていると思いますので、Google Public DNS を使いたいサービスを選択し、詳細ボタンをクリックします。 「DNS」のメニューを選択します。 「DNSサーバ」欄に
記事の詳細ページに置いてあるボタンをクリックして「Contact Form 7」のメールフォームページに遷移させる際に、遷移元の記事のタイトルやカスタムフィールドの値を自動表示させるを探していると、 【WordPress】Contact Form 7 に値を渡すメモ で紹介されていた、POSTで渡すやり方が便利そうでしたので参考にさせていただきました。 記事のタイトルとカスタムフィールドの値をContact Form 7に渡す 例えば、通販っぽい商品紹介サイトをWordPress で運用しているとして、 商品詳細ページに「お問い合わせはこちら」ボタンを置き、そのボタンをクリックすることで、Contact Form 7 で用意したメールフォームページへ遷移する流れを前提とします。 今回は、Contact Form 7 のメールフォームページ内で、記事(商品詳細ページ)のタイトルである「商品名
例えばデスクトップとノートパソコンのMac を所有している場合に、「画面共有」を有効にすることでノートパソコンの画面をデスクトップ上に表示して操作(遠隔操作)することができます。 複数のマシンが存在する環境で、共有サーバーにしているMac を遠隔操作することもあるので、今回はMac 同士の「画面共有」方法をまとめました。
スマホアプリのようにアイコンボタンをクリックして左右からメニューをスライド表示できるjQuery プラグイン mmenu のご紹介です。 オプションで色々カスタマイズができますが、まずは今回は mmenu の基本的な設置方法から使い方までをご紹介します。 プラグイン提供先のページはデモを兼ねていますので、動きのイメージを掴みやすいかと思います。 jQuery mmenu の設置 jquery ファイルと一緒に jquery.mmenu.js、mmenu.css ファイルを <head> 内に設置します。 <link rel="stylesheet" href="./mmenu/mmenu.css"> <script src="./jquery.min.js"></script> <script src="./mmenu/jquery.mmenu.js"></script> jQuery m
ニュースサイトや特集コンテンツなどで、記事が1ページ、2ページ…、3ページ…と分割されているのをよく見かけます。 WordPressで記事を書く場合も同じような記事を複数ページにを分割する機能を利用できますので、今回は記事を分割する方法をビジュアルエディタとテキストエディタの2種類の方法に分けて紹介します。 ビジュアルエディタモードの場合TinyMCE Advanced プラグインのインストール ビジュアルエディタ拡張用のWordPressプラグイン「TinyMCE Advanced」を導入することで、ページ分割用のボタンを追加することができます。 ※TinyMCE Advanced プラグインの設定方法に関しては、こちらの記事を参考にしてみてください。 改ページ挿入ボタンの設置 TinyMCE Buttons Arrangement ページ内の以下のボタンが、「改ページ挿入」ボタンです。
レスポンシブWEBデザイン対応のLightbox 系プラグイン Magnific Popup のご紹介です。 Magnific Popup はIE 7、8 にも対応していて、画像や動画、Modalやメールフォーム、Ajax Popup などオーバーレイで表示できるコンテンツもかなり豊富ですが、 なんと言っても「レスポンシブWEBデザイン」対応で、ブラウザ伸縮の表示及び、スマホやiPad での閲覧時でも最適なサイズで画像を拡大表示してくれるので、使い勝手の良いプラグインだと思います。 Magnific Popup の設置 jquery ファイルと一緒に magnific-popup.js、magnific-popup.css のファイルを設置します。 <link rel="stylesheet" href="./magnific-popup/magnific-popup.css" /> <s
FC2ブログなどからWordPress へを移行する際にもよく目にするMT形式のテキストデータは、Movable Type and TypePad Importer プラグインを使うことでWordPress へとスムーズにインポートすることができます。 しかし、WordPress へインポートした時に行間が詰まってしまう…という問題が起こる場合がありますので、今回はMT形式のエクスポートファイルを、行間を保持したままWordPress へ移行する方法を紹介させていただきます。
WP-PostViews プラグインのインストール 管理画面のプラグイン新規追加画面よりWP-PostViews を検索するか、以下のサイトよりプラグインファイルをダウンロードします。 フロント画面に閲覧数を出力 WP-PostViews を使ってフロント画面の記事に閲覧数(Views)を表示させるには、以下のように the_views() を使う方法と、post_custom() を使う方法があります。 the_views() を利用 まずは the_views() を使う方法ですが、テンプレートファイル内に以下のように記述することで、 <?php if(function_exists('the_views')) { the_views(); } ?> 管理画面で設定した「Views Template:」の表記で閲覧数を表示することができます。 post_custom() を利用 以下の
overflow で要素内をスクロールさせると、iPhone やiPad などのiOS で見た場合にスクロールがぎこちなくなります。 そんな時は、iOS 5.0 より実装されたSafari CSS の -webkit-overflow-scrolling プロパティを使うことで、iOS でもスムーズなスクロール(慣性スクロール)を実現できるようになります。 -webkit-overflow-scrolling の指定 -webkit-overflow-scrolling に指定する値は「auto」と「touch」の2 つです。 「auto」はデフォルトで、慣性スクロールしません。 指定した高さの要素内をoverflow: scroll でスクロールさせる際に、以下のように .content { height: 200px; overflow: scroll; -webkit-overflo
jQuery を利用して、特定の要素にクラスを付けたり外したりする処理です。 例えば、グローバルメニューやサイドメニューなどをクリックした時、現在のページ(カレントページ)であるメニューのデザインを変更して、「今このページにいます」という見せ方ができるようになります。 Javascript の記述例 <head> 内にjquery ファイルを設置し、以下のようなjavascript のコードを記述します。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ $('#nav li a').each(function(){ var $href = $(this).attr('href'); if(location.href.match($hr
企業サイトを構築していると、ニュース内のテキストリンクに「PDF アイコン」を表示させるカスタマイズが必要になることが多いですので、 今回はWordPress での投稿を例に、PDF ファイルへのリンクテキストに自動でアイコンを表示させる方法に加えて、Word、Excel、ZIP ファイルのリンクにも同様にアイコンを表示させる方法を紹介致します。 アイコン画像とPDF ファイルのアップロード まずはPDF のアイコン画像を用意して、FTPでアップロードしておきます。 WordPress の場合は記事投稿画面よりPDF ファイルをアップロードし、リンク先を「メディアファイル」にして公開します。 リンクがPDF ファイルの場合の処理をCSS で記述 CSS ファイル内に以下の記述を追加します。 a[href $='.pdf'] { background:url(../img/icon/pdf.
<table> の行をクリックして、指定したリンク先に飛ばせるようにする方法です。 非常に便利なカスタマイズでしたのでシェアさせていただきました。 jQuery ファイルと一緒にjavascript のコードを設置 かちびと.net 様で公開されているソースコードを、jquery ファイルと一緒に設置します。 <script src="./jquery.min.js"></script> <script> jQuery( function($) { $('tbody tr[data-href]').addClass('clickable').click( function() { window.location = $(this).attr('data-href'); }).find('a').hover( function() { $(this).parents('tr').unbind
jQuery curvyCorners ダウンロード 以下のページより jQuery curvyCorners のファイルをダウンロードします。 ※バージョンは、2013年現在で最新版である2.1.1 を利用します。 jQuery curvyCorners の設置 <head> 内にcurvycorners.src.js ファイルを設置します。 <!--[if lt IE 9]> <script src="./curvycorners.src.js"></script> <script> curvyCorners.addEvent(window, 'load', initCorners); function initCorners() { var settings = { tl: { radius: 10 }, tr: { radius: 10 }, bl: { radius: 10 },
ブログや企業サイトを問わず、WordPress で「固定ページに投稿記事を10件表示させる」のような処理を入れる機会も多いのではないかと思いますが、 単純に最近の投稿記事を指定件数表示させる以外にもカテゴリ別、オーサー別など色々なパターンがありますので、今回はそのような固定ページに記事一覧を表示させる方法をまとめてみました。
フォームのサンプルはこちらに掲載していますので、合わせて参考にしてみてください。 JQuery Form Validation And Hints のフォームデモ 必須チェック 入力選択必須のフィールドにはclass="required" を付与します。 <div class="field required"> <p><label>テキストフォーム</label><br /> <input class="text verifyText" type="text" /><br /> <span span class="iferror">入力必須です。</span> </p> </div> <span class="iferror"></span> はエラーメッセージを出力する部分ですので、必須フィールドの場合は合わせて書いておきます。 エラーメッセージの表記場所の変更 <span class=
スマホサイトでリンクをタップすると、iPhone(iOS)ならリンク周りにグレーの影が、Android であればリンクの周りにオレンジの枠 が表示されると思います。 このグレーの影やオレンジの枠(ハイライト表示)をCSS の -webkit-tap-highlight-color で無効にしたり、ハイライトカラーを変更する方法をまとめました。
float を使って要素を横並びで表示する場合、「高さの異なる要素を行を揃えてキレいに表示したい!」と思いますが、 「height を固定値にして overfloe:hidden ではみ出た情報を非表示にして…なんてのはスマートじゃないし…」 という時に便利なjQueryプラグインが「jQuery.lineUp」です。 jQuery.lineUp は、横並びにした要素の高さを行毎きちんと揃えて、良い感じに並べてくれます。 ブロック要素を並べる記述例 ますはMach3.laBlog 様のブログで掲載されているレイアウトを参考にして組んでみました。 <style> .contents { overflow: hidden; } .contents .box { float: left; width: 22.155%; height:auto; margin:2px; padding:1%; b
iPhone など向けにスマホサイトを作っていると「端末を横にすると、文字が拡大表示されちゃう!」と困った経験があるかもしれませんが、 CSS の -webkit-text-size-adjust:100% を使って端末横回転時の文字拡大表示を防ぎます。 -webkit-text-size-adjust を指定しない場合 -webkit-text-size-adjust を指定しない場合は、端末を横にすると文字が拡大表示されます。 -webkit-text-size-adjust:100% を指定 CSSファイルで、以下のように-webkit-text-size-adjust:100% を記述します。 body { -webkit-text-size-adjust: 100%; } 拡大表示は免れました。
HTML5 で強化されたForm 周りの機能の1つで、input type=”text” などのフォームに初期値としてテキストを入れておくことができる placeholder 属性というものがあります。 今回は、このplaceholder 属性で指定した入力フィールドのテキストカラーを、CSS で変更する方法をご紹介します。 placeholder 属性で指定したテキスト色をCSS で変更する 2013 年11 月現在、Firefox、Google Chrome、Windows のIE の主要ブラウザに対応させるためには「ベンダープレフィックス」を付ける必要がありますので、CSS ファイルには以下のように記述します。 /*Webkit*/ ::-webkit-input-placeholder {color: #222} /*Firefox 19以降*/ ::-moz-placeholde
Lazy Load Plugin for jQuery のダウンロード 以下のページより Lazy Load Plugin for jQuery のファイルをダウンロードします。 Lazy Load Plugin for jQuery の設置例 Lazy Load Plugin は、ディスプレイで表示される範囲についてはオリジナルの画像を表示し、それ以外(ディスプレイ表示外)についてはダミーの画像を当て込んでおく、という使い方になります。 まずは jQuery ファイルと一緒に jquery.lazyload.js ファイルを設置します。 <script src="./jquery.min.js"></script> <script src="./jquery.lazyload.js"></script> <script> $(function() { $("img").lazyload(
少し必要になったのでメモ。 ブログやサイトにYoutube 動画を貼付ける場合は、Youtube のページで発行されるタグを貼付けるだけで簡単に設置できます。 ただ、動画のサムネイルを掲載する場合は、Youtube の右っちょに表示されているサムネイルを利用したくても、画像サイズがサイトやブログに合わない場合がありますので、「小」「中」「大」と3種類あるYoutube のサムネイルの取得方法をまとめました。
void(0) は「何も処理しない」という時に使用します。 a タグの href 属性ではリンククリックを無効化(処理しない)して、onClick 属性に書かれたスクリプトを実行する、なんて使い方が多いと思います。 javascript:void(0) の使い方 javascript:void(0) は、基本的な書き方はこんな使い方をします。 <a href="javascript:void(0)" onclick="javascript 関数();">リンク</a> IE6用 でも動くように return false; を指定 但し、IE6 の場合は href 属性のリンクと onClick 属性の処理がバッティングするようなので、void(0) を利用する場合は IE6用でも動くように return false; も指定します。 <a href="javascript:void(0)"
スライドショーのjQuery プラグインは山ほどありますが、FlexSlider はレスポンシブWEBデザイン対応なので、スマホサイトでスライドコンテンツを利用する際には重宝しています。 また、カルーセルが使えるなどカスタマイズ性にも優れており、非常に使い勝手がよいプラグインだと思います。 Flex Slider の設置 ダウンロードした jquery.flexslider.js、flexslider.css のファイルを、jquery ファイルと一緒に設置します。 <link rel="stylesheet" href="./flexslider/flexslider.css" /> <script src="./jquery.min.js"></script> <script src="./flexslider/jquery.flexslider.js"></script> <scri
画像をオーバーレイで拡大表示できるスクリプトとして、Lightbox はよく使いますが、動画やinline コンテンツ、iframe などもLightbox 風に表示させるにはjQueryプラグイン「Colorbox」が便利です。 カスタマイズしやすく、IE6でもそこそこ動きますので企業ページでも使える便利なプラグインです。
IE-CSS3.htc で利用できるプロパティ IE-CSS3.htc を使うことで、以下の CSS3 プロパティがIE下位バージョンでも利用できるようになります。 IE-CSS3.htc の使い方 「角丸の border-radius」と組み合わせた例です。 PIE.htc の時と同様、IEのビヘイビア 機能を利用して HTC ファイルをHTML 上で使用できるようにします。 .box { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; /*PIE.htc を利用*/ behavior:url("./ie-css3.htc"); } IE-CSS3.htc のサンプル 以下のページに、IE-CSS3.htc を利用した「角丸」「ドロップシャドウ」「テキストシャドウ」のサンプルを掲載しています
jQuery で Twitter のツイート数や、Facbeook のいいね数を表示する方法が人力検索はてなに掲載されていたので、これに「はてブ」も加えて、WordPressの記事毎にjQueryでSNSのカウント数(いいね数やツイート数など)を表示する方法をまとめてみました。 2013年6月11日 に実施される Twitter API の仕様変更までの間は、ツイート数は表示されると思います。変更後は様子を見てから考えます。 <script type="text/javascript" src="./jquery.min.js"></script> <script type="text/javascript"> function get_tweet_count(url, postid) { $.ajax({ url : 'https://graph.facebook.com/' + url
ページを下までスクロールしてもサイドメニューに広告が固定されたまま、なんてブログをよく目にしますが、このような動きはjQuery を利用することで実装可能です。 バナー広告以外にもメニューボタンやSNSボタン、ページの先頭へ戻るなどのリンクを設置できるなど、色々と応用しやすいカスタマイズです。 Javascript のサンプル jquery ファイルと一緒に、<head> 内に以下のjavascript のコードを記述します。 <script src="./jquery.min.js"></script> <script> $(function($) { var tab = $('.nav'), offset = tab.offset(); $(window).scroll(function () { if($(window).scrollTop() > offset.top) { tab
お問い合わせフォームや見積フォームで「住所」を都道府県から手打ちで入力するのは面倒ですので、郵便番号を入力するだけでその後の住所を自動入力してくれる 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>
次のページ
このページを最初にブックマークしてみませんか?
『WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く