Quantcast
Channel: インターネット | ゆうそうとITブログ

Google「Mobile-first indexing enabled for…」というメール、その意味と対策

$
0
0

お客様からGoogleから「Mobile-first indexing enabled for…」というメールが来たんですけど、何かする必要ありますか?という問合せがありました。あー、いよいよGoogleがモバイルファーストインデックスを始めたんだなーと思いました。調べてみたら自分のところにも同様のメールが来ていました。このメールが来たときの対策、メールの内容などについて書いてみます。

「Mobile-first indexing enabled for…」というメールが来たら、どうすればいいの?

まずは手っ取り早く、このメールが来たらどうすればいいの?ということですが特に何かする必要はありません

しかし、どうしてこのメールがきたのか、このメールが何を言っているのか、時間があればこれやっといた方がいいのでは?ということについて以下に調べたことを書いていきたいと思います。

どうしてこのメールが来たのでしょうか?

どうしてこのメールが来たのでしょうか?ということですが、Google Search Console にWEBサイトを登録してある場合に、Google Search Consoleの管理者宛にこのメールが来ました。ただし、条件があるようで複数のWEBサイトを登録してあってもその一部のWEBサイトについてだけしかお知らせは来ないようです。

その条件とは、「モバイルファーストインデックスが使用可能になったWEBサイト」についてだけのようです。ということで、このメールが来たWEBサイトは「モバイルでの表示が最適化されている」という判断をGoogleがしてくれたということになり、どちらかというと良い知らせということになります。

モバイルファーストインデックスとは?

今までPCを基準として、Googleの検索結果ページを表示していたものを「モバイルでの表示を検索に優先的に利用する」というものです。

今までは、PC表示だけがちゃんとできていて、モバイルで見たときに「PCのページが小さくなって表示される」というようなページでもPCを基準としてGoogleの検索結果が出ていれば、問題はありませんでした。

しかし今後は「モバイルでの表示が検索に優先的に利用される」ので、モバイルでもちゃんと表示されるようにしておいたほうがいい、ということになります。

モバイルサイトが存在する場合、レスポンシブデザインにより、PCとモバイルサイトが同じ内容で最適化されて表示されている場合は大丈夫ですが、PCサイトとモバイルサイトのコンテンツ内容が異なり、モバイルサイトの方が情報が少ない場合はモバイルサイトの情報も充実させておくべきということになります。

「Mobile-first indexing enabled for…」という題名のメールの内容

来たメールはこんな感じでした。

タイトル:

Mobile-first indexing enabled for https://usortblog.com/
※ https://usortblog.com/でのモバイルファーストインデックスが使用可能になりました

内容:

Google Search Console
Mobile-first indexing enabled for https://usortblog.com/

https://usortblog.com/ の所有者様

モバイル ファースト インデックスが有効になっているため、スマートフォン用 Googlebot のログでサイトのトラフィックが増加している可能性があります。また、モバイル版のコンテンツから Google 検索結果のスニペットが生成されるようになることもあります。

背景: モバイル ファースト インデックスは、インデックス登録とランキングの決定についてモバイル版のコンテンツを使用することで、ユーザー(主にモバイル ユーザー)が探している情報を見つけやすくするための仕様です。弊社のクロール、インデックス登録、ランキングのシステムは、これまでは PC 版のサイトのコンテンツを使用していたため、PC 版とモバイル版でコンテンツが異なる場合、モバイル検索に不都合が生じることがあります。弊社の分析によると、お客様のサイトのモバイル版と PC 版は類似しています。

詳細:
•インデックス カバレッジについては、インデックス ステータス レポートをご利用ください。
•インプレッション数、クリック数、サイトのデザインについては、検索パフォーマンス レポートをご利用ください。
•ご不明な点がありましたら、ウェブマスター フォーラムにご投稿ください。その際は、メッセージ タイプ [WNC-99999999] である旨をお知らせください。または Google の一般公開イベントにお立ち寄りください。

この内容をいる限りは、該当のWEBサイトでモバイルファーストインデックスが有効になったので、サイトのアクセス数が増えるかもしれませんよ ということをお知らせしてくれている、もののようです。

Search Consoleに登録している別のサイトは来ていないのはなぜ?

同じくSerarch Consoleに登録してある別のサイトはレスポンシブにしてあるのに、なぜかこのメールが来ていませんでした。

ということは何かの問題があるのかもしれません。Search Consoleのダッシュボード>メッセージ になにか、サイトについてのお知らせが来ていないか、見てみると良いと思います。他に、後ほど書きますがモバイルフレンドリーテストなどからも、サイトの問題がわかりますので参考にしてみて下さい。

時間があればこれやっといた方がいいのでは?ということ

せっかくの機会ですので、モバイルでの自分のWEBサイトについて調べておくのもいいかと思います。時間があればやっておいた方がいいかなと思うことについて書きます。

モバイルフレンドリーテストをしてみる

Googleがモバイルフレンドリーテストというものを提供しています。Google自身がテストを行っているので、Googleでの評価とにたものになるのではと思います。

少し前、ネットのニュースで「Googleの検索結果にモバイル表示対応が関係するようになるらしい」という情報をいくつか見ました。たとえば「...

こちらに詳しい記事を書いてありますのでご覧下さい。

今時点でこのブログのモバイルフレンドリーテストを行った結果はこんな感じでした。

このように「このページはモバイルフレンドリーです」と表示されましたのでとりあえずは一安心です。

ページの読み込みに関する問題というところをクリックして見ました。

ページが部分的に読み込まれましたということで、詳細についてはこのページの下の方に表示されています。これから詳細を見て、対応できそうなところは対応し、より良い結果になるようにしたいと思います。

このWEBサイトの場合は6 個のページリソースを読み込めませんでしたということでしたが、色々なページを見ているとこの数値がとても多いものもあります。これはちょっと問題があるので、解決しないともしかするとこれが原因で「Mobile-first indexing enabled for…」というメールが来ていないのかもしれません。エラーは少ないに越したことはないので、このあたりを参考に見直したいと思います。

Google PageSpeed Insightsでページの読み込み速度をチェックする

PCでもそうですがモバイル表示にはページの読み込み速度が速いということがより重要になってきます。ということで、WEBサイトの読み込み速度をチェックしておき、問題があれば対応すると良いと思います。

Webサイトを作ったときにGoogleでいかに上位に表示されるか、ということが気になる思います。Webページの表示をする際の速度が遅いと...

