これでもうUIデザイン用のSVGアイコンに困らない！ 商用無料のSVGアイコンを横断検索・ダウンロードでき、カスタマイズもできる便利サイト -Iconbuddy
商用で無料利用できる、MITライセンスなどのオープンソースで利用できるSVGアイコンは、たくさんのサイトからリリースされています。これらをまとめて検索してダウンロードでき、しかもカスタマイズもできてしまう便利サイトを紹介します。 FigmaとVS Codeのプラグインも揃っており、そこから直接アイコンを利用することもできるので、かなり便利です。 Iconbuddy -200K+ open source free svg icons Iconbuddyの特徴 SVGアイコンの利用方法 Iconbuddyで利用できるSVGアイコン Iconbuddyの特徴 Iconbuddyは、オープンソースで利用できる200,000種類以上のSVGアイコンを無料で検索、ダウンロード、さらにアイコンのカスタマイズもできるアイコン検索エンジンです。 Iconbuddy -200K+ open source fr
ブックマークしておくと便利！ CSSで実装されたローダー、簡単にカスタマイズもできる優れもの -Loadership
自分のデザインに合ったローダーを簡単に実装したい！ そんな要望に応えるオンラインで簡単にカスタマイズができるCSSで実装されたローダーを紹介します。 ローダーはHTMLとCSSをコピペするだけで簡単に実装でき、カスタマイズもオンラインでサイズ・カラー・アニメーションなどを変更できます。 Loadership Loadershipの特徴 Loadershipの使い方 Loadershipのローダー Loadershipの特徴 Loadershipは、CSSで実装されたローダーをコピペで簡単に利用できるオンラインツールです。ローダーはオンラインでカスタマイズもでき、自分のデザインに合ったローダーを作成できます。 ローダーのCSSは依存関係はなく、HTMLとCSSをコピペするだけで利用できます。MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。詳しくは、Aboutをご覧ください
WordPress taxonomy アーカイブの判別方法 - by Takumi Hirashima
WordPress で タクソノミーアーカイブページの判別方法を紹介します。 is_tax() 関数を使用する is_tax() 関数を使用する is_tax() 関数は、現在表示しているページが taxonomy アーカイブページかどうかを判定する関数です。 引数には、taxonomy のスラッグを指定します。 たとえば、taxonomy のスラッグが category のカテゴリーアーカイブページかどうかを判定する場合は、次のようになります。 if ( is_tax( 'category' ) ) { // カテゴリーアーカイブページ } まとめ WordPress で タクソノミーアーカイブページの判別方法を紹介しました。
超リアルな人物の全身写真を数クリックで作成できるAI Human Generator
「プロのカメラマンが撮影したような、人物の写真が欲しい」 「モデル写真が欲しいけど、費用がかかるので迷っている」 「撮影するには時間もかかるし、場所やモデルの確保はどうしよう」 たとえば、カメラマンに撮影場所へ来てもらって撮影する「出張撮影」。 撮影時間によって料金は変わりますが、相場は撮影1時間で２万円～３万円程度と言われています。 さらに写真のレタッチや編集などのオプション、撮影枚数が多いと数十万円の費用が必要ということも。 しかし、今回紹介するオンラインAIツールを利用すれば、誰でも簡単に人物写真を生成できます。 しかも、無料です。 超リアルな人物の全身写真を作成できるAI Human Generator AI Human Generatorは、ほんの数クリックするだけで、超リアルな人物の全身写真をリアルタイムで作成できるオンラインAIツールです。 このツールがすごいところがずばり、
Advanced Custom Fields Proを用いたGutenbergのブロック開発 - Qiita
Gutenbergが嫌われている件について WordPress5.0にてGutenbergが搭載されてから早4年が経ちました。 今ではGutenbergをフル活用した「フルサイトエディター (FSE)」なるものが実装されつつあり、もはやWordPressを使用する人にとって、Gutenbergの理解は必須です。 しかし、、、世の中はGutenbergが嫌いな人が多い印象を抱きます Gutenberg内の機能開発が活発であり、運用の工数がかかる クラス名が勝手に割り振られてしまい、CSSでの制御が難しい アップデートによりブロックの見た目が崩れることがある Classic Editorよりも、投稿画面のカスタマイズがしにくい カスタムフィールドを設置しても、場所が見にくい（ページ下部とサイドバーにしか出せない）ので編集しにくい などが主に嫌われる理由だと思います。 ※余談ですが、フルサイトエ
WordPressのブロックエディタのチューニング - シナプス技術者ブログ
システム開発課の今門です。 前回はWordPressの新しいエディタ、ブロックエディタとはどんなものなのかを紹介しました。 今回はブロックエディタのチューニングについて話します。 現在、WordPressのコア開発の中心はブロックエディタになっています。アップデートがあるたびに、ブロックエディタの新しい機能が追加され、ブロックの数も増えています。 高機能・多機能になるのはもちろん喜ばしいことですが、管理画面のUIも複雑になり、一部の機能しか使わないような場合には、操作性はすこぶる悪くなってしまいます。必要なもののみを取り入れ、不必要なものを表示しないようにチューニングすることで、操作性は格段に向上します。 そのためのTipsをいくつかご紹介します。 [Tips 1] 特定の投稿タイプのみ、ブロックエディタを有効にする [Tips 2] 必要なブロックのみを表示する [Tips 3] ブロッ
実はこんなこともできる！MW WP Formの便利なカスタマイズを紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。バックエンドエンジニアのまうみです。 今回はWordpressでお問い合わせフォームを実装する際の定番プラグイン、MW WP Formの知っておくと便利なカスタマイズを紹介します。 MW WP Formはシンプルなショートコードを生成し、簡単に確認画面付きのフォームを作成できることが特徴です。しかもカスマイズの幅もとてつもなく広く、応用次第で様々な案件に対応できるポテンシャルを持ったプラグインです。 今回は機能別に、「えっ、そんなこともできるの？」というようなMW WP Formのカスタマイズ技をご紹介します！ 出力されるタグのhtml構造を変更したい 例えばデフォルトのタグのDOMの構造を変更して、独自のclassを追加したい……そんなときのためのカスタマイズです。 プラグイン内で管理されているテンプレートパーツを、WordPressのthemeディレクトリにコピーすることで
【WordPress】カスタム投稿タイプのパーマリンクをカスタムするとアーカイブと個別記事が404になる（function.php） | 株式会社エンタースクウェア | Web制作
原因：リライトさせる正規表現と基本URLが間違っていた rewrite_rules_arrayを設定する時に、正規表現とリダイレクトさせる基本URL（パラメーター付きのURL）が間違っていた事が原因でした。 以下が404を解決できたソースです。 add_filter( 'post_type_link', 'my_type_link', 1, 2 ); function my_type_link( $link, $post ){ if ( 'my_post' === $post->post_type ) { // カスタム投稿名/ターム/にする $term = wp_get_post_terms( $post->ID, 'my_category' ); if(!empty($term)){ //タームが指定されている場合 return home_url( '/my_post/' .$term
Vanta.jsで3Dアニメーションを手軽に実装！
2022年1月25日 JavaScript, jsjs 3Dアニメーションが手軽に実装できるVanta.jsというJavaScriptのライブラリがあります。Webサイト上で色や表示方法をカスタマイズして、コピペするだけで完成です。今回はこのJavaScriptライブラリを紹介します！ ↑私が10年以上利用している会計ソフト！ この記事は動画でも紹介しています。動画派の方はこちらをどうぞ！ 鳥をふわふわ動かしてみよう Vanta.jsのサイトに行くと、デモとして鳥がふよふよ飛んでるような背景が表示されています。この画面右側に、カスタマイズするためのパネルが用意されているので、好みのデザインに変えてみましょう。「Birds」の場合は色や鳥の数、鳥のサイズ、スペース、スピードなどが調整できます。 <div id="bird"></div> <script src="three.r119.min
【WordPress】スラッグに記事IDを自動で指定する方法を解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ 小学生のときからモスキートーンが聴こえなかったバックエンドエンジニアのまうみです。 今回はWordPressのカスタマイズでも定番の記事のスラッグの自動記事ID設定を紹介します。 なぜスラッグを記事IDにするのか まずはデフォルトの設定を確認してみましょう。 このように記事を保存した際に、記事のタイトル（日本語）がそのままスラッグに指定されてますね。 URLに日本語が混ざってしまうことを避けたい場合、記事を保存した後に、任意の英数字のスラッグを指定すれば問題ありません。 しかし、もし設定を忘れてしまったら? 日本語のURLが設定された状態でGoogleのインデックスに登録されてしまった場合、スラッグを後から変更するにはリダイレクトの設定が必要です。これは面倒ですね。 記事の保存時に日本語以外でユニークなスラッグが指定されていれば、少なくとも日本語が入ったままのURLで公開され
WordPress 権限別に管理画面をカスタマイズする方法 - by Takumi Hirashima
WordPress 権限別に管理画面をカスタマイズする方法を紹介します。 例えば、寄稿者権限ユーザーに特定の項目だけを触らせたいときに便利な方法です。 権限別にサイドバーメニューをカスタマイズする方法 寄稿者権限の場合にサイドバーメニューをカスタマイズする方法 寄稿者権限の場合にサイドバーメニューをカスタマイズ 寄稿者権限でも画像をアップロード可能にする 他のユーザーがアップロードした画像を非表示 寄稿者権限でログイン時のみ専用のCSSを読み込む 権限別にサイドバーメニューをカスタマイズする方法 権限別にサイドバーメニューをカスタマイズする方法を紹介します。 次のコードをテーマファイル内の function.php に追加します。 /*【管理画面】権限別にサイドバーメニューの表示をカスタマイズ */ function remove_menus () { if (current_user_c
HTML、CSSの次に。WordPressをカスタムしよう。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
そして今回はWordPressの中にページを一つ作ってみましょう。WordPressの用語もしれっと織り交ぜていくので同時に学んでくださいね。 なお今回も前回に引き続きlocalというアプリを使用します。WordPressをお使いのPC上で簡単に使用できるようになります。 HTMLとCSSを学んだ方であれば、あとはデザインを落とし込めばWordPressを使ったサイトをコーディングできるようになります！ それでは行ってみましょう。 WordPressで作れるページについて まずはデフォルトで作れるページについて触れてみます。とくによく使うページとしてトップページ・固定ページ・投稿が存在します。それぞれ下記の通りの機能です。簡単なサイトであればこれだけで構成されることもあります。 トップページ ホームページとも言いますが、URLをブラウザで検索して開くと一番最初に開かれるページです。 ↓作成
【CSS】box-shadowでリアルな影を作成できる便利ツールまとめ
ほんのり影がついたようなドロップシャドウは、「浮いている」ような立体感を演出できる、ウェブサイトでは欠かせないデザイン要素のひとつです。 ドロップシャドウの使い方によって、デザインでユーザーを魅了するUIテクニックで、CSSによる手軽で、柔軟なスタイリングができるのも人気の理由でしょう。 しかし、いざCSSでドロップシャドウを作成しようとすると、設定する項目が多すぎて、なかなか思い通りの影が表現できないことも。 今回は、手軽な設定のみで、魅力的なドロップシャドウを作成できるオンラインツールをまとめてご紹介します。 簡単なクリック操作で、本物そっくりなリアルな影を作成できますよ。 Shadow Palette Generator ツールの特長 Shadow Palette Generatorは、後ほど紹介するツールにはない、ユニークな点が２つあります。 １つのCSSドロップシャドウを生成する
決定版?!50個のCSSボタンを一発コピペ、自分好みにカスタマイズできるCSSButtons.io
先日、コピペで利用できるCSSボタンスタイルを多数公開中の便利サイトをご紹介しましたが、また新しいサービスが公開されています。 クリックひとつでコピペできるだけでなく、気に入ったボタンはHTMLとCSSによるカスタマイズ、保存も可能です。 決定版?!50個のCSSボタンをコピペで利用、自分好みにカスタマイズできるCSSButtons.io CSSButtons.ioは、ボタンやチェックボックスなど、ウェブ制作に使えるCSSコンポーネントを公開しており、すべてのコンテンツはオープンソースで、無料で活用できます。 現在、CSSボタンは48種類公開されており、シンプルで使い勝手の良い素材から、アニメーションを使った波ウェーブ型やグリッチエフェクト、動くグラデーションなど、あらゆるCSSボタンスタイルに対応できる優れもの。 ボタンの他に、こちらもHTML/CSSのみでスタイリングできるチェックボッ
WordPressのget_template_part関数にバージョン5.5.0から追加された新機能を紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
WordPress5.5.0から追加された新しい機能についてご紹介します。 この記事を執筆中のWordPressの最新バージョンは5.8.1なので、なんで今更と思われてしまうかもしれませんが、それほど個人的に待ち望んでいたすばらしい機能だったので、こうして記事にしてしまいました。 結論としましては、get_template_part関数が便利になりました、という話になります。 get_template_part関数のこれまで使い方 get_template_part関数とは、テーマの中で任意のテンプレートファイルを呼び出すことができる関数です。用途としては、シングルページやアーカイブページなどにおいて共通して表示したいパーツがある場合に、そのパーツを別のテンプレートファイルにしておくことにより一箇所で管理する、といったことができます。 具体的な使い方を説明します。 最新記事n件みたいなパー
CSSでスクロールバーのデザインをCSSでカスタマイズする方法を徹底解説 -古いCSSと新しいCSSでの実装のポイント
スクロールバーのデザインをCSSでカスタマイズする方法を紹介します。 ページ全体のスクロールバー（ブラウザに表示されるやつ）はデフォルトのままでよいですが、ページ内のスクロールコンテンツなどではUIのデザインと一貫したスクロールバーを実装する必要があるかもしれません。 スクロールバーをカスタマイズする時のCSSの古い構文と新しい構文での違い、スクロールバーのさまざまなデザインの実装方法、アクセシビリティにおける注意点など、徹底解説されています。 Custom Scrollbars In CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スクロールバーの構成要素 スクロールバーのデザインをカスタマイズする カスタムスクロールバーのスコープを指定する スクロールバーのデザインをカスタ
たまに役に立つWordPressのカスタマイズ5選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エンジニアのづやです。 ありがたいことに、この業界で15年程度生き抜くことができまして、質問を受けたりレビューをしたりする機会が多くなってまいりました。 しょっちゅう必要ではないのですが、カスタマイズが必要になった際に解決したことを今回まとめてみました。 非公開ページを親ページにしたい 皆様はWordPressをGutenberg（グーテンベルク）で使われているでしょうか。 URLを綺麗にしたいときなど、固定ページで非公開の親ページを選びたいときがありますよね。 page_attributes_dropdown_pages_argsとかquick_edit_dropdown_pages_argsにフックしてたと思うのですが、グーテンベルクになってからは、ここもrest apiで取得しているようで効かなくなってますよね。 add_filter( 'rest_page_query'
軽量で非依存のカスタマイズ可能なパーティクル生成ライブラリ・「tsParticles」
tsParticlesは軽量で非依存のカスタマイズ可能なパーティクル生成ライブラリです。任意のパーティクルアニメーションを生成し要素の背景として利用する事が出来ます。 開発の止まったparticles.jsをTypeScriptライブラリとして変換し、機能追加やバグ修正を行い、現在も開発を維持しているそうです。 また、各フレームワークもサポートされており、様々な環境で使う事が出来ます。ライセンスはMITとなっています。 tsParticles
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to change the default HTML output of a Gutenberg block in WordPress?
デザインに適したアイコンがこれで見つかる！ UIデザイン用のさまざまなアイコン素材をまとめて比較・カスタマイズ・ダウンロードできる -Iconer
