はてなブックマーク

現在開発中の、DigiPress テーマ専用のブロックエディタープラグインによる拡張機能として、WordPress 標準のテーブルブロックで作成される HTML テーブル(table 要素)を、横にオーバーフローした際にCSSのみで水平方向にスクロール可能にして表全体が閲覧できるようにするため、table 要素全体を div 要素でラップする必要がでてきました。 ブロックエディターで出力されるコンテンツ全体を div などのタグでラップする方法は、wp.hooks の addFilter を利用して以下のようにフックを実行することで簡単に実装できます。 テーブルブロックをdivでラップするコード(JSX) /** * Wrap table block in div. * * @param {object} element * @param {object} blockType * @par

サンプル See the Pen Opening Fake Shutter with pure CSS by digistate (@digistate) on CodePen. やっていることはごく簡単で、オープニングシャッター用の最前面のレイヤー要素(.shutter)を CSS アニメーションで変形させながら、最終的に非表示にして背面に移動させているだけです。 HTML の構造 HTML の構造もシンプルです。 オープニングシャッター用の要素(.shutter)を最初に記述し、その後にメインのページコンテンツ(.container)を配置します。 <div class="shutter"></div> <section class="container"> <!-- ここにメインコンテンツ --> </section> CSS の構造 オープニングシャッター用の要素は、最前面に表示し

今回の Tips は、JavaScript を一切利用せず、CSS のみを駆使して表現するイメージスライダーを作ってみます。 スライドは、サムネイル付きのナビゲーションボタンをクリックすることで切り替わるようにしてみます。 まずは、完成イメージのサンプルをご覧ください。 CSS のみで表現するスライダーデモ See the Pen Pure CSS thumbnail slider by digistate (@digistate) on CodePen. 過去記事でも何度か紹介していますが、スライドの切り替え方法は、アンカー(a)タグの href 値に ハッシュリンク(#)を指定し、そのリンクをクリックすることで対象要素に付けられる :target 疑似セレクタを利用します。 HTML の構成 スライダーの HTML は、メインのスライダー用とサムネイルナビゲーション用の2つの対になるリ

2018/12/7 : WordPress 5.0 “Bebo” での仕様に合わせて内容を更新済み。 WordPress 5.0 から、記事のエディターは従来の「ビジュアル(TinyMCE)／テキスト」エディターから、各コンテンツをブロック単位で直感的なGUIで追加するスタイルのエディター「Gutenberg」(グーテンベルグ)に一新されました。 WordPress 5.0以降で従来のエディターを利用するには、「Classic Editor」プラグインをインストールします。 WordPress 5.0以降で「Classic Editor」プラグイン(v1.1〜)をインストールした場合、今までとは違ってかなり簡単に、しかも Gutenberg 用と Classic Editor(ビジュアルエディター)用 にセレクタ(class)を分けてCSSを作成する必要もほとんどなくなっただけでなく、専用

WordPressでサイトを構築している場合、誰でもほぼ間違いなく多かれ少なかれ要件を満たす機能を持つプラグインを複数導入していると思いますが、プラグインによっては自前のスタイルシート(CSS)やJavascriptを読み込ませているものもあります。 例えば、コンタクトフォーム用のプラグインとして有名な「Contact Form 7」というプラグインは、headセクション内に1つのCSSと、bodyタグの終了前に2つのJavascriptをロードさせています。 Contact Form 7 が出力するCSSとJavascript /wp-content/plugins/contact-form-7/includes/css/styles.css /wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js /wp-con

WordPressプラグインやテーマのサブメニューとして「アドオン」メニューを追加し、アドオンのページを開くと、利用可能な拡張機能の一覧が表示され、ユーザーは一覧からクリックして気になったアドオンの詳細ページに直接参照し、プラグイン(プラグイン)を入手できる仕組みを作りたいと考えていたのですが、アドオンのページで表示するアイテムの情報(プラグイン名、URL、概要、サムネイルなど)は、別途jsonデータを用意してAPI経由で取得してHTMLに落とし込んで表示させる場合、プラグインが追加されるたびにjsonデータも更新しなければいけないため面倒です。 提供中のDigiPressテーマでは、専用アドオンは以下のカテゴリーにまとめられているため、このカテゴリーページの情報を利用できれば、別途APIなど用意しなくてもプラグインを追加(記事を投稿)するだけでアドオンページの一覧も自動的に更新できそうで

WordPressのテーマやプラグインで、翻訳ファイル(*.mo)を含めて多言語表示に対応させる場合、PHPであれば load_theme_textdomain (テーマの場合)、 load_plugin_textdomain (プラグインの場合) といった関数で キー名と翻訳ファイルのパスを指定すれば、WordPressで設定されているロケールに合わせて表示言語を簡単に差し替えれます。 おさらい : PHP側で多言語対応する場合の例 翻訳ファイルは、POT (Portable Object Template, または PO) ファイルと MO (Machine Object) ファイルがあり、人が編集するのは POTファイルですが、実際に WordPress が翻訳データとして利用するのは、Poedit などを介して POTファイルをバイナリデータに変換した MOファイルです。 例えば日

WordPressで記事や固定ページを投稿した際に、本文の見出し(H1〜H6)タグの数と構造に応じて自動的に目次を作成し表示してくれる、もっともポピュラーなプラグインといえば 「Table of Contents Plus」。 デフォルトでは、以下のようなシンプルな味気ないデザインですが、プラグインの設定でデフォルトのCSSを無効にして、よりデザイン性の高い独自のスタイルにカスタマイズすることができます。 TOC+ プラグインのデフォルト表示 ここでは、「Table of Contents Plus」の目次デザインのためだけに外部WebフォントやFont Awsomeのような重たいアイコンフォントデータを使用せずに、CSSのみで目次コンテンツをスタイリングするコードのサンプルをご紹介します。 以下に掲載しているCSSは、コピーしてそのままテーマのCSSに直接追加したり、テーマにオリジナルC

自作で WordPress のテーマやプラグインをつくる場合、管理画面だけに自前の CSS や JavaScript を読み込ませたいときがあります。 そんなときは WordPress のアクションフックを使って色々と方法がありますが、ここでは1回のアクション関数で CSS もスクリプトも読み込んで、さらに対象の管理画面も指定する方法をご紹介します。 テーマ制作時やカスタマイズするときのTipsにどうぞ。 WordPress の管理画面に独自の CSS や JavaScript を読み込む まずは基本。以下のようなコードをテーマの場合は　”function.php” に追記して管理画面に自前のCSSやスクリプトを組み込むことができます。 // フックする関数 function custom_enqueue($hook_suffix) { // 読み込むスクリプトファイル(※依存関係:jqu

汎用性に優れている、超定番のjQueryベースのスライダーライブラリといえば、「slick」、「bxSlider」、「FlexSlider」 あたりでしょうか。 しかし、これらの名だたるライブラリよりも、総合的に機能が豊富でカスタマイズ性にも富み、しかもjQueryに依存しないJavaScriptスライダーライブラリとして人気を集めているのが、「Swiper.js」です。 試してみたところ、モバイルデバイスとレスポンシブ表示にも対応しているだけでなく、パラメータが豊富で非常に凝ったスライドショーでもあまりに簡単に実装できる優れものだったので、いくつかのサンプルと共にご紹介します。 Swiper.js の基本的な使い方 Swiper.js を使用するには、headセクション内にCSSと、</body>の前にメインのJavaScriptファイルを読み込んでおきます。 ライブラリ自体をダウンロー

弊社にて現在開発中のWordPressテーマに搭載する機能の候補として、各セクションの境界の形状に、波形の波打つアニメーション要素を表示する仕組みを簡単に作ってみました。 想定は、例えば弊社で提供中のDigiPressテーマに搭載の「パララックススクロール」ウィジェットで表示できるコンテンツの境界デザインとして表示することを考慮し、アニメーションさせる canvas要素は1ページ内に決められた数ではなく複数存在することを前提とします。 セクションの境界は、HTML5 canvas に対して、JavaScript にて sin関数で波形を描画し、setTimeout関数で位置をずらしながらキャンバスを移動させます。 境界アニメーション要素の条件 波形を描画するcanvas要素の数は不定のため、すべてのcanvas要素について波形の描画とアニメーションを実行する。 canvas の描画は高精細

タイル状に可変グリッドレイアウトを簡単に実装できる、今や定番のjqueryプラグインといえば「Masonry」。 しかし、このMasonryには配置したアイテムを指定したタグを持つもののみ表示するフィルター機能や、目的別に並べ替えるソート機能がありません。 「Masonry」プラグインのこれらの弱点を補ってくれる代替のプラグインとして有名なのが、「isotope」というjQueryプラグインがありますが、こちらは商用利用の場合はライセンス料の支払いが必要となってしまいます。 そこで今回紹介するのは、フィルター機能もソート機能も搭載した可変グリッドレイアウトを実現し、レスポンシブにも対応した、無料で商用利用も可能なJavascriptプラグイン「Muuri」(GitHubはこちら)。 MITライセンスで、IE9〜をサポートしています。 なお、Masonryは単体で利用可能で圧縮された状態のフ

WordPressテーマを制作する際、テーマごとでCSSボタン用の装飾(特にマウスオーバー時のエフェクト)をデザインするのですが、ユーザーがボタン用のセレクタのみで利用できるよう、一定の汎用性を考慮した条件下でデザインしています。 例えば、提供中のWordPressテーマでは、<a href="#" class="btn">ボタン</a> とするだけで以下のボタンスタイルでテキストを表示できます。 Clarityテーマのボタンデザイン Luminousテーマのボタンデザイン 今回は、そんな汎用性重視のCSSボタンをひたすら30種類つくってみました。 汎用性を考慮したCSSボタンの要件 ボタンはボタン用のセレクタを持つタグでテキストを括るのみのHTML(例 : <a href="#" class="button">ボタン</a>)で構成する。 →ボタンデザインやエフェクトのためにspanやd

CSSのclip-pathというプロパティを利用すると、任意のHTML要素を指定したパスの形状に切り抜いて表示させることができます。 よく利用されるケースでは、画像をパスで繋がれた図形の部分だけ切り抜いて表示するというパターンです。 clip-pathで画像を切り抜いた例 clip-pathプロパティの詳細については、以下の記事がとても参考になります。 clip-pathプロパティで切り抜きたい図形を表すためには、図形の各頂点を漏れなくすべて座標で示す必要がありますが、複雑な多角形になるほど自力で計算するのはかなり面倒です。 そんなときは、以下のWebサービスを利用すると、マウス操作で求める図形を作成するだけで、clip-pathに指定するパスの値(座標)を自動で生成してくれます。 さて、今回のサンプルでは、そんなCSSのclip-pathプロパティを利用して、画像ではなくテキストをtra

現在、もっともポピュラーでカスタマイズ性が高く実装が簡単な、レスポンシブ対応のスライドショーjQueryモジュールである「slick.js」。 弊社にて提供中のWordPressテーマ「DigiPress」シリーズの次期テーマには、トップページのスライダーに動画を含めることが要件としてあるため、今回はそんな人気のスライドショーモジュール「slick.js」を利用して、画像だけでなくYouTube、Vimeo、さらにHTML5のvideo要素の動画もスライドとして含める方法を、次期リリース予定のテーマ向けに考えてみました。 今回のデモで動画スライドを含めたスライドショーを実装する要件は以下です。 スライドに動画を含める要件 動画は、YouTube、Vimeo、video要素のムービーを含めることができる 動画スライドが表示された際は、自動再生させる 動画スライドが非アクティブになった際は、一

事前にGoogle AdSenseに申し込みを行い、承認が完了し、広告配信が可能な状態にしておく必要があります。 ここでは、既にGoogle AdSenseの広告が利用可能な状態である前提にて解説します。 ログイン後、左側のメニューから　【広告の設定】→【新しい広告ユニット】を選択します。 インフィード広告を選択します。 テーマで表示しているアーカイブレイアウトに最も近い広告のデザインを選びます。 左側の広告プレビューを確認しながら、インフィード広告としてWordPressのアーカイブページのデザインに合うように、全体、広告タイトル、サムネイルイメージ、ボタンなどの広告要素のデザインをカスタマイズし、完成したら「保存してコードを取得」ボタンをクリックします。 「コードスニペットをコピー」ラベルをクリックして、クリップボードに出力されたコードをコピーし、作業を完了します。 テーマオプションに

今後制作予定のWordPressテーマのグローバルメニューのプロトタイプとして作成した、ハンバーガーアイコンをクリックすると、隠れていたメニューが奥から回転しながら起き上がって表示されるイメージのコンポーネントのサンプルをご紹介します。 ちなみに、レスポンシブ表示にも対応させています。 CSSのみでクリック開閉する3Dアニメーションメニュー このサンプルの最終的イメージがこちら。 デモ See the Pen 3D rotating hidden menu using only CSS by digistate (@digistate) on CodePen. HTML構造 メニューの開閉トリガーとなるinput, label要素 メニューが開閉するためのトリガーとなる右端にあるハンバーガーアイコンは、実際はlabel要素であり、ページ上は非表示にしているチェックボックス(input)要素

サイト内の別ページへの切り替え時にフェードイン／フェードアウトなどのエフェクトを施してくれるJavascriptやjQueryプラグインはいくつかあります。 例えば、以下のようなもの。 また、「PJAX」というjQueryプラグインを利用すると、非同期通信でウェブページ内の更新が必要な特定の範囲だけリンク先の別ページの対象コンテンツに置き換えて表示することで、ヘッダーエリアやサイドバー、フッターなどの重複するコンテンツは表示したままにして通信量を減らし、ページ遷移を高速にすることもできます。 さらに、このPJAXを利用してページ遷移効果の実装をより扱いやすくした「Barba.js」という軽量なプラグインもあります。 これらの素敵なプラグインを活用して、新しいインタラクティブなWordPressテーマを作ろうと企画したのですが、開発中のテーマではあらゆる機能やエフェクトのためのスクリプトを読

2020/2/14追記 : この方法で解決できない場合は、以下のSVGフィルターによるブラー加工で解決できます。 CSSでブラーをかけると縁がどうしてもぼやけてしまう場合の解決策 CSS3の filterプロパティで blurを指定して背景画像やimgタグの画像にぼかし効果を施すと、ぼかし具合が大きいほど、対象要素のフチまでぼやけてしまって、なんだか美しくありませんね。 Webデザインをやってる方は、案外こんな経験をされた方もいるのではないでしょうか？ というわけで、今回のTipsはfilter:blurで画像にブラー効果を施したときに、フチにかかるぼやけを解消する方法を、CSSのbackground-imageプロパティで背景画像として表示する場合と imgタグで画像を直接表示する場合の両方についてご紹介します。 まずは、両方の比較サンプルをご覧ください！ 上段が background-

いわゆるハンバーガーメニューアイコン(こんなの : )のみを表示して、クリックすると左端からオフキャンバスナビゲーション(グローバルメニュー)がスライド表示すると共に、メインコンテンツエリアは3Dアニメーションで斜め奥に移動するエフェクトのサンプルをご紹介します。 Javascriptは使用せず、CSSのみで表現しています。 概要としては、label要素であるハンバーガーメニューアイコンをクリックすると、関連付けられているチェックボックスの属性を持たせた input要素のチェック状態が変化し、これをCSSの疑似セレクタ(:checked)を利用してチェックされた状態のときに、オフキャンバス状態にしてあるサイドメニューをCSSのtransition, transformプロパティによってスライド表示させる、というものです。 言葉ではわかりにくいので、まずは完成サンプルをご覧ください。 See

Webページ内に画像を表示して、スクロールに合わせて徐々にその画像をぼかしていく効果を施すサンプルコードをご紹介します。 このサンプルではjQueryを使用して、1枚の画像だけでなく、ページ内にトリガーとなる画像が複数ある場合でもスクロールして可視エリアから外れるにつれて、それぞれの画像が徐々にぼやけていくようにしています。 完成サンプル See the Pen Blurring image as parallax scroll effect by digistate (@digistate) on CodePen. HTMLの基本構成 画像エリアはfigureタグで括り、imgタグと、そのキャプション要素となるfigcaptionで画像上に表示するキャプションテキストを構成しています。 <figure class="banner"> <div class="banner-wrapper"

SVGを変形させたりアニメーションさせることができる、Adobeがオープンソースで提供しているJavaScriptライブラリである「Snap.svg」を使って、SVGのpathを別のpathにモーフィングさせるアニメーションサンプルをご紹介します。 SVGを操作するライブラリはSnap.svgよりもパフォーマンスが良いとされるsvg.jsなどがありますが、パスとアニメーションをより簡単に扱えるSnap.svgを利用してみました。 今回のサンプルは、WordPressのギャラリーやポートフォリオタイプのアーカイブページの記事一覧で、各記事をマウスオーバーした際に、レイヤー用に表示しているSVGを「にゅる」っと変形させるようなモーションエフェクトをイメージしています。 Snap.svgを使ったSVGのpath変形アニメーションデモ See the Pen Hover Effect with S

弊社提供中のWordPressテーマ「DigiPress」専用のショートコードプラグイン「Shortcodes for DigiPress」に、特に商用サイトで活躍する新たなショートコードが3種類追加されました！ スキルバーショートコードは、商品やサービスの性能比較や、スタッフなどの人材ごとに持つ各能力をパーセンテージに応じてアニメーションしながら棒グラフ、または円グラフで表すことができるコンテンツです。 カウントアップショートコードは、商品やサービスの数値でアピールできる実績(販売数、ユーザー数、満足度など)を並べて、それぞれがカウントアップしながら表示されるコンテンツです。 もちろん、これらのショートコードはモバイル端末(レスポンシブ)表示にも対応させています。 最新バージョンのプラグインにてご利用いただけますので、既に本プラグインをお持ちの方はアップデートしてご利用いただけるようにな

サイトのグローバルメニューの各メニューをマウスオーバーした時に、アンダーラインがメニュー幅に合わせてスライドしながらアニメーションでついてくるサンプルをご紹介します。 CSSと簡単なjQueryで実装しています。 まずはサンプルをご覧ください。 See the Pen Menu with Underline Sliding Animation by digistate (@digistate) on CodePen. HTMLの構造 HTMLは至ってシンプル。 メニュー用のリスト(ul)をナビゲーション(nav)タグで括っています。 メニュー用のリスト要素の次に、スライドしてついてくる下線用の要素(#slide-line)があります。jQueryでマウスオーバーに合わせてこの下線の位置を変更してやります。 <nav id="navigation"> <ul> <li class="curr