こちらの記事でご紹介している、PageSpeed InsightsでWEBサイトの読み込み速度を確認しておきましょう。

このサイトの場合は、

こんな感じに、モバイル、PCともにMediumの判定になりました。できればもう少しアップして読み込み速度を上げたいと思いました。

このページの

最適化についての提案には、スピードを上げるためのヒントが書かれています。修正方法を表示をクリックすると、修正方法が表示されますので可能な対策があればやっておくと良いと思います。

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。


XSERVERで独自ドメインのメールアドレスを作り、Gmailに「転送」して送受信する方法

$
0
0

Photo by Stephan Henning on Unsplash

以前このブログで「Gmailで通常のメールを使って送受信する方法ーXSERVER編」について書きました。このときは気づいていなかったのですが、他の方法でもっと手軽にXSERVERで作ったメールアドレスを送受信する方法がありましたので、それについて書きます。

Gmailで「メールソフトのように」メールを送受信する方法は、メールの受信が若干遅い

以前書いた記事の

みなさんはメーラー、何を使っていますか?私はここのところずっとGmailを使っています。理由としては、PCとiPhoneのどちらでも使え...

この方法で、ずっとメールの送受信をしていました。この方法でメールを送受信していて一つ気になったのが「メールを送ってもらってすぐに見ても、メールが届いていないことが多い(しばらく経つと届いている)」ということでした。

改めて考えてみるとこの方法は、PCなどのメールソフトと同じように、WEBのGmailをメールソフトとして使う方法でした。WEBのGmailソフトはGmailのメールサーバーのチェックは頻繁に行いますがそれ以外のメールサーバーのチェックはGmailほど頻繁ではなく、おおよそ数分~50分に1回チェックするという感じでした。

この方法を使っていて、それでもすぐにメールを受け取りたい場合は、Gmailの設定

アカウントとインポートをクリックして、

他のアカウントでメールを確認:のところにある、受け取りたいメールアドレスの下のメールを今すぐ確認するをクリックすると、指定したメールサーバーの受信のチェックを行うので受け取ることができます。

しばらくの間これで受け取っていたのですが、やはり面倒だなと思ったのとiPhoneでの受信ではこの操作ができないことでなんとかならないかなと思っていました。

XSERVERで作った独自ドメインのメールアドレスをGmailに転送して、独自ドメインのメールアドレスから返信する

ある日、こうすればいいということがわかりました。XSERVERに作った独自ドメインのメールアドレスは自分のgmailアドレス宛に転送し、返信するときにそのメールアドレスから返信できれば受信も速くなるし、返信もそのメールアドレスから行えるので問題ありません。

XSERVERで作った独自ドメインのメールアドレスをGmailに転送する方法

XSERVERでメールアドレスを作って転送設定をします。

管理画面から、メール>メールアカウント設定をクリック

メールアドレスを作るドメインをクリック

メールアカウント追加をクリック

メールアドレスやパスワードを入力して(後で必要ですのでパスワードはメモしておいて下さい)、メールアカウントの作成(確認)をクリック

メールアカウントの作成(確定)をクリック

メールアカウント一覧をクリック

今作ったメールアドレスの行にある転送をクリック

転送先のgmailアドレスを入力して、転送設定の追加をクリック

この画面が表示され、独自ドメインのメールアドレス追加gmailアドレスへの転送設定が終わりました。

あとで設定に必要となるので、

メールソフト設定タブをクリックして

赤矢印の送信メール(SMTP)サーバーをメモしておいて下さい。

試しに異なるメールアドレスから今作ったメールアドレスにメールを送ってみます。

転送設定をした、gmailあてに、メールはちゃんと届きました!

中を見るとあて先は今新しく作ったメールアドレスになっています。しかし、このメールに返信をすると

このように、受信したメールアドレスとは違うメールアドレスからの返信になってしまいます。
このままだと返信をもらった人が混乱すると思いますので、返信時も今作ったメールアドレスから
送れるようにします。

WEBのgmailで転送受信した独自ドメインメールからの返信を独自ドメインメールからにする設定

返信時に独自ドメインメールからの返信となるように設定します。


gmailの設定をクリック

アカウントとインポートをクリックして、

名前:という項目の一番下で、2箇所のチェックとセットをします。

まずはがこの画面のようにメールを受信したアドレスから返信するになるようにして下さい。

次に他のメールアドレスを追加をクリックすると

この画面が表示されます。

名前:メール送信時に表示したい名前
メールアドレス:作成したメールアドレス

このように入力して次のステップをクリック

SMTPサーバー経由でメールを送信しますの画面が表示されます。

SMTP サーバー : 先ほどメモしておいた送信メール(SMTP)サーバー
ポート465
ユーザー名:メールアドレス
パスワード:メールアドレスのパスワード

を入力してアカウントを追加をクリック

この画面が表示されます。

メールを確認します。

Gmail からのご確認というメールが届いていますので、

まず下記のリンクをクリックしてリクエストを承認してください。の下にあるURLをクリックします。

この画面が表示されるので、確認をクリック

この画面が表示され、送信の設定も完了しました。

試しにもう一度メールを受けて、返信してみます。

このように、あて先のメールアドレスからメールが返信できるようになりました。

おまけ:gmailに転送したときはフィルタ分けしてラベルを付けておくと便利

このように、別のメールアドレスをgmailで受け取るときはフィルタ分けしてラベルを付けておくと便利です。

gmailの設定をクリック

フィルタとブロック中のアドレスをクリック

ページの一番下にある新しいフィルタを作成をクリック

Toに作成したメールアドレスを入力して、フィルタを作成をクリック

受信トレイをスキップ(アーカイブする)にチェック<これは好みですが、私はラベル分けした場合は受信トレイにない方が分かりやすいのでチェックしています

ラベルを付けるにチェックをして、新しいラベルをクリック

新しいラベル名を入力して下さいにメールアドレスを入力(分かりやすい名前なら何でも)
作成をクリック

既にメールを受け取っていたので、3 通の一致するメッセージにもフィルタを適用する。にチェックを入れて

フィルタを作成をクリック

これで

新しいラベルが表示されて、

今まで受け取った、このメールアドレス宛のメールがラベル分けされました。

この設定以降、新しく届いたメールは

このようにラベル分けされますので、分かりやすくないます。

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

無料のMicrosoft「Open Live Writer」でWordPressの投稿をする、という方法もあります!

$
0
0

