**Glassmorphism（グラスモーフィズム）**とは、透明度が高い背景とぼかしを組み合わせることで半透明のすりガラスを表現したような見栄えを指します。 鮮やかなグラデーションやイメージと組み合わせることでより際立たせることができたり、シャドウを上手く用いれば適用した要素が空間に浮かんでいるような表現をすることができます。 この見た目自体はそこまで目新しいということでもなく、古いものだとiOS7やWindows Vistaでも採用されていましたが、ApplaがMac OS BigSurで採用したりと少し前からまた注目された見栄えになります。 表現方法含めより詳細に知りたい場合は、英語ではありますが下記記事にまとめられています。 また、様々なグラスモーフィズムデザインを見たい場合は、Dribbbleで「Glassmorphism」のタグを追うのがオススメです。 CodePenで公開され

ページ内で意図しない水平スクロールが発生してしまった際、パッと見で該当箇所が見つからないとか他からの引き継ぎで修正する必要がある場面で、原因となる要素を見つけるのに使える便利スニペットです。 JavaScriptで要素特定 デベロッパーツールを開いてConsoleで下記を実行すると、ドキュメントサイズよりも大きい、つまり横スクロールが発生しているであろう要素を出力してくれます。 該当するものがなければundefinedのみが出力されます。 let docWidth = document.documentElement.offsetWidth; [].forEach.call(document.querySelectorAll('*'), (el) => { if ( el.offsetWidth > docWidth ) console.log(el); }); CSSで視覚的に特定 CS

Gutenbergには見栄えを変更する設定項目として一部ブロックに文字サイズ・文字色・背景色を指定できる項目が用意されているのですが、多くの場合はこれらをサイトの雰囲気にあったものに制限したいと思うので、任意のサイズや色だけ表示されるようにカスタマイズする方法を紹介します。 ここで紹介する方法を使用する際は、after_setup_themeにフックさせる形で記述してください。 after_setup_themeがよくわからない場合は、CodexやTwenty Nineteenのfunctions.php内の記述などを参考にしてみてください。 文字サイズは段落ブロック使用時にサイドへ表示される「テキスト設定」内で設定できます。 デフォルトではイメージのように「標準」を含めた5サイズが選択できるようになっており、さらにその横の入力フィールドを利用することで直接数値を入力してサイズ指定すること

