![OutlookのメールデータがOneDriveに入って動かなくなった場合の対処](pccontrol/images/outlook_onedrive_cancell_img1.png)
OutlookのメールデータがOnedriveの方に向いた事で、Outlook自体が使えなくなるケースがあります。まずはOnedrive内のメールデータをコピーして、ローカルPCのドキュメント内に複製しましょう。メールアカウントを全削除(或いはプロファイル削除)して再度登録し直し、フォルダの変更で複製したデータにつなげます。
![WEBサーバーはWIX、メールはさくらサーバーを使う際のDNSレコード設定](webworks/images/dns_wix_sakura_img1.png)
ムームードメインではWEBサーバー・メールサーバーを分ける時にムームーDNSを使います。WEBサーバー先のAレコード・CNAMEレコード、さらにメールサーバー先のMXレコードやTXTレコードを調べておきます。さくらインターネットでメールサーバーを調べる際「初期ドメイン」と「ホスト名」の表記が紛らわしいので注意しましょう。
![WEBページ上のYoutube埋込動画の再生速度を変更する方法(IFrame Player API)](html/images/youtube_iframeapi_img1.png)
Youtube動画をiframeタグで埋め込めば、WEBページで簡単に動画を見せる事ができます。この動画の再生速度を自動的に変更するには、Youtubeが提供する専用API「IFrame Player API」を使います。IFrame Player APIによりiframe内にJavascriptで様々なコントロール制御をする事が可能になります。
![カスタム投稿記事で特定の並べ替え順に前後の記事リンクを出す方法](wordpress/images/prev_next_page_img1.png)
カスタム投稿やカスタムタクソノミー別の記事上では、通常のWordpressの関数で前後の記事リンクを出すのは難しいです。サブクエリを実行して、改めて該当する記事のID一覧を取得し、それを配列に格納します。該当記事IDの順番を調べて、その一つ前・一つ後のID記事を取得する形が一番だと思います。
![今開いているページと同じメニュー項目の色を変える方法(javascriptで簡単実装)](html/images/js_addclass_img1.png)
開いているページと同じメニュー部分に違う色やスタイルをつける事で、今どのページを見ているのかがユーザーに認識されやすくなります。基本はjavascriptで対象のタグ部分を配列で格納し、繰り返し処理の中でhref属性とaタグ内のリンクが一致するものを定する仕組みです。class名を追加する際はDOM上の書き換えであり、HTMLソース上に直接入れないため共通メニューとして使い回せます。
![ページ内リンク位置が固定ヘッダーで隠れるのを防ぐ(CSS・Javascript)](html/images/pagelink_move_img1.png)
ページ内リンクはWEBサイトでよく見かけますが、最近は固定フッターが画面上部にくっついているので、そこにリンク先が隠れる場合があります。リンクを押しても対象位置ジャンプしたのかユーザーがわかりにくいため、改善が必要です。cssならscroll-paddingを:rootに設定したりjavascriptを使う事で、画面上部から任意の数値分だけ下にずらす事ができるので、対象の見出しなどが隠れずに済みます。
![CSSでサイズの違う文字の上下の高さを中央に揃える](html/images/css_vertical_align_img1.png)
サイズの違う文字を並べる場合、基本的には文字の下揃えで並びます。CSSのvertical-align: baseline;がデフォルトのためです。vertical-alignでmiddleを設定すれば、サイズが違う文字を高さの中央に揃える事ができます。これが効くのはインライン要素のみであり、ブロック要素には反映されません。ラインを揃えたい部分がインライン要素になっているかどうかに注意しましょう。
![functions.phpからtitleタグを出力・コントロールする方法](wordpress/images/title_generate_img1.png)
これまでwp_title関数を使ってheader.php内に直接titleタグを書く方法は、現在は推奨されていません。これからは新しく登場したwp_get_document_title関数を使って、wp_head()実行時に生成する様にしましょう。functions.phpにadd_theme_supportを記述してタイトルを生成し、さらに3つのフィルターを駆使して様々なカスタマイズが可能です。
![表示する記事タイトルの文字数を変更・制限する(PHP7・PHP8)](wordpress/images/title_trim_img1.png)
タイトル文字数を制限する記述は、echo mb_substr($post->post_title, 0, 25) . '…';が一般的です。PHP7系のWordpressサイトは上記で問題ありませんが、PHP8系の最新Wordpressサイトだと警告エラーが出ます。if条件分岐で$post内にデータがある時と無い時の処理を書くか、wp_trim_words関数を使いましょう。
![Wordpressのカスタム投稿記事のURLを自由に変更する方法](wordpress/images/url_change_img1.png)
追加したカスタム投稿記事は、管理画面のパーマリンクではURLを変更する事ができません。カスタム投稿タイプの名称とは別に、追加時にslug名を変更する事で自由なディレクトリ名をつける事ができます。末尾部分は、custom-post-type-permalinksプラグインで投稿idなどに変更する事ができます。
![EC-CUBE4をサブドメインにインストールした際、ログインできなくなる場合](webworks/eccube/images/subdomain_case_img1.png)
EC-CUBE4をサブドメイン内で運営する際に、注意が必要です。EU-CUBE4の管理画面までは表示できますが、ログインする事ができない場合があります。その場合は.envファイルのECCUBE_COOKIE_PATHの値を/にする事で解決します。
![CSSで正円を書き中に文字を入れる(可変幅でもjavascriptで対応)](html/images/css_circle_img1.png)
CSSで正円を書く際は、幅と高さを指定してborder-radius: 50%;と設定すればそのサイズの円が描けます。中の文字が2行になるときは絶対配置を掛け、上下は少し上に位置をずらして上下中央寄せするのがコツです。bootstrapのグリッドシステムなど幅が%単位で高さが無い場合は、javascriptで実寸幅を読み取り、その数値を高さとしてstyleで当ててやると正円を描画できます。
![WEBサイトのブラウザキャッシュを読み込ませない様にする方法](html/images/no_cache_img1.png)
ブラウザキャッシュは表示速度を上げて負担を少なくできるので大変便利な機能ですが、更新した状態がすぐに確認できないデメリットがあります。ブラウザキャッシュの影響を受けない様にするには、metaタグをheadに挿入する、.htaccessに記述する、レンタルサーバーの機能を使う方法があります。特にno-cacheの命令は、変更されていない箇所はキャッシュを読込し、変更が合った箇所は新規に読み込むので有能と言えます。
![インボイス:えるぺぐは3年間2割特例、その後は簡易課税を採用](freelance/images/invoice_start_img1.png)
2023年10月1日より適格請求書等保存方式(インボイス制度)が導入されますので、弊職はインボイス発行事業者となります。今後は適格請求書:インボイスに記載の消費税のみ仕入れ税額控除の対象となるため、発行できる業者に変更するなどの動きが会社側に出てくる事でしょう。導入後3年間は2割特例を受けて売上消費税額の2割を納めます。その後は簡易課税を申請し、売上消費税の5割を納める方針です。
![Outlook2016で同じメールアドレスを2重登録する方法](webworks/images/mail_duplication_img1.png)
Outlook2016ではメールアドレスの重複登録ができないため、普段とは違う方法で登録する必要があります。プロファイルの管理からOutlookを選択していく事で、POP形式とは別にIMAP形式のメールを入れる事ができます。2019ではプロファイルの管理を通さなくても重複登録が可能です。
![EC-CUBE4でログインパスワードを忘れた時の対処方法](webworks/eccube/images/lost_pass_img1.png)
EC-CUBE4でログインパスワードを忘れた場合は、phpMyAdminのdtb_memberテーブルでユーザー名と暗号化されたパスワードを調べます。次にEC-CUBEのパスワードモードを「HMAC」から「PLAIN」に変更し、暗号化されたパスワードでログインできる様にします。基本的にはDB上の暗号化されたパスワードを調べて一旦ログインし、新しいパスワードに変更する事になります。
![オフィスで野菜:会社に野菜を直接届ける宅配サービス](other/office_vegetable/images/office_vegetable_img1.png)
「オフィスで野菜」サービスとは、オフィスや事務所・会社に新鮮な野菜を直接、定期的に配送してくれるサービスです。配送される野菜は地域農家が万全の品質管理を保証された安全安心な商品であり、野菜摂取による社員の栄養バランス改善・健康増進が見込めます。地元農家の野菜を直接頂く事で無駄を省き持続可能な地域産業の活性化を促します。企業の環境への取り組みや社会的責任をPRできます。
![Windowsのスクリーンショット機能が新しくなりました(Snipping Tool)](pccontrol/images/snippingtool_img1.png)
Win11でFn+Printscreenを押すと、画面が暗転して上部にアイコンが出る様になりました。これはSnipping toolソフトの機能で、画面をキャプチャーする際に事前に範囲指定をする事ができる様になっています(これを含む3つの機能あり)。キャプチャー後に別ソフトでトリミングする必要が無くて便利です。この機能はWindowsの設定で切り離す事もできます。
![EC-CUBE3の各種データをEC-CUBE4へ移行する方法](webworks/eccube/images/eccube_detamove_img1.png)
EC-CUBE3系の顧客データ・商品データ・受注履歴・支払・配送方法などの一式の情報を4系に移す事ができます。3系の元データはバックアッププラグインを使って保存(tar.gz)し、4系には専用のデータ移設プラグインで一気に移設します。バックアップファイルのアップロード時にログイン情報も移設前のものになります。ログインする前にECCUBE_AUTH_MAGICを3系のものに上書きしておきましょう。
![LINEで消してしまった文章を復活させる方法(iPhone)](webworks/images/iphone_line_undo_img1.png)
iPhoneのLINEで入力した文章が消えてしまった場合、指三本でスライドかタップで、消した文章を復活させる事ができます。指三本スライドは直前の文章選択の状態に戻る事ができます。指三本タップは専用のツールバーから一つ前・一つ先の状態に進むことができます。文章は「選択して消した状態」でないと戻りません。1文字ずつ消した場合は無効です。トーク画面や別のアカウントに移動した場合も保存されなくなります。
![記事一覧下にページネーションをつける方法(WP-PageNaviプラグイン)](wordpress/images/wp-pagenavi_img1.png)
Wordpressで投稿記事のページネーションを実現するには「WP-PageNavi」プラグインが便利です。固定ページと記事詳細ページで記事一覧+ページネーションを表示するには、WP_Queryを使ったコードが必要です。TOPページ専用固定ページには微調整が必要で、single.phpで記事一覧+ページネーションを追加するには、専用の別テーマファイルと、リダイレクト防止記述が必要です。
![LINEのメッセージを予約投稿する方法](webworks/images/iphone_line_reserve_img1.png)
LINEアプリの機能には予約投稿はありませんが、iPhoneのショートカットアプリを使えば予約送信ができます。指定した時刻に指定したメッセージを、指定したアカウント(複数可)に投稿できる様に設定ができます。オートメーション機能は毎日・毎週・毎月のいずれかの繰り返しとなるので、スポット送信の場合は送信後にOFFにする様にしましょう。
![Outlookにメールアドレスを追加する方法(修復・変更する場合も紹介)](webworks/images/outlook_email_img1.png)
outlook2019にメールアドレスを登録するには、メールアドレスとパスワードが必要になります。登録の段階では受信サーバー名や送信サーバー名を入力せずに登録が済んでしまいます。登録後にエラーが出る場合は、修復ボタンを押してサーバー名や暗号化接続およびポート番号を確認する必要があります。
![Wordpressでfunctions.phpのCSSバージョンを変更する方法](wordpress/images/css_ver_change_img1.png)
Wordpressでheader.php以外にcss読込を記述している場合は、バージョン情報を変更に注意が必要です。functions.php内にcssの登録の欄があれば、そこでバージョン数の変更または追記をする必要があります。ファイル実物のバージョン数値と連動している場合は、cssの編集時に同時にバージョン数値も変更して下さい。
![簡単にロゴを作成できるWEBサービス「Wixロゴメーカー」](webworks/images/wix_logo_maker_img1.png)
Wixロゴメーカーを使えば、ビジネス名・屋号・組織名と業種やテイストを選択して、ロゴマークを作る事ができます。複数デザイン候補から選択する事ができ、最終的には自分で修正する事もできる様になっています。有料プランは5,100円と2,100円です。無料プランもありますが、サイズは200px×200pxでJPEGのみです。
![WordやExcelをPDF保存するときに保存先を自動指定する方法](pccontrol/images/pdf_saveplace_img1.png)
WordやExcelをPDF保存する際、「このPC」ではなく「OneDrive」が自動選択される場合があります。このままだと元ファイルの位置にPDF保存できません。OneDriveから毎回「このPC」を選択すれば、元ファイルの位置に保存する事ができますが、毎回は面倒です。オプションの保存メニューから「既定でコンピューターに保存する」の項目にチェックをつければ、毎回「このPC」が選択された状態になります。
![自作テーマのTOPページ(index.php)を固定ページに入れる方法](wordpress/images/top_change_page_img1.png)
index.php上にTOPページのHTMLソースを入れている場合は、サブページと同様に一旦固定ページ(HOMEなど)に流し込みましょう。Wordpressの表示設定でホームページに固定ページのHOMEを選択すれば、そこがTOPページになってくれます。通常のテンプレートpage.phpを使わず、専用のpage-front.phpなどを用意しましょう。固定ページ内ではPHP出力が使えないので、別途PHP出力用ファイルを用意して、それを稼働させるように設定する必要があります。
![CSSでテキスト文字の周りを縁取りする方法](html/images/css_border_img1.png)
テキスト文章をCSSスタイルで縁取るには、text-shadowプロパティを使います。横方向と縦方向(プラス数値・マイナス数値)の2つは必須で、次がぼかしの長さ(初期値0)最後に色指定ができます。「,」で区切って複数スタイルを適用できるので、8方向から丁寧に影をつければ縁取る事ができます。
![Facebookの投稿をWordpressへ自動連携する方法](wordpress/images/ifttt_fb_wp_img1.png)
Facebookページの投稿をWordpressへ自動反映させるプラグインは、規約が変わった事で現在使う事ができません。海外サービスのIFTTTを使って両者を連携させる事ができますが、事前にレンタルサーバーの海外アクセス拒否を一旦解除する必要があります。Facebookにはタイトルフィールドが無いので本文の先頭文字をタイトルに使うなどの工夫が必要です。
![WEBページ上のメールアドレスへの直リンクをクリックした時、Gmailの新規メール作成画面を起動する方法](webworks/images/mailto_gmail_img1.png)
WEBページにはクリックするとメール作成画面が開くメールアドレスの直リンクがまだたくさんあり、クリックした際のメール作成画面は、Winodowのデフォルトのメールソフトが選択されます。これをGmailに変更するには、Google ChromeかMicrosoft Edgeの設定からプロトコルハンドラとして「mail.google.com」を許可する必要があります。次にWindowsの規定メールアプリとして、その設定したブラウザを選択すると、直接Gmailのメール作成画面が出てくれます。
![アイキャッチ画像を表示する様々な関数と書き方](wordpress/images/eyecatch_img1.png)
アイキャッチ画像を表示させる前に、functions.phpにアイキャッチ画像表示を許可する記述を入れておきましょう。アイキャッチ画像を表示する関数は主に以下の4つです。the_post_thumbnail()…アイキャッチ画像をimgタグとして出力、the_post_thumbnail_url()…アイキャッチ画像のURLを出力、get_the_post_thumbnail_url()…投稿IDのアイキャッチ画像URLを取得、wp_get_attachment_image_src()…画像の情報を配列で取得
![GA4でGoogleの自然検索キーワードを調べる方法](webworks/images/ga4_keywordlist_img1.png)
2023年7月に完全移行するGA4では、ユーザーの検索キーワードを直接調べる事ができません。GA4とGoogle Search Consoleとを連動させれば(どちらからでも連動可)、検索キーワードを調べる事ができます。それはGoogle Search Consoleが、サイトを訪問する前のユーザーの行動を解析できるためです。
![ContactForm7でメール送信ができなくなった場合(ContactForm7 add confirmの修正)](wordpress/images/contactform7_confirm_img1.png)
ContactForm7で確認画面や送信完了ページが出なくなった場合は、確認画面プラグインのContact Form 7 add confirmに原因がある事が多いです。Contact Form 7 add confirm側がバージョンアップされないので、頻繁にバージョンアップされるContactForm7との連携が取れなくなってきています。プラグイン内script.jsの対象コード部分を変更する事で解決しますが、将来的な事を考慮して代替プラグインを探した方が良いです。
![クライアントエピソード15:DNSレコードの変更に失敗してメールが動かなくなった件](client/images/episode15_img1.png)
一般公開されたDNSレコード情報を鵜呑みにしたため、DNSレコードの切替時にメールが動かなくなってクライアントに多大な迷惑をかけてしまいました。DNSレコードに通常と違うサーバー名が記載してあったら、どこのサーバーなのかを細かく調べるべきです。今回はVPSサーバー側で直接、Aレコードだけを別サーバーへ向けてもらいます。
![ドメイン移管後のWhois情報変更について(お名前.com)前管理者とやり取りせずに済ませる](webworks/images/onamae_whois_img1.png)
お名前.comの場合、ドメインの管理を譲り受けた後、前任者に操作依頼をする事無く、Whois情報を変更する事ができます。まずは管理者情報を先に自分のものに変更しておき、次に認証作業が必要な登録者情報の変更の認証に「管理担当者・新しい登録者による認証」を選びます。そうすれば管理担当と新しい担当がいずれも自分のメールになり、承認作業を2つとも自分でできる様になります。
![メールエラーに「Insufficient permission」が出た時はどうすればよいか](webworks/images/insufficient_permission_img1.png)
ドメインメールの受信ができない・遅延する等おかしいと思ったら、自分が持つ別メールから対象のアドレスへメールを送るとエラーメールが返ってくるはずです。エラーメールに「Insufficient permission」と書いてあったら、それはそのメールのBOX容量が満杯になっている事を意味しています。WEBメールでログインして過去メールのコピーを削除するか、容量を上げられるようだったら設定変更します。一番はコピーを残さない設定で別PCでダウンロードしてしまう事でしょう。
![Xserverでネームサーバー切り替え前にSSL証明書を発行する方法](webworks/images/server_moving_before_ssl_img1.png)
SSL化したサイトのレンタルサーバーを引っ越しする場合、SSL証明書を持ち込むか、SSLを一旦解除して移転先で再取得する形になります。SSLを解除している間は「http表示」のみとなり、既存・新規ユーザーは「https表示」で訪問するるのでページが見れない事になります。XserverではWEB認証やドメイン認証により切り替え前に事前にSSL証明書を発行する事ができるようになっていますので、お勧めです。
![絶対パスと相対パス・ルートパスの違いと使い方(HTMLコード)](html/images/pass_3type_img1.png)
パスは要素の場所を示すものであり、CSSやJS・aリンクなど様々な場所で使われます。パスは、ファイル位置で書き方が変わる「相対パス」、ローカル環境では確認できないが統一表記ができる「絶対パス」、URLを省略できるが環境設定が必要な「ルートパス」に分かれます。他にも昔は「./」の表記もあり、基本的には相対パスと同じですが、今でも多少使いみちがあります。
![Gmailに設定したドメインメールが受信できない時の対処法](webworks/images/gmail_domainmail_late_img1.png)
GmailでPOPによるドメインメールを登録していると、受信メールが届くまでに時間が掛かります。手動確認するか、受信時はGmailに転送して送信だけドメインメールから送る方法があります。これなら相手にGmailの存在を知られる事はありません。この方法を使うとスマホGmailアプリではドメインメールはIMAPでの受信のため、Gmailへの転送分とコピーメールとで同じメールが2通届いた様に見えます。
![Wordpressの投稿をfacebookページに連動させる方法](wordpress/images/facebook_link_img1.png)
プラグインを使って、Wordpressの投稿記事をFacebookの投稿に連動表示させる事ができます。Jetpackはタイトルや画像・説明文を自動的に出す事ができます。All in one SEOはFacebookの投稿欄にページURLを張り付ける手動連動です。自動連動のJetpackは便利ですが、Facebook上に出した表示の修正ができなかったり月30件以上が有料になる等のデメリットがあります。
![「JPNICハンドル」JPドメインの管理者欄にある英数字(xx0000JP)は何?](webworks/images/jpnic_handle_img1.png)
JPNICハンドルとは、.co.jpなどの属性型JPドメインの登録時に紐づけされる管理者情報の識別コードです。担当者のイニシャルに続けて同じイニシャルの連番が続き、末尾は必ず「JP」で終わります。属性型JPドメインの登録時にその登録管理サービスの会員情報が、JPNICハンドルとして自動登録されます。管理を移管した時などはJPNICハンドル(担当者情報)を必ず変更するようにしましょう。
![GoogleアナリティクスUAとGA4ではPV値が大きく違う事に注意](webworks/images/ga4_ua_pv_img1.png)
GoogleアナリティクスのUAとGA4の初期設定とでは、PV数(GA4では表示回数)に大きく差が出ます。GA4にしきい値が設定されているため、少ない訪問ユーザー数はカウントされないようになっています。設定のレポート用識別子でGoogleシグナル単位からデバイスID単位に変更すると、UAとほぼ同等の数値が出てくれます。
![GoogleChromeブラウザの閲覧履歴の確認・削除・復活](webworks/images/browser_page_history_img1.png)
GoogleChromeやMicrosoft Edgeには、開いたページの閲覧履歴が1日1ページ単位で保存されています。PCスマホ共に履歴ページを表示させたり、履歴の1件削除・複数削除・全削除などができる様になっています。Ctrl+Shift+Tのショートカットを押すと、どちらのブラウザも閉じたタブを復活させる事ができるので便利です。
![今からでも必ず集客できる!一緒にビジネスブログを作ってみませんか?](blog/images/businessblog_img1.png)
本サイト「えるぺぐBLOG」は、WEB系の大手サイトが並ぶ中多くのキーワードで上位表示され、月間100,000PVに到達しました。Googleの評価により設定以外のキーワードでも上位表示される様になり、上手く検索できないユーザーにも目に留まる様に双方をサポートしてくれます。えるぺぐと一緒にビジネスブログを作ってみませんか。SEOノウハウも存分に提供し、開設から運営までオールインワンサポートします。是非お問い合わせ下さい。
![iPhoneの画像を長押しして自動で被写体を切り抜きする](webworks/images/iphone_img_longpress_img1.png)
画像内の被写体の自動切り抜き機能は、iPhoneのiOS16から新しく導入された機能です。それ以前のバージョンでは使えません。被写体を指で長押しするだけで、対象を切り抜きしてコピペ・共有する事ができます。長押し後ドラッグして使う事もできます。この場合被写体を維持した状態でiPhoneの画面を操作する事ができます。
![ドメインを販売・オークションにかける方法](webworks/images/domain_sale_img1.png)
使わなくなったドメインは未払いで放置して失効させるより、販売サイトやオークションサイトに出品して第三者に購入してもらう事ができます。ただ、失効ドメインの転売業者からの買い戻しは大変なので、支払い状況と利用期限を確認しておきましょう。お名前.comは売買サイト・オークションサイトがあります。ムームードメインはJPドメインオークション機能、バリュードメインはバックオーダードメインのみのJPドメインオークション機能を持っています。
![Windowsフォルダ内ファイル名をcmdで一括変更する方法](pccontrol/images/cmd_ren_img1.png)
ある一定の規則に沿ったファイル群は、コマンドラインソフト(cmd)を使って一括で名前変換する事ができます。コマンドラインソフトはどこからでも起動できますが、カレントディレクトリに移動しておけば引数1にパス名を入れる必要が無くなります。ワイルドカードの「*」や「?」を使って、特定の名称部分を変更しつつそこ以外はそのまま継承させる事ができます。
![Wordpressのダウングレードをする手順(ファイル上書き・PHPバージョン、DB再インポート)](wordpress/images/downgrade_img1.png)
Wordpressのアップグレード・ダウングレードは、構成ファイル(wp-admin、wp-includes、topファイル群)を指定バージョンのものに上書きすれば可能です。ただし今回の案件の様にエラーが出る場合があります。今回はwp-config.phpでエラー表示モードにして確認した事で、PHPバージョンが上がっていた事がわかりました。今回はDBデータも一部消失していたので、バックアップをインポートし直して復旧しています。何よりもまずはバックアップを取るべきです。
![Wordpress特定ページをインデックスさせない方法(noindex・nofollow)](wordpress/images/noindex_nofollow_img1.png)
Wordpressの各ページをインデックスすさせる・させないの操作は、noindexのmetaタグをheadに入れる事で対処します。手書きコードやプラグインを使う事で、各ページの編集画面にnoindexのチェックボックスを出してON・OFFが設定できます。noindexをつける際はセットでnofollowも付けます。これにより対象ページからリンクで辿れる他のページの価値を守っています。
![Gmailの様々な検索方法を紹介したい](webworks/images/gmail_search_img1.png)
Gmailアプリの一番の特徴はその豊富な検索機能です。検索ボックスの隣のアイコンをクリックすると専用の検索パネルが表示れます。完全一致・添付ファイルあり・日付範囲・件名・未読・ラベルなど様々な検索が可能です。パネル上からほとんどの検索ができますが、演算子を使ったコード表記でも検索する事ができます。
![ムームー管理のドメインにSPFレコードを追加する場合の流れ](webworks/images/muumuudns_spf_img1.png)
外部サービスが別のドメインメールアドレスで送信をする際に、なりすまし判定されないためのSPFレコードの追加依頼がよくあります。ムームードメイン系列のレンタルサーバーの場合、SPFレコードを入力する際にそれ以外のDNSレコードを手入力ではなく選択式にできます。その代わりTXTレコードが2行になってしまうので、そのままでは効果が出ません。ムームードメイン側に元々のSPFレコードの削除申請が必要です。
![Google検索ボックス表示遅延がCLSを悪くしている件](seo/images/cls_searchbox_img1.png)
SEO「Core Web Vitals」指標の一つであるCLSは、表示後の要素の移動(ズレ)を図る指標です。Google検索ボックスは読み込みに時間が掛かるので、先に表示された要素が押し出されてズレが生じます。CLS解消のポイントは、最初から表示領域を確保しておく事です。表示枠に対してCSSで高さを入れておけば、最初から領域を確保できるので表示位置がズレません。
![Wordpress管理画面の英語表記を日本語にするには](wordpress/images/japanese_img1.png)
管理画面全体が英語の場合はsettingのgeneralでSite Languageの欄を日本語にしましょう。自分のユーザーアカウントのみ英語になっているケースもあります。部分的に英語表記の場合は、Languageの言語ファイルバージョンが違う可能性があるので、Wordpressのバージョンに合わせましょう。WP Multibyte Patchは日本語によるエラーを解消してくれるプラグインです。昔はプリインストールされていましたが、今は手動インストールが必要です。
![ドメイン変更リダイレクトならプラグインではなく.htaccessを使おう](html/images/htaccess_domain_img1.png)
Wordpressサイトでも別ドメインへリダイレクトするなら、.htaccessへ記述をする方が良いと思います。Redirectionプラグインは個別リダイレクトができますが、全URLを転送するには膨大な手間が掛かります。.htaccessならドメイン配下のどの様なURLであっても、同じ位置にリダイレクトする事ができます。ただし記述がある限り元サイトを見る事・ログインする事はできません。
![Contactform7プラグインでReturn-Pathのメールアドレスを設定する](wordpress/images/contactform7_returnpath_img1.png)
Return-Pathはメール送信に失敗した場合のエラーを通知してもらうメールアドレスであり、届いたメールに対して返信をするReply-toとは違います。Reply-toは送信元のアドレスが自動で選択されますが、Return-Pathは送信者が任意に設定をする必要があります。Contactform7ではReturn-Pathの設定が効かずにホスト名のメールが設定される事が多いため、functions.phpに直接記述する事で対処しましょう。
![WindowsのVS CodeでTerminal(コマンドプロンプト・PowerShell)を表示する](html/vscode/images/terminal_img1.png)
CUIツールとしてコマンドプロンプトかPowerShellが良く使われますが、WindowsではPowerShellが優先される様です。VS codeのターミナルでもPowerShellが初期状態ですが、設定からでも起動中からでもコマンドプロンプトへの変更が可能です。ターミナル画面は分割したり表示位置を変更したり、タブとして表示・全画面表示もできます。
![iPhoneの複数画像の背景を一括で切り取りする方法](webworks/images/iphone_img_triming_img1.png)
iPhoneには標準機能で画像の背景をきれいに切り取る機能がついています。切り取りをするためには、写真アプリからファイルアプリへと画像を複製移動させる必要があります。複数画像も一括で同時に切り取りできますが、切り取り範囲を選んだりはできず、切り取り後に画像の向きが変わる事があります。
![Wordpressの記事投稿一覧ページURLをカスタマイズする](wordpress/images/archive_img1.png)
Wordpressの記事一覧は初期設定で無効になっており、index.phpが表示レイアウトとして採用されるルールです。functions.phpで設定を有効にするとarchive.phpやcategory.phpが採用され、逆にindex.phpは採用されなくなります。記事一覧URLはfunctions.phpでスラッグ名を設定でき、カテゴリ一覧URLはcategory/を省略すればスラッグ名のみが採用され、まとまります。
![WEBサイトのナビメニューをスマホ版で横スクロールさせる](html/images/navi_scroll_img1.png)
グローバルメニューである横並びメニューはPCモニター向けに設置されたメニューなので、スマホ版でそのままは使えません。画面幅の狭いスマホでもナビゲーションバーを横スクロールさせる事ができれば、スマホ向けボタンなどを準備する必要がありません。width: max-content;で折り返しさせずに全てを表示させ、overflow: auto;で隠れた部分を表示するのがポイントです。
![iPhone写真画像の保存容量を無限に増やす方法(共有アルバム活用)](webworks/images/iphone_album_img1.png)
iPhoneには端末のデータ容量以外にiCloudのストレージ(5GB)、それらとは別に共有アルバムの領域があります。iCloudのストレージ内には自動同期されていますが、共有アルバムに任意コピーしておけば、写真アプリから削除しても大丈夫です。共有アルバムには写真なら5,000枚が保存でき、AppleIDアカウント一つにつきその共有アルバムを200個作る事ができます。
![「BEM」CSSの設計・命名規則をおさらいする](html/images/css_bem_img1.png)
BEMはBlock・Element・Modifierの3つの要素からなるCSSの命名規則で、block__element--modifierで並べたclass名で全体がすぐに把握できます。Blockはその内容を示す名称にし、使い回しできる様に独立させます。Elementの名称は重複して書いてもOKですがどんなに入れ子になっても子孫セレクタでは書きません。ModifierはElementの差分を表現する装飾子ですので、必ずElementのクラスの後に追加で記述されます。
![get_postsとWP_Query それぞれの特徴と違いをまとめてみました](wordpress/images/get_posts_wp_query_img1.png)
get_postsとWP_Queryはいずれもサブループ中に必要な情報を表示させる命令です。get_postsと比べるとWP_Queryの方が記述量が増えます。get_postsは投稿記事の配列情報のみを取得し、WP_Queryはそれ以外の様々なクエリ情報も取得します。いずれもパラメータ値で条件を設定でき、the_postの方式が使えます。リセットにはwp_reset_postdata()を使いましょう。
![WEBサイト上の表データをExcelにそのままインポートする便利な方法があります。](pccontrol/images/excel_table_import_img1.png)
WEBページのtableの表データを取り込む場合、Excelのデータ取り込み機能を使うと枠や色まで入ったテーブルデータを取り込めます。WEBページ上のtableデータの情報が変更された場合、クエリと接続パネルの「最新の情報に更新」ボタンを押すことで取り込んだ表データの情報にも反映させる事ができます。取り込んだ表データは「クエリと接続」パネルに保存されていますので、ここからいつでも表データをインポートする事ができます。
![ReactではCSSのスコープ課題を克服する「CSS Modules」がおすすめ](react/images/css_modules_img1.png)
CSSファイルの一番の問題はグローバル定義がされてしまう事で、WEBコンテンツ全体に影響範囲(スコープ)が及ぶことです。通常のCSSやインラインスタイル(Inline styles)ではこのスコープの問題を解決できなかったり、機能不足な面があります。CSS Modulesは従来CSSと同じレベルで使えて、さらにクラス名にプレフィックスがつくため、CSSのスコープが他のコンポーネントに及ぶ事がありません。
![メインクエリとサブクエリにwp_queryを駆使する(投稿記事の入れ子)](wordpress/images/main_sub_query_img1.png)
Wordpressのデータ出力にはWordpress側が自動で実行するメインクエリと、管理者側が任意に実行するサブクエリとがあります。メインクエリによるデータの流れ(メインループ)以外は、独立していても入れ子になっていても全てサブクエリ(サブループ)となります。サブクエリ実行にはWP_Queryが便利です。様々な条件を指定・抽出してデータを表示する事ができます。入れ子の場合はwp_reset_postdataを入れてメインクエリに干渉しない様にしましょう。
![Wordpress標準のサイトマップwp-sitemap.xmlを送信する方法](wordpress/images/sitemap_img1.png)
サイトマップ(.xmlファイル)はWEBサイトが更新された事を検索サイトに効率的に通知し、スムーズにインデックスしてもらうために必須のファイルです。Wordpressの5.5以前は、プラグインを利用してサイトマップ(sitemap.xml)を自動生成・更新していました。Wordpressの5.5バージョンアップ以降は、Wordpressの標準機能としてサイトマップ(wp-sitemap.xml)が生成・更新されるようになっています。
![React Props.childrenの使い方、分割代入について](react/images/props_children_img1.png)
ReactのPropsにはchildrenという、テキスト情報を受け渡しできる専用の名称があります。プロパティ値は専用タグ名称で受け渡し、テキスト情報(HTMLソース丸ごと)はchildrenで渡せます。Propsは分割代入をする事でprops.の記述を省略する事ができますが、propsから渡ったデータかどうかが判別しにくくなります。
![React propsは親要素が持つプロパティ値を渡して、コンポーネント内容を動的に変化させる](react/images/props_img1.png)
Reactではデータを各パーツごとにコンポーネントjsファイルに分割する事で、共有部分の使い回し・管理ができます。ReactはJSX記法を採用しているので、jsファイルの中にHTMLソースをそのまま記述する事ができます。分割したjsの関数名と同じタグ名をつける事ができ、コンポーネントを入れ子にする事で階層化部分も分割する事が可能です。
![VS code で文字化けした時はエンコードの切り替え・自動判別をする事](html/vscode/images/encode_img1.png)
VS codeでは基本的にUTF8でファイルを開くようになっています。設定メニューからencodingで検索してエンコード種類を自動判別して開いたり、UTF8以外のエンコードに変更ができます。ファイルが文字化けした場合エンコード付きで再度開くのはOKですが、エンコード付で保存はしない方が良いです。文字化けを元に戻せない場合があるので事前バックアップを取りましょう。
![ムームードメインのドメイン譲渡について(ムームーIDの開設代行・譲渡)](webworks/images/server_moving_muumuu_img1.png)
ムームードメインはムームーID間でドメインを譲渡する事が簡単にできる様になっています。譲渡相手にがムームーIDを持っていない場合、開設を頼めない事はありませんが本人認証もあり難しい場合もあります。ムームーIDを代行で開設する場合、同一メールアドレスで複数のムームーIDを開設する事ができます。
![WindowsコマンドプロンプトによるFTPサーバーへのファイル転送操作](pccontrol/images/cmd_ftp_img1.png)
Windows11のコマンドプロンプト(標準ftp.exe)によるftpサーバー内のファイル操作の方法をご紹介します。ファイル操作をする際は、ftpサーバー先のディレクトリとローカル先のディレクトリを指定しましょう。コマンドプロンプトではPASVモードによる接続ができないため、ファイル操作ができないレンタルサーバーがあります。
![コードエディタVS Codeを使うメリット(初心者向け)](html/vscode/images/merit_img1.png)
VS Codeはあらゆる拡張子ファイルの編集に対応したコードエディタで、無料で利用できます。様々なコード入力補助表示機能やエラー警告機能、一括検索・置換機能があり、円滑な開発行動が可能になっています。フォルダ単位で最後に開いていたファイル群を記録しているので、いつでも複数ファイルを開いた状態にできます。
![Reactのコンポーネントの考え方について](react/images/components_img1.png)
Reactではデータを各パーツごとにコンポーネントjsファイルに分割する事で、共有部分の使い回し・管理ができます。ReactはJSX記法を採用しているので、jsファイルの中にHTMLソースをそのまま記述する事ができます。分割したjsの関数名と同じタグ名をつける事ができ、コンポーネントを入れ子にする事で階層化部分も分割する事が可能です。
![AssistiveTouchボタンスクリーンショット機能をカスタマイズする](webworks/images/iphone_assistivetouch_img1.png)
AssistiveTouchボタンを使えば、いつでもiPhoneのスクリーンショットを撮影する事ができます。AssistiveTouchボタンには、iPhone端末の設定操作に関する命令をメニュー表示できる「最上位メニュー」があります。最上位メニューにはアプリを開く命令は設定できませんが、アプリを開く命令を事前に登録したショートカットなら設定できます。
![Win11でcmd.exe(コマンドプロンプト)を起動し、同時に指定フォルダへ移動する方法](pccontrol/images/cmd_cd_img1.png)
cmd.exeを起動しcdコマンドで作業ディレクトリに移動する事は頻繁に行うため、ショートカット操作を知っておくべきです。作業フォルダのアドレスバーからパスをコピーする方法。或いはアドレスバーに直接「cmd」と入力する方法が簡単です。cmd.exeとcdコマンドを入れたショートカットを作成する方法や、.batファイルに命令を入れ「送る」メニューから実行する方法もあります。
![Wordpressで投稿記事の並び替えをする方法について](wordpress/images/orderby_img1.png)
Wordpressの投稿記事や固定ページの表示順を並べ替える場合、日付や順序を使います。プラグインで並べ替える場合は、ドラッグ&ドロップで順番を変更できる「Intuitive Custom Post Order」プラグインがおすすめです。手動で並べ替える時は、並び順のキー(order)と昇順降順(ASC・DESC)を入れます。カスタムフィールド名で並べ替える時は、orderbyに「meta_value」orderに「カスタムフィールド名」を入れましょう。
![iPhoneのアプリにパスワードロックを掛ける方法](webworks/images/iphone_app_lock_img1.png)
iPhone本体のパスワードロック以外に、各アプリ別にパスワードロックを掛ける事ができます。ショートカットアプリに命令を設定し、それを実行する「Instagram」アイコンを準備します。本来のInstagramアイコンは使いません。設定された4桁数字を入力するとInstagramを起動し、入力を間違ったらアラートが出るif文が設定されています。
![メール配信サービス「SendGrid」とは?SendGridの始め方を紹介](webworks/images/sendgrid_img1.png)
SendGridは、高速大量配信が可能なメール配信サービスです。迷惑メールに入りずらく配信分析機能も充実しています。レンタルサーバーを利用していないドメインで配信する場合、ドメインのDNSサーバーにCNAMEを追加する必要があります。既にメールアドレスがあれば登録するだけです。SendGridは他のシステムとの連携を想定した様々なAPIが準備されています。それらとの連携には「API Key」が必要です。
![Firebase cloud functionsサービスを利用するための初期設定およびテスト](webworks/firebase/images/firebase_functions_img1.png)
Firebase functionsはFirebaseと他システムとをつなぎ合わせる、橋渡し的な機能を持っています。まずはこのFirebase functionsでHTTPリクエストを実行する関数をテストで構築します。Firebase functionsを利用する際は、無料のSparkプランではなく従量制のBlazeプランに変更する必要があります。
![Wordpressのシステム自体を丸ごと移設する場合](webworks/images/server_moving_wordpress_all_img1.png)
簡単インストールなどでWordpressシステムのバージョン差が気になる場合は、wp-content以外に全ての構成ファイルを移設しましょう。そうすれば移設先でもWordpressバージョンを維持したまま移設が可能です。ただしPHPバージョンにも差ができる場合がありますので、エラーが出る場合は一つずつ対処していきましょう。
![Reactのインストール、初期状態をWEBサイトへ公開するまでの流れ](react/images/react_install_img1.png)
ReactをWindowsPCにインストールして、初期ページをWEBサイトに公開するところまでを紹介します。インストールの際は、React以外に必要なツールを省略して導入できる「Create React App」が便利です。WEBサイトに公開する場合は、buildコマンドで生成したフォルダをサーバーにUPすれば表示されます。
![FirebaseのStorageを使ったWEBアプリを作る](webworks/firebase/images/firebase_storage_img1.png)
Firebase Storageは、ファイルや画像を自由にアップロード・ダウンロード管理できるGoogle管轄のストレージサービスです。クライアントアプリやWEBアプリからUPしたデータは、FirebaseのConsole上で管理する事ができます。用意するのはアップロード部分だけであり、それ以外のバックエンド機能は全てFirebase側が担当してくれます。
![FirebabaseのAuthenticationアプリをレンタルサーバーで公開する](webworks/firebase/images/firebase_auth_build_img1.png)
開発環境で構築したFirebaseのAuthentication機能を、レンタルサーバー内にアップして公開する方法を紹介します。ユーザー認証関連のバックエンド機能はFirebase、アプリはwebpackを使って構成をしています。webpackをバンドルした後、生成ディレクトリ内にindex.htmlとfirebase.config.jsonを入れましょう。
![FirebaseとWebpackでAuthenticationユーザー認証テスト環境を作る](webworks/firebase/images/firebase_auth_test_img1.png)
FirebaseのAuthentication機能を使ってメールアドレスとパスワードでログインするページをローカル環境で構築します。Firebaseのおかげでログインページを構築するだけでで済み、後の管理はすべて賄ってくれます。Firebase SDKのバージョンがv9になり変わったので、webpackを使って実装をしています。
![QRコードの作成方法はたくさんあります(WEBツールで・作るExcelで作る)](other/images/qr_code_img1.png)
QRコードはWEBツールで簡単に作成・画像として保存する事ができます。WEBツール以外にExcelでもQRコードが作成できるので、紹介しています。作成したQRコードの対象URLをきちんとバーコードリーダーやカメラアプリで読み込めれば大丈夫です。
![Outlookの連絡先パネルが重なって操作できない場合の対処法](pccontrol/images/outlook_bug_img1.png)
最近実施されたOutlook2019のバージョンアップ後に起きるバグをご紹介します。連絡先の連絡先パネルが画面の真上に重なってしまう事で、他の操作ができなくなる現象です。一度最大化を解除してリボンメニューを押せるようにし、閲覧ウィンドウをオフにする事で解消します。
![Firebase Cloud Massaging(FCM)をサンプルアプリから実用利用する](webworks/firebase/images/firebase_fcm_img1.png)
Firebase Cloud Messaging(FCM)はサンプルアプリを作成できれば、すぐに実践で活用できます。アプリをHostingにdeployして、一般ユーザー向けにカスタマイズしましょう。ユーザーにページを開いて「通知許可」してもらえばOKです。FCMのダッシュボードからキャンペーンを作成する事で自由に配信が可能です。
![FirebaseのWeb Push通知機能をテスト実装する方法を解説](webworks/firebase/images/firebase_webpush_img1.png)
Web PushはPCブラウザを通して、WEBサイトの新着情報などを素早くユーザーに通知できる大変便利な機能です。Firebaseの管理画面から通知を許可ユーザー(アプリページを訪問したユーザー)に一斉にメッセージを送る事ができます。テストメッセージの際はトークン情報の登録が必要になりますので、トークンを生成するWeb Pushサンプルアプリを実装していきます。
![Firebase Hostingに独自ドメインを設定する(お名前.comでDNSレコード追加する場合)](webworks/firebase/images/firebase_domain_img1.png)
Firebase HostingでデプロイしたWEBページを、独自ドメイン(カスタムドメイン)で公開する方法について紹介します。設定するには、独自ドメインを取得した会社の管理画面から、DNSレコードを2回編集する必要があります。まずは独自ドメインの所有権をTXTレコードで確認し、次にAレコードでFirebaseのIPアドレスを指定する必要があります。
![FirebaseでWEBサイトを開設するFirebase Hostingの手順を詳しく解説](webworks/firebase/images/firebase_hosting_img1.png)
Firebase Hostingは、Firebase内でWEBサイトを公開(ホスティング)できる機能です。Wordpressなどのシステムは入れる事ができませんが、HTMLサイトならOKです。配信はCDNでSSL化されたアドレスになり、デプロイ単位で前の状態にロールバックする事が可能です。
![Firebaseのインストール、使えるようになるまでの準備工程](webworks/firebase/images/firebase_install_img1.png)
Firebaseはモバイルアプリで必要なバックエンドサービスを利用できるサーバーサービスです。プッシュ通知やアクセス解析など、サーバー側で構築が必要なツールが揃えられています。Node.jsのnpm、Firebase CLIをインストールし、Googleアカウントを紐づけてプロジェクトを作成する流れです。
![Wordpress画像アップロード時に複数サイズを自動生成させない方法](wordpress/images/uploadsize_control_img1.png)
画像アップロードと同時に複数サイズの画像が生成され、不要画像も出てくるので容量を圧迫する原因になります。管理画面やfunctions.phpに追記する事で、全ての画像の自動生成をコントロールする事ができます。srcsetタグを有効にしてWEBページの読込速度を向上させるためにも、主要なサイズは生成するようにしましょう。
![おすすめ書籍「限りある時間の使い方」を読みました。](other/images/book_timemanagement_img1.png)
「限りある時間の使い方」という本がベストセラーになっていましたので読みました。時間を使いこなせるかは、あなた自身が時間に対しどう向き合うかで決まります。時間の中を漂う現代人がこれからの時間の本質を知る事ができ、日々を生きる私達の「今」に気づける一冊です。
![CSSで正六角形・六角形ボタンを作る方法](html/images/css_hexagon_img1.png)
CSSで六角形や六角形ボタンを作る方法を紹介しています。コードはコピペで使えます。正六角形の場合、beforeやafterの長方形を60度傾けて実現します。元の長方形の縦横サイズ計算が必要になります。六角形ボタンの場合、before・afterのborderで左右の三角形を作ってくっつけるのが主流でしょう。
![NFTドメイン(ブロックチェーン・暗号アドレス登録)が発売されました](webworks/images/nft_domain_img1.png)
NFTドメインは、暗号通貨の取引時に利用する複数の暗号化アドレス情報を登録する事ができます。さらにブロックチェーン情報が登録されているので、不正やなりすましを防止した認証ログインやコンテンツ構築ができます。NFTドメインは取得料のみで維持費は掛からず、所有権は100%あなた自身にあります。
![FFFTPでファイル検索・フィルタを掛けるためにはコツが必要](html/images/ffftp_search_img1.png)
CSSでHTMLテキストや特定の文字を枠線で囲む方法をご紹介します。divはブロック要素なので横幅一杯まで囲んでしまいますが、インライン化すれば文字部分だけを囲むようになります。1文字のみを正円で囲むには、文字の下にCSS疑似要素で作った正円を敷く形にしましょう。
![Wordpress構築データをhostsファイル無しで事前確認する方法](webworks/images/check_subdomain_dns_img1.png)
Wordpressをリニューアルすると同時にサーバーも移転するケースが多いです。一般的にはhostsファイルを使って事前確認しますが、設定した端末では元サイトが見れないデメリットがあります。環境によりますが、サブドメインを設定し、DNSサーバーでホスト指定してあげれば新旧両方のサイトが事前確認できます。
![HTML・CSSで囲み文字を作る方法(四角・正円)](html/images/css_surround_img1.png)
CSSでHTMLテキストや特定の文字を枠線で囲む方法をご紹介します。divはブロック要素なので横幅一杯まで囲んでしまいますが、インライン化すれば文字部分だけを囲むようになります。1文字のみを正円で囲むには、文字の下にCSS疑似要素で作った正円を敷く形にしましょう。
![javascriptでWEBページのURLを取得、ブラウザに表示する方法](html/images/javascript_url_img1.png)
Javascriptのwindow.locationオブジェクトを使って開いているWEBページのURLに関する様々な情報を取得する事ができます。Javascriptで取得するデータは基本的にユーザーには見せないので、コンソールパネルのログ画面で確認します。あえてWEBページに複数のlocationプロパティのログを表示させるなら、insertAdjacentHTML()メソッドを使うのが便利です。
![CSSで見出しのアイコンや表記をデザインしよう](html/images/css_midashi_img1.png)
CSSで見出しタグをデザインできれば、それだけ洗練されたWEBページへと近づきます。そのためにはbefore・afterの疑似属性を使いこなせるようになる必要があります。要素をclip-pathでアイコンに切り取ったり、Font Awesomeアイコンを使ったり、data-textをattr関数で呼び出したり、自由な長さの枠線を2本つける事もできます。
![Font Awesome6を自在に使いこなせるようになりましょう。](html/images/font_awesome6_img1.png)
Font Awesome 6は無料版と有料版とがあり、無料で使えるアイコンは種類が限られています。KIT登録までは自動ですが、KITを使わずに実物をダウンロード利用する事もできます。css/all.cssとwebfonts/は必須です。デザイン的な装飾や、アニメーション等の様々なカスタマイズコードが用意されています(Pro版限定のものあり)。
![Windowsのプレビューウィンドウをフル活用していますか?](pccontrol/images/file_preview_img1.png)
Win10からプレビューウィンドウ機能が使える様になりました。画像ファイルやWord・Excel・PDFなどのOfficeファイル、html・CSS・phpなどのプログラムファイルも開かずに確認ができます。Photoshopのpsd形式画像はサムネイルでも画像が映らないため、SagaThumbsソフトを入れましょう。
![Wordpressバージョンを確認する方法・非表示にする方法](wordpress/images/version_check_img1.png)
Wordpressのバージョンを内部・外部から確認する方法、バージョンを非表示にする方法をご紹介します。本来Wordpressのバージョンは内部関係者だけの機密であり、外部に知れるとハッキングの対象になり危険です。ただ引っ越し前の事前確認という目的に限定すれば、外部から情報が知れて便利な時もあります。
![GA4「Google Analytics4」とUAは並行して解析しましょう(すぐにGA4を設定するべき)](webworks/images/ga4_img1.png)
ユニバーサルアナリティクス(UA)は2023年に廃止され、Google Analytics4(GA4)がメインプロパティになります。UAによる過去の蓄積データは全て消滅しますので、バックアップ(エクスポート)しておきましょう。今すぐGA4プロパティを設定して、UAと並行運営する時期をできるだけ長くして下さい。
![月間検索数ゼロのキーワードを狙う(検索ボリュームが少ない単語が勝負)](seo/images/search_volume0_img1.png)
月間検索数がゼロに近いキーワードは競合が少なく上位表示をさせやすいので、たくさん設定するようにしましょう。このロングテールキーワードで訪問者が来る場合、そこが競合他社との差別化するポイントになります。単語の言い回しについてはGoogleの機械学習システムが働くので、様々なパターンで上位にヒットさせてくれます。
![WordpressサイトにGoogle reCAPTCHA(v3)を導入する方法](wordpress/images/recaptcha_img1.png)
Google reCAPTCHA(v3)は(v2)と違い、ロボットではない事を示すチェックボックスやランダムな質問に対する画像選択などが出ません。Contact Form7の5.1以降は、最新バージョンのGoogle reCAPTCHA(v3)を利用する仕様になっています。Googleにサイトを登録し、サイトキーとシークレットキーをContact Form7に設定するだけで利用できるようになっています。
![スクリーンタイムパスコードを設定してiPhoneの機能を制限しよう](webworks/images/iphone_screentime_img1.png)
iPhoneのスクリーンタイムはアプリの利用やWEBサイト閲覧先をコントロールする機能で、パスコードでロックできます。4桁のパスコードを忘れてもios13.4以降であれば、AppleIDとパスワードの認証により再設定が可能です。それ以前のiosの場合、iTunesなどに接続してiPhoneを初期化する必要があるので注意しましょう。
![お問い合わせ入力フォームの入力サポート機能を最大限に活用しよう](html/images/input_support_img1.png)
お問い合わせフォームはブラウザの自動入力機能を利用するとユーザーの入力短縮になり、ストレス軽減につながります。自動入力機能はinputのname値を参照しているので、オリジナルのname値ではなくなるべく世界共通のname名称をつけるべきです。スマホデバイスではinputmodeを使って、入力する情報の種類に応じて最適な入力設定を用意しましょう。
![クライアントエピソード14:「サーバーのメールが受信できない」と言われた話](client/images/episode14_img1.png)
メールが受信できないというクレームをクライアントから受けた時のお話です。IMAPで確認しているメールが受信された後に消える現象で、クライアントは端末側で何もしていないと主張。メールサーバーを変更しても同じ症状が出たので、ようやく端末を確認。迷惑メールに自動振り分けされていた事が原因でした。
![ムームーDNSの操作方法(WEBサーバーとメールサーバーを別に分ける場合)](webworks/images/server_moving_muumuu_dns_img1.png)
ムームーDNSは、WEBとメールのサーバー先を指定できるムームードメインのDNSサービスです。AレコードとMXレコードの設定を両方必ず入れて、それらが反映される様ムームーDNSのネームサーバーへと切り替える必要があります。ムームーDNSのセットアップ情報変更ページの未設定ボタンからは、ネームサーバー設定変更はできません。
![無料で独自ドメインを取得する方法](webworks/images/domain_free_img1.png)
独自ドメインには取得費・維持費が必ずかかります。その価格は種類や販売会社によって違います。無料で独自ドメインを取得・維持できるサイトがありますが、現在は新規ドメイン登録ができない状態の様です。レンタルサーバーの長期契約キャンペーンを利用すれば、無料で独自ドメインを利用できる様になります。
![Wordpressで用語集システムを自作する方法](wordpress/images/yougo_img1.png)
Wordpressサイトに用語集コンテンツを構成する方法をご紹介します。構成は用語の詳細ページ・選択カテゴリ記事一覧・用語集TOPのカテゴリ一覧ページ3種です。現場では既にカスタマイズされたテーマに対して、改変・追加する形でご紹介しています。
![サブドメインの作り方と注意(DNSレコード追加が必要な場合)](webworks/images/subdomain_img1.png)
サブドメインは本来のドメイン名の前につくwww.などのホスト名部分を指します。指定ディレクトリ内にデータをUPする事で、サブドメインで表示させることができる様になります。WEBとメールとで別々のサーバーを使っている場合やサブドメインだけ別サーバーを使う場合はDNSレコードの追加が必要になります。
![WEBサイトに直接メールアドレスを直接表示しない方法(スパムメール利用防止)](html/images/mail_nodisplay_img1.png)
自分のメールアドレスはWEBページ上に表示せず、お問い合わせフォームを設置するべきです。自動収集ツールなどにアドレスを取得されてしまうと、ウィルスや詐欺メールなどのスパムメールが大量に送られてきます。表示させるなら、暗号化する・文字列を変える・@文字を変更削除するなど工夫をしましょう。
![映画:名も無き世界のエンドロールを見ました(あらすじのみネタバレ無し)](other/images/movie_namonaki_img1.png)
映画「名も無き世界のエンドロール」の映画がお勧めです。現在も上映中ですが、dtv・Netflixでも配信が開始されており、Amazon Primeでも先日観る事ができました。せつなくも悲しいラスト20分の衝撃をぜひその目で確かめてください。
![iPhoneでカメラシャッターの音を無音にする方法(シャッター音消去)](webworks/images/iphone_silence_shutter_img1.png)
日本のiPhoneは盗撮防止の目的から、基本的にカメラのシャッター音を消すことができない仕様になっています。通常のカメラアプリの代わりに、無音のカメラアプリをインストールして利用する必要があります。ショートカットアプリのオートメーション機能で、カメラアイコンを押した時に無音カメラアプリが開くように設定しましょう。
![Google Search Consoleで表示される検索トラフィックデータが、実クエリ数の半分程度という事実](seo/images/query_counts_disappearance_img1.png)
Google Search Consoleの検索クエリデータは、実数の平均50%程度しか確認できていないそうです。月間検索数が極端に多い、或いは少ないサイトは消失率が高い傾向にあるようです。消失したのがボリューム数か、それともクエリ自体が消失しているのかで大きく変わります。
![javascript DOM:WEBサイトデータをブラウザ上で変更できる機能](html/images/javascript_dom_img1.png)
javascript DOMはブラウザ上のWEBデータ(Documentオブジェクト)に対して様々な変更を加える事ができるものです。WEBページの階層構造や各ノードを軸にして特定個所を検索し、追加や変更・削除などを実行する事が可能です。avascript DOMには様々なメソッドがあり、それを覚える事で様々な変化をさせる事ができます。
![CSSのコメントアウトはスタイル無効以外にも管理者にとって重要な用途がある](html/images/css_commentout_img1.png)
CSSのコメントアウトは、/**/で囲った部分をプログラムとして無効にする機能です。スタイルの範囲や特定セレクタとプロパティ部分のみを無効にすることができます。コメントアウトを使って管理者が迷わないようにCSS設定のメモや注意書きを入れるのが一番重要です。
![Wordpressでbrやpタグが消えてしまわない様にする方法](wordpress/images/tag_vanish_img1.png)
テキストエディタに入れた改行タグや段落タグが、消える事がたまにあります。もともとエディタ上の改行や段落位置は、brやpタグとしてHTMLソースに反映される様になっています。Advanced Editor Toolsプラグイン等を使えば、設置したbrやpタグを維持でき、エディタ上の改行や段落をタグ表示してくれるようになります。
![hostsファイルでサブドメインを設定する場合、ロリポップでは事前確認できない](webworks/images/server_moving_hosts_subdomain_img1.png)
hostsファイルでサブドメインのデータを事前確認するのに、何も問題がないのはエックスサーバーです。他のサーバーの場合、hostsファイルだけではサブドメインの事前確認ができない場合があります。ロリポップの様にムームーID認証によるネームサーバーの一時セットアップが効くケースもあります。
![win11とwin10とでフォルダを共有する際、共有PC名が表示されない場合の対処法](pccontrol/images/pcshare_img1.png)
きちんと共有設定ができているにも関わらず、Win10の共有PC名が表示されない事があります。Win10の古いバージョンでは、共有PC名が表示されない事がある様です。そんな時はアドレスバーに直接共有フォルダのパスを入れれば開けます。パスのショートカットを登録しておきましょう。
![Wordpressの出力データのみを静的HTMLページに表示させる方法](wordpress/images/dataonly_img1.png)
Wordpressの出力データをテーマテンプレートを使わずに直接HTMLページに表示させる事ができます。HTMLページでPHPが使える様に.htaccessに設定する必要があります。投稿記事の詳細ページもWordpresテーマから独立させて表示する方法をご紹介しています。
![Office Wordを使ってWordpressに投稿する方法](wordpress/images/word_wordpress_img1.png)
OfficeのWordからWordpressサイト記事を投稿する事ができます。テーブル表や画像・図形などを挿入する事ができます。投稿カテゴリも選べます。ただWord産の記事はWordで編集するとルールは決めましょう。xmlrpcの接続許可も必要です。
![xmlrpc.phpを無効にしてセキュリティを向上させよう](wordpress/images/xmlrpc_img1.png)
xmlrpc.phpはWordpressを外部システムから操作するために必要な遠隔操作用のファイルです。今はREST APIに役目を渡しましたが、有効化されたままになっている事が多いです。xmlrpc.phpはセキュリティ上の脆弱性があるので、.htaccess等で早めに無効化やリダイレクトするべきです。
![SXG:キャッシュデータを高速表示しつつドメイン名で表示させる技術](seo/images/sxg_img1.png)
SXGとはキャッシュサーバーからWEBページを表示させる技術で、WEBページ表示速度を向上させる事ができます。LCP値の上昇とともにユーザーの満足度を向上させる事ができるため、SEOランキングに影響します。AMPの場合ドメイン名が変わってしまいますが、SXGはドメイン名をそのまま使う事ができます。
![Wordpressサイト運営にはFTP接続は必須、FTP情報が無くてもプラグインで操作可能](wordpress/images/wp_ftp_img1.png)
Wordpressサイト運営には、FTP情報を使った修正やバックアップが必須です。File Managerプラグインを使えば、管理画面上でFTPソフトの様な画面操作ができる様になります。テーマやプラグインの更新時に、FTP入力認証を促される場合がありますので注意しましょう。
![Windowsメールアプリにドメインメールが設定できない(私はこうしました)](webworks/images/winmail_img1.png)
Windowsのメールアプリでドメインメールアカウントの設定ができない事がよくあります。本アプリの難点は、設定が正しい・悪いに関わらず登録され、間違っていたら削除するしかない所です。チェックを付け外ししながら根気よく登録を続けて下さい。IMAPならすぐに入る事が多いです。
![calcでフォントサイズを自動計算する方法(レスポンシブデザイン必須)](html/images/css_calc_font_img1.png)
font-sizeはCSSのcalcとvwを使った公式にあてはめて、画面枠に応じた最適なサイズを自動計算できます。必要なのはフォントの最小値と最大値、画面枠の最大値と最小値の4つの数値です。calcの公式自体を丸覚えしてfont-sizeやpaddingの算出に流用できるようにしておきましょう。
![iPhoneでSafariのタブ操作をまとめた(グループ化・消す・元に戻す・並べ替える)](webworks/images/iphone_safari_tab_img1.png)
Safariのタブ一覧の表示は、2021年のios15アップデート時に折り重なり状態からサムネイルの2列表示に変わりました。タブはグループ化する事ができます。表示中のページは選択タブグループ内にしか入らない為、サイトのすみ分けができます。タブ内のサイトを一括削除したり、削除したサイトを元に戻したり、並べ替えたりが自由にできます。
![px、em、rem、%、vwの違いがわかりますか?単位を正確に知れば使い分けれます。](html/images/html_unit_img1.png)
px、em、rem、%、vwはWEBサイトの各要素のサイズを示す単位ですが、それぞれ意味が違います。pxのみ固定する単位であり、それ以外は他の数値により相対的に変換する単位です。emやremは自身および親要素のfont-sizeがベースで、%は親要素のサイズ、vwはブラウザ幅がベースです。
![CSSのcalcプロパティを使った様々な計算式と注意点](html/images/css_calc_img1.png)
CSSのcalcは計算式を入れる事ができる利便性の高いプロパティです。固定した数値を設定するのではなく、環境に応じた値を出すのでケースごとに結果が違います。calcはカスタムプロパティなどとも連携できるので、利用用途は非常に豊富です。
![ブラウザフィンガープリント(finger print)についての解説](webworks/images/browser_fingerprint_img1.png)
ブラウザフィンガープリントは、ユーザーの利用するブラウザ環境情報群を暗号化したものです。フィンガープリントは、元データが同じなら必ず同じ値を出す特性があります(A=B)。ブラウザフィンガープリント情報が同じなら同じユーザーである(B=A)として、Cookieの代わりにユーザーを特定する技術です。
![Conohaサーバーの導入時に気を付ける注意点をまとめてみました](webworks/images/conoha_wing_setting_img1.png)
Conoha WINGを最初に使う際、様々な設定が必要になる場合があります。文字コードはUTF8以外を受け付けないのでそれを解除し、CGIが実行できるように.htacessに追記します(CGIはPerlパス変更も必要)。初期のFTP情報でFTPソフトによる接続ができない場合は、新しいFTPアカウントを発行しましょう。
![ショートカット操作 マウスのホイールクリックをご存じですか](other/images/wheelclick_img1.png)
マウスのホイール部分は回転させてスクロールに使う以外に、直接押すホイールクリック機能があります。×マークを押さずとも、タブ上にマウスカーソルがあればホイールクリックで閉じる事ができます。リンクをホイールクリックすると別窓で開きます。タスクバー上のアプリは新規で開く事ができます。
![Wordpressにインスタグラムを埋め込む方法](wordpress/images/instagram_embed_img1.png)
Instagramの投稿をWordpressサイトで表示するなら「Smash Balloon Social Photo Feed」プラグインがお勧めです。自分のアカウント認証を済ませれば、投稿・固定ページやウィジェットにショートコードで埋め込む事ができます。インスタのアカウントは複数登録でき、アクセストークンを使ったマニュアル登録も可能です。
![Custom Post Type UIとAdvanced Custom Fieldsを使ってカスタム投稿ページとカスタムフィールドを構築する例](wordpress/images/cptui_and_acf_img1.png)
Custom Post Type UIとAdvanced Custom Fieldsを使ってカスタム投稿ページとカスタムフィールドを作ります。本記事では固定ページ内にカスタム投稿記事をphpで表示させる事が主となっています。カスタム投稿記事自体をカテゴリ別に分ける場合、タクソノミーを追加して設定していきます。
![WordpressにYoutubeを埋め込む方法](wordpress/images/youtube_embed_img1.png)
WordpressでYoutube動画を埋め込む方法を紹介しています。エディタの違いはあるかも知れませんが、iframeタグソースの埋め込みかURL自体の貼り付けで表示させる事ができます。iframeであれば、再生開始時間や再生リスト、最新動画など細かい設定が可能になります。
![ブラウザのシークレットモード(inPrivate ブラウズ)を開く方法についてまとめ](webworks/images/browse_secretmode_img1.png)
主要ブラウザのシークレットモードの開き方をまとめています。設定クリック、ショートカット、アイコンクリックで直接開く方法など様々あります。スマホでもプライベートモードが用意されており、設定ですぐに切り替えられます。
![bootstrapグリッドとbackground-sizeでカラムへの背景画像表示を実践形式で紹介](html/images/css_backgroundsize_img1.png)
CSSのbackground-sizeプロパティは、レスポンシブルに背景画像の表示サイズを調整する事ができます。通常、横長画像であればPC版はcontain、スマホ版はcoverを使うと100%で画像が収まりやすくなります。背景画像を入れるクラス名はbootstrapのグリッドと同列に入れ、幅の操作を任せる様にしましょう。
![最新のマウスオーバー効果おすすめ10選](html/images/linkover_effect_img1.png)
マウスオーバー時のエフェクト効果を10個紹介しています。基本的にはリンク線や効果を背景色・グラデーションで形成しているものがほとんどです。マウスオーバー時にその表示位置や大きさを移動させる仕組みが中心となります。
![WEBページを音声読み上げする様々な方法をまとめてみました](webworks/images/voice_reading_img1.png)
WEBページを音声で読み上げる機能の利用方法について紹介しています。メジャーブラウザやWindows・Wordpressプラグイン・iPhoneなど様々なツールでの音声読み上げ機能操作ができます。特にiPhoneで音声読み上げ機能を有効にすると、通常のタップ操作ルールが一変するので十分注意が必要です。
![iPhoneで声でメモを取る方法(音声テキスト入力)](webworks/images/iphone_voicememo_img1.png)
iphoneなら音声を自動でテキストに出力変換して保存する事ができます。使うアプリは「ショートカット」アプリのみで非常にシンプルです。出力したテキストは他アプリへ共有できますし、メモ帳などへ保存できるので便利です。
![メールサーバー名に独自ドメイン名を使えるのか検証してみた](webworks/images/mailserver_domain_img1.png)
メールサーバー名に独自ドメインを使うなら、DNS逆引きができるサーバーを使いましょう。そうでないサーバーでも、DNSにCNAMEレコードを追加すれば一応は使えます。しかしSSL暗号化されたメールは送受信できないので、実質お勧めはできない事になります。
![Googleカレンダーが表示されない原因をまとめてみた](webworks/images/googlecalendar_error_img1.png)
Googleカレンダーがスマホで見えなくなった。WEBページに埋め込まれているGoogleカレンダーが見えないなどの現象があります。まずGoogleアカウントにログインしている事、カレンダーを一般公開設定にしている事を確認しましょう。特に埋め込みのGoogleカレンダーはSafariブラウザで見えないケースがあります。iPhone端末側の操作が必要になる場合があります。
![メール一斉送信をOfficeで実現する(Outlookの連絡先とWordの宛名差し込みで一斉配信)](webworks/images/bulkmail_office_img1.png)
OfficeソフトのOutlookとWordがあればメールの一斉送信が可能です。宛先となるOutlookの連絡先登録はサブグループ無しで登録するようにしましょう。差し込みによるメール送信は必HTMLメールで送りましょう。そうしないとエラーになります。
![ドメイン移管時はWhois代理公開情報を解除してもらう事](webworks/images/server_moving_domain_whois_img1.png)
ドメイン移管が不承認になるのは、Whois情報が代理公開設定になっているためです。現在の管理者に代理公開設定を解除して、一旦管理者自身の情報にしてもらう必要があります。Whois情報を事前に譲渡先のメールアドレスに変更すれば、移管先で承認作業ができます。
![PDFをExcelデータに変換する方法(無料変換できるPDFとできないPDF)](other/images/excel_from_pdf_img1.png)
PDFはWordで開いてコピーを取り、Excelに貼り付けると簡単に変換できます。オンラインツールを使って無料でExcelへ変換できます。ただしOCR読み取りは有料です。OCRが必要なPDFはパスワードロックのものやコピー不可のもの、アウトライン化したPDFなどです。
![Wordpress 404ページを表示させる(プラグイン設定・ステータスには注意)](wordpress/images/error404_img1.png)
404エラーはテーマ上に404.phpがあれば自動で表示されますので、中身をカスタマイズしてユーザーの離脱率を下げる工夫をしましょう。ステータスコードはきちんと404になっているか確認しましょう(ソフト404に注意)。404pageプラグインを使えばすぐに実装できますし、404ページの編集機能を搭載したテーマもあります。
![短縮URLの仕組みや使い方をわかりやすくひも解いてみる](webworks/images/shortening_url_img1.png)
短縮URLは、サーバーを経由して長いURLを短く表現できるサービスです。文字数が非常に短くなり、スマホ画面などでスマートに表示させる事が可能です。様々な短縮URL生成サービスがありますので、目的に応じて活用しましょう。