先日のWordPress5.0アップデートで、標準のエディターがGutenberg(グーテンベルグ)となりました。Classic Editorプラグインを入れれば、今まで通り使えるのでいきなり困るようなことはありませんがこのプラグインも3年間という猶予の中で使うことになっています。新しいエディターGutenbergを使うか、Classic Editorで書いていくか、、と考えた場合にもう一つの選択肢があります。Windows限定なのですがMicrosoft「Open Live Writer」というソフトならローカルのPCでブログを書いてアップすることができます。

Microsoft「Open Live Writer」のインストールと設定

Microsoft「Open Live Writer」のインストールをします。

スタートキーをクリックして store と入力すると、このMicrosoft Storeが見つかりますのでクリック

検索テキストボックスで open live と入力するとOpen Live Writerが表示されるので、クリック

入手をクリック

Microsoft Accountの入力を促された場合は、画面に従ってログインします

※ このあと複数入力画面がある場合もあります

ログインが終わるとダウンロードが開始されます。

ダウンロードが終わると、この画面になるので起動をクリック

Nextをクリック

WordPressにチェックが入っていることを確認し、クリック

ホームページのurl、ログインユーザー名、パスワードを入力し、次回からパスワードの入力をしないようにしたい場合はチェックボックスにチェックを付けます。Nextをクリック

この画面が表示されます。

テーマをダウンロードするか?ということを聞かれましたので はい をクリックしました。

情報が正しければここでWEBサイトのタイトルが入っています。Finishをクリック

これで、インストールと設定が完了しました。

Open Live WriterでWordPressに下書き投稿してみる

Open Live WriterでWordPressに下書き投稿してみましょう。

タイトル、画像、文章、見出しなどを入力する

インストールと設定が終わると

このように編集画面が表示されます。

Enter a post titleという部分に、タイトルを入力

Pictureをクリックして

From your computerをクリックすると、PCにある画像を選ぶことができます。

画像が表示されます。画像は

クリックするとハンドルが表示されるので、ハンドルを引っ張って大きさを

このように変えることもできます。

画像の下に文章を入れ、見出し用の文字も入れます。見出しにするには、

見出しにしたい部分を選択して、

上部にあるHTML stylesから、

指定したい見出し(この場合はH2)をクリックします

するとこのように見出しになりました。

下書き投稿してみる

だいたいできたので、下書き投稿してみたいと思います。

画面の上部にあるPost draft to blogをクリック

送信中の画面になります。この画面が消えると送信が終わったことになります。

WEBサイトの

ダッシュボード>投稿を見てみます。

先ほどローカルPCで作った投稿が一覧に表示されています。クリックすると

このように、Open Live Writerで作ったとおりにアップロードされていました!

投稿した内容を修正してみる

今投稿した内容を修正してみます。

まずは、カテゴリーを入れるのを忘れていたので指定します。

Set categoriesをクリックすると、WEBサイトで作ってあるカテゴリーが表示されますので

カテゴリーをチェックしました。

次にタイトルを

このように修正しました。

画面の上部にあるPost draft to blogをクリック

WEBサイトで確認すると

タイトルが修正され、

カテゴリーもチェックされていました。

画像は大きさを数字で指定したり、切り取ったりすることもできます

Open Live Writerでは画像の大きさを数字で指定したり、切り取ったりすることもできます。

画像をクリックすると

Cropや画像の大きさを指定する部分が表示されます。

横幅を1000にしてみました。

画像の上下が要らないと思うので、切り取りたいです。

Cropをクリック

このように切り取りたい部分を指定するハンドルが表示されるので

切り取りたい範囲を指定してから、OKをクリック

画像の編集もOpen Live Writerでできるのは便利だと思います。

WEBで修正したものでも編集できる

例えばWEBのダッシュボードで編集したものでも、Open Live Writerで編集ができます。

WEBで

タイトルをこのように修正して、下書きとして保存したとします。

Open Live Writerファイル>Open recent postをクリックすると、このソフトで作った投稿のタイトルが2つ表示されます。このときタイトルは変わっていないのですが、クリックすると

WEBからデータを持ってくるので

このように、WEBで変更したものが表示されます!

その他、PCで画像を右クリックしてコピーしたものをOpen Live Writerに貼り付け、もできますので作業が効率的に進みますね!

まとめ:WordPressの投稿をOpen Live Writerで書くというのはあり!ですね

このソフトのことはお客さんから聞いてはいたのですが、自分ではWordPressのテキストエディタで書き慣れていたため試してみようとは思っていませんでした。

WordPressが5.0になり、将来的にテキストエディタで書いていくということがなかなか難しいということを感じました。かといって今すぐにGutenbergに慣れるというのも、、時間がかかりそうと思っています。そこでこのOpen Live Writerを使ってみたところ、なにかとても簡単に使えてしまい「あれ?これはありなんだな~」と思いました。

なんと言ってもMicrosoftの出しているエディターなので安心感もあります。

また、ローカルのソフトなのでネットにつながっていない状況でもブログを書くことができます。

複数のWordPressサイトを登録して、このOpen Live Writerから投稿することができます。

うーん、いいことだらけな気がしてきました(^^)/

例えばGutenbergがデフォルトの状態でもこのOpen Live Writerで投稿をpostすることも可能です。その場合はClassic Editorで書いたときと同じようにClassic Blockという形で保存されます。

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

1000以上のフレームから、 商用フリーのはめこみ合成画像を 作れるサービス:Mockup.Photos

$
0
0

ホームページのスクリーンショットや、画像を好きなフレームにはめこみ合成してくれるサービスを過去にもご紹介しました。今回1000以上のフレームからはめこみ合成画像を作れるサービス「Mockup Photos」を見つけました。フレームが沢山あってとても面白い画像ができるので、ご紹介します。

1000以上のフレームから商用フリーの画像を合成できる Mockup Photos

Mockup Photos のWEBサイトはこちらになります。

https://mockup.photos/

こちらのサービスの特徴としてはフレームが1000以上!無料で使えるフレームが多い!というところです。

フレームの種類も多岐にわたっていてかなり楽しいです。

商用フリーかどうか問い合わせてみました

Mockup Photosの利用が商用フリーかどうかがはっきりとはわからなかったのでメールで問い合わせてみました。

Mika

I am excited to find this website It’s cool.Thanks.

I have a question.

Can I use to commercial website a image file that I make a image file with my photograph using this site?

