サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ノーベル賞
www.webantena.net
管理画面上で投稿記事や固定ページ内の文字列を一括置換できるWordPress プラグイン「Search Regex」で、検索置換の対象に「カスタム投稿タイプ」を含める方法のご紹介です。
WordPressで、ある特定の固定ページの本文などを、別の固定ページ(HOMEなど)で表示する方法のご紹介です。 指定した固定ページの本文を出力 「HOME(サイトのトップページ)にID5の固定ページの本文を表示させる」という例を紹介致します。 HOMEのテンプレートファイル(home.phpなど)を開き、ID5の固定ページの本文を出力したい箇所に、以下のコードを記述します。
WordPress のマルチサイトで、ネットワーク内の特定の子サイトの新着記事を、親サイトに指定件数表示させる方法のご紹介です。 <?php //ブログIDが「2」の子サイト switch_to_blog(2); ?> <ul> <?php //最新記事の5件を表示 query_posts('showposts=5'); while(have_posts()) : the_post(); ?> <li><?php the_time('Y年m月d日'); ?> <a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li> <?php endwhile; ?> </ul> <?php restore_current_blog(); ?>
Noto Sansは、全言語対応を目指してGoogle とAdobe が共同開発したオープンソースのフォントで、Webフォントとして無料で提供されています。全言語対応を目指しているだけあって、当然日本語(和文)フォントも利用可能です。 今回はそんなNoto Sansフォントを、ブログやWEBサイトで手軽に利用する方法を紹介させていただきます。 Noto Sans JP (japanese) フォントのインポート まずはご利用のCSSファイルに以下のインポート文を追加して、Noto Sansフォントを使えるようにします。 @import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css); CSSファイルではなく、HTMLファイルの<head>内にlinkタグで指定する場合は↓こちらです。 <head> <link href
Dropbox アプリケーションは原則1アカウントしか利用(同期)することができませんが、 Mac の場合はAutomator でDropbox を起動することにより、2つ以上の複数アカウントを同期させることが可能です。 新しいDropbox フォルダの用意 Mac の/Users/ユーザー名/フォルダに、新しいDropbox のフォルダを作成します。 すでにDropbox アプリケーションを使っている場合は、Dropbox2、Dropbox-Bなど別の名称であれば何でも構いません。※今回は「Dropbox-s」にしています。 Automator の起動 アプリケーションフォルダ内のAutomator を起動します。 Automator の「アプリケーション」を選択します。 左メニュー(ライブラリ)の「ユーティリティ」から「シェルスクリプトの実行」を選択します。 「シェルスクリプトの実行」
以前に、このブログでも管理画面の「表示オプション」や「ヘルプ」リンクを非表示にする方法について紹介させていただきましたが、 今回は、管理画面の「表示オプション」リンクは表示させるものの、表示オプション内で不要なものを最初から非表示にしてしまう方法について紹介させていただきます。 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
iOS でテキストフォームを見ると、デフォルトで角丸だったりシャドウ(影)が掛かっていたりしますので、サイトに合わせてフォームのデザインを変更した場合が多々有ります。 今回はiPhone やiPad 向けに、input[type=text] のデザインをCSS で補正する方法をまとめました。 CSS でフォームの角丸や影を消す まずはCSS の記述例から紹介します。 input[type=text] { font-size : 16px; border : 1px solid #ccc; -webkit-border-radius : 0; -webkit-appearance : none; -webkit-tap-highlight-color : rgba(0,0,0,0); } で、何をしたいかということを以下にまとめています。 フォームタップ時のズームを回避 テキストフォームにf
WP Facebook Portal プラグインのインストール 管理画面のプラグイン新規追加より WP Facebook Portal を検索するか、以下のページからプラグインファイルをダウンロードします。 Facebook 側での事前準備 WP Facebook Portal プラグインで連携する前に、Facebook 側でいくつか事前に準備をしておきます。 Facebook ページの用意 まずはFacebook ページを用意します。 Facebook ページの作成方法は、過去に紹介させていただいたFacebook ページの作成方法(2015年9月版) の記事を参考にしてみてください。 Facebook アプリの用意 Facebook アプリの作成方法も、過去のFacebook アプリの作成と公開方法のまとめ(2014年版) の記事を参考願います。 WP Facebook Portal
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>
前回の記事でReally Simple CSV Importer プラグインの基本的な使い方を紹介させていただきましたが、 今回はCSV を編集して記事を新規に投稿したり、既存記事を編集、削除したり、ステータスの変更やカスタム投稿タイプで記事に親子関係を付ける方法などをまとめてみました。
ogg、webm 形式の動画をsource タグで指定します。 <video src="sample.mp4" width="640" height="360" poster="sample.jpg"> <source src="sample.mp4" type="video/mp4"> <source src="sample.ogg" type="video/ogg"> <source src="sample.webm" type="video/webm"> </video> 動画が再生されない場合の対処法 video タグとsource タグを使っても動画が上手く再生されない(読み込まれない)場合は、以下の点を確認してみましょう。 video タグをサポートしていないブラウザで閲覧 そもそもvideo タグが対応していないブラウザでは動画を再生させることはできません。 ですので、以下の
jQuery.BgSwitcher ファイルのダウンロード 以下のページより、jQuery.BgSwitcher のファイルを一式ダウンロードします。 <script type="text/javascript" src="./jquery.min.js"></script> <script type="text/javascript" src="./jquery.bgswitcher.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".contents").bgswitcher({ images: [ "./images/image_1.jpg", "./images/image_2.jpg", "./images/image_3.jpg", "./images/image_4.j
18禁サイトのように、サイト訪問時に年齢確認などのアラートボックスを表示させ、「認証」ボタンを押したら次回のアクセス時からはアラートを出さないようにする、という処理のご紹介です。 jQuery プラグインのダウンロード アラートボックスにはSimpleModal を利用し、jQuery Cookie でCookie に保存する仕組みになりますので、それぞれ必要なファイルをダウンロードしておきます。 SimpleModal のダウンロード 以下のページから SimpleModal のファイルをダウンロードします。
ブログをメインにWordPress を運用する場合は別ですが、企業サイトをWordPress で構築する場合は「投稿」という表示を別に名前にしたい時もあります。 そんな時は、テーマファイルのfunctions.php を編集して「投稿」を別の表記に変更することが可能です。 「投稿」を「ニュース」に表示変更してみる 通常、WordPress 管理画面の左メニューは「投稿」になっていますが、 例えば「投稿」を「ニュース」に変更したい場合は、ご利用のテーマファイルfunctions.php を開いて、以下のような記述を追加します。 function change_post_menu_label() { global $menu; global $submenu; $menu[5][0] = 'ニュース'; $submenu['edit.php'][5][0] = 'ニュース一覧'; $subme
Macの「Time Machine」は外付けハードディスクなどに丸ごとバックアップを取っておける非常に便利なアプリケーションですが、不要な過去のバックアップファイル(Backups.backupdb/の中)を消す際にはやや注意が必要です。 そのままFinder のゴミ箱に入れちゃうと厄介なことになりますので、手順に従ってきちんとバックアップデータを削除する必要があります。 Time Machine にアクセス 画面右上のツールバーからTime Machine にアクセスします。 Time Machine のファイルを消去する 右端に並んだ日付の中から、消去したいバックアップを選び、「アクション」ボタンから「バックアップを削除」をクリックします。 パスワードを聞かれるので入力します。 デスクトップに戻ってくる場合は、画面左下の「キャンセル」をクリックします。 以上が Time Machine
稀に 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
WordPressで「記事の1件目にだけ広告を表示する」みたいなことをするための方法です。 記事の1件目に広告を挟むような特定の処理を入れたりできる他、1件目の記事にだけ特別なクラスを指定することもできます。 また、偶数件数や奇数件数の記事、ループで回した最後の記事に対しても特別なクラスを指定することができるなど、デザインの自由度がかなり上がるカスタマイズです。 「1件目の記事だけ」に特定の処理を施す functions.php の編集 kanonjiの日記 様のブログで紹介されているコードを、functions.php に追記します。 <?php function isFirst(){ global $wp_query; return ($wp_query->current_post === 0); } ?> テンプレートファイル への記述例 index.php や archive.ph
Contact Form 7 プラグインのインストール 管理画面のプラグイン新規追加画面よりContact Form 7 を検索するか、以下のサイトよりプラグインファイルをダウンロードします。 Contact Form 7 で画像アップロードフィールドの追加 Contact Form 7 を有効化したら、管理画面左メニュー「お問い合わせ」よりメールフォームの編集ページへ進み、「タグの作成」メニューより「ファイルのアップロード」を選択します。 「ファイルのアップロード」の設定項目は以下の通りです。 ①アップロードを必須にする場合は「必須入力の項目ですか?」にチェックを入れます。 ②「名前」の部分は自由に変更できますが、後述する「メール」「メール(2)」欄の 「ファイル添付」フィールドに入力する名前と合わせておきます。 ③「ファイルサイズの上限」を指定します。 2MBまでのファイルであれば「2
WordPressの記事投稿時に「アイキャッチ」を利用する事が多いと思います。 例えば「最新記事をアイキャッチ付きで一覧表示」したり「OGP 設定にアイキャッチを使う」など、非常に利用頻度の高い画像ですので、今回はこの アイキャッチ を取得する方法をまとめました。 アイキャッチの「画像」の取得 まずはアイキャッチの画像を <img> タグ付きで取得する方法です。 functions.php の編集 アイキャッチを有効にするには、使用しているテーマの functions.php で add_theme_support('post-thumbnails') を有効にします。 ※functions.php に以下のコードの記述がなければ追記します。 <?php add_theme_support('post-thumbnails'); ?> アイキャッチの「画像」の取得方法 アイキャッチがあれば
IcoMoon の取扱アイコン IcoMoonページ上部の「IconMoon App」ボタンをクリックします。 WEBサービスでもよく使いそうなアイコンが多数掲載されています。 一部になりますが、ざっとこんな感じ↓ IconMoon Free Linecons Eighty Shades Entypo IcoMoon の使い方 使いたいアイコンをクリックして、 ページ下部の「Font」ボタンをクリックします。 確認ページへ遷移しますので、同じくページ下部にある「Download」ボタンをクリックします。 icomoon フォルダ内の構成 ダウンロードした icomoon.zip を解凍すると、中身はこのようになっています。 アイコンフォントを表示させるのに必要なファイルは、 style.css と、fonts フォルダ内の4つのフォントファイルです。 style.css 下記ソースコードの
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 のメールフォームページ内で、記事(商品詳細ページ)のタイトルである「商品名
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
<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
ブログや企業サイトを問わず、WordPress で「固定ページに投稿記事を10件表示させる」のような処理を入れる機会も多いのではないかと思いますが、 単純に最近の投稿記事を指定件数表示させる以外にもカテゴリ別、オーサー別など色々なパターンがありますので、今回はそのような固定ページに記事一覧を表示させる方法をまとめてみました。
スマホサイトでリンクをタップすると、iPhone(iOS)ならリンク周りにグレーの影が、Android であればリンクの周りにオレンジの枠 が表示されると思います。 このグレーの影やオレンジの枠(ハイライト表示)をCSS の -webkit-tap-highlight-color で無効にしたり、ハイライトカラーを変更する方法をまとめました。
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)"
画像をオーバーレイで拡大表示できるスクリプトとして、Lightbox はよく使いますが、動画やinline コンテンツ、iframe などもLightbox 風に表示させるにはjQueryプラグイン「Colorbox」が便利です。 カスタマイズしやすく、IE6でもそこそこ動きますので企業ページでも使える便利なプラグインです。
お問い合わせフォームや見積フォームで「住所」を都道府県から手打ちで入力するのは面倒ですので、郵便番号を入力するだけでその後の住所を自動入力してくれる 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ページを開く