まめ - まめめも

WordPressの画像縮小プラグイン「EWWW Image Optimizer」の設定方法

WordPressで記事を投稿していくと、自然に使用する画像も多くなっていきますよね。今回は、WordPressのプラグインを使用して画像の重さを軽くする方法を紹介します！

【2022年】Font Awesomeをブログやサイトで使う導入方法とカスタマイズまとめ

Font awesomeの導入から、使い方、応用のアニメーションについてまとめました！＼知りたものを要check！／ font awesomeとはそのため、文字の大きさを変えても粗くなることもなく、SNSアイコンなどのアイコンを簡単に挿入することが可能になります。使い方ブラウザ表示ヘッダーメニューに HOME お問合せ文章の中に「虫めがねのアイコン（）」をクリックしてください見出しやポイントに ○○する方法注目させたい No.1 ○○にご注意くださいブランドアイコンブランドアイコ ...

【初心者】Webアイコン「Font awesome6を使おう」導入方法と使い方

font awesome6では、kit Codeを<head>に挿入していない場合、Webアイコンが「□」で表示されません。その場合は、個人に割り当てられる「Kit Code」を取得して<head>に挿入します。 font awesomeとは『Webアイコン』と呼ばれ、画像ではなく文字列として表示させることができる、無料のツールキットです。 Googleフォントに次ぐ2番に利用率の高いもので、サイト上でよく使われる例としては、ボックスのWEBアイコンやグローバルメニュー、SNSのアイコンに多く ...

「サイトを認知させる！」Googleサーチコンソールにインデックス登録してみる手順

前回の「Googleサーチコンソールに登録・認証」を経て、今持っているサイトやブログを、Googleに認知させていこうと思います！記事を「公開」してブログ上に表示出来たら、インターネット上にも表示されたと思っていませんか？待っているだけでは、中々《検索画面》に表示されません。それはなぜかというと、あなたのサイトや新規記事が、検索エンジンに認知されていないからです。検索に表示されないということは、いくらキーワードで検索をかけても表示されず、Googleだけではなく「一般ユーザー」にも認知されないとい ...

Googleサーチコンソールに初めて登録してみる方法～HTMLタグ・HTMLファイル～

Googleサーチコンソールに初めて登録・認証してみる方法～HTMLタグ・HTMLファイル～

「Googleサーチコンソール（Google Search Console）」とは、Googleが無料提供してくれているインターネットの検索ツールです。作成した記事をいち早くGoogleに伝えることで、検索表示されやすくなるというメリットがあります。何か問題がありインデックス（検索に引っかからない）されていなかった Googleのクローラーにサイト内を巡回してもらえないと、せっかく作成した記事がずっと検索に表示されないという事態を避けるためにも、Googleサーチコンソールにサイトを申請していくのが ...

【2022年最新】「XML Sitemaps」のサイトマップを作って、Googleサーチコンソールに登録する手順

Googleサーチコンソールにサイトマップを登録する手順｜2022年

これから作成しようとしているサイトマップは「XML」のサイトマップで、読者が見える形のサイトマップでなく、クロール（インターネット上のロボット）の為のサイトマップです！＼ XMLのサイトマップを入れる意味／ Googleにいち早く認識してもらいたい ⇒ 検索エンジンで引っかかるようになるサイトマップの更新を設定しておけば、自動で回ってきてくれる効果をより高めるために、WordPressにある無料のプラグイン「XML Sitemaps(旧 Google XML Sitemaps)」に合わせて「Goo ...

【Font Awesome④】Webアイコン同士を重ねて使う・枠で囲う方法と手順

Webアイコンを重ねる・動かす・ホバーする（クラス名：fa-stack）　　 Webアイコンを囲う手順と方法（クラス名：fa-border）を書いていきます！ Webアイコン同士を重ねる重ねて使う方法　　　　わかりやすいように、重ねた色は別途色の設定をしています。アイコンを重ねたい時は"fa-stack"クラス名を使用します。 <span class="fa-stack"> <i class="fa-solid fa-heart fa-stack-2x"></i ...