このウェブサイトを発見してとても興奮しています。クールですね、ありがとうございます。

一つ質問があります。

このサイトを使って自分の画像と作った画像ファイルは商用のウェブサイトで使ってもよいですか?

すぐに返信が来ました。

Hello Mika,

Thanks for your kind words!

Yes, you can use the images in commercial projects as well.

Best,
Morten

ハロー・ミカ、

あなたのような言葉をありがとう!

はい。商用プロジェクトでも画像を使用できます。

ベスト、
モルテン

ということだそうです(^^)/。商用フリーということで安心して使えますね。

フレームの種類はPCだけでなく印刷物ようなどたくさんあります

フレームの種類がたくさんあり、

パソコン、タブレット、スマートフォンだけでなくデジタルサイネージへのはめ込みなどもできます。

種類としては、メニューから選べて

Digital:デジタル機器

Print:印刷物などのはめ込み

などのカテゴリーからフレームを選ぶことができます。

ピンク色の FREE というボタン(赤枠で囲ってみました)が表示されている画像が無料で利用できる素材です。かなり多くの種類の素材が使えます。

はめ込み合成画像の作り方はとても簡単!

はめ込み合成画像の作り方はとても簡単でした!

一覧を見て、使いたいはめ込み画像の上でクリックします。

選んだ画像のページが表示されるので IMAGE HERE という緑色の部分をクリックすると

Upload Image : 画像をアップロード
Take screenshot from URL:URLからWEBサイトのスクリーンショットを撮る

このように表示されて、2つの方法が選べることがわかります。

URLからスクリーンショットをはめ込む

Take screenshot from URLをクリックします

URLを入力して Take sceenshot をクリック

少し待つと、

このようにURLからスクリーンショットを撮ってはめ込んでくれました

同様に、タブレットとスマートフォンにURLから指定してみます。

こんな感じにPC、タブレット、スマートフォンで表示した状態のこのWEBサイトのはめ込み画像が作れました。

この画像をダウンロードしたいと思います。

画像の右下にある Download now というボタンをクリック

おっと!無料で利用するには登録しないと使えないようなので、Facebookもしくは下の欄に名前とemailパスワードを入れてサインアップします。
※ 一度サインアップすればダウンロードボタンを押しただけでダウンロードできるようになります

サインアップした後に再度

Download nowをクリックするとダウンロードすることができるようになります。
※場合によって、ログインする前の入力がきえてしまってるかも…私の場合は消えてしまったのでやり直しました(>_<)

このような画面が表示され、ダウンロードを待ちます。

ダウンロードが終わるとどこに保存するか聞かれるので分かりやすい場所に名前を付けて保存します。

このようなファイルがダウンロードできました。解像度も3964×2633ピクセルとなんにでも使えそうな大きさです!

画像をアップロードしてはめ込む

PCにある画像をアップロードしてはめ込む方法をしてみます。

Print:印刷物などのはめ込み からなにか適当なものを見つけてクリックします。

画像には 200x85inch とあります。PCでこの縦横比の大きさの画像を作って、アップロードすると良さそうです。

PCで1000x425ピクセルの画像を作りました。

画像をクリックして、Upload Imageをクリックし、作った画像を選びます。

このように看板に作った画像をはめ込むことが出来ました!

まとめ:いろいろなフレームがあってとても楽しかったです

Mockup Photos は沢山のフレームがあって、色々当てはめるのがとても楽しかったです。

https://mockup.photos/pixabay/901355/rustic-scene-of-brown-a5-paper

Rustic scene of brown A5 paper という布素材っぽいフレームにアップすると、

普通の画像をこんな布っぽい感じに合成してくれました!面白いです!

商用フリーということなので色々な用途に使えそうですね。

おまけ:過去にご紹介したはめ込み合成画像のサービス

過去にご紹介したはめこみ合成画像のサービスは以下の2つです。

WordPressを触り始めた当初によつばデザインの後藤さんの指導を受ける機会があり、その後もフィードなどで有益な情報をいただいています...
私の周りでひそかにブームになっているSimplicityというWordPressのテーマの作者さんのblog「寝ログ | 寝ながら出来る...

自分のメールアドレスが迷惑メールに振り分けられていた件の原因と対策

$
0
0

ホームページのお問い合わせにContact Form 7を入れています。たまにフォームの内容を変更したときなど、テストメールを自分宛に送ったりするのですが「あれ?なぜか届かない???」ということがありました。結論から言うと、なんと「迷惑メール」にお問い合わせメールが届いていました。お問い合わせメールはとても大切なものなのになぜこんなことが…!と思ったら、スパムメールに対して行った自分の行為が原因だったということに気づきました。今回はそのことについて書いてみます。

スパムメールのせいで自分のメールアドレスをスパム判定してしまった、その理由

日々送られてくるスパムメール。特にお問い合わせから来るメールは「おっ!」と思ってすぐにお返事を…と思うのにその中身がスパムメールだとがっかりしますよね。

こんな感じのメールがよく届きます。ついかっとなって、

この「迷惑メールを報告」ボタンを押してしまうこともあるのですが、これはやってはならないことでした(^_^;)。通常のスパムメールであれば「迷惑メールを報告」ボタンを押して、今後はなるべく迷惑メールに振り分けられるようにするのは良いのですが、よく考えるとこのメールの送信元メールアドレスは自分のメールアドレスにしています。

これには深い理由があって、詳しくは

サイトのドメインに属していないメールアドレスが送信元に設定されている。

にあるように、

メールタブの送信元項目に指定された値が、正しい形式のメールボックスではあるものの、そのメールアドレスがウェブサイトと同じドメインに属していない、という場合にこのタイプのエラーが表示されます。

というエラーを避けるために、フォームの送信元をそのWEBサイトに属するメールアドレスにしているためです。

つまり https://usort.jp のWEBサイトに置いてあるContact Form 7のメール設定で差出人はxxxxx@usort.jpというようなメールアドレスにしています。

そのため、今回のように完全にスパムメールだと思っても、差出人は自分が使っているメールアドレスであるために、「迷惑メールを報告」ボタンを押してしまうと

自分のメールアドレスをスパム判定する。その後「迷惑メール」に入る可能性がある

ということになってしまいます。

普通のメールなら迷惑メールに入れるのは大丈夫。。。

普通のメール、つまり送信者が迷惑メールを送ってくるメールアドレスだった場合は迷惑メールに入れることは大丈夫、というかそうして置いた方がいいと思います。不要なメールが受信箱に入らなくなるからです。

