![Google search console にサイトを登録する方法(google site verification)](../webworks/images/gsc_site_verification_img1.png)
Google Search Consoleにサイトを登録する場合は所有者の認証(site verification)が必要になります。認証方法はドメインプロパティとURLプレフィックスプロパティの2種類があります。URLプレフィックスは認証は簡単ですが、ドメインプロパティはDNSへのTXTレコード追記が必要になります。
![Wordpressで固定ページの中に投稿記事を表示する(phpコードが利用できる)方法](../wordpress/images/page_php_embed_img1.png)
Wordpressの固定ページ内で投稿記事を表示させる(PHPコードを動作させる)方法をご紹介します。固定ページに投稿記事のみを出すのではなく、ページ内のHTMLソースに加えて投稿記事も追加するのが主旨です。プラグインを使う方法と、専用テンプレートとfunctions.phpへ追記する方法があります。
![サーバー移転をする際に気を付ける50のポイント](../webworks/images/server_moving_point50_img1.png)
WEBサイトのサーバー移転・引っ越しをおこなう場合、気を付ける事はたくさんあります。自分でおこなう場合もそうですが、仕事の依頼を受けた場合は相手に案内・提案ができるくらいになる必要があります。ポイントを事前に案内する事で信頼を勝ち取る事ができるためです。
![ITPによるサードパーティCookie防止(Google Chromeサポート終了は2023年末に延長)](../webworks/images/google_thirdparty_cookie_img1.png)
GoogleはサードパーティCookieのサポートを終了すると発表しました。サードパーティCookieを制限するのはクッキー情報もユーザーの個人情報にあたるので保護が必要なためです。アドテク系の会社が大打撃を受けますので、クッキー情報に頼らない新しい仕組みの構築が急がれます。
![Gmailでメールが迷惑メールに入る理由と解除する3つの方法](../webworks/images/gmail_spam_release_img1.png)
相手のメールがGmailの迷惑メールに入るのは、相手メールが迷惑メールと判定されているためです。Gmail側で迷惑メールに入らないようにする方法が3つあります。判定された側も自身のメールが迷惑メールと認定されない様にSPFレコードを設定するべきです。
![SEOで今だに有効と信じられている20個の神話](../seo/images/seo_mythology_img1.png)
SEOの手法には効果がないのに信じられているものがたくさんあります。実際に検証する時間とコストが無いために、噂だけが飛び交ってしまう事が原因です。もともとSEO対策は何一つ保証できません。あまり信じ過ぎずに検証する事が大切です。
![Gmailの返信や転送メールにccやBccの宛先を追加する方法](../webworks/images/gmail_cc_bcc_img1.png)
Gmailの受信メールに対しccやBccにアドレスを追加した状態で返信や転送を掛ける方法をご紹介します。返信や転送のメール画面には、最初からccやBccのアドレスを入れる欄は表示されません。ポイントは返信の宛先メールアドレス自体を押す事です。それによりccやBcc欄(リンク)が表示されます。
![ゼロクリックサーチがSEOを施したWEBサイトへの流入を減少させる](../seo/images/zeroclick_search_img1.png)
ゼロクリックサーチとは、ユーザーが検索結果上のサイトタイトルを一切押さずに終了してしまう事を指します。知りたい情報が検索結果画面上に直接出る事で、解決してしまう事が原因です。WEBサイトへの流入が減少してしまうので、検索結果画面上でいかにアピールするかが重要です。
![CSSのblock・inline・inline-block要素についてわかりやすくまとめてみた](../html/images/css_block_inline_img1.png)
CSSのdisplayプロパティには主に、block、inline、inline-blockの値があります。blockは余白やサイズの指定ができ、縦に並びます。inlineは余白やサイズ指定はできませんが横並びします。サイズや余白の指定が自由でありつつ横並びするのがinline-blockです。
![First Input Delay(FID)を考慮したWEBサイト制作(Core web vitals SEO)](../seo/images/fid_img1.png)
FIDとはGoogleが推奨する新しいSEOランキング基準(Core web vitals)要素の一つです。WEBページのレンダリング処理が終了しユーザー操作を受け付けるようになるまでの時間を指します。FIDスコアはユーザーの性格によって変わりますが、レンダリングの邪魔をしない様、ソースを最適化する事で改善できます。
![Gmailの送信(返信)メールが受信トレイに入るのを防ぐ方法(2つあります)](../webworks/images/gmail_thread_lifted_img1.png)
Gmailで送信や返信メールが受信トレイに入る理由は、スレッド表示が主な原因です。メールが迷惑メールに入らない様にするフィルタ設定の仕方によっても同様の事が起きます。スレッド表示は自分と相手のどちらが最後に送ったかに関わらず、受信メール1件を確認するだけで済むメリットがあります。
![srcsetとsizesで画像の種類とサイズを使い分ける(レスポンシブルデザイン)](../html/images/img_srcset_img1.png)
srcset属性で画面幅ごとに表示する画像を選択でき、sizes属性で画面幅ごとに表示する画像のサイズを選択できます。記述子を「w」指定する場合、解像度は「1x」で計算されるので、Retinaディスプレイ向けの2x時の画像指定をするべきです。割合指定は全て画像の幅に対してではなく画面の幅を100%とした場合の割合である事に注意しましょう。
![CSSで写真のふちをぼかす方法(border枠とbeforeを使ったテクニック)](../html/images/css_border_blurred_img1.png)
背景画像の枠部分をCSSでぼかすデザインの作り方をご紹介。ポイントは土台画像の下にbefore画像を敷いて、それぞれのbackgound-clipを土台はpadding-boxに、before画像はborder-boxにする事。土台画像のborderを透過させれば、下のぼかし画像が領域差分だけ見えるのでぼかし枠になります。
![htmlのimg画像がぼやける原因と対処法](../html/images/img_blurred_img1.png)
画像がぼやけるのは作成サイズより表示サイズが大きくなっているためです。レスポンシブルデザインやリキッドレイアウトが主流のため、作成サイズ通りに画像を表示しにくいです。画像を使い回すなら大き目の画像を作りPCで等倍縮小させ、でなければ端末ごとに画像を準備しましょう。
![画像検索SEO!管理者は検索ユーザー体験を誘導できる](../seo/images/img_search_img1.png)
画像検索はユーザーの興味を誘導しやすくなっている。検索上位に来なくとも、画像とテキスト文章のインパクトがSEOになり得る。画像検索は画像が主役であり、掲載ページ全体がその引き立て役になる事が大切。
![サイトメンテナンス中のSEO:サーバー503エラーにする事](../seo/images/seo_error503_img1.png)
処理オーバーによる一時的なサーバー停止やメンテナンス中などの場合は、503エラーを返しましょう。ユーザーにはメンテナンスページを表示させ、検索エンジン側には一時的な事態であると示す必要があります。メンテナンスページを準備するだけだとステータスコードが200のままとなり、その状態をインデックスされてしまいます。
![GoogleAdsenceが広告制限になり復旧した話](../blog/images/adsense_stop_img1.png)
GoogleAdsenceの広告が制限され、表示されなくなりました。原因は「無効なトラフィックの問題」で通常とは違うバナークリックのアクションがあったと判断されています。今回は10日程で自動解除になりましたが、怪しい動きがないか分析をしておいた方がよさそうです。
![CSSのbox-sizingがサイズ指定した画像がぼやける原因です。](../html/images/css_box-sizing_img1.png)
cssのbox-sizingでborder-boxが設定されているとテキスト系の画像がぼやける場合がある。content-boxの場合、要素のpaddingやborderはwidth・heightに含まれないので、画像はサイズ通り映る。border-boxの場合、要素のpaddingやborderはwidth・heightに含まれるので、その分画像サイズが小さくなりぼやける。
![Instagram Graph APIを使用してWEBページに埋め込む手順](../images/instagram_api_img1.png)
Instagram Graph APIは、Facebook管理者ページの中で使えるAPIツールです。Instagram情報へのアクセス許可設定やアクセストークン、ビジネスアカウントIDなどを発行できます。設定するためには、InstagramのプロアカウントとFacebookページへの連携が必要です。
![Instagramをプロアカウントに変更する方法](../images/instagram_proaccount_img1.png)
インスタグラムのアカウントをプロアカウント(旧ビジネスアカウント)に変更する方法をご紹介します。プロアカウントはカテゴリによってクリエイターアカウントかビジネスアカウントに分けられます。アクセス解析などの機能が利用でき、InstagramをWEBページに埋め込むAPIも使える様になります。
![iPhoneでWEBサイトの画像イメージが表示されない時に試してほしい事](../images/iphone_img_lazyload_img1.png)
iPhoneでWEBサイトの画像イメージが見えない場合は、画像の遅延読み込み設定を許可していない可能性があります。Safariの設定メニューからExperimental Features(英語)の設定を確認してください。「Lazy Image Loading」をONにすると画像が見えるようになる場合があります。
![モーダルウィンドウ(modal window)を設置する方法](../images/css_modal_window_img1.png)
モーダルウィンドウ(modal window)を実装する方法をご紹介しています。javascriptによるモーダルウィンドウはオリジナルjsやJqueryを使ったものがあります。CSSのみで実装する場合はウィンドウボックスにid属性を付け、指定された属性の:targetのスタイルでコントロールします。
![送信済みメールを未送信メールとする方法はあるのか?(送信済みメールの再送信)](../images/mail_resend_img1.png)
一度送った送信済みメールは未送信にするなどその状態を変更する事ができません。メールソフトには送信済みメールを再送する機能がありますのでそれを使って再送しましょう。Gmailには送信済みメールを再送する機能がありません。
![CSSのtransparent(トランスペアレント)で要素を透明にする](../images/css_transparent_img1.png)
transparentは要素を透明にするプロパティです。部分的に透明にする事で下の要素を表示させる事ができます。非表示ではないため、marginやpaddingなどの余白も含めて常に存在します。<背景色を透明にしたりテキストやborderを透明にする事で、様々なデザインを作る事ができます。
![メーラーデーモンが連続で届いたら、即パスワードを変更する事(今すぐです!)](../images/mailer-daemon_img1.png)
メーラーデーモンが大量に届く様になったら、それはメールが乗っ取られた事を示します。そのままにしているとメールの送信もできなくなるので、一刻も早くメールパスワードを変更して下さい!そして共通パスワードを使っているログイン情報も全て変更して下さい。他のツールが乗っ取りに遭う場合もあります。
![CSSのclip-pathプロパティを使用して画像の輪郭を自在に切り取る方法](../images/clip-path_img1.png)
clip-pathプロパティはベースとなる要素を切り取る事ができ、切り取り範囲に沿ってテキストの回り込みが発生します。外周や円形、楕円形、多角形以外にもSVG画像を使えば複雑な形に切り取る事ができます。基本的にリンク範囲も切り取りされた箇所に変化します。
![テーブルtableタグのヘッダー行・列(thタグ)を固定する方法](../images/th-sticky_img1.png)
tableデータの量が多い場合、th見出しタグを固定すればスクロール時にデータを把握しやすくなります。thタグは縦方向・横方向・複数見出しの固定が可能です。一般的にはposition: sticly;が使われますが、flexboxを使った固定方法もあります。
![結論:ロリポップレンタルサーバーは全然使えるというお話](../images/lolipop_img1.png)
ロリポップレンタルサーバーならスタンダードプランやハイスピードプランがお勧めです。月額500円でLightspeedによる高速サーバーを実現できるところは他にそうありません。無料SSLやプラン変更、Wordpress簡単移行の機能も備えてありコストパフォーマンスが高いサーバーです。
![Googlemap上の距離を測る方法](../images/googlemap_distance_img1.png)
Googlemapにおいて特定の地点間の距離を測る事ができます。パソコン版では自分の場所に関係なく、複数地点間の合計距離が測れます。iPhoneの場合地点間の固定ライン+MAPの中央までの追随ラインが距離に含まれます。
![Google ChromeでSSL化しているが新EdgeではSSL化できていない混合コンテンツ](../images/edge_mixed_content_img1.png)
混合コンテンツの原因は.htaccess上のエラーページURLが「http」通信だった事。Google Chromeのコンソールでは画像リンク切れ時に404エラーを読み込まないが、新EdgeやFirefoxコンソールでは画像リンク切れ時に404エラーを読み込む