はてなブックマーク

jQueryを使って、フィルタリング機能を実装する方法をご紹介いたします。要素をグループ分けし、各グループ毎に要素の絞り込みを行います。 簡単なデモを用意したので、挙動については以下よりご確認ください。 デモを見る jQueryを使って要素のフィルタリング機能を実装する方法 まず、HTMLは以下のようにマークアップします。 <ul class="filtering"> <li><span data-filter="all" class="active">すべて</span></li> <li><span data-filter="fil-1">フィルタ1</span></li> <li><span data-filter="fil-2">フィルタ2</span></li> <li><span data-filter="fil-3">フィルタ3</span></li> </ul> <ul c

Nested Pagesは、管理画面上で投稿や固定ページの一覧をドラッグ&ドロップで並べ替えできるようになるWordPressプラグインです。 並べ替えだけでなく、一覧ページ上で空の子ページを作成したり、ページを複製することも可能です。 Nested Pagesのインストール インストール手順は以下の通りです。 Nested Pagesをダウンロードします。ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。管理画面の[プラグイン]ページで、Nested Pagesを有効化します。 Nested Pagesの設定 WordPress管理画面の[設定] – [Nested Pages]で、Nested Pagesの設定を変更できます。まずは、[General]タブで全般設定を行いましょう。

Visual Studio Code(VSCode)でよく使うショートカットキーをまとめてみました。 あんまり量が多いと覚えきれないので、本当によく使うものに厳選しています。 Visual Studio Codeでよく使うキーボードショートカットまとめ

TryCodeは、ブラウザ上でコードを共有して、複数人でリアルタイムに編集しながらコーディングができるWEBサービスです。 コードを共有する人はGitHubアカウントでのログインが必要ですが、共有される側の人はユーザー登録不要で利用できます。 TryCodeの使い方 TryCodeにアクセスして、右上の[Sign in]をクリックします。 GitHubアカウントでログインします。 ログインできたら、コードを入力します。入力すると専用のURLが発行されますので、その状態で[Settings]から[Live mode]をオンにします。 あとはURLを共有すれば、複数人での編集が可能になります。誰かが編集すると、即座に編集内容が反映されます。 また、右上にある[Fork]をクリックすると編集履歴を保存できます。履歴は、アカウントをクリックして[My codes]から確認可能です。 あとがき 「こ