迷惑メールに入ると、普通に検索しても出てこない

「迷惑メール」に入ると普通に検索しても出てきません。これが第2の問題です。

来ているはずだけど見えてないメールを探すとき、Gmailの検索機能を使うと思います。

迷惑メールに入ってしまうと、こんな風にメールアドレスや件名を入力して検索しても「届いているはずのメールが見つからない」ことになります。赤枠で囲ったところをよく見ると

[ゴミ箱]または[迷惑メール]内のメールが検索条件に一致しています。

メールを表示しますというリンクををクリックすれば表示させることはできますが、検索結果がないということに焦っているので、なかなか気づきません。その結果「やっぱり届いていない!」ということで焦ってしまいます。迷惑メールとなったメールはこのリンクをクリックするかあるいは、迷惑メールをクリックして、上部の

in:spamのあとに、検索したいメールアドレスや件名を入力すれば迷惑メール内を検索することが出来ます。もちろん検索窓にin:spamと入力しても同じように検索できます。

というように、一度迷惑メールとなってしまうと通常見ている範囲にメールが見当たらなくなり、かなり焦ってしまいます。

そもそも「迷惑メール」自体が見えにくい、ということ

そもそも「迷惑メール」というラベルって通常は表示されていません。Gmail画面の

左側にラベルが並んでいますがその一番下のもっと見るをクリック

することでようやく見えてきます。たしかに通常は見る必要もない迷惑メールなので、通常はこの状態の方が快適なのですが、そのためになかなか気づきにくいということになります。

迷惑メールになってしまったメールアドレスを「迷惑メールでない」状態にする

ということで、大事な自分のメールアドレスを迷惑メールにしてしまった場合は「迷惑メールでない」状態にする必要があります。

迷惑メールに入っている、自分のメールアドレスからのメールを開くとメールの上部に

このメールが[迷惑メール]に振り分けられた理由 あなたは以前 xxxx@usort.jpからのメールに迷惑メールのマークを付けました。

と、因果応報的な、、メッセージが書いてありました。うーん、確かにしました。。。これを回復させるにはここにある迷惑メールでないことを報告をクリックします。

これで、自分のメールアドレスがスパムに振り分けられないようになる、と思います。すぐに回復するかどうかは不明なので、一度こうなってしまった場合はしばらくの間は迷惑メールを検索してみるといいかなと思います。

迷惑メールは30日で消えてしまう!

また、迷惑メール

[迷惑メール] のメールは、30 日後に自動的に削除されます。迷惑メールをすべて削除 とあるように30日後には自動的に削除されます。通常は迷惑なメールなので問題ないのですが、自分宛の大事なメールがここに振り分けられると30日後には消えてしまうので困ったことになると思います。

自分は大丈夫!と思っても一度迷惑メールを検索してみましょう

まさか自分の行いによって、自分のメールアドレスをスパム判定してしまっていたとは、と思いました。まさか、自分は大丈夫!と思っても一度迷惑メールで自分が使っているメールアドレスを検索して、大事なメールが迷惑メールになっていないかどうかを確認してみましょう。

そもそもスパムがくるのが困る!その対策は

最近スパムが多くなってきて困っています。以前GoogleのreCHAPTCHA v2についてブログを書いたのですが、Contact Form 7のアップデートで、reCHAPTCHA v3でないと使えなくなってしまい、外したままでした。スパムが多すぎることが根本の原因なのでやはりreCHAPTCHA v3を入れようと思います。それについてはまた別途ブログで書くかもしれませんが、Contact Form 7のページにもやり方が書いてありますので、こちらも参考にしてみて下さい。

Contact Form 7 reCAPTCHA (v3)

mailcatcherを使うときのプラグインが変更になりました!

$
0
0

xamppやmampなどを使って、ローカルPCにWEBサイト環境を構築する場合に「メール送信テストはどうしよう?」という問題がおこります。以前 mailcatcher を使ってローカル環境のWebでメール送信テストをする という記事で、そういう場合の方法について書いたのですがそのときに使えていたプラグインが現在は利用不可となってしまったようでした。ということで別のプラグインを使ってメールのテストを行えるようにしたのでそれについて書きます。

mailcatcherを使ってWordPressからのメールをすべて受け取れるようにする

以前書いた記事はこちらになります。

Webサイトを作っているとき、Webサーバーに直接アップするのではなく、PCにXAMPPやMAMPなどでWebの環境を作ってそこで開発を...

この記事ではWordPressでmailcatcherを使うためにプラグイン Mailcatcher for WordPress を使いました。

最近になってまたこのプラグインを使おうとしたら、

このようにガイドライン違反ということで利用が不可能になってしまっていました。

プラグイン WP Mail SMTP by WPForms を使ってmailcatcherでWordPressからのメールを受け取れるようにする

ということで、検索したところWP Mail SMTP by WPFormsというプラグインを使ってmailcatcherでWordPressからのメールを受け取れるようにできることがわかりました。

インストールは以下の通りです

ダッシュボード プラグイン>新規追加 をクリック

WP Mail SMTPと入力すると、

 

このプラグインが見つかりますので、今すぐインストールをクリック

有効化をクリック。これでインストールが終了です。

WP Mail SMTP by WPFormsを設定する

WP Mail SMTP by WPFormsの設定をします。

ダッシュボード 設定>WP Mail SMTP をクリック

このような設定画面になります。

設定は

送信元アドレス:任意のメールアドレス
送信者名:任意の名前

を入力。

メーラーは Other SMTP を選びます

OTHER SMTPで、

SMTPホスト:127.0.0.1
SMTPポート:1025
Auto TLS:ON

にします。これで

Save Settingsをクリックすれば設定は終了です。

テストメールを送ってみる

設定が正しくできたかどうか、テストメールを送ってみます。
※ テストメールを受け取りにはあらかじめmailcatcherを立ち上げておく必要があります。mailcatcherの立ち上げ方法は、

Webサイトを作っているとき、Webサーバーに直接アップするのではなく、PCにXAMPPやMAMPなどでWebの環境を作ってそこで開発を...
をご覧下さい。

Email Testをクリック

Send Toに送りたいメールアドレスを入れます(実際にはmailcatcherで受け取りますが)。

Send Emailをクリック

mailcatcherを立ち上げ忘れていると、

このようなエラーになりますが、立ち上げてからSend Emailをクリックすれば、

このように表示されます。

