jQueryのコピペでできる閲覧中の記事のカテゴリに色をつけるスニペット
記事を所属させるカテゴリも、一覧でただ置いてあるよりは視覚的に「現在地がどこか？」がわかる方が、親切です。 この記事は、閲覧中の記事のカテゴリに色をつける方法について の内容です。 WordPressを使っていて、記事数 …
プラグイン無しでお気に入りボタンと登録したページ一覧を表示させるスニペット
今やブログでよく見かけるSNSボタンほどではありませんが、ユーザーがそのサイトで「お気に入りページに追加」も、ユーザーファーストで便利な機能です。 いざWordPressで「お気に入り」を実際にしようと思うと、有名なFa …
jQueryを使ってWordPressの子カテゴリーをアコーディオンで表示させるスニペット
ブログで記事が増えてくると、カテゴリーもそれに比例して深くなりがちです。 記事のカテゴライズでスマートフォンサイトのような、ある程度の情報量にしなければいけない時にアコーディオンを用いれば、ユーザーが欲しい情報だけオンデ …
プラグインなしでSNSのシェアボタンを設置するスニペット
今や、ほとんどのブログには標準搭載されているSNSのシェアボタンですが、一部のWordPressテーマでは搭載されておらず、いざ設置しようと思うとプラグイン を入れたりと、面倒だったりします。 この記事は、そんなプラグイ …
CSSで画像にくり抜きのマスクをかける便利なスニペット3選
このCSSのプロパティを使うまでは、画像にマスクをかける時、IllustratorやPhotoshopで画像を都度作成する必要がありましたが、この記事で解説するCSSのプロパティで、粗方の事はCSSだけで実現できるように …
Google 検索オフィスアワー 2021.6.24
6月24日にGoogle検索オフィスアワーが開催されました。 今回は、Search Console Insightsの公開のお知らせをはじめ、インデックス関連についての対策など、盛り沢山の内容です。 目次Googleから …
rel属性noopener・noreferrer・noopener・sponsoredの効果と役割
リンクのaタグで使われる rel=”○○”の表記がありますが、これはrel属性と呼ばれ、これはリンク先となるリソースの位置づけを定義する記述です。 この記述によって、自分のサイトの評価を直接的に上げるSEO対策にはなりま …
プラグイン無しでWordPressのテーマカスタマイズからYouTubeの動画を設置するスニペット
YouTubeの埋め込みは、公式サイトの「共有」から簡単にiframeでの埋め込みができます。ですが、動画の差し替えの時など、更新の場合に都度記述内容をまるまる変えるのは不便です。 この記事はそんな時、ソースをいじらずに …
JavaScriptのScrollRevealを使ったスクロールアニメーション
せっかく、ページに訪れてくれたユーザーに楽しく最後まで見てもらえるよう、アニメーションを使います。 このアニメーションをつける場合jQueryをよく使いますが、JavaScriptのScrollRevealは、必要な記述 …
HTMLとCSSのコピペでできる3段階のステップチャートのデザイン
手順の流れを示す時に使うステップのデザインは、画像で作ってしまうことがありますが、更新の度のメンテナンスが結構面倒です。 最近はCSSのflex と、擬似要素のbeforeとafterを使えば、結構簡単です。 今回の記事 …
