WordPress：Gutenberg（ブロックエディタ）を無効化する方法 | NxWorldGutenberg（ブロックエディタ）を無効化する場合はとりあえずプラグイン「Classic Editor」を入れるぐらいの認識だったのですが、フックを使って限定的に無効とかもできるみたいなので備忘録です。 紹介している方法はWordPress Ver 5.0.0で確認等行ったものです。 紹介している方法を以前のバージョンで使用する場合は、フックをそれぞれgutenberg_can_edit_postやgutenberg_can_edit_post_typeにする必要があります。
GitHubのコミットメッセージに使えそうな絵文字がまとめられた「gitmoji」 - NxWorld
「gitmoji」は、GitHub（Git）でコミットメッセージ入力時に文章の代わりとして使えそうな絵文字が一覧化されているサイトです。 ここで掲載されているものすべてが一般的且つ広く使われているという訳でもないですし、他では見かけるものが掲載されていなかったりもしますが、個人的には頻繁に利用するものはひと通りある印象で、今後絵文字を多用したいと思っている人やそれぞれどのような意味なのか知りたい人のチートシートとして使えると思います。 サイトでは各絵文字の記述方法がどのような意味を持つのかの説明付きで一覧化されており、絵文字部分をクリックすることでクリップボードに必要な記述がコピーできるようにもなっています。 絵文字は自分だけしか触らないリポジトリとかであれば気兼ねなく使えますが、複数人で作業しているリポジトリとかだと冒頭であげたように参照したサイトの情報や人によって絵文字を利用した際の意
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：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 )
JSONにコメントを記述する方法の備忘録 - NxWorld
すごい今更なことなのですが、JSONにはコメントを付けることができないということをつい最近になって気付きました...。 ならコメントを付けなければ良い話ではありますが、個人的にJSONを利用する場合は設定ファイル等で利用することが多いのもあって可能であればコメントを残したいと思うことがあったり、単純に付ける方法はないのかが気になって少し調べてみたので備忘録です。 コメント付けたいならわざわざJSONにこだわらなくてもYAMLにするとかコメント使えるHjson使えばって感じですが、あくまでJSONでコメントを付ける方法になるのでそういった意見はスルーでお願いします。 コメント用にデータをつくる #1 単純に使用しなければいいということで、コメント用として出力などはしないデータをつくってしまう方法です。 例えば下記のように実際に使用しないという意味も含めて先頭に「_（アンダースコア）」を、キー
画像を使わずに、CSSのみでリストアイコンを表現したサンプル 10 - NxWorld
いずれもli要素と組み合わせて使えそうなリストアイコンのサンプルで、画像は使用せずに全てCSSのみで実装してみたものです。 最近ならwebフォントやSVGで使い勝手良いものが実装できたり、あとは使用できるブラウザは限られてきたりしますが、問題ないブラウザであればサイズやカラー変更といったこともCSSのみで簡単に変更できます。 はじめに 最後のサンプルのみol要素使ってますが、その他に関しては全てHTMLは下記のように単純なul, li要素を使ってます。 <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Lorem ipsum dolor sit amet,
WordPress構築時のスピードアップに役立つジェネレータまとめ - NxWorld
WordPressでテーマやプラグイン作成時のベースとなるテンプレートをはじめ、カスタム投稿実装・カスタムタクソノミー実装・ウィジェット実装・管理画面のUI変更などのコードなどをダウンロードできたり表示してくれるジェネレータのまとめです。 普段からスラスラ構築できるとかある程度ベースとなるものが既にある場合は不要かもしれませんが、そうでない場合はこういったものを活用することで構築のスピードアップに繋げられると思います。 Underscores ベースとなるテーマをビジュアル下の「GENERATE」ボタンからダウンロードすることができます。 そのままダウンロードするだけでなく、Advanced Optionsでテーマ作成時にstyle.cssの上部にコメントで記述するテーマ情報を設定したり、Sass(SCSS)を同梱してダウンロードすることも可能です。 Child Theme Generat
WordPressで更新者が少しでも使いやすい・更新しやすいと感じてくれる管理画面をつくるヒントやカスタマイズ - NxWorld
個人的に普段から対応することが多いものを中心に、更新者（クライアント）が少しでも使いやすい・更新しやすいと感じてくれるようなWordPressの管理画面をつくるためのヒントやカスタマイズを紹介します。 サイト構成や更新者のスキルなどにもよると思うので全部が全部やるべきということでもないですが、紹介しているものをいくつか組み合わせるだけで不要なものはすべて取り除いたシンプルな管理画面にできたり、少し手を加えるだけでもデフォルトに比べて大幅に使いやすくすることも可能です。 管理画面に任意のCSSやJavaScriptを適用する CSSであればフロントのデザインに近い感じで管理画面を装飾したりデフォルトのレイアウトを使いやすい形に調整するなど、JavaScriptであればデフォルトにはない動きをちょっと付けたり逆にデフォルトで実装されている動きを無効化するといったように、管理画面をカスタマイズす
CSS Snippets #1 - NxWorld
CSSで「〇〇したい」とか「これどうするんだっけ...」というときに使えるものや地味だけど覚えておくと便利だと思う簡易的なスニペットを紹介する第1弾です。 以前であれば画像やJavaScriptを用いなければいけなかったものがCSSのみで表現できたり、上手く使えばよりシンプル且つ効率良く記述するのに役立つものもあるので、特にこれからCSSを学びたいという人や学び始めたばかりでもう少しレベルアップしたいという人は是非試してみてください。 サンプルコードは基本的にプレフィックスを省略しています。 デモが用意されていないものについては、自身で簡単な環境を作成して試してもらうか「CodePen」や「JSFiddle」などを利用して実際の動きを確認してください。 継承するbox-sizing指定 ボックスモデルのルールを変更できるbox-sizingを使用時にその指定が継承される形にしたい場合は、リ
CSSでアンダーラインが追従するメニューを実装する方法 - NxWorld
以前であればJavaScriptを利用して実装していた、メニュー下にあるアンダーラインをホバーしたメニューへスライドしながら追従する動きをCSSのみを使って実装する方法です。 どのようなものなのか実際の動きを見たほうが早いと思うのではじめにデモを紹介すると、このようにメニュー下にあるアンダーラインがホバーしたメニュー下へスライドしていくという動きになり、JavaScriptは使用せずにCSSのみで実装しています。 HTMLは下記のようなものを使用し、a要素は単純なリンクで.nav-underlineが追従してくるアンダーラインで使用する要素になります。 また、ハイライト表示している付与されているclassはよくあるカレント表示用に見栄えを異なるものにするのに使用するclassになっており、これをそのまま使用した場合は上のデモにあるように3つ目のメニュー下にアンダーラインがあるのが初期表示と
デザイン制作を助けてくれる国内外の素材サイトまとめ - NxWorld
見つけてはメモしていたものがかなり増えてきて自分用に整理したのでシェアします。 ベクター・ラスター・テクスチャ・パターン・アイコン・フォント・モックアップなど、デザイン制作をする際に便利な素材を配布しているサイトの一覧です。 中には条件付きで使用可能とか商用利用時は有償という素材が中心に配布されているところもありはしますが、紹介しているのは基本的にフリーで使用できるものが中心または多く配布されているサイトになります。 以下はいずれも五十音 → アルファベット → 数字の順で紹介しています。 また、下記目次に属する国内の素材サイトについては多くが「禁止事項を守れば個人・商用問わず利用可能で、クレジット表記や報告等も不要」になるので、基本的にそのようなライセンスに関する情報は別途記載しているもの以外は省略しています。 国内 - 全般・ベクター・ラスター 国内 - テクスチャ・パターン 国内 -
CSSアニメーションを簡単に実装できるライブラリ 10＋ - NxWorld
ここ数年でちょっとしたアニメーションはJSではなくCSSで実装するということが増えたと思いますが、それを手軽に実装したいときに便利なCSSアニメーションライブラリをまとめてみました。 いずれも必要なCSSを読み込んで要素に特定のclassを付与するだけと使い方も簡単で、デモもしっかり用意されているものばかりなので動きの確認も容易です。 また、簡単な操作でCSSアニメーションを実装するのに必要なコードを出力してくれる便利なジェネレータも併せて紹介します。 Animate.css 共通classである.animatedと各アニメーション用のclassを付与することで実装でき、アニメーションをループさせるclass（.infinite）も用意されています。 76アニメーション用意されており、ライセンスはMITです。 cssanimation.io 基本的には共通classである.cssanima
gulp：とりあえず覚えておきたい、よく利用する基本タスクの記述サンプル - NxWorld
主にこれからgulpを使い始めよう（使い始めた）という人向けに、とりあえず覚えておきたいよく利用するタスクの基本的な記述例やプラグイン・モジュールを使った使用例をいくつかまとめてみました。 実際に使用する時はここで紹介しているような簡易的なものでなく、もっと複雑なタスクだったり様々なプラグイン・モジュールを組み合わせたりすることがほとんどですが、ファイルの移動や削除をはじめ、リネーム・結合・圧縮・監視など基本となるような処理の記述方法や動きを知りたい人は参考にしてみてください。 gulpの基本的な使用方法（環境準備やインストールなど）については割愛しています。 また、以下はいずれもgulpfile.jsに記載した例になり、ファイル指定のディレクトリは/src、出力先のディレクトリは/publicという想定になります。 ここで紹介している内容は、gulp Ver 3.9.1を使用した場合にな
CSSグラデーションを使ったデザインパーツサンプル - NxWorld
わざわざ画像を使わなくても簡単にグラデーションを表現することができるCSSのlinear-gradient。 未対応ブラウザをサポートすることもまだ完全になくなったとは言えませんが少しずつ減ってきてはいるので、利用頻度が増えたという人も多いと思います。 よくある使用方法としては例えばセクションの背景だったりボタンなどのパーツの背景にグラデーションカラーを適用するというのが一般的ですが、他にもいろいろ使用用途があるのでいくつか紹介します。 以下で紹介する方法は、ブラウザによっては表示確認ができないものもあります。 また、ベンダープレフィックスなどは必要に応じて追記・変更してください。 ここでは全て見た目を画像で紹介しているので、実際に表示を確認したい場合は以下デモで確認できます。 テキストが徐々に見えなくなる #1 イメージ（右）のようにテキストの上にグラデーションを重ねることで徐々にテキス
WordPress：ログイン画面カスタマイズに便利なプラグイン「Custom Login Page Customizer」 - NxWorld
「Custom Login Page Customizer」は、WordPressのログイン画面を容易にカスタマイズできるプラグインです。 テーマ編集などで使用されるカスタマイザーのような形でログイン画面をオリジナルにカスタマイズでき、ロゴ画像や背景・文字のカラー変更はもちろん、ボタンや入力フィールドの見栄えなども変更することができます。 紹介している内容やキャプチャなどは、WordPress Ver 4.4.2で使用した際のものになります。 インストール・有効化 管理画面のプラグインから「Custom Login Page Customizer」を検索してインストール、もしくは「Custom Login Page Customizer」からファイルをダウンロードして環境にアップロード。 プラグインを有効化すると「外観」に「Login Customizer」という項目が追加されます。 ペー
CSSでリストの最初と最後のボーダー（border）を非表示にする方法 - NxWorld
リストでボーダー（border）を指定しているけど最初と最後のボーダーは非表示にしたいという時に使えるCSSの小ネタです。 最初と最後とは言っていますが、要は最初のボーダーを非表示にするという感じで全部で4つの方法をご紹介します。 以下で紹介しているのはいずれも上のイメージのようによく見るリストで、ボーダーが最初と最後に引かれていないものを実装する方法です。 HTMLは下記のようにul, liを利用した単純なものとします。 <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adi
CSSで片方可変、片方固定のカラムレイアウトを実装する方法 - NxWorld
CSSで片方の幅が可変で、もう片方の幅が固定というタイプのカラムレイアウトを実装する方法を全4パターン紹介します。 対象ブラウザやOSなど環境によっては使えないものもありますが、全て同じ見た目（レイアウト）を実装することができます。 HTMLと実装イメージについて 紹介する方法はいずれも下記のようなHTMLを使用したものになり、ご覧のようにメイン・サイド・それらを括る親要素の3つのdiv要素で実装していきます。 <div class="wrapper"> <div class="main"> <!-- 可変 --> </div> <div class="side"> <!-- 固定 --> </div> </div> また、今回はこのイメージのようにdiv class="main"（青い背景色の領域）を可変、div class="side"（赤い背景色の領域）を固定にそれぞれする方法で、固
ユニークな見せ方や動きを実装したい時に使えそうなスクリプト 10 - NxWorld
他ではあまり見かけることのないユニークな見せ方や動きを実装したいとき、遊び心あるイースターエッグを仕込んでおきたいときなどに個人的に使えそうだなと思ったスクリプトをまとめてみました。 ブラウザやデバイスによっては実装できないものも幾つかあるのでその点は注意が必要ですが、いずれもそこまで難しい記述などもなく実装することができます。 窓に水滴がついていく様子を表現できる「rainyday.js」 とにかく実際に動いているデモを見てほしいのですが、雨が降って窓に水滴が徐々についていく様子をリアルに表現することができるスクリプトです。 水滴のサイズやついていくスピード、ぼかしや不透明度具合を調整することができます。 水面に滴が落ちているような感じを表現できる「Raindrops.js」 コンテンツやセクションの区切りなどを水面に見立て、そこに滴が落ちてきたようなエフェクトを実装できるjQueryプ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
商用利用できるものも有り！フリーの動画配布サイト 7 | NxWorld
CodePenで公開されている、CSSを使ってIsometric（アイソメトリック）な見栄えを実装したデモ 15 | NxWorld
