-
【Google Font】Noto Color Emoji【絵文字】
【Noto Color Emoji (Google Font)】 Google Font で使えます。 https://fonts.google.com/noto/specimen/Noto+Color+Emoji 以下のようなメリットがあります。 ・デバイスごとの表示を無くすためにNOTO EMOJI 使う ・Google font のため、フォントの商用... -
【1分でできる】WordPressプチセキュリティ対策
WordPressのセキュリティ対策といえば、パスワード強度、バージョン管理、対策プラグインの導入からサーバー設定まで多岐にわたります。 今回はその中でも、見過ごしがちだけど一瞬で対策できる2点をご紹介します。 （※ただし対策効果は大きくはないので、... -
【Photoshop 25.0】生成塗りつぶし機能がすごい
最近Adobeのバージョンアップで、Adobe FireflyというAI技術で、塗りつぶし機能のクオリティが上がったと聞き、早速アップデートして使ってみました。 生成塗りつぶし機能とは、元の画像にコンテンツや背景の追加を違和感なく行なってくれる機能です。 よ... -
アクションで画像加工を簡単にしよう！
どんなデザインでも、写真の加工はとても大事です！ 最初に少し設定して、ダウンロードしたアクションで簡単に画像加工ができます。 元画像！ 水彩 ・所要時間：約3分 Adobeからの提供なので安心。 最初に若干の設定をするだけで簡単に水彩風に変更！ http... -
【CSSのみ】背景にほわっと円グラデーション【アニメーション】
背景にグラデーションをつけたいけど、いつものじゃもの足りない・・・！ そんな時に使用できる背景グラデーションのcssです。 【コードのサンプル】 すぐに使用したい場合はこちらからコード確認ができます。 ※プレビューがこちらのサイトで見るとかなり... -
ちょっとした工夫で、いつもと違うデザインを。
デザインをしていると、気づくと似たようなデザインになってしまうこともあります。 そんな時に、一つのアイディアとして使えるように、ちょっとした工夫があるデザインの参考をまとめました。 【画像にちょっとしたあしらい】 ただ画像を正方形、長方形で... -
【Google for Jobs】Googleしごと検索 -構造化データの作り方-
【Googleしごと検索 とは】 webページに「構造化データ」を追加すると、google検索時に求人情報を表示してくれるサービスです。 「会社名 求人」で検索すると出てきます 【Googleしごと検索 のいいところ】 ・無料で掲載できる！！ ・地域など検索する人... -
【Photoshop】写真をやさしくふんわりキラキラした雰囲気にする【加工過程】
Photoshopで、写真をやさしくふんわりキラキラした雰囲気に加工していきます。 1.写真を用意する いい感じの写真を用意します 2.写真をphotoshopで開いて、キラキラさせる為にまずは明度を落とします 2-① 写真の下に暗めの背景色を置きます 2-② 写真... -
【Google Search Console】サイトマップを上げたのに検索結果に反映されない時に確認すること
サイトを制作した時や、ページを追加で制作した時、Googleの検索結果に表示させる時にはサイトマップをアップし、サーチコンソールにサイトマップ更新の内容を送信しますが、内容が一向に反映されないことがありました。その時の対処法について紹介します... -
便利な装飾ジェネレーター４選
HPの流れを飽きさせないように、セクションの間に斜めのラインや模様を入れると印象が一気にかわります。 複雑な図形もSVGを使って実装する事も可能ですが、CSSや簡単にSVGを生成して実装してしまいましょう！ SVG Shape Dividers Creator https://shapedi... -
あしらいやレイアウトCSSの便利ツール
【Flex layout Generator】 https://suiq.jp/flex-layout-generator/ 親要素の指定から子要素の余白指定まで、ジェネレーター上で細かく指定することができます。 レスポンシブ表示切り替えもあるのでflex-box使用時一気にレイアウトを組みことが可能にな... -
【Swiper】サムネ＋プログレスバー付き、スライダー実装！
実務で、メインビジュアルにサムネイルとプログレスバー付きスライダーを実装しましたので、 忘備録も兼ねて共有いたします！ demo http://mtrad-test.net/takemura/slider/index.html 【HTML】 <!DOCTYPE html> <html lang="ja"> &... -
【photoshop】ドロップレットで画像をwebpに変換する【効率化】
photoshopでwebp変換をひとつひとつするのは非効率的なのでアクション登録して、 さらに【ドロップレット】でアプリケーション化してしまい、効率UPしてみます！ アクションについて詳しくは以前の記事を参照ください 【Photoshop】自分でアクションを登録... -
【MW WP Form】選択内容によって送信先メールアドレスを変える
Wordpressのお問い合わせフォームプラグイン「MW WP Form」の送信先メールアドレスは、管理画面ではひとつしか設定することができません。 問い合わせ内容によって送信先を変えたいときに対応できるよう、選択内容によって送信先メールアドレスを変える方... -
【配色】おすすめの配色ジェネレーター2選
配色ツールはデザイン制作時に欠かせないツールですが、今回は最近便利だなと思った配色ツールを紹介します。 【】 COLORS こちらはグラフの配色を自動で生成してくれるツールです。 ※グラフそのものを生成してくれるのではなく、あくまでも配色ツールです... -
LINE配信の訴求力をあげる！【Flex message】
今回はLINE配信で便利な「Flex message」を紹介します！ 【Flex messageとは】 「Flex Message」とはLINE公式アカウントで送ることのできるメッセージの一つです。 HTMLに近い感覚で画像やボタンなどをレイアウトしてメッセージ配信できる機能です。配信内... -
【Photoshop】2023アップデート！より高度な削除・塗りつぶし
Photoshop2023 (V.24)がアップデートし、AIを使用したより高度な塗りつぶしが可能になったのでご紹介します 【基本操作】 単純な対象物・背景だとこのまま綺麗に塗りつぶすことが可能です 選択ツールで囲む 右クリックで「選択範囲を削除して塗りつぶし」 ... -
Lottieアニメーションを使ってみよう！
【Lottieとは】 JSONファイル形式のアニメーションライブラリです。 gifよりも小さいファイルサイズで、どんなデバイスでも動作するのが特徴。 扱いやすさや、After Effectsからの連動性など、とても優れたアニメーションライブラリで私もよく活用していま... -
【プラグイン】AddQuicktagで記事の作成を簡単に！
記事作成を簡単に装飾増やすプラグインの紹介します 【プラグインAddQuicktag】 投稿画面でタグを増やすプラグインです！ 投稿画面のボタン↓ 設定画面で入力 設定＞AddQuicktagで入力 cssで編集したい場合は開始タグにクラス名をつけます。また、反映させ... -
WordPressでWEBサイトを作ったときのページ表示速度対策
ページの表示速度はユーザーの離脱を防ぐためにも重要です。 今回は、最近やっているWordpressでWEBサイトを制作した際の表示速度対策を紹介します。 【1.imgタグにwidthとheightを記述する】 理由①：WP側で自動でloading="lazy"を追記してくれる 理由②：...