ブラウザで http://127.0.0.1:1080 を開くと

このようにメールが届いていることがわかり、クリックすると、

メールがちゃんと届いたことがわかります。

まとめ:今回自分がつかおうとするまで気づきませんでした

今回久しぶりにMailcatcherを使ってローカルにあるWEBからのメール送信テストをしようとするまで、以前記事でご紹介していたプラグインが使えなくなっていたことに気づきませんでした。

ということで焦りましたが代替手段が見つかって良かったです。

そもそもmailcatcherをインストールするのはとても大変なのですが、今回方法を模索しているときにmailtrapというサービスで、mailcatcherの代替ができるらしいということがわかりました。

まだ試してはいないので、mailtrapについては「ネットサービス」「登録すれば使える」「mailcatcherに比べてインストールとか必要ない」ということがうっすらわかっている程度です。実際に試して使えそうでしたら、これについてもブログに書こうと思います。

GoogleのPageSpeed Insightsでテーマ別に読み込み速度を測ってみた

$
0
0

先日新しいWEBサイトを作ろうとしてふと、WordPressをインストールした初期状態での読み込みスピードってどのぐらいなんだろう?と思いました。測ってみると思った通りとても速かったのですが、そうなるとこんどは「テーマを変えたらどのぐらい変わるんだろう?」と思って実験してみましたのでそれらについて書いてみます。

WEBサイトの読み込み速度を測る Google PageSpeed Insights について

読み込みスピードを測ったツールは GoogleのPageSpeed Insights

です。こちらにURLを入力して分析をクリックするだけで、モバイル、PCでのページ読み込み速度を測ることができます。

WordPressをインストールした直後、テーマがtwentynineteenの状態での速度

WordPressをインストールした直後はテーマがtwentynineteenです。この状態での速度を測ってみました。

表示はこんな感じで、

シンプルです。

Googleの PageSpeed Insights へ行って、

速度を測りたいWEBサイトのURLを入力して分析をクリックします。分析が終わると

このようにまずモバイルでの速度が表示されます。99! こんな数字は初めて見ました。コンテンツがないということと、WordPressの最新デフォルトテーマということでとてつもなく速いスピードです。

上部にあるパソコンをクリックすると

このようにパソコンでの速度が表示されます。こちらも99!ということでやはり、とても速いことがわかります。

この分析はコンテンツが変わらなくてもクリックするたびに多少の数値が変化することがありますが、大きく変わることはないので「最新デフォルトテーマはとても速い」ということがわかりました。

テーマがLightningの状態での速度

次に、日本でとても多く使われているテーマLightningで速度を測ってみます。

Lightningにするとデフォルトで

このようになります。スライダーに画像が2つ入ったり、Font awesomeによるアイコンが表示されています。この時点で若干は速度が落ちるということが予測されます。

分析の結果は


モバイル90、パソコン96とコンテンツが増えたことを考えればWordPressのデフォルトテーマと遜色のない速さと思います。

テーマがCocoonの状態での速度

ブロガーやアフィリエイターに大人気のテーマSimplicity(現在の当サイトもこちらのテーマを利用させていただいています)の後継テーマ、Cocoonで速度を見てみます。

表示はこんな感じで、

シンプルですが、今風のテーマになっています。

分析の結果は、


モバイル97、パソコン99とWordPressのデフォルトテーマとほぼ互角の速さでした。

結論:デフォルトテーマは速い。人気のLightningやCocoonも速い!

ということで結論として、デフォルトテーマは速い。人気のLightningやCocoonも速い!ということがわかりました。

今は何もコンテンツがない状態ですのでもちろんコンテンツを載せていけば速度は落ちてきます。速ければ速いほどいいですが、かといってWEBサイトに来た人に役立つコンテンツはあればあるほどいい(?)ので、速さだけにこだわるのはおかしいかなと思います。

しかし、テーマによっては、同じコンテンツ量で


モバイル69、パソコン90となるものもありますので少しでも速く表示させたいと思われたらテーマ自体がスピードの速いものをお選びになるといいと思います!

速度が遅いときは、情報を見て対処しよう

URLを入力すればどのWEBサイトでも速度を測ることができるのできっとこのブログの速度も測ってみたいかと思います。ということで、このブログの速度ですが、


モバイル4、パソコン25という、、がっくりと膝を落としたくなるような遅さです。
※ 思い立って、Simplicity2の最新にしてみて モバイル5、パソコン26には上がりました

ある程度理由はわかっているのですがまず

・画像が多い
・入れているプラグインが多い

あたりではないかなと思います。ちなみにサーバーは MixHostで、先ほど速度テストをしたWEBサイトと同じサーバーです。ということはサーバーが違うから遅い、と出たわけではないということになります。

分析結果にはスコアだけでなく対策も表示されます。改善できる項目というところに

このように表示されるので、

ここをクリックして

対策を表示させて、(意味がわからないかもしれませんが)その情報を元に対策をしていく、ということが必要かと思います。私も、じっくり読んで考えたいとは思います。

Chromeの「更新の確認中にエラーが発生しました:更新チェックを起動できませんでした」の解決方法

$
0
0

Photo by FuYong Hua on Unsplash

数日前に更新のあった最新のChromeでデベロッパーツールの表示が変わった、という記事を見て「どれどれ…」と試してみたところ「あれ?新しくない?」ということに気づきました。調べてみるとChromeのアップデート更新がエラーで、できていませんでした。そこから色々なことを試してようやく新しいChromeに更新できたので、それについて書きます。

Chromeの更新がエラーでできていなかった状態はこんな感じでした

Chromeのアップデート更新がエラーでできていなかった状態を見つけたのは、こんな手順でした。

Chromeの右上にある … が縦になっているようなところをクリックして、ヘルプ>Google Chromeについて をクリック。

すると、

更新の確認中にエラーが発生しました:更新チェックを起動できませんでした(エラーコード 3:0x80070002 – system level)。
詳しく見る
バージョン: 72.0.3626.121 (Official Build) (64 ビット)

というような表示になっていて、どうやら最新のChromeにアップデートするときに何らかのエラーが出てアップデートできていないということがわかりました。

エラーをなくすためにやってみたこと

エラーのところにある 詳しく見る をクリックして対処法を見てみます。

詳しく見るをクリックし、

このエラーが

更新できませんでした(エラー:3 または11)更新の確認中にエラーが発生しました。更新サーバーにアクセスできません。

