デザイン制作が捗る、個人的におすすめなAdobe XDの便利プラグイン 20 | NxWorld

2019/09/17 123 users デフォルト Adobe XD プラグイン 多数 アップデート

デフォルトでも便利な機能が多数用意されており且つ定期的にアップデートも行われているAdobe XDですが、プラグインを利用することでより効率よくデザイン制作を進めることができます。 便利なプラグインが数多く公開されていますが、それらの中でも個人的に特におすすめなプラグインを紹介します。 ※エントリー内では基... 続きを読む

CSSで複数行に対応したアニメーション付きアンダーライン（下線）を実装する方法 | NxWorld

2019/08/30 42 users CSS class 複数行 実装 a要素

実装方法 実際の動きは以下デモのようになり、リンク箇所（文字色が濃い部分）にホバーすると1行・複数行関係なく左から右へ下線が伸びていくのを確認できると思います。 ※動きはPCで確認してください。 実装にはCSSを下記のように記述し、ここでは.hover-underlineというclassを適用したいa要素に指定する想定になりま... 続きを読む

VuePress入門 | NxWorld

2018/12/03 107 users

静的サイトジェネレータVuePressの導入からデフォルトテーマの簡単な設定までを紹介します。 Node.jsがインストール済みで少しコマンドが入力できさえすれば、Vueの知識がなくてもそれっぽいドキュメントがすぐ作れるような形で紹介しているので、興味ある方は試してみてください。 ※Node.js（Ver 8 以上）が必要になる... 続きを読む

追従ヘッダー実装時に使える動作・デザインパターン例 | NxWorld

2018/09/02 98 users

常にユーザーの視線に入るようにしておきたいとかサイトの回遊率をあげたいなどの理由で実装を頼まれることが多いと追従ヘッダー。 単純に基本となる見栄えを維持してそのまま追従させることも多いですが、少し変化を加えてほしいという要望をもらうことも少なくないので、そういった場面で提案しやすいようによくある動... 続きを読む

CSS Snippets #7 | NxWorld

2018/08/16 13 users CSS Snippets

CSSで「〇〇したい」とか「これどうするんだっけ...」というときに使えるものや地味だけど覚えておくと便利だと思う簡易的なスニペットを紹介します。 以前であれば画像やJavaScriptを用いなければいけなかったものがCSSのみで表現できたり、上手く使えばよりシンプル且つ効率良く記述するのに役立つものもあるので、特... 続きを読む

WordPress：アイキャッチ設定や記事内の画像有無によって、記事内ひとつ目の画像や代替画像を表示させるスニペット | NxWorld

2018/07/26 21 users 備忘録 アイキャッチ 動作 スニペット 以下

WordPressでアイキャッチを利用するテーマの場合、登録されなかったときの処理として記事内にあるひとつ目の画像やあらかじめ用意しておいた代替画像をアイキャッチとして表示させることが多いのですが、そのようなときに使えるスニペットの備忘録です。 基本的な動作 以下では2通りの方法をあげますが、いずれも大まか... 続きを読む

WordPress：「Contact Form 7」でセレクトボックスやラジオボタンの選択項目によって送信先アドレスを変更する方法 | NxWorld

2018/07/23 25 users セレクトボックス type WordPress プラグイン

WordPressで問い合わせフォームを実装したいときに便利なプラグイン「Contact Form 7」で、セレクトボックスやラジオボタンの選択項目によってそれぞれ異なるメールアドレス宛に送信されるようにする方法です。 ここでは「type」という項目名があり、それぞれ選択された場合は下記のように異なるメールアドレス宛に送信... 続きを読む

WordPress：記事の削除と同時に使用されている画像も削除する方法 | NxWorld

2018/07/19 17 users Array functions.php 実装 削除 下記