Font Awesomeを動かしたい！点滅・バウンド・傾き等アニメーションの設定とやり方

【Font Awesome③】動かしたい！点滅・バウンド・傾き・ホバー等アニメーションの設定の方法

Font Awesomeのアイコンを動かしていこう！　ブログやサイトだと、マウスホバーで動きのあるタイプが使いやすいかなと思います。（指またはマウスホバーしてみてください↓）　 Font Awesomeは、アニメーションのように動かすクラスコードを提供してくれています！常に揺れてる注目・目を惹かせたい（SNSアイコン等）注意を引く・注意喚起にホバー時（マウスを当てると）動くと、使い方によっては読者への注目効果も高いので、ぜひ活用してみてください。 Font Awesomeの旧バージョン5、 ...

【Font Awesome②】色やサイズを大きくしたい！ホバー時に色を変更する設定方法

ヘッダーのグローバルメニューに「アイコン（Font Awesome）を設置」する方法から、今回はその設置した「Font Awesome」の色とサイズの変更方法と　　　マウスホバー時に色を変更する方法と手順を書いていこうと思います！ ←マウスを当ててみて WordPressを使用していますが、通常のサイトでも同じように「CSSファイル」や「HTMLコード」で使用できます。コードはコピーしてもらって構いません◎ ＼ Font Awesomeの付け方手順／ Font Awesomeのサイズを変更する方法 ...

【Font Awesome①】ヘッダーのメニュー（グローバルメニュー）にWEBアイコンを設置する方法

今回は、ヘッダーにあるメニュー（※「グローバルメニュー」と呼ばれています）の横に『Font Awesome』のWEBアイコンを設置していこうと思います！通常WordPressでヘッダーメニューを作成する場合は「カテゴリー」や「投稿」「固定ページ」で作成していますが、Font Awesomeを使用する場合は「カスタムリンク」を使用して作成することになります。手順通り進めていけば、設置が可能です！では行ってみよう！ヘッダーメニューの書き換え WordPressダッシュボードより「外観」＞「メニュー」を表 ...

カテゴリ一横にアイコン（サムネイル画像）を付ける方法と手順

今回は、サイドバーのカテゴリ一覧の『カテゴリ前・横』にアイコンを付けて、見やすくしていこうと思います！＼完成イメージ／ AFFINGER6EXを使用しています。AFFINGER5EXでも同様の手順で出来ました。 AFFINGER管理画面で設定「AFFINGER管理」から「全体設定」＞「カテゴリーリンク」をクリックします。「カテゴリーリンク」の設定で、「カテゴリーリンクに簡易デザインを適応」「親カテゴリーリンクにサムネイル画像を表示」にチェックを入れます。これでアフィンガー側の設定は終わりです。 ...

ワードプレスの人気記事を出すプラグイン「WordPress Popular Posts」の表示方法・使い方

＼この記事でわかること／ワードプレスを使用しているブログで、ブログ内の人気記事を自動で表示させる方法ワードプレスのプラグインで、人気記事の表示ができる方法があります。１日の平均閲覧数総閲覧数コメント数過去24時間・１週間・30日間・全期間・カスタムなど細かく設定ができます。人気記事は、サイトに訪れた人の目に留まりやすく、クリックされる率も高まるので、ぜひ導入してみてください！ WordPress Popular Postsのインストール方法「WordPressダッシュボード」から「プラグ ...

ワードプレスの人気記事『WordPress Popular Posts』のテーマ変更で見た目が変えれる！

今回は、人気記事プラグインの見た目のデザインを変更していこうと思います！テーマを変更する項目が増えて《簡単に》人気記事の変更が可能になっています！今回は、テーマそれぞれのビジュアルをまとめてみました。 WordPress Popular Postsとは「WordPress Popular Posts」のインストール方法、設定、使い方はこちらにまとめました！まだインストールが済んでいない方はこちらから読んでみてください。テーマの表示方法 WordPressのダッシュボードから「外観」＞「ウィジット ...

ブログやサイトに使える《商用フリーの写真素材》おすすめ４サイト！