Custom Post Type UIなどを使ってカスタム投稿タイプを追加した場合、管理画面でカスタム投稿の一覧を開くとタイトル順で投稿が並びます。 通常の投稿だと日付の降順に並んでいて、新しい記事が上にくるのでわかりやすいですね。 カスタム投稿でも日付の列をクリックすれば日付順にソートされるのですが、一覧を開き直すとまたタイトル順に戻ります。 そこで今回は、カスタム投稿も通常の投稿と同じように、デフォルトで日付順に並べ替える方法をご紹介したいと思います。 WordPress管理画面上でカスタム投稿一覧の並びを日付順に変更する方法 管理画面上の投稿一覧もpre_get_postsを使って簡単に並び替えすることができます。 具体的には、適用しているテーマのfunctions.phpに以下を追加します。 function admin_custom_posttype_order($wp_quer

WordPressでは、アップロード可能なファイルの種類が決まっています。許可されていないファイルをアップロードしようとすると、「セキュリティ上の理由によりこのファイル形式は許可されていません」というエラーが出て、ファイルのアップロードを拒否されてしまいます。 ファイルのアップロードがエラーになってしまう場合、以前紹介した「WP Extra File Types」をインストールして、許可したいファイルの種類を選択してあげるとファイルのアップロードを可能にしてくれます。 他にも、対象のファイルがSVGの場合は、「Safe SVG」を使うという選択肢もあります。 このように、アップロードできるファイルの種類を増やしたい時は、WP Extra File TypesやSafe SVG等のプラグインを使うのが簡単だと思います。 ですが今回は、プラグインは使わずにwp-config.phpに1行追加す

EUのGDPRへの対応を支援するために、WordPress4.9.6から管理画面に「プライバシー設定」という項目が追加されました。 参考：WordPress 4.9.6 プライバシー・メンテナンスリリース [設定] – [プライバシー]にアクセスすると、プライバシーポリシーページを設定することができます。 今回は、このプライバシー設定で指定されているプライバシーポリシーページをテーマ内で判別する方法をご紹介したいと思います。 WordPressのプライバシー設定で指定しているプライバシーポリシーページを判別する条件分岐 プライバシーポリシーページを判別するには、is_privacy_policy()を使います。いつの間にか条件分岐が追加されていたと思ったら、WordPress5.2で導入されたみたいです。 具体的には、以下のように条件分岐させることが可能です。 <?php if( is_p

以前、タブ切り替え型のコンテンツを作成する方法をご紹介いたしました。 通常、他のページからタブが設置されたページにアクセスすると、1つ目のタブがアクティブな状態になります。ですが、他のページからアクセスした時に、指定したタブをアクティブにしたい、ということもあるかと思います。 そんなわけで、今回は他のページから特定のタブコンテンツへダイレクトにアクセスする方法をご紹介したいと思います。リンクにパラメータを追加する方法とハッシュを追加する方法の2パターンを解説いたします。 タブ切り替え型コンテンツの作成 まずは、タブ切り替え型のコンテンツを作成します。HTMLは以下のようにします。 <div id="tabs"> <ul> <li id="tab1"><a href="#panel1">タブ1</a></li> <li id="tab2"><a href="#panel2">タブ2</a><

deSVGは、imgタグで設置しているSVGファイルをインラインSVGに変換してくれるJavaScriptライブラリです。 SVGの色をCSSで変更しようと思った場合、imgタグで設置されているSVGファイルは変更できず、インラインSVGとしてHTMLにコードが記述されている必要があります。 ですが、SVGのコードは非常に長くなる場合もあり、HTMLに直接記述するのは嫌だなーと思うかもしれません。そんな時はdeSVGを使えば、HTMLにはimgタグとして記述し、ページが読み込まれた時にインラインSVGに変換するといったことが可能になります。 例えば、以下のようにimgタグでsample.svgを読み込んでいたとします。 <img src="sample.svg" alt="" class="svg"> deSVGを使うと、以下のようなインラインSVGに変換することができます。 <svg i

WordPress5.0から導入された新しいエディタ「Gutenberg(ブロックエディタ)」ですが、慣れると非常に便利で使い勝手が良いです。一度慣れてしまうと旧エディタには戻れないですね。 Gutenbergで記事を書く際、編集画面の見出しや本文にはGutenberg用のデフォルトスタイルが当たっています。すごく見にくいわけではないですが、なるべく実際にブログを表示した時に近い状態で編集したいと思う方は多いのではないでしょうか。 そんなわけで今回は、Gutenbergの編集画面に独自のスタイル(CSS)を適用する方法をご紹介したいと思います。この方法を使えば、実際の表示と同じような見た目で記事を編集することができるようになります。 Gutenbergの編集画面に独自のスタイルを適用する方法 Gutenbergの編集画面に独自のスタイルを適用する方法は、2通りの方法がありますので、それぞれ

1行のテキストで均等割付・両端揃えを実装する方法をご紹介いたします。CSSのみで実現でき、表などで活用できるので覚えておくと便利かと思います。 CSSを使って1行のテキストで均等割付・両端揃えを実現する方法 以下のような表を作成することを前提として説明いたします。 Safari非対応の均等割付・両端揃えの実装方法 まずは、Safariには非対応ですが、最も簡単な均等割付・両端揃えの実装方法です。 HTMLは以下の通りで、シンプルな表ですね。 <table> <tr> <th>均等割付</th> <td>CSSで均等割付</td> </tr> <tr> <th>均等</th> <td>CSSで均等割付</td> </tr> <tr> <th>割付</th> <td>CSSで均等割付</td> </tr> </table> CSSでは以下のように指定します。 table { width: 40

All-in-One Event Calendarは、繰り返しにも対応したイベントカレンダーを実装できるWordPressプラグインです。 ショートコードのパラメータも豊富で、色合いも細かく指定できるので、理想のイベントカレンダーを実装できると思います。 All-in-One Event Calendarのインストール インストール手順は以下の通りです。 All-in-One Event Calendarをダウンロードします。ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。管理画面の[プラグイン]ページで、All-in-One Event Calendarを有効化します。 All-in-One Event Calendarの設定 All-in-One Event Calendarを有効化すると、[イベント]というカスタム投稿が追加されます。[イ

投稿や固定ページのタイトルから、投稿ID等のページ情報を取得する方法をご紹介いたします。 投稿のタイトルから情報を取得する方法 投稿のタイトルから情報を取得するには、get_page_by_title関数を使用します。 以下のように記述することで、投稿のページ情報を取得できます。同じタイトルの投稿が複数存在する際は、投稿IDが最小の投稿を返します。「post」の部分で投稿タイプを指定しています。

ページ内にいくつもYouTube動画を埋め込んでいると、ページの読み込み速度が遅くなってしまいます。そんな時は、Youtube SpeedLoadを導入することで、YouTube埋め込み動画の読み込みを高速化してくれます。 高速化といっても仕組みはシンプルで、ページ読み込み時はサムネイル画像を表示しておいて、クリックされたら動画を読み込むという挙動をしています。 Youtube SpeedLoadのインストール インストール手順は以下の通りです。 Youtube SpeedLoadをダウンロードします。ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。管理画面の[プラグイン]ページで、Youtube SpeedLoadを有効化します。 Youtube SpeedLoadの設定 プラグインを有効化したら、WordPress管理画面で[設定] – [

Lityは、YouTube動画や画像などをポップアップで表示できるjQueryプラグインです。動画や画像のリンクをクリックすることで、いわゆるモーダルウインドウとして表示させることができます。 配布サイトでデモが用意されていますので、挙動についてはこちらでご確認ください。 Lityの使い方 ステップ1. jQuery本体とLityの読み込み LityはCDN経由で提供されていますので、以下コードを<head>～</head>内に追加することでLityを読み込めます。 <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/lity/2.3.1/lity.css'> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min

以前、ドメインパワーを計測することができる「パワーランクチェックツール」というツールをご紹介しました。パワーランクチェックツールを提供している株式会社アクセスジャパンが、新しいSEOツールとして2つのドメインのドメインパワーを比較できる「パワーランク比較ツール」を公開しました。 パワーランク比較ツールは、比較したいドメイン名を入力することで、それぞれのドメインパワーを表示してくれます。 パワーランク比較ツールの使い方 パワーランク比較ツールにアクセスして、「ドメイン1」と「ドメイン2」に比較したいドメインを入力します。 [チェック]をクリックすると、ドメインパワーの比較結果が表示されます。 当ブログとYahooを比較した結果です。 パワーランク比較ツールの制限と注意点 パワーランクチェックツールと同様に、以下のような制限・注意点があります。 現在、パワーランク比較ツールの利用は１日１回まで

Picturefill.jsは、picture要素に対応していないブラウザでもpicture要素による画像の切り替えができるようになるポリフィルです。 picture要素を使うことで、ブラウザの幅によって画像を出し分けることができます。例えば、以下のように記述すると、1000px以上ならextralarge.jpg、800px以上1000px未満ならlarge.jpg、800px未満ならmedium.jpgが表示されます。 <picture> <source srcset="extralarge.jpg" media="(min-width: 1000px)"> <source srcset="large.jpg" media="(min-width: 800px)"> <img src="medium.jpg" alt=""> </picture> このように、picture要素は非常に

Better Search Replaceは、データベース内の文字列を一括置換できるWordPressプラグインです。投稿内や設定などの文字列を書き換えることができます。 データベース内の文字列を置換するプラグインといえばSearch Regexが有名ですが、Search Regexはだいぶ長い間アップデートが実施されていません。また、最新バージョンのWordPressにインストールすると、「サイトで技術的な問題が発生しています」というメールが届いてしまいます。 Search Regexも使えないわけではないですが、しっかりアップデートが実施されているBetter Search Replaceの方が安心して利用できますね。 Better Search Replaceのインストール インストール手順は以下の通りです。 Better Search Replaceをダウンロードします。ダウンロー

CSSで背景画像や疑似要素として使えるようにSVGをBase64にエンコードしてくれるWEBサービス「Base64 Encode and Decode」 Base64 Encode and Decodeは、Illustratorなどで作ったSVGをCSSで背景画像や疑似要素として指定できるように、Base64にエンコードしてくれるWEBサービスです。 Base64 Encode and Decodeの使い方 まずは、SVGファイルをテキストエディタで開きます。SVGファイルをテキストエディタで開くと、以下のようなコードが表示されます。 <svg id="レイヤー_1" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg" width="142" height="142" viewBox="0 0 142 142"> <defs> <st

JOB POSTING GENERATORは、自社サイトの求人情報をGoogleしごと検索に表示させるために必要な構造化データを生成してくれるツールです。 必要な項目を入力していくと、Googleしごと検索用の構造化データを出力してくれます。 Googleしごと検索とは Googleしごと検索とは、ザックリいうとGoogleの検索結果に求人情報を表示してくれる機能のことです。 例えば、「正社員　求人」で検索すると、以下のように検索結果の上に「求人」という枠が表示されます。 このように、就職・採用に関する検索クエリに対して、求人情報を表示してくれるのがGoogleしごと検索です。 Googleしごと検索に求人情報を掲載するには 単純に自社サイトに求人情報を掲載しただけでは、Googleしごと検索で求人情報が表示されるようにはなりません。 JSON-LDという記法で記述したschema.org

Fontyは、サイトにGoogle Fontsを適用した場合の見た目をプレビューできるWEBサービスです。 指定したサイトにGoogle Fontsを適用して、サイトとフォントの調和具合を確認できます。 Fontyの使い方 Fontyにアクセスして、上部のサイトのURLを入力します。Enterでサイトが読み込まれます。 左側のフォント一覧から、適用したいフォントを選択しましょう。右側のプレビューに、リアルタイムでフォントが適用されます。 検索ボックスにフォント名を入力するか、[FILTER BY]でフォントの種類を選択すると、フォントの絞り込みができます。 適用したいフォントが決まったら、右上の[Download]をクリックします。 [Download]をクリックすると、「Hosted by Google」か「Download」を選択できます。 Hosted by Googleを選択すると

New Posts Blockは、Gutenberg(ブロックエディタ)に新着投稿の一覧を表示するブロックを追加するWordPressプラグインです。 投稿や固定ページ内で新着投稿一覧を簡単に設置できるようになります。 New Posts Blockのインストール インストール手順は以下の通りです。 New Posts Blockをダウンロードします。ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。管理画面の[プラグイン]ページで、New Posts Blockを有効化します。 New Posts Blockの使い方 New Posts Blockを有効化すると、投稿編集画面でブロックの一覧に「新着の投稿」というブロックが追加されます。 新着の投稿のブロックは「ウィジェット」の中にあるので、選択してブロックを挿入しましょう。 右側のブロックメニ

WordPressサイトの全ページにcanonicalを設定する方法がウェビメモさんで紹介されていました。非常にわかりやすかったので紹介したいと思います。 canonicalとは canonicalというのは、ページの内容が類似していたり重複している場合に、検索エンジンからの評価が分散してしまわないように、URLの正規化を行うためのメタタグです。 例えば、ECサイトで色違いのTシャツがそれぞれ別ページで販売されている場合などに活用します。 詳しくは、以下の記事でわかりやすく解説されていますので、ご参照いただければと思います。もしくは「canonicalとは」で検索すると、たくさん記事が出てきます。 WordPressサイトの全ページにcanonicalを設定する方法 適用しているテーマのfunctions.phpに以下を追記します。 remove_action('wp_head', 're

Luminousの使い方 Luminousの使い方は、WEMOさんの記事で詳細に解説されていますので、詳しくはそちらをご参照ください。複数枚の画像に対応させる方法など、参考にさせていただきました。 ステップ1. Luminousのダウンロードと設置 GitHubからファイル一式をダウンロードします。ダウンロードしたファイルを解凍し、以下のファイルをサーバー上に設置します。 dist/Luminous.min.js dist/luminous-basic.min.css HTMLの<head>～</head>内に以下を追加して、ファイルを読み込みます。 <link rel="stylesheet" href="css/luminous-basic.min.css"> <script src="js/Luminous.min.js"></script> ファイルパスは適宜変更してください。また

echo.jsは、画像を遅延読み込みさせて、表示速度の向上に貢献するJavaScriptライブラリです。 echo.jsは単体で動作するため、jQueryなどに依存しません。Lazy Load系のライブラリはjQueryに依存するものが多いので、単体で動作するのはありがたいですね。 echo.jsの使い方 ステップ1. echo.jsのダウンロードと設置 まずはGitHubからecho.jsをダウンロードしてサーバーに設置しましょう。必要なファイルは「dist/echo.min.js」だけです。 サーバー上にファイルを設置したら、下記を<head>～</head>内か</body>の直前に記述して、echo.jsを読み込みます。 <script src="js/echo.min.js"></script> ステップ2. HTMLのマークアップ 画像のマークアップは、以下のようにします。 <