に該当することがわかりました。「更新サーバーにアクセスできません」ということですが、ネットはずっとつながっているし???でした。

このページに表示されていたいくつかの対処法も試しました。

望ましくないプログラムを削除する

望ましくないプログラムを削除する という項目があります。

Windows をクリックして、削除方法を見てその通りに実行します。

Chromeの右上にある … が縦になっているようなところをクリックして、設定をクリック

ページの一番下にある 詳細設定をクリック

リセットとクリーンアップのところのパソコンのクリーンアップをクリック

有害なソフトウェアを探して削除しますのところの検索をクリック

この画面で数分待ちました。数分後、

有害なソフトウエアは見つかりませんでしたと表示され、これでは解決できない!ということがわかりました。

Chromeをアンインストールしてインストールする

できればこれはやりたくないと思いつつ、次にこれをしました(その後何度も行いました)。

その前に、ログインし直せば大丈夫とは思いましたが念のためにブックマークのバックアップを取っておきました。

Chromeの右上にある … が縦になっているようなところをクリックして、ブックマーク>ブックマークマネージャをクリック

… が縦になっているようなところをクリックし、

ブックマークをエクスポートをクリックして、HTMLファイルを任意の場所に保存します。

アンインストールの手順は、

Windowsマークをクリック

設定をクリック

アプリをクリック

アプリと機能のところに Chrome と入力して表示させて、クリック


※ アップデート後にハードコピーを取ったのでバージョンが新しいです

アンインストールをクリック

アンインストールをクリック これでアンインストールされます。

新しくChromeをインストールしますが、スタンドアローン版が推奨されていたようなので

https://www.google.com/chrome/?standalone=1&platform=win64

こちらからChromeをダウンロードをクリック

同意してインストールをクリック

ChromeStandaloneSetup64.exe

というファイルがダウンロードされるので、これをダブルクリックしてChromeを再度インストールしました。

これでOK!と思ったのですが立ち上げて見てみると

全く同じ表示で、バージョンアップされませんでした。

その他やったこと

以前入れていた拡張機能でその後、Chromeによって停止されていたものがあったのを思い出して

削除してみたり

Windowsを再起動してみたり

Chromeのログインユーザーを変更してみたり

何度もChromeのアンインストールとインストールを繰り返してみたり

しましたが、いっこうに更新されずとても困りました。

Yahoo知恵袋でヒントを発見!

検索して、しまくってみてようやくこちらのヒントを見つけました。

Chromeの更新しようとしたら 更新の確認中に

このアンサーの中に

※ 削除して再INSTしても同じ症状でしたとの事、確認です次をみて[エクスプローラー]⇒[Win7_OS(C:)]⇒で、[Chrome]のフォルダが残っていませんか⇒残っていたら右クリックで削除する。

という記述がありました。「そうか、何か残っているファイルが悪さをしているのかも?」と思いました。

上記と全く同じ場所にはなかったのですが、私の場合は

C:\Program Files (x86)\Google

というフォルダがありました。Googleドライブ用のアプリを入れているので、そちらに関するファイルもあるとは思うのですが一度この中身を全部消してから、Chromeをインストールしようと思いました。

フォルダは

こんな感じであったのですが一つずつ消していきました。

消すときに「使用中のため削除できません」というような表示が出ましたがそのときは

Ctrl+Alt+Del で タスクマネージャーを表示してプロセスサービスにあるGoogleという名前の付いているものを停止していき、なんとか全部削除しました。

全部削除できたところで再度、Chromeをインストールして、確認したところ、

やっと最新のバージョンに上がりました!!!そして最新バージョンでのデベロッパーズツールの新しい機能

調べたいところにカーソルを乗せると吹き出しの形で表示されるようになった!ということを確認できました。

まとめ:Chromeの更新に失敗している状態の原因は色々あるみたいですね

今回色々と検索して、ここまでしないと更新ができなかったというパターンのものがほとんど見つかりませんでした。おおよそはアンインストール&インストールやパソコンの再起動などで更新できていたみたいです。なのでかなりレアケースの方だけに役立つことかと思いますがもしどうしてもだめなときは、自己責任でお試し下さい。今回は心配していたGoogleドライブ用のアプリはその後も正常に動いていました。


国土地理院の地図に住所の入ったCSVをドラッグ&ドロップだけでマーク表示ができる!

$
0
0

Twitterを見ていて、国土地理院の地図に住所の入ったcsvをドラッグ&ドロップするだけで地図にマーク表示することができる、ということを知りました。早速試してみたら、とっても簡単に地図にそれぞれの住所のマークを入れることができたのでその方法について書きます。

国土地理院の地図に関するホリエモンのTwitter

刑務所なう。刑務所なう。2刑務所わずを読んで率直な人柄に興味を持ち、それ以来個人的に堀江貴文さん(ホリエモン)のTwitterをフォローしています。

今日のこちらのTweetに興味を持ちました。

国土地理院の地図

国土地理院とはうっすら聞いたことはあってもホームページを見たり、地図を利用しようとしたことはありませんでした。

まずは「国土地理院 地図」で検索して、

地理院地図 


出典:国土地理院ウェブサイト

へ来ました。なるほど、地図があります。この地図はpngファイルとして保存したり、

URLやTwitter,FacebookなどのSNSでも利用できるようです。

pngの利用は「国土地理院コンテンツ利用規約」に従えば、商用でも利用することが可能なようです。詳しくは規約サイトを読んで下さい。

表示するcsvをオープンデータからダウンロードする

ブログに書くに当たり、公開してもいい住所が複数掲載されているcsvは…と考えて、オープンデータから拾ってくることにしました。

八王子市>子育て関連オープンデータ一覧

八王子の赤ちゃん・ふらっと設置施設(CSV形式 10キロバイト) というCSVをダウンロードしました。

八王子市、クリエイティブ・コモンズ・ライセンス 表示 2.1

国土地理院の地図にCSVをドラッグ&ドロップする

準備ができたので、国土地理院の地図にCSVをドラッグ&ドロップします

PCにあるCSVファイルをドラッグして、ブラウザで表示中の地図の上まで持って行きドロップします。

すると、このように読み込みする内容の確認画面がでます。

アイコンをクリックすると、沢山のアイコンからイメージに合うものを選ぶことができます。

上記の内容で読込開始をクリック

しばらく待つと

このように地図上に、CSVの住所からのマークが表示されました。

ドラッグや上下スクロールで位置と大きさを変えます。

アイコンをクリックすると

住所以外の項目も表示されることがわかります。

機能>ツール>作図・ファイル をクリックすると

この画面になります。CSVのアイコンのラベルを表示をクリックすると

名称が表示されるようになりました。

とはいえ、この場合はデータが多すぎるため名称が重なって表示されてしまいます。もう少し少ないデータの時か、あるいは拡大して名称が重ならない程度での使うのがいいのかなと思いました。

国土地理院の地図とCSVから表示されたマークの地図を利用する方法

このように地図の上に任意の場所のマークが表示されるのはわかりました。これを自分のホームページなどで利用するにはどうすればいいかについて考えてみました。

画像を保存して利用する

表示されている地図を「画像として」保存することができます。

機能>ツール>画像として保存

をクリックすると

このように表示されます。とりあえずこのまま OK をクリック

このポップアップで画像を保存をクリック

任意の場所にpngファイルを保存します。


出典:国土地理院ウェブサイト にCSVを重ねて表示
八王子市、クリエイティブ・コモンズ・ライセンス 表示 2.1

保存したファイルはこのように画像として利用することができます。

kmlファイルとして利用する方法

kmlファイルという形でもこの地図を保存することができます。

機能>ツール>作図・ファイル をクリックしたあとに、保存マークをクリックすると、kmlファイルがダウンロードできます。

kmlファイルをWordPressで表示できるプラグインをいくつか試したのですが、今時点でまだこのファイルを地図として表示することができていません。

WordPress以外の方法で、kmlファイルの利用方法についてはわかりましたので書きます。

Googleにログインしておき、Googleマップを開きます。

左上のハンバーガーメニューをクリック

マイプレイスをクリック

マイマップをクリック

画面下部の地図を作成をクリック

インポートをクリック

この画面が表示されますので、保存してあったkmlファイルをドラッグ&ドロップします。

しばらく待つと先ほどの地図が表示されました!画像と違って、

データの情報(名称など)も見ることができます。

権限を公開にすれば共有して、ホームページに貼り付けることもできるようになります。

無料画像編集ツールの決定版!iloveimg.com:ブラウザだけで画像加工ができます

$
0
0

このブログのトップに使う画像はunsplash.comなどから画像をダウンロードして、決まったサイズに変更してアップロードしています。有料の画像ソフトを使っているのですが、お客さんのパソコンで同じ作業をしようとすると付属ソフトなどではなかなか難しいものがありました。WEBサービスのiloveimg.comを利用すれば無料でWindowsでもMacでもブラウザ上で画像の大きさを変更できるということがわかり、とても便利だと思ったのでご紹介します!

ブログなどで使う画像をダウンロードする

ブログなどで使う画像をダウンロードします。商用利用可の写真などがあるサイトは

このブログではアイキャッチで写真を使っていますが、ほぼだいたい海外の写真無料サイトのものを使わせてもらっています。以前から「unspla...
Webサイトで使う素材をいろいろなサイトで探して使っています。今回は「商用利用可能」「センスが良い」「高画質」「無料」の写真素材サイトu...

このあたりのWEBサイトをご紹介してきました。私はunsplash.comで見つけることが多いです。

child で検索をして

Photo by Ben White on Unsplash

この画像をダウンロードして、加工してみようと思います。

iloveimage.comで画像の大きさを編集する

iloveimg.comのWEBサイトはこちらになります。

すべて日本語で表示されているのがわかりやすいです!

このブログでトップの画像を作る場合、1000×480ピクセルにすることが多いのでその加工をしてみます。

写真エディターを使う

写真エディターをクリック

画像を選択をクリックすると、PCから画像を選択する画面になるので先ほどダウンロードした画像を選択します。

すると編集画面に指定した画像が表示されます。

サイズの変更をする

サイズ変更をクリック

このように現在の大きさ(6016×4016ピクセル)が表示されます。まず、横幅を1000ピクセルにしたいので、幅に

1000 と入力します。縦横比を維持にチェックが入っているので高さは自動的に変更されます。適用をクリック

大きさが変更されました。先ほどの画面とほぼ変わりませんがよく見るとズーム100%となっています。先ほどはズーム16%だったので、ちゃんと小さくなっていることがわかります。このソフトは画像の大きさによって自動的にズームも変えてくれて便利ですね!

次に画像の高さを480ピクセルにします。

クロップをクリック。

このように表示されますので、

高さに480と入力します

すると、このようにクロップされる大きさの部分が明るい表示になります。

クロップ部分はマウスで動かすことができるので、好きな切り取り部分になるように移動します。

適用をクリック

作った画像をPCに保存する

これで 1000×480ピクセルの指定が終わったので、

保存をクリックしてPCに保存します。

保存した画像を画像編集ソフトで開くと、

1000×480ピクセルの画像ができました。

吹き出し、文字の追加などもできます

この写真エディターでは

今使った機能の他にも多くの機能があります。少し試してみます。

スティッカーをクリックして

バブルをクリック

この形がいいので、クリック

表示されます。向きを逆にしたいので

このマークをクリック

逆向きになりました。

四角形の右上をクリック&ドラッグして拡げて位置を移動します。

こんな感じでいいので、適用をクリック

閉じるをクリック

次に文字を入れます。

テキストをクリック

テキストを追加をクリック

このような文字枠が表示されますので、

文字を入力して適切な位置に移動し、適用をクリック

できあがった画像は

保存をクリックしてPCに保存することができます。

↑これです。

また、今回のブログのトップ画像はすべてiloveimg.comで編集したものです。白い四角を載せて、透明度すこし上げておいて文字を載せました。

iloveimg.comを使うときのちょっとしたコツ

何度かいじっていてわかったのですが、iloveimg.comを使うときにちょっとしたコツがあります。

それは適用を押すことを忘れない、ということです。一般のソフトなどでは最後に保存するまでは何もしなくても、問題ないのですがこのサービスはある作業からある作業に移る前(例えば文字を入れた後に、文字の色を変えたいとき)に適用を押します。

そうしないと文字の色が変えられませんし、別のボタンをクリックしたりすると入力した文字がなくなってしまいます。あと、ある編集(たとえばテキスト)を終えてから、ある編集(たとえば)に移ろうとしたときは閉じるをクリックしないと、編集ボタンが表示されない場合があります。

適用閉じるをお忘れなく!

何度かいじれば慣れてきますので、ぜひこの便利なサービスをブックマークして使ってみて下さいね!





Latest Images