無料で使える素材写真のおすすめをご紹介します！前回イラストでフリー素材のおすすめを紹介しました！今回は、無料で使用できるフリー写真素材のサイトをまとめていこうと思います！ O-DAN(オーダン) 『お洒落な写真』『海外の写真』を求めている人に、ぜひおすすめのフリー素材サイト「O-DAN（オーダン）」です！商用利用可能登録なしクレジット表記不要海外サイトだが、日本語で検索可能ダウンロード制限なし商用利用したい場合は、検索する際に「商用利用可の無料写真素材のみ」にチェックを入れれます。個人的 ...

アフィンガー（AFFINGER）のボタンリンクでA8.netのようなアフィリエイトリンクを貼る方法

アフィンガーはたくさんの『リンク用ボタン』がありますが、A8.netのようなリンクを貼った時にうまくできてない、どうやってリンクを貼っているのか、気になったことはありませんか？太字のテキスト今すぐ申し込む※マイクロコピーを書いてみよう詳しくはコチラもっと詳しく A8.netなどのアフィリエイトコードは、基本的に改変してないけないことが規約になっているため、通常のボタンに上手くリンクを貼ろうとすると、改変することになってしまいます。ということで、今回は『改変無しに』アフィリエイトリンクを、ボタンに挿 ...

「このサイトのカラーコードが知りたい！」そんな時に使えるカラー抽出ツール

このサイトのカラーの色合いが好きなんだけど、カラーコード何使っているのかな？って時のにおすすめのツールのご紹介です！こんな風に思ったことはありませんか？素敵な広告の配色を見たとき、好きな配色のブログやサイトを見たとき、この色とこの色の組み合わせが素敵だなと感じたとき、私は常々思っています。そんな時に便利なのが、カラーコードを抽出してくれるツール！このカラーが知りたい自分のサイトのカラーコードを抽出したい（カスタマイズ中に便利）という人におすすめです。 ※パソコン操作が前提になります。＼方法 ...

押さえておきたい《使いやすいフリーイラスト》のおすすめ６サイト

個人的によく利用する《商用フリー》のフリーイラストをまとめました！今回は、フリーイラスト第1弾！誰でも使いやすくて、ジャンルが豊富なフリーイラスト集です！各サイトの加工・使用方法等は『利用規約』をしっかり確認してください。ちょうどいいイラストサイト名の通り、ちょうどいい塩梅のイラストが取り揃っているフリーイラスト「ちょうどいいイラスト」です。また、各イラスト「カラー」「モノクロ」が選べるので、モノクロでサイトデザインカラーに合わせて後で替えることもできるのが魅力！個人・法人問わず無料リンクフ ...

トップページを作成した時に、新着記事一覧のページリンク(URL)はどうしたら出る？

トップページを固定ページで作成した時に、新着記事一覧のページリンク(URL)の出し方

＼この記事でわかること／トップページをカテゴリー一覧で作成した時に、新着記事が表示されません。その際に新着記事一覧を別ページで作成する方法です！トップページを固定記事で、タブ式やバナー風でカテゴリー別記事一覧を作成した場合に「ふと」思う疑問点。《新着記事一覧の「もっと見るボタン」…URLってどこだ？？》今回は、トップページとは別に「新着記事一覧のみ」を表示するページの作り方を書いていこうと思います！新着記事一覧を作成するまず「固定ページ」で「新規作成」をします。タイトルは表示されないので自 ...

【バナー・タブ・スライド・カテゴリ別】アフィンガー（AFFINGER6/6EX）ブログのトップページを新着記事一覧以外で作成する方法まとめ

＼この記事でわかること／アフィンガー：デフォルトの新着記事の一覧ではなく、作成した記事をトップ画面に表示させる方法当ブログも「トップページ」を固定ページで作成して、差し替えています！デフォルトでは、トップページにずらっと新着記事一覧が並ぶ形式になっていると思います。こういうの↓↓↓ ここから、ユーザーに見やすいトップページを作成して、その作成した記事をどう反映させたらいいのかを書いていこうと思います！トップ記事を作成する方法は３種類！ AFFINGER管理画面で設定固定記事で作成して『AFFI ...