Simple Image XML Sitemapの使い方の例。画像サイトマップをGoogleへ。 2024.08.24 Simple Image XML Sitemapのインストール方法。 Simple Image XML Sitemapとは? 画像のXMLサイトマップを生成するプラグイン。 Simple Image XML Sitemapは、更新頻度も高く、ページや投稿内にアップロードされたすべての画像のXMLサイトマップを生成してくれるというプラグイン。 WordPress管理画... memosSEOWebデザインWordPress
Google検索結果でサムネイル画像が表示・変更されない原因と対応。 2024.08.23 Google検索結果でサムネイルが表示されないときの誤解。その1。 metaタグによるサムネイル画像の指定は、実は意味がない。 <meta name="thumbnail" content="指定したいサムネイル画像へのパス">では検索結果に表示されない。 Googleの検索結果へのサムネイル表示については、下記のように... AImemosWebデザイン
WordPressのリビジョン機能の設定方法。プラグインか、wp-config.php、functions.phpで。 2024.08.20 WordPressのリビジョン機能。 WordPressのリビジョン数は制限もできる。 リビジョンは便利。ただし容量が増えてしまう。 リビジョンは便利な反面、データベースの容量が増えてしまう。 また、古い記事のリビジョンは、ほとんどの場合、すでに使うことのないデータとなっている。 それらのデータが大量に溜まることで、サイト表示の速度低下や、思わぬエラーの原因と... memosWebデザインWordPress
WordPressのバックアップ方法。できないときは手動でもプラグインでも復元可。 2024.08.17 WordPressのバックアップができないときの対応。 WordPressのバックアップはあわてずに。 WordPressのバックアップは実はシンプル。 WordPressは無料プランと有料プランがあり、拡張性が高く、普及率も高い。 ただ普通の静的なサイトと違い、情報発信などを行える動的サイトなので、データベースを利用する。 そのためサイトの制作時や公開後のト... memosWebデザインWordPress
WordPressのリビジョン。正しく表示されないときの復元の例。 2024.08.16 WordPressのリビジョン表示を復元。 WordPressのリビジョンが2026年前に。 リビジョンの日時表示の設定。 WordPressでリビジョンを使用していたところ、いつの間にか日時が2026年前になっていた。 2026年前というと紀元前であり、明らかにどこかがおかしい。 クライアントさまのサイトではなく、修正方法もわからなかったのでそのままにしてお... memosWebデザインWordPress
UI3 Figma Slidesの使い方やテンプレートの基本。シンプル版。 2024.07.21 Figma Slidesとは? Figma Slides。スライドがテンプレートから作れる。 Figma Slidesの使い方について。 Figma Slidesは現在ベータ版として用意されており、アカウントがあれば2025年初頭まで無料で使用が可能。 使い方はシンプルで直感的。 使い方は簡単で、テンプレートなのですぐに慣れる。 スライド画面のサイズはモ... FigmamemosWebデザインデザイン
UI3。Figmaの新しいUIで、Webやスライド、UI/UXをデザイン。 2024.07.20 UI3というFigmaのインターフェイス。 FigmaのUI3ベータ版に。 FigmaのUI3ウェイティングリストから。 ウェイティングリストに登録していたFigmaのUI3が、ベータ版として使用可能となっている。 (※スクショはダークモード時のもの。) UI3と従来のUIの違い。 数週間か数ヶ月ほど前から、左側のサイドバーにあるデフォルトのタブ... memosWebデザインデザイン
WordPressのセキュリティ対策。脆弱性の疑問と強化設定。 2024.07.18 WordPressのセキュリティ問題と脆弱性。 WordPressのセキュリティ強化とシェア率。 WordPressのセキュリティ対策とシェア率の高さ。 現在は世界中のWebサイトの約40%が、WordPressでできて言われている。WordPressのシェア率の高さはかなり以前から言われており、徐々にシェア率を伸ばしてきた。 そのため、ターゲットとして狙われやすい... memosWebデザインWordPress
Figmaでデザインされた有名なWebサイトの例。デザインシステムも。 2024.06.28 FigmaでデザインされたWebサイト。 Figmaでデザインされたサイトの判断。 このサイトはFigmaでデザインしている? 現代ではさまざまなデザインツールが普及している。 そのため、Webサイトの見た目だけで、使用しているデザインツールを特定するのは難しい。 またFigmaには、WordPressやWix、STUDIO、Canvaなどのような、Webサイ... FigmamemosWebデザイン
WordPressのテーマ。有料と無料の違い。ウェブサイトの例と生成AI。 2024.06.21 WordPressと生成AI。 AIによる生成サイト。 AI生成サイトの現在地。 たまに、AIによりWebサイトがあっという間にできあがった的な情報を見る。 そうなれば仕事の効率が良くなり、生産性が上がるかもしれない。 ただし、生成AIやデザインツールのAI機能によって作られたWebサイトが、WordPressのようにデータベースも作りました、... FigmamemosWordPressデザイン
first-letterが効かないとき。覚えると便利なCSS擬似要素。 2024.06.11 CSS擬似要素のfirst-letter。 first-letterは、最初の一文字という意味。 ::first-letter 「first-letter」を日本語にすると、そのまま「最初の一文字」となる。 Webデザインをしているとき、その「最初の一文字」だけのデザインを変えたいときがある。 最初の一文字だけデザインを変えたい。 例えば見出しの最初の一... CSSmemosWebデザイン
VS Codeの日本語化と言語設定の方法と手順。2024年版。 2024.06.10 VS Codeの日本語設定。 VS Codeの「Extensions(拡張機能)」から。 Extensions - 拡張機能 VS Codeの拡張機能である、「Japanese Language Pack for Visual Studio Code」を使うと、数ステップで簡単に日本語化ができる。 Extensionsから、「Japanese Languag... EditormemosWebデザイン
Webデザインのブロックレベルとインラインの一覧と、コンテンツモデル。 2024.06.08 ブロックレベル要素とインライン要素の再認識。 ブロックレベル要素とインライン要素はどこに? ブロックレベル要素とインライン要素は無くなるはずだった。 かつてHTML5からは、各要素からブロックレベルとインラインの区分けが無くなると言われていた時期があった。 実際、MDNのサイトでは無くなっている。 参照:Block-level content (ブロックレベル... HTMLmemosWebデザイン
Figmaのカラーパレットプラグインの使い方と、70:25:5の配色法則。 2024.05.16 カラーパレットと色相環。 色相環ベースのカラーパレット。 Color Wheel デザイナーは色彩を適切に選択し、調和のあるカラーパレットを作成することが求められる。 そんなときに便利なのが、Web上で色相環を基にカラーパレットを作れるジェネレーター。 参照:Color Wheel - Color Palette Generator by Figma ... FigmamemosWebデザインデザイン
Googleアナリティクスでの自分のアクセスを除外。【WordPress】 2024.05.10 WordPressの条件分岐でGAのコードを設置。 WordPressの条件分岐で、自分のアクセスを除外。 WordPressの場合。 WordPressに慣れている場合は、IPアドレスを使った除外や、オプトアウトのアドオンよりも設置が簡単。 IPアドレスの場合。 意外と知られていないのかもしれないが、固定IPアドレスを使用していない場合は、日にちの経過やルー... memosWebデザインWordPressアナリティクス
WordPressの不要なメディアファイルを削除する方法。Media Cleaner。 2024.04.26 メディアライブラリの「未添付」検索では追いつかない。 増えていく不要なメディアファイル。 メディアファイルを減らしたい。 WordPressでサイト運営をしていると、ついついと使っていない画像が溜まってしまうことがある。 特に更新頻度が高いサイトや、ブログを運用している場合などは、結構な数のファイルがメディアライブラリ内に含まれていく。 〜中略〜 未... memosWebデザインWordPress
rgb()で透明度も。CSSの新しい色指定と使い方の例。 2024.03.22 rgb()で透明度も指定可能に。 rgb()関数での色指定。 rgb()の新しい書き方。 rgb(r g b) rgb(r g b / a) Red(赤) Green(緑) Blue(青) Red(赤) Green(緑) Blue(青) / Alpha(アルファ) カンマからスペースでの区切りへ。 rgbの値はこれまで通り0〜255。区切りが... CSSmemosWebデザイン
WordPressのトップページがindex.phpでもfront-page.phpでもhome.phpでも問題はない。 2024.03.21 WordPressのトップページのテンプレート。 トップページ用の3つのテンプレートファイル。 トップページにindex.phpを使うのは間違いなの? 会社やチーム、大規模なプロジェクトなどで「共通したルール」がある場合は別として、個人や少人数で制作する場合はindex.phpでも全然構わない。 トップページにfront-page.phpやhome.phpを使用。 ... memosWebデザインWordPress
CSSで縦書き。writing-modeの使い方。効かないときは? 2023.11.27 CSSで縦書き。writing-modeの使い方。 CSSの縦書き方法。 writing-modeの実装。 CSSによる縦書きは簡単で、最低限、以下の指定で実装できる。 サイト全体を縦書きにするのはもちろん、見出しやアクセントとして一部分への指定する際も、下記の記述が基本となる。 CSS .selector { writing-mode: ver... CSSmemosWebデザイン
scroll-snap-typeの使い方。CSSでカルーセル。効かないときは? 2023.06.08 scroll-snap-typeの使い方例。CSSでシンプルなカルーセル。 CSSカルーセル。 ちょっと前まではJavaScriptが必須だった、カルーセルやスナップするスクロール。 いまではもう、CSSだけでも結構いける。 スマホのスワイプにも対応している。 scroll-snap-typeの特徴。 CSSのみ。JavaScriptが不要。 sc... CSSmemosWebデザイン