デザイン制作が捗る、個人的におすすめなAdobe XDの便利プラグイン 20 - NxWorld
デフォルトでも便利な機能が多数用意されており且つ定期的にアップデートも行われているAdobe XDですが、プラグインを利用することでより効率よくデザイン制作を進めることができます。 そこで、今回は便利なプラグインが数多く公開されている中でも個人的に特におすすめなプラグインを紹介します。 エントリー内では基本的にMacで使用した場合の見栄え・メニュー・ショートカットで紹介していますが、Winでもそこまで大きな違いはないので適宜置き換えてください。 プラグイン紹介時のキャプチャや挙動については、このエントリー公開時点のものになります。 プラグインのインストール・アンインストール・実行について インストール プラグインのインストールは、公式のものであればアプリから簡単にインストールができます。 イメージ内①のようにサイドにあるプラグインアイコンをクリック後に表示されるメニューの右上にあるプラスア
GitHubのコミットメッセージに使えそうな絵文字がまとめられた「gitmoji」 - NxWorld
「gitmoji」は、GitHub（Git）でコミットメッセージ入力時に文章の代わりとして使えそうな絵文字が一覧化されているサイトです。 ここで掲載されているものすべてが一般的且つ広く使われているという訳でもないですし、他では見かけるものが掲載されていなかったりもしますが、個人的には頻繁に利用するものはひと通りある印象で、今後絵文字を多用したいと思っている人やそれぞれどのような意味なのか知りたい人のチートシートとして使えると思います。 サイトでは各絵文字の記述方法がどのような意味を持つのかの説明付きで一覧化されており、絵文字部分をクリックすることでクリップボードに必要な記述がコピーできるようにもなっています。 絵文字は自分だけしか触らないリポジトリとかであれば気兼ねなく使えますが、複数人で作業しているリポジトリとかだと冒頭であげたように参照したサイトの情報や人によって絵文字を利用した際の意
WordPress：管理画面の一覧ページにカスタムフィールドの値を表示する項目を追加する方法 | NxWorld
例として「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
WordPress：管理画面のカテゴリーやタクソノミー一覧ページにID（タームID）項目を追加する方法 | NxWorld
いちいちリンク部分にホバーしてリンク先のURLを確認したり詳細ページで確認したりする必要がなくなるので、何らかの理由で頻繁にIDを確認するときに便利です。 以下ではカテゴリーとカスタムタクソノミーとでそれぞれ紹介していますが、いずれも実装後はイメージの一番右のように「ID」という項目が追加されるようになります。 また、項目の追加に加えてここに昇順・降順を切り替えるソート機能も実装していきます。 カテゴリーの場合 デフォルトの「投稿」に用意されているカテゴリー一覧ページでID（タームID）項目を追加したい場合は、functions.phpに下記のように記述します。 function add_category_columns( $columns ) { echo '<style> .taxonomy-category .manage-column.num {width: 90px;} .tax
WordPress：固定ページ一覧に使用中テンプレートの項目を追加する方法 - NxWorld
実装後はイメージの一番右のように「テンプレート」という項目が追加され、そこにそれぞれページで使用しているテンプレート名が表示されます。 実装にはfunctions.phpに下記のように記述し、この場合はテンプレートとして使用しているファイルのTemplate Nameに設定しているテンプレート名が表示されます。 function add_pages_columns( $columns ) { $columns['template'] = 'テンプレート'; return $columns; } function custom_pages_column( $column_name, $post_id ) { if ( $column_name == 'template' ) { $template = 'Default'; $templates = get_page_templates();
Lorem Ipsumの代替として使えるダミーテキスト向けフォント「Scribble Font」 - NxWorld
使わせてもらうことがありそうなので備忘録。 「Scribble Font」は、プロトタイピングやワイヤーフレーム作成時にLorem Ipsumの代替として使えるように作成されたフォントで、文字を入力すると上のイメージのような感じで表示されます。 本来はダミーテキストとはいえほぼ本番で使用されるのと変わらないような文章などを入れておくのが良いとは思いますが、変更忘れなどを防ぐために明らかにダミーとわかるようなものにしたいときには良さそうです。 実際にどの文字がどのように表示されるかはサイト内にある「Test Area」で確認することができ、上のイメージは「NxWorld」と入力した場合のもになります。 フォントはGitHubからダウンロードでき、タイプはTTF、ライセンスはMITです。
VS Code：WordPress構築時に便利な拡張機能まとめ - NxWorld
絶対に入れておくべきとまではいきませんが、入力補完やドキュメント参照が容易にできるなど慣れると手放せなくなるようなものもいくつかあるので、VS Codeを利用していて普段からWordPressを触る機会が多い人は試してみてください。 WordPress Toolbox WordPressの関数・クラス・定数を入力補完してくれる拡張機能で、現時点の最新版であるVer 4.9.8にも対応しています。 展開時には引数付きで出力してくれる機能もあり、展開したコード内にある引数の選択部分をtabまたはshift + tabで移動させることもできます。 例）add_filter()を引数表示有りで展開 add_filter( $tag:string, $function_to_add:callable, $priority:integer, $accepted_args:integer )
WordPress：同じカテゴリー・タグが設定されている前後の記事リンクを表示させる方法 - NxWorld
WordPressで構築されたブログやメディアでよく見かける詳細ページで前後記事へのリンクを設置の際に、単純な前後記事へのリンクではなく現在表示しているカテゴリーやタグと同じものが設定されている記事へのリンクを表示させる方法です。 in_same_termを使う ここでは前後の記事リンクを表示させるために全部で3種類の関数を用いた方法を紹介していますが、先に結論から言うといずれも基本的に$in_same_termというオプションを利用することで実装できます。 the_post_navigation()は前後両方の記事へのリンクを表示させたい場合、previous_post_link()は前の記事へのリンクを表示させたい場合、next_post_link()は次の記事へのリンクを表示させたい場合になります。 同じカテゴリー（投稿） デフォルトの投稿にあるカテゴリーを利用している場合は、下記の
WordPress：ページネーション設置箇所に1ページ目のみ別コンテンツを表示させる方法 | NxWorld
具体的な使用例としては、ブログやメディアなどでよく見かける1ページ目のみ「もっと見る」とか「さらに表示」のような2ページ目に飛ぶリンクが設定されたボタンを表示して、2ページ目以降は通常のページネーションを表示させるなどができます。 1ページ目と2ページ目以降とで処理を分ける 1ページ目と2ページ目以降とで処理を分ける実装には、is_paged()を使用します。 is_paged()を使って2ページ目以降かどうかを判定して、2ページ目以降だった場合はページネーションを表示させたいのでtrue時にthe_posts_pagination()を記述し、false時は2ページ目以降ではなく1ページ目ということになるので、ここにページネーションではないコンテンツを出力させるコードを記述することで、1ページ目と2ページ目以降とで異なる表示にすることができます。 よくある「もっと見る」ボタンを表示させる
Vue.jsを用いたサンプルが数多くまとめられている「Vue.js Examples」 - NxWorld
「Vue.js Examples」は、Vue.jsを用いて実装された様々なサンプルがまとめられているサイトです。 タグでの分類もされているので、目的のタイプやジャンルで探すことも容易だと思います。 サイトでは詳細ページはもちろん、一覧ページでもサムネイル部分に動きがわかるアニメーションGIFを表示しているので、詳細ページに移動せずともそれがどのような動きを実装できるかをパッと見で確認することができます。 また、ヘッダーやサイドに用意されているようにタグを用いて細かくタイプやジャンルなども分類されており、Googleを利用していますが検索も用意されているので、これらを利用することで目的のサンプルも容易に探せると思います。 詳細ページでは先述したように実際の動きがわかるイメージが用意されている他、デモページへのリンク・ソースのダウンロード・インストール方法・使い方などもまとめられています。 追
VS Code：Sassファイルを保存と同時にコンパイルしてくれる拡張機能「Easy Sass」 | NxWorld
Sassファイル（SASS/SCSS）をVS Codeでコンパイルできる拡張機能「Easy Sass」を紹介します。 Sassの保存後に自動で指定した場所にCSSファイルが出力させることができ、出力時のフォーマットやコンパイルさせないファイルの指定などもできます。 インストール 拡張機能は「Easy Sass - Visual Studio Marketplace」の「Install」ボタン、またはエディタのメニューにある「拡張機能」からインストールでき、エディタ上でインストールする場合は easy sass と検索すれば該当の拡張機能が出てくると思います。 その後、エディタを再起動させればインストール完了になります。 使い方 使い方といっても特にこれといった手順などはなく、拡張機能の有効化後にSASSまたはSCSSファイルを更新してみると、同じディレクトリ内に圧縮・非圧縮それぞれのCSS
VS Code：CDNの各種ライブラリを簡単に呼び出すことができる拡張機能「cdnjs」 - NxWorld
VS CodeでCDNにある各種ライブラリを呼び出すための記述を簡単に呼び出すことができる拡張機能「cdnjs」を紹介します。 ローカルでちょっと試したいときなどに便利で、呼び出す際には圧縮有無や使用可能なバージョンなども一覧で表示してくれます。 インストール 拡張機能は「cdnjs - Visual Studio Marketplace」の「Install」ボタン、またはエディタのメニューにある「拡張機能」からインストールでき、エディタ上でインストールする場合は cdnjs と検索すれば該当の拡張機能が出てくると思います。 その後、エディタを再起動させればインストール完了になります。 使い方 拡張機能の有効化後、F1 または Mac: command + shift + P、 Win: Ctrl + Shift + Pで表示されるコマンド表示内でcdnと入力すると下記3種類のコマンドが表
Vue.js関連の各種リソースがまとめられた「VueToolbox」 - NxWorld
「VueToolbox」は、Vue.jsに関係するフレームワーク・コンポーネント・ジェネレータ・ユーティリティなどの各種リソースがまとめられているサイトです。 サイトでは下記5カテゴリーに大きく分類されているのに加えて、例えば「Frameworks」であれば「Admin Template」「Component Collections」「Desktop」といったように、さらにその中でも分類化されているので目的のリソースも探しやすくなっています。 Frameworks Integrations UI Components UI Utilities Utilities 子カテゴリーの一覧ではリソース名と概要が記載されたものが並べられています。 また、一覧の右上で並び順の切り替えができるようになっており、最後のコミットがいつされたかやnpmでのダウンロード数などを基準にできます。 詳細ページでは「
VS Code：ライブリロード機能を備えた簡易ローカルサーバーを起動できる拡張機能「Live Server」 - NxWorld
VS Codeで簡易ローカルサーバーを起動できる拡張機能「Live Server」を紹介します。 ファイル更新を検知して自動的にブラウザをライブリロードしてくれる機能もついているので、コードを書きながら表示確認の度にブラウザリロードする手間を省くことができます。 インストール 拡張機能は「Live Server - Visual Studio Marketplace」の「Install」ボタン、またはエディタのメニューにある「拡張機能」からインストールでき、エディタ上でインストールする場合は Live Server と検索すれば該当の拡張機能が出てくると思います。 その後、エディタを再起動させればインストール完了になります。 使い方 サーバーの起動 拡張機能の有効化後、ワークスペース内にあるファイルを開くとエディタ右下に画像のような「Go Live」という文字がアイコンとともに表示されるの
追従ヘッダー実装時に使える動作・デザインパターン例 - NxWorld
常にユーザーの視線に入るようにしておきたいとかサイトの回遊率をあげたいなどの理由で実装を頼まれることが多いと追従ヘッダー。 単純に基本となる見栄えを維持してそのまま追従させることも多いですが、少し変化を加えてほしいという要望をもらうことも少なくないので、そういった場面で提案しやすいようによくある動作・デザインのパターン例をまとめました。 紹介しているサイトの動きや見栄えは、いずれもPCでの表示確認時のものになります。 変更を加えずにそのまま追従 スクロール時にデザイン・位置とも特に変更を加えず、単純にファーストビューでの見栄えをそのまま維持して追従させるパターンです。 少しCSSを書くだけで容易に実装できる�点がメリットですが、ヘッダーの領域が広いデザインの場合は�その分コンテンツが見える領域が狭くなるというデメリットがあるので、仕様やデザイン上でどうしてもヘッダー領域が広くなってしまう場
意識したいタイポグラフィの基本ルール - NxWorld
基本的なことばかりで且つwebでの使用についてがベースですが、タイポグラフィについてもう少し意識したいと思ったので再確認兼ねた備忘録です。 フォントの種類とサイズを増やしすぎない サイト（ページ内）に一貫性・統一性をもたせるために、使用するフォントの種類とサイズは増やしすぎないようにしましょう。 使用するフォントの種類は基本的には1〜2種類、多くても3種類あれば十分なことがほとんどで、複数のフォントを使用する際には、組み合わせたときにお互いのデザインを引き立たせるような相性が良いものを採用するのが好ましいです。 また、フォントサイズの場合は、見出しのタイプ分のサイズ（例えば見出しが3タイプあるなら3サイズ）・本文などで使用する基本となるサイズ・注釈や補足などで使用する少し小さいサイズあたりが揃っていれば十分なことがほとんどです。 様々なサイズに対応できているかを確認する 近年多種多様なデバ
WordPress：4.9.8で追加された“Try Gutenberg”コールアウトを非表示にする方法 - NxWorld
WordPress 4.9.8がリリースされたのに伴いダッシュボードにGutenbergの体験を促すパネルが表示されるようになりましたが、現時点だとまだ使われたり何らかの理由で表示されていると困る場合に、このパネルを非表示にする方法です。 WordPressを4.9.8にアップデートすると、キャプチャのような「“Try Gutenberg”コールアウト」と呼ばれるパネルが表示されます。 パネル右上にある「非表示にする」を選択、または表示オプション内にある「新しいエディター」のチェックを外すことでこのパネルを非表示にすることはできますが、ユーザーが多い場合などいちいち選択していくのは面倒だと思うので、手っ取り早く且つまとめて非表示にしたいときにはfunctions.phpへ下記のように記述することで非表示にすることができます。
WordPress：「Contact Form 7」でセレクトボックスやラジオボタンの選択項目によって送信先アドレスを変更する方法 - NxWorld
WordPressで問い合わせフォームを実装したいときに便利なプラグイン「Contact Form 7」で、セレクトボックスやラジオボタンの選択項目によってそれぞれ異なるメールアドレス宛に送信されるようにする方法です。 ここでは「type」という項目名があり、それぞれ選択された場合は下記のように異なるメールアドレス宛に送信する動きとします。 項目A → type-a@example.com 宛に送信 項目B → type-b@example.com 宛に送信 項目C → type-c@example.com 宛に送信 上のような動きになるようにセレクトボックス（select）を配置したい場合は、下記のようにパイプ（|）を用いてパイプ前にフロントで表示させる文言を、パイプ後に送信先に設定したいメールアドレスを記述します。 [select* type "項目A|type-a@example.c
wp-mwform-change-mail-recipient-using-select-or-radio-button.html
WordPressで確認・完了画面付きの問い合わせフォームを実装したいときに便利なプラグイン「MW WP Form」で、セレクトボックスやラジオボタンの選択項目によってそれぞれ異なるメールアドレス宛に送信されるようにする方法です。 ここでは「type」という項目名があり、それぞれ選択された場合は下記のように異なるメールアドレス宛に送信する動きとします。 項目A → type-a@example.com 宛に送信 項目B → type-b@example.com 宛に送信 項目C → type-c@example.com 宛に送信 まず、フォーム作成画面では特別な記述などはせずに一般的な形でセレクトボックスやラジオボタンを配置し、上の項目名を設定する場合は、それぞれ下記のような形になると思います。 また、自動返信メールなどで項目Aや項目Bといった文言を表示させたいときは、いつも通り{type
CSSでホバー位置によって要素を傾けるチルトエフェクトを実装する方法 - NxWorld
チルトエフェクトと呼ばれる、イメージにホバーするとマウス（カーソル）の位置によってイメージが傾く動きをCSSのみで実装したものです。 普段こういった動きを実装する場合はJavaScriptを使っていますが、ふとCSSだけでできないかなと思い試してみたもので、全体的にもう少しシンプルにできそう感あったりHTMLがごちゃごちゃしてしまうのが気になるものの、CSSでもそれっぽい動きになっているかなとは思います。 チルトエフェクトやホバーで傾くと言われても動きにピンとこないという人は、以下のデモで実際にイメージをホバーをしてみてください。 HTMLは実際に表示させ傾けたい要素は.box-contentsになり、その上にある.hover-pointはそれぞれどこがホバーされているかの判別に使う要素になります。 <div class="box"> <div class="hover-point"></
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
