WordPress：Gutenberg使用時の自動保存時間を変更する方法 | NxWorld
Gutenbergにはこれまでのエディタと同じように現在の内容を一定時間で自動保存してくれる機能があります。 ただ、デフォルトだと間隔が短すぎてリビジョンが大量に増えてしまったり、テストなどを行っていてそこまで頻繁に保存する必要ないときに邪魔になってしまうこともあるので、自動保存時間を任意で変更する方法です。 コードを記述して変更する 自動保存時間を変更するにはfunctions.phpに下記のように記述し、この場合はデフォルトで10秒なのを300秒（5分）に変更することができます。 また、自動保存をほぼ無効化したいとかであれば、例えば9999などのように数値を大きく設定しておくことでとりあえず対応可能です。 add_filter( 'block_editor_settings', 'custom_autosave_interval' ); function custom_autosave
WordPress：Gutenbergの概要・チュートリアル・関連リソースなどがまとめられているサイト | NxWorld
近々本格的にリリースが予定されているWordPressの新エディタ「Gutenberg（ブロックエディタ）」の概要・チュートリアル・関連リソースなどが掲載されていたりまとめているサイトの備忘録です。 リリース後、より開発者向けとかスニペット情報を中心に掲載するようなサイトもいろいろ出てきそうな気はしますが現時点で目についたものです。 October 01, 2020 追記 一部サイト名・リンク先を修正しました。 「Gutenberg News」はクローズしたようなので削除しました。 Gutenberg Handbook WordPress.orgでGutenbergについて掲載されているページで、概要や設計解説をはじめ、API・テンプレート・ブロック作成・関連リファレンスなどがまとめられています。
Lorem Ipsumの代替として使えるダミーテキスト向けフォント「Scribble Font」 - NxWorld
使わせてもらうことがありそうなので備忘録。 「Scribble Font」は、プロトタイピングやワイヤーフレーム作成時にLorem Ipsumの代替として使えるように作成されたフォントで、文字を入力すると上のイメージのような感じで表示されます。 本来はダミーテキストとはいえほぼ本番で使用されるのと変わらないような文章などを入れておくのが良いとは思いますが、変更忘れなどを防ぐために明らかにダミーとわかるようなものにしたいときには良さそうです。 実際にどの文字がどのように表示されるかはサイト内にある「Test Area」で確認することができ、上のイメージは「NxWorld」と入力した場合のもになります。 フォントはGitHubからダウンロードでき、タイプはTTF、ライセンスはMITです。
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種類のコマンドが表
WordPress：previous_posts_link()とnext_posts_link()に任意のクラスを付加する方法 - NxWorld
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
WordPress：get_the_category()でカテゴリー名やスラッグを取得する方法 - NxWorld
普段からWordPressを利用している人なら使ったことある人も多いと思いますが、get_the_category()を使うことでカテゴリー名やスラッグを簡単に取得・表示させることができます。 例えばカテゴリーによって詳細記事のデザインを変更したい場合などに、カテゴリースラッグを用いたクラスを付加させ、そのクラスを用いてスタイルを指定するといったことができます。 カテゴリーID・カテゴリー名・カテゴリースラッグをそれぞれ取得・表示したい場合は下記のようにそれぞれ記述します。 <?php $category = get_the_category(); $cat_id = $category[0]->cat_ID; $cat_name = $category[0]->cat_name; $cat_slug = $category[0]->category_nicename; // カテゴリーI
追従ヘッダー実装時に使える動作・デザインパターン例 - NxWorld
常にユーザーの視線に入るようにしておきたいとかサイトの回遊率をあげたいなどの理由で実装を頼まれることが多いと追従ヘッダー。 単純に基本となる見栄えを維持してそのまま追従させることも多いですが、少し変化を加えてほしいという要望をもらうことも少なくないので、そういった場面で提案しやすいようによくある動作・デザインのパターン例をまとめました。 紹介しているサイトの動きや見栄えは、いずれもPCでの表示確認時のものになります。 変更を加えずにそのまま追従 スクロール時にデザイン・位置とも特に変更を加えず、単純にファーストビューでの見栄えをそのまま維持して追従させるパターンです。 少しCSSを書くだけで容易に実装できる�点がメリットですが、ヘッダーの領域が広いデザインの場合は�その分コンテンツが見える領域が狭くなるというデメリットがあるので、仕様やデザイン上でどうしてもヘッダー領域が広くなってしまう場
WordPress：4.9.8で追加された“Try Gutenberg”コールアウトを非表示にする方法 - NxWorld
WordPress 4.9.8がリリースされたのに伴いダッシュボードにGutenbergの体験を促すパネルが表示されるようになりましたが、現時点だとまだ使われたり何らかの理由で表示されていると困る場合に、このパネルを非表示にする方法です。 WordPressを4.9.8にアップデートすると、キャプチャのような「“Try Gutenberg”コールアウト」と呼ばれるパネルが表示されます。 パネル右上にある「非表示にする」を選択、または表示オプション内にある「新しいエディター」のチェックを外すことでこのパネルを非表示にすることはできますが、ユーザーが多い場合などいちいち選択していくのは面倒だと思うので、手っ取り早く且つまとめて非表示にしたいときにはfunctions.phpへ下記のように記述することで非表示にすることができます。
WordPress：記事の削除と同時に使用されている画像も削除する方法 - NxWorld
add_action( 'before_delete_post', 'nxw_delete_post_attachment' ); function nxw_delete_post_attachment( $post_id ) { $args = array( 'numberposts' => -1, 'post_parent' => $post_id, 'post_type' => 'attachment', 'post_status' => 'any', 'post_mime_type' => 'image' ); $attachments = get_children( $args ); foreach( $attachments as $attachment ) { wp_delete_attachment( $attachment->ID, true ); } } 記述後に記事の
jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋ - NxWorld
ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時（メニューが展開しているときなどのアクティブ時）のエフェクトをCSSで実装したサンプルをまとめました。 よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。
WordPress：存在有無やサポート有無を条件指定したいときに便利なタグまとめ - NxWorld
特定の投稿タイプが存在しているか、特定のタクソノミーが存在しているか、特定の機能をテーマがサポートしているかなど、WordPressで何かしらの存在有無やサポート有無を条件として指定したいときに使えるタグをいくつか紹介します。 post_type_exists() 引数に指定した投稿タイプが存在するかのチェックを行うことができます。 例えば、「news」という投稿タイプの有無をチェックする場合は下記のように記述します。 if ( post_type_exists( 'news' ) ) { echo '「news」の投稿タイプが存在します。'; } else { echo '「news」の投稿タイプが存在しません。'; } is_taxonomy_hierarchical() 引数に指定したタクソノミーが階層化されているかのチェックを行なうことができ、そもそもそのタクソノミーが存在しないと
クールなグラデーションのカラーコードやCSSコードを確認できるサイトまとめ - NxWorld
近年見かける機会が多くなった、クールなグラデーションカラーを知りたいときに便利なサイトのまとめです。 いずれもあらかじめグラデーションカラーの一覧が用意されているので、それらから選んでカラーコードやCSSで実装するためのコードを確認することができ、さらにサイトによってはそれを自分好みに調整してからコード出力したり、デザインで使える素材でダウンロードできるようにもなっています。 uiGradients ページ左右に配置されている矢印でカラーを切り替えていく他、もっと一覧化された状態で見たい場合は左上にある「Show all gradients」から確認でき、キーカラーを選んでフィルター表示にすることもできます。 カラーコードは画面中央上部に記載、その他のオプションについては画面右上にそれぞれ配置されており、角度変更（クリックの度に角度が変わります）・CSSコードの出力・JPG形式でのダウンロ
CSS Grid Layoutを採用しているサイトをコレクションしている「Grid Examples」 - NxWorld
「Grid Examples」はCSS Grid Layoutを採用しているサイトをコレクションしているギャラリーです。 まだ公開されたばかりみたいなので現時点の数は少なめですが、いずれも掲載されているのはCSS Grid Layoutを採用しているサイトばかりになり、このサイト自体もCSS Grid Layoutを採用して作成されています。 TOPページでは確認することができませんが、それぞれカテゴリーやタグでの管理も行なっているみたいなので、今後掲載数が増えた場合もそれらを利用すれば参考にしたいタイプを探すのに役立ちそうです。 ちなみに、掲載サイトを募集しているみたいなので、個人的にCSS Grid Layoutを採用しているサイトで掲載してもいいというサイトがある人はコンタクトをとってみてください。
class付与でインスタグラム風のフィルターを適用できるスタイルシート「Instagram.css」 - NxWorld
インスタグラムは用意されているフィルターを適用することでイメージの見栄えを変更できるようになっていますが、「Instagram.css」はそれをCSSを使って再現できるスタイルシートです。 デフォルトでは表示されていないものも含めた全41種類のフィルターをclassを付与するだけで適用することができます。 使い方はGitHubからダウンロードするなどしてCSS（instagram.css or instagram.min.css）を読み込み、あとは下記サンプルコードのように適用したいimgを括っている要素に特定のclassを記述することで、元イメージはそのままで簡単にインスタグラム風のフィルターを適用できます。 GitHubで記載されているサンプルコードではfigure要素に対してclassを付与していますが、下記のようにdivなど別の要素でも可能です。 classは.filter-{fi
より効率よくPhotoshopを使うために知っておきたい便利機能 25 - NxWorld
主にこれからPhotoshopを使い始めようと思っているとか使い始めたばかりという人向けに、知っておくと便利な機能を紹介します。 ひとつひとつはちょっとしたことでも多用するのであれば覚えておくことでより効率よく作業することができますし、中には使いこなすことができれば大幅な作業時間の短縮に繋がるものもあります。 ここで紹介しているのは「Adobe Photoshop CC 2017」を使用した想定のものになります。 その他のバージョンを使用している場合は一部使用できない機能があったり、機能自体はあってもメニュー位置や設定方法などが若干異なっている可能性があります。 ショートカットを活用する 特定のキーでツールを選択状態にしてすぐ使えるようにしたり、メニューから選んで実行していくようなものを即座に実行できるようになど、Photoshopには様々なショートカットが用意されており、普段からよく利用
CSS（一部SVGも使用）で作成されたユニークなローディングアニメーション 15 - NxWorld
見栄えからアニメーションまで基本的にCSS（一部SVGも使用）を使って作成されているユニークなローディングアニメーションを、CodePenで公開されている中から紹介します。 ローディングはそんなに長い時間表示させることは少ないですし、自分の場合はサクっと汎用的なシンプルなデザインのものを実装することがほとんどですが、こういった部分まで拘りたいとかちょっと面白いアニメーション付けたいってときに参考になるものやインスピレーションもらえそうです。 Loading Idea HTMLとCSSで作成した三角形を並べ、それらをタイミングずらしてopacityを使うことで見栄えを実装しています。 このデモはすべて同じカラーですが、カラーをバランス良く異なるものに設定するのも良さそうです。
サイト制作のスタイル設定を効率的に行うことができるリセットCSSとノーマライズCSSのまとめ - NxWorld
ブラウザ毎に設定されているデフォルトスタイルの差異をなくし、サイト制作のスタイル設定を効率的に行うことができるリセットCSSやノーマライズCSSを紹介します。 すべてを完全にリセットしてしまうものもあれば、リセットは一部にして有用なスタイルは保持するものもあったりと様々なタイプがあるので、自分の癖やプロジェクトガイドラインに合わせて選ぶこともできると思います。 普段からweb制作に携わっているならご存知の方も多いように、webサイトを閲覧する際に使用されるブラウザは様々な種類がありますが、各種HTML要素にはブラウザによってそれぞれ異なるスタイルがデフォルトとして定義されています。 そういったブラウザ毎のスタイルの差異をなくしてサイト制作時のスタイル設定を効率的に行うのに便利なのがリセットCSSとノーマライズCSSで、個人的に以前（といってももう割と前ですが）はとにかく様々な要素のスタイル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今年気になった・ダウンロードしたデザインフォント − 2018 - NxWorld
npmでインストールされているパッケージを、npm-check-updatesでまとめてアップデートする方法 - NxWorld