WordPressで記事を削除した際、その記事で使用されている（紐付いている）画像も同時に削除されるようにする方法です。 実装にはfunctions.phpへ下記のように記述します。 functions.php add_action( 'before_delete_post', 'delete_post_attachment' ); function delete_post_attachment( $post_id ) { $args = array( ... 続きを読む

デザインする上で知っておきたい「近接」「整列」「反復」「対比」の4原則 | NxWorld

2018/05/18 74 users 媒体 配置 整列 近接 反復

webサイト・アプリ・雑誌・チラシなど媒体は問わず、見やすくて内容が伝わりやすいデザインする上で知っておきたい「近接」「整列」「反復」「対比」の4原則を紹介します。 1. 近接 - PROXIMITY 関係性の近い各要素の距離を近づけて配置 することで位置的にそれらが関係があるものと認識され、見ている人に理解されやすいデザイン・レイアウトを作ることができます。 その際、近接を上手く活用したいときに... 続きを読む

WordPress：get_the_posts_pagination()をカスタマイズして、現在のページ数と全ページ数を表示させる方法 | NxWorld

2018/04/13 14 users デフォルト プラグイン ページネーション 機能 記事一覧

WordPressで記事一覧などにページネーションを設置したい場合、特別な機能など必要なければプラグインなどを使用しなくても get_the_posts_pagination() （単純に出すだけなら the_posts_pagination() ）を使うことで表示させることができますが、これをもう少し自分好みにカスタマイズして表示させる方法です。 ここではデフォルトだとスクリーンリーダー用テキス... 続きを読む

CSS：ボタンホバー時に背景がスライドしたり領域を覆うアニメーションサンプル 10 | NxWorld

2018/03/26 52 users ホバーエフェクト 見栄え 共通 アニメーション ホバー時

自分用に一覧化したものがほしくて作ったのでシェアします。 ボタンのホバーエフェクトとして見かける機会も多くなった、ホバーしたら背景がスライドしたり領域を覆うアニメーションのサンプルです。 アニメーションによってはホバー時の見栄えを維持するのではなく、ホバー時に一時的に見えるようなタイプもあります。 共通のHTML・CSS ここで紹介しているサンプルはいずれも下記のようなシンプルなHTMLをベースに... 続きを読む

GitHubを見やすく・使いやすくしてくれる便利な拡張機能 | NxWorld

2018/02/13 91 users GitHub アドオン Firefox githubページ

地味に便利なものから慣れるとなくてはならないものまで、GitHubを見やすく・使いやすくしてくれる拡張機能を紹介します。 ここではすべてChromeの拡張機能として紹介していますが、中にはその他のブラウザでも利用可能（主にFirefoxのアドオン）なものもあるので、それらは併せて紹介している各拡張機能のGitHubページなどから辿ってください。 ※以下で紹介している拡張機能の一部は、プライベートリ... 続きを読む

class付与でインスタグラム風のフィルターを適用できるスタイルシート「Instagram.css」 | NxWorld

2018/01/22 31 users GitHub class 見栄え CSS デフォルト

インスタグラムは用意されているフィルターを適用することでイメージの見栄えを変更できるようになっていますが、「Instagram.css」はそれをCSSを使って再現できるスタイルシートです。 デフォルトでは表示されていないものも含めた全41種類のフィルターをclassを付与するだけで適用することができます。 使い方はGitHubからダウンロードするなどしてCSSを（ instagram.css or... 続きを読む

WordPress構築時のスピードアップに役立つジェネレータまとめ | NxWorld

2017/12/07 35 users ジェネレータ テンプレート WordPress UI変更 構築

WordPressでテーマやプラグイン作成時のベースとなるテンプレートをはじめ、カスタム投稿実装・カスタムタクソノミー実装・ウィジェット実装・管理画面のUI変更などのコードなどをダウンロードできたり表示してくれるジェネレータのまとめです。 普段からスラスラ構築できるとかある程度ベースとなるものが既にある場合は不要かもしれませんが、そうでない場合はこういったものを活用することで構築のスピードアップに... 続きを読む

WordPressで更新者が少しでも使いやすい・更新しやすいと感じてくれる管理画面をつくるヒントやカスタマイズ | NxWorld

2017/11/21 227 users スキル クライアント 全部 普段 中心

個人的に普段から対応することが多いものを中心に、更新者（クライアント）が少しでも使いやすい・更新しやすいと感じてくれるようなWordPressの管理画面をつくるためのヒントやカスタマイズを紹介します。 サイト構成や更新者のスキルなどにもよると思うので全部が全部やるべきということでもないですが、紹介しているものをいくつか組み合わせるだけで不要なものはすべて取り除いたシンプルな管理画面にできたり、少し... 続きを読む

Flexboxを利用してよくあるレイアウトを実装したサンプル集 | NxWorld

2017/11/16 118 users Flexbox プレフィックス 見栄え CSS レイアウト

一部ブラウザ（特にIE）で若干挙動が違ったりすることもあるものの、Flexboxを利用することで今までCSSだけでは難しかった見栄えが実装できたり、よりシンプルなCSSで実装できるレイアウトが増えました。 そんなFlexboxを利用してサイト制作時によく出てくるレイアウトを実装したサンプルをいくつか紹介します。 ※以下で紹介するものは基本的にプレフィックスを省略しているので、必要があれば各自で追記... 続きを読む

CSSでアンダーラインが追従するメニューを実装する方法 | NxWorld

2017/11/01 69 users デモ JavaScript CSS 実際 アンダーライン

以前であればJavaScriptを利用して実装していた、メニュー下にあるアンダーラインをホバーしたメニューへスライドしながら追従する動きをCSSのみを使って実装する方法です。 デモ どのようなものなのか実際の動きを見たほうが早いと思うのではじめにデモを紹介すると、このようにメニュー下にあるアンダーラインがホバーしたメニュー下へスライドしていくという動きになり、JavaScriptは使用せずにCSS... 続きを読む

デザイン制作を助けてくれる国内外の素材サイトまとめ | NxWorld

2017/10/24 935 users 有償 アイコン 素材 商用利用時 かなり

見つけてはメモしていたものがかなり増えてきて自分用に整理したのでシェアします。 ベクター・ラスター・テクスチャ・パターン・アイコン・フォント・モックアップなど、デザイン制作をする際に便利な素材を配布しているサイトの一覧です。 中には条件付きで使用可能とか商用利用時は有償という素材が中心に配布されているところもありはしますが、紹介しているのは基本的にフリーで使用できるものが中心または多く配布されてい... 続きを読む

CSSアニメーションを簡単に実装できるライブラリ 10＋ | NxWorld

2017/10/11 66 users class CSS ゴー アニメーション デモ

ここ数年でちょっとしたアニメーションはJSではなくCSSで実装するということが増えたと思いますが、それを手軽に実装したいときに便利なCSSアニメーションライブラリをまとめてみました。 いずれも必要なCSSを読み込んで要素に特定のclassを付与するだけと使い方も簡単で、デモもしっかり用意されているものばかりなので動きの確認も容易です。 また、簡単な操作でCSSアニメーションを実装するのに必要なコー... 続きを読む

CSSを使ってテキストカラーを半々に表示させる方法 | NxWorld

2017/10/02 91 users 半々 relative CSS inline-block デモ

CSSを使ってテキストカラーが左右または上下で異なるカラーで表示されている見栄えを実装する方法を紹介します。 ※以下でそれぞれ紹介しているCSSは必要な記述のみ抜き出した形で紹介しているので、デモと全く同じ見栄えにしたい場合はCodePenの表示を切り替えてCSSを確認してください。 また、 position: relative; と display: inline-block; の部分は使用する... 続きを読む

より効率よくPhotoshopを使うために知っておきたい便利機能 25 | NxWorld

2017/09/27 76 users 便利機能

主にこれからPhotoshopを使い始めようと思っているとか使い始めたばかりという人向けに、知っておくと便利な機能を紹介します。 ひとつひとつはちょっとしたことでも多用するのであれば覚えておくことでより効率よく作業することができますし、中には使いこなすことができれば大幅な作業時間の短縮に繋がるものもあります。 ※ここで紹介しているのは「Adobe Photoshop CC 2017」を使用した想定... 続きを読む

WordPress：エディタにショートコードを挿入するボタンを追加する方法 | NxWorld

2017/09/20 17 users example functio div エディタ テンプレート

ショートコードを利用することでテンプレートやちょっとした機能を簡単に呼び出すことができるようになりますが、それをより簡単に扱えるようにするためにエディタにショートコードを挿入するボタンを追加する方法を紹介します。 ショートコードを作成 まずは使用するショートコードを作成していきます。 ここでは例として <div class="example"></div> を出力するというもので、 functio... 続きを読む

CSSで装飾されたボタンを手軽に使いたいときに便利なボタンライブラリ 5 | NxWorld

2017/08/30 36 users CSS ライブラリ class指定 特定 規模

特定のCSSを読み込み、適応したい要素にclass指定をするだけで簡単に装飾されたボタンを実装できるボタンライブラリを5つ紹介します。 カラーやサイズ指定をはじめ、ライブラリよっては20種類以上のデザインが用意されているものもあります。 そのまま利用させてもらうのはもちろん、特に中規模〜大規模サイトではボタンを共通コンポーネントのひとつとして用意することも多いと思うので、その際の参考にすることもで... 続きを読む

WordPress：特定のページのみビジュアルリッチエディタを無効化する方法 | NxWorld

2017/08/25 12 users テキストエディタ エディター エディタ WordPress

WordPressでビジュアルリッチエディタを使用しない場合、すべてで無効化するのであれば管理画面のプロフィールページにある「ビジュアルリッチエディターを使用しない」にチェックを入れることで無効化できますが、そうではなく特定のページでのみ無効化したい場合に使える方法です。 先述したようにすべてで無効化する場合は管理画面で行えますが、特定のページのみビジュアルリッチエディタを無効化（テキストエディタ... 続きを読む

slickのカレントクラスを利用した実装サンプル | NxWorld

2017/08/17 23 users Slick カルーセル class CSS スライド

手軽にカルーセルを実装できるjQueryプラグイン「slick」には、現在表示されているスライド（表示の仕方やオプションの指定によって付与の対象となる位置は変わります）に対して .slick-current というclassが付与される作りになっており、これを利用することでCSSを少し追記するだけでもいろいろな見せ方が可能です。 そこで今回は手軽にできて且つ個人的にも利用することが多い実装サンプル... 続きを読む