いずれも同じような動きだったり過去に紹介したものに少し動きを加えたレベルにはなりますが、ハンバーガーメニューをクリックしてクローズボタンへ変化する動きをCSSで実装したサンプル集です。 今回もメニュークリック時にJavaScriptを使って.activeというクラスが追加・削除する動きを実装想定になっています。 共通のHTML 紹介するサンプルはいずれも下記のようなHTMLを使用しており、クリック時にこのbutton要素に対して.activeというclassが付与されるという想定でCSSの実装コードを紹介していきます。 <button class="menu-trigger"> <span></span> <span></span> <span></span> </button> .menu-trigger, .menu-trigger span { display: inline-blo

Gutenberg使用時に不要項目を非表示にして、表示切り替えオプションからも削除する方法です。 同様のことをクラシックエディタで行う際はremove_meta_box()を用いていましたが、Gutenbergの場合はremove_post_type_support()やunregister_taxonomy_for_object_type()を用います。 デフォルトではイメージ右側のように様々な項目が用意されていますが、サイト構成的に不要なものがあって非表示（機能削除）にしたい場合は、functions.phpへ下記のように記述します。 add_action( 'init', 'remove_block_editor_options' ); function remove_block_editor_options() { remove_post_type_support( 'post',

July 24, 2021 追記 バージョンアップによってフック変更・新ブロック追加・ブロックスラッグの変更などあったために、ここで紹介している内容をそのまま利用できない部分があります。 Ver 5.8以降でのブロック表示制御については、「WordPress：Gutenbergのデフォルトブロックを非表示にする方法（Ver 5.8対応）」を参考にしてください。 以前このブログで紹介した「WordPress：Gutenbergでデフォルト表示されているブロックを非表示にする方法」は、使いたいブロックを指定するホワイトリスト形式でしたが、逆に使いたくないブロックを指定するブラックリスト形式でブロックを非表示にする方法です。 ホワイトリスト形式での指定はPHPを利用しましたがブラックリスト形式の場合はJavaScriptを利用し、それぞれ下記のように指定することで対象ブロックを非表示にできます。

WordPressで前後のリンクを表示するprevious_posts_link()とnext_posts_link()を使用した際に出力されるaタグに任意のクラスを付加する方法です。 また、併せてprevious_post_link()とnext_post_link()を使用した際のクラス付加についても紹介します。 previous_posts_link() と next_posts_link() にクラス付加 実装には下記をfunctions.phpに記述し、記述後に表示確認すると前ページへのa要素に.prev-linkが、次ページへのa要素に.next-linkというクラスがそれぞれ付加されているのを確認できます。 function add_prev_posts_link_class() { return 'class="prev-link"'; } add_filter( 'pre

作成した再利用ブロックをまとめて確認したいときなどに見る再利用ブロック一覧へ容易にアクセスできるようにする方法です。 テーマやブロックなどの開発中で頻繁に確認するようなときは地味に便利だと思います。 メニューに追加する イメージのように「投稿」メニューの上に新たに「再利用ブロック」というメニューを追加し、クリックで再利用ブロック一覧ページに遷移するようにします。 実装にはfunctions.phpへ下記を記述し、名称を変えたい場合は第2引数、アイコンを変えたい場合は第6引数を任意のものに変更してください。 また、表示位置を変更したい場合はサンプルコード内で4としている部分を任意の数値に変更してください。 add_action( 'admin_menu', 'add_wp_block_menu' ); function add_wp_block_menu() { add_menu_page(

カラーを追加する 現時点で12種類のグラデーションカラーがデフォルトとして用意されており、そこへ任意のカラーを追加したい場合はfunctions.phpへ下記のように記述します。 add_theme_support( 'editor-gradient-presets', array( array( 'name' => __( 'Vivid cyan blue to vivid purple', 'themeLangDomain' ), 'gradient' => 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)', 'slug' => 'vivid-cyan-blue-to-vivid-purple', ), array( 'name' => __( 'Light green cyan to vivid g

Sassには@eachや@forといった制御構文があり、それらを利用することでCSSで繰り返し記述していたような手間を省くことができます。 そこで今回は基本的なものでありますが、その制御構文を使って繰り返し記述するようなものを楽に出力するサンプルをいくつか紹介します。 例えばクラス名の一部と背景画像名だけ変更したものをいくつも記述するとか連番付きクラスをいくつも記述しながら一部プロパティだけ変更するなど、普段からCSSを書くことが多い人であれば、ほとんどの人が先述したような同じようなものを繰り返し記述していくということをしたことがあると思います。 そういったときにSassを使っていれば、@eachや@forといった制御構文を利用して繰り返し記述する手間を省くことができます。 ここで紹介しているものはいずれも簡易的なものですし、実際に使ってみたりコードを少し見ればわかるようなものばかりだと思

用意された項目を数値入力や操作していくだけで簡単に見栄えが再現でき、必要なCSSコードなどを出力してくれるCSS関連のジェネレータのまとめです。 CSSが苦手な人は上手く利用すればスタイル作成の時間短縮になりますし、CSSを勉強中またはこれから勉強しようと思っている人の学習ツールとして使えるものもあります。 ツールによってはもう少しシンプルに実装できると感じるコードが出力されるので、その辺を判断できる人はそのまま出力コードを使うのではなくベースとして使用するのが良いかもしれません。 また、公開されてからしばらく経っているなどの理由で、現在ではほとんどの場合で不要なプレフィックスが出力されるものもあります。 各プロパティのプレフィックス有無の判断が難しい人は、「Can I use...」などと併用して試してみてください。 Neumorphism/Soft UI CSS shadow gene

例として「cf_example」という名前のカスタムフィールドの値を「投稿」の一覧画面で表示したい場合は、functions.phpに下記のように記述します。 function add_posts_columns( $columns ) { $columns['example'] = 'サンプル'; return $columns; } function custom_posts_column( $column_name, $post_id ) { if ( $column_name == 'example' ) { $cf_example = get_post_meta( $post_id, 'cf_example', true ); echo ( $cf_example ) ? $cf_example : '－'; } } add_filter( 'manage_posts_colum

デフォルトでも便利な機能が多数用意されており且つ定期的にアップデートも行われているAdobe XDですが、プラグインを利用することでより効率よくデザイン制作を進めることができます。 そこで、今回は便利なプラグインが数多く公開されている中でも個人的に特におすすめなプラグインを紹介します。 エントリー内では基本的にMacで使用した場合の見栄え・メニュー・ショートカットで紹介していますが、Winでもそこまで大きな違いはないので適宜置き換えてください。 プラグイン紹介時のキャプチャや挙動については、このエントリー公開時点のものになります。 プラグインのインストール・アンインストール・実行について インストール プラグインのインストールは、公式のものであればアプリから簡単にインストールができます。 イメージ内①のようにサイドにあるプラグインアイコンをクリック後に表示されるメニューの右上にあるプラスア

ホバー時に左から右へ下線が伸びるアニメーションを実装したい場合、以前このブログでも紹介したことがある擬似要素を用いた実装方法では、例えば文章内にあるリンクなどで複数行にまたがるときに意図した見栄えになりません。 1行・複数行関係なく使えるアニメーション付きアンダーライン（下線）を実装したい場合は、以下のようにlinear-gradient()とbackground-sizeを組み合わせることで実装できます。 擬似要素を用いた下線アニメーションの実装については下記エントリーの一部で紹介しており、どちらも見栄えはほとんど一緒ですが前者はtransform: scale()を、後者はwidthを変化させる違いがあります。 実装方法 実際の動きは以下デモのようになり、リンク箇所（文字色が濃い部分）にホバーすると1行・複数行関係なく左から右へ下線が伸びていくのを確認できると思います。 実装にはCSS

役立つリファレンスやスニペットサイト、様々なコードを容易に出力してくれるジェネレータ、デザイン制作に使えるテクスチャ・アイコン・フォントといった各種デザイン素材の配布サイト、SEOやマーケティングに関する便利ツールなど、インターネット上にはサイト制作時や運用時の手助けをしてくれるサイトが沢山あります。 今回はそういった便利なリソース・ツールサイトをまとめているサイトを集めてみました。 頻繁に使用するものであれば多くの人はそのサイトをブックマークしておき、必要なときにすぐ閲覧できるようにしておくとは思いますが、例えば覚えておきたいけれど正直使う機会は少ないみたいなサイトが多数あるようなときで且つブックマークをあまりごちゃごちゃさせたくないときなどに、場合によっては以下で紹介しているサイトをひとつブックマークしておくだけでブックマーク周りをスッキリさせることができると思います。 いずれも海外の

WordPressの検索機能は、デフォルトのままでは投稿の記事だけでなく固定ページも検索結果に出てきてしまいます。 検索結果に固定ページを出したくない場合や特定の記事を出したくない場合もあると思うので、それらを除外するカスタマイズを紹介します。 検索結果に投稿の記事のみを表示させる WordPressのデフォルトの検索機能は、投稿の記事だけでなく固定ページも検索対象となっており、条件が一致すれば固定ページも検索結果として表示されてしまいます。 例えば、「About」というページを固定ページとして作成していた場合、ユーザーが投稿の記事を検索したつもりでも固定ページである「About」もデフォルトのままでは検索結果として表示されます。 これをあくまで検索結果として投稿の記事だけ表示させ、固定ページを検索対象から除外したいときは下記をfunctions.phpに記述します。

いちいちリンク部分にホバーしてリンク先のURLを確認したり詳細ページで確認したりする必要がなくなるので、何らかの理由で頻繁にIDを確認するときに便利です。 以下ではカテゴリーとカスタムタクソノミーとでそれぞれ紹介していますが、いずれも実装後はイメージの一番右のように「ID」という項目が追加されるようになります。 また、項目の追加に加えてここに昇順・降順を切り替えるソート機能も実装していきます。 カテゴリーの場合 デフォルトの「投稿」に用意されているカテゴリー一覧ページでID（タームID）項目を追加したい場合は、functions.phpに下記のように記述します。 function add_category_columns( $columns ) { echo '<style> .taxonomy-category .manage-column.num {width: 90px;} .tax

実装にはfunctions.phpに下記のように記述し、ここでは「news」というカスタム投稿で「news_cat」というカスタムタクソノミーを使用している想定のものになります。 add_action( 'restrict_manage_posts', 'add_custom_taxonomies_term_filter' ); function add_custom_taxonomies_term_filter() { global $post_type; if ( $post_type == 'news' ) { $taxonomy = 'news_cat'; wp_dropdown_categories( array( 'show_option_all' => 'すべてのカテゴリー', 'orderby' => 'name', 'selected' => get_query_var(

2018年7月〜2018年9月の個人的ブックマークです。 2018/07 Development picasso.js ApexCharts – JavaScript Charts Vue.js Cheat Sheet ixkaito/NotoSansCJKjp-subset: Noto Sans CJK JP サブセット (OTF, WOFF, EOT) ixkaito/NotoSerifCJKjp-subset: Noto Serif CJK JP サブセット (OTF, WOFF) 普通のHTMLの書き方 Design / Inspiration ユーザーアイコンの形状について考える｜sadakoa @デジタルプロダクトデザイナー｜note デザインがしっくりこないときに試すこと10選【新米デザイナー向け】 | 東京上野のWeb制作会社LIG Common webpage desig