1. マイパーツの概要

マイパーツは、LiteWordの非常に便利な機能の一つです。

機能と目的

• 繰り返し入力の効率化: 複数のページで毎回同じ文章やレイアウトを入力している場合、マイパーツ機能を使えば、一箇所に入力した内容を自動的にいろんな箇所に出力（表示）することができます。
• 一括修正: マイパーツの大元のコンテンツを修正すれば、そのマイパーツを設置している全てのページ（例えば100ページ）の内容が一度に修正されます。
• 技術的背景: 少し詳しい方にとっては、ショートコードの機能が簡単に作れるものだと説明すると理解しやすいかもしれません。

主な用途

キャンペーンの期限や日付の更新、ブログ記事最下部などに設置するオファーやフォーム、バナーなど、頻繁に変更が必要な要素や、サイト全体で共通して使用する要素の管理に非常に有効です。

2. マイパーツの作成手順

まず、大元となるマイパーツのコンテンツを作成します。

1. ダッシュボードへのアクセス: WordPressのダッシュボードにログインしてください。
2. マイパーツの選択: ダッシュボードメニューから「マイパーツ」を探し、クリックします。
3. 新規作成: 「新規一覧」または新規作成のボタンをクリックします。
4. タイトルの入力: マイパーツのタイトルを入力します（例：「テストマイパーツ」）。
5. コンテンツの入力: 記事編集画面に、表示させたいテキストやデザインを入力します（例：「テキストマイパーツテスト」）。
   • 例: 必要に応じて、スタイルから「枠あり」などを選択してレイアウトを作成することも可能です。
6. 保存・公開: 作成したマイパーツを「公開」または「下書き保存」します。どちらでも構いません。
   • 注意: マイパーツを「公開」しても、マイパーツ自体が単独で公開されることはありませんのでご安心ください。

3. 投稿・固定ページへの呼び出し手順

作成したマイパーツを、表示させたい投稿や固定ページに挿入します。

1. 対象ページの編集画面を開く: マイパーツを呼び出したい投稿または固定ページを開き、編集画面に入ります。
2. ブロックの挿入: マイパーツを挿入したい位置で「＋（プラス）」ボタンをクリックします。
3. マイパーツの検索: 検索窓に「マイ」と入力します（アルファベットの may でも、カナの マイ でもどちらでも大丈夫です）。
4. ブロックの選択: 「マイパーツ本文の呼び出し」を選択し、クリックします。
5. マイパーツの指定: 挿入されたブロックを選択した状態で、画面右側のサイドバーを確認します。
6. タイトルの選択: サイドバー内の「マイパーツを選択」をクリックし、リストの中から先ほど作成したマイパーツのタイトル（例：「テストマイパーツ」）を選択します。
7. 投稿の保存: 投稿または固定ページを保存（更新）します。
8. 確認: プレビュー画面または実際の公開画面で確認すると、マイパーツに入力した内容が出力されていることが確認できます。
   • 補足: 編集画面上ではデザインが完全に表示されていない状態かもしれませんが、実際のプレビュー画面ではデザインが反映されて表示されます。

4. マイパーツの更新と効率化

マイパーツの最大の利点は、一箇所の修正で全てが更新される点です。

1. 大元の編集: ダッシュボードのマイパーツ一覧から、変更したいマイパーツのタイトルを開きます。
2. 内容の修正: マイパーツの内容（テキスト、日付、デザインなど）を修正します。
3. 保存: マイパーツを保存（更新）します。
4. 即時反映: これで大元の変更が完了します。このマイパーツが設置されている全ての投稿や固定ページは、ページを更新すると同時に、修正された内容に置き換わります。

この機能により、例えばキャンペーンの期限など、頻繁に変更が必要な情報も、一つの箇所を編集するだけで済み、作業が大幅に効率化されます。

今は多くの人がスマホでウェブサイトを見る時代です。そのため、スマホでの見え方を確認し、訪問者にとって使いやすいサイトにすることは非常に大切です。

この記事では、WordPressで作ったサイトをスマホで確認する簡単な方法をいくつかご紹介します。初心者の方でも分かりやすいように、専門用語はできるだけ使わずに説明しますね。

なぜスマホでの確認が大切なの？

その理由は主に2つあります。

1. 多くの人がスマホで見ているから: 通勤中、休憩中、寝る前など、ちょっとした時間にスマホで情報収集をする人が増えています。あなたのサイトもスマホで見られる機会が多いはずです。
2. Googleもスマホ対応を重視しているから: 検索エンジンのGoogleは、スマホで見やすいサイトを高く評価する傾向にあります。つまり、スマホ対応はSEO（検索エンジン最適化）対策にも繋がるのです。

では、具体的にどうやって確認するのか見ていきましょう。

スマホでサイトを確認する主な方法

大きく分けて、以下の方法があります。

1. 一番おすすめ！自分のスマートフォンで直接見る
2. パソコンのブラウザ機能（デベロッパーツール）を使う
3. WordPressの「カスタマイザー」機能を使う

それぞれ詳しく見ていきましょう。

1. 一番おすすめ！自分のスマートフォンで直接見る

これが一番確実で簡単な方法です。実際に使っているスマートフォンでサイトのURLにアクセスしてみましょう。

公開済みのサイトの場合

ウェブサイトのURL（例： https://あなたのサイト名.com）を、お使いのスマートフォンのブラウザ（SafariやGoogle Chromeなど）のアドレスバーに入力してアクセスするだけです。

まだ公開していない（ローカル環境などで作成中の）サイトの場合

これは少し設定が必要になる場合があります。

お使いのパソコンとスマートフォンが同じWi-Fiネットワークに接続されていれば、パソコンのIPアドレスを指定することで確認できることもあります。ただし、環境によってはうまくいかないこともあるため、最初は公開後に確認するのが手軽でおすすめです。

（※もしローカル環境での確認方法を詳しく知りたい場合は、別途「WordPress ローカル環境 スマホ 確認」などで検索してみてください。）

2. パソコンのブラウザ機能（デベロッパーツール）を使う

多くのパソコン用ウェブブラウザには、「デベロッパーツール（開発者ツール）」という機能が備わっています。これを使うと、パソコン上でスマホやタブレットなど、さまざまな画面サイズでの表示をシミュレーションできます。

ここでは、代表的なブラウザである Google Chrome での手順を説明します。

1. WordPressで作成したサイトをGoogle Chromeで開きます。
2. サイト上で右クリックし、表示されたメニューから「検証」または「Inspect」を選択します。 （もしくは、キーボードショートカット Ctrl + Shift + I (Windows) / Cmd + Option + I (Mac) でも開けます。）
3. 画面の右側か下側に専門的な情報がたくさん表示されますが、慌てないでください。
4. その中にある、スマートフォンのような形のアイコン（デバイスの切り替えアイコン） をクリックします。 (イメージ画像です。実際のアイコンと異なる場合があります)
5. すると、サイトの表示がスマートフォンの画面サイズに切り替わります。
6. 画面上部にある「Dimensions: Responsive」と書かれた部分をクリックすると、様々なスマートフォンの機種名（例: iPhone 12 Pro, Galaxy S20 Ultraなど）が表示されるので、確認したい機種を選べます。自分で幅や高さを指定することも可能です。

3. WordPressの「カスタマイザー」機能を使う

WordPressには「カスタマイザー」という機能があり、テーマの外観設定などをリアルタイムプレビューしながら変更できます。このカスタマイザーにも、スマホやタブレットでの表示を確認する機能が付いています。

1. WordPressの管理画面にログインします。
2. 左側のメニューから「外観」→「カスタマイズ」を選択します。
3. カスタマイザーの画面が開きます。画面の左下に、パソコン、タブレット、スマートフォンのアイコンが並んでいるはずです。 (イメージ画像です。実際のアイコンと異なる場合があります)
4. スマートフォンのアイコンをクリックすると、プレビュー画面がスマホ表示に切り替わります。

確認するときのチェックポイント

スマホでサイトを確認する際には、以下の点に注意して見てみましょう。

• 表示崩れはないか？: パソコンではきれいに並んでいた要素が、スマホでは重なったり、画面からはみ出したりしていないか。
• 文字の大きさは適切か？: 文字が小さすぎて読みにくくないか。逆に大きすぎて読みにくいことはないか。
• ボタンやリンクはタップしやすいか？: ボタンが小さすぎたり、他の要素と近すぎたりして、間違えてタップしてしまわないか。
• 画像は適切に表示されているか？: 画像が大きすぎたり小さすぎたりしていないか。画質は荒くないか。
• メニューは正しく動作するか？: スマホ用のメニュー（ハンバーガーメニューなど）が正しく表示され、タップしたらきちんと開くか。
• 横スクロールが発生していないか？: 基本的にウェブサイトは縦スクロールで見るものです。意図しない横スクロールが発生している場合は、何かが画面幅からはみ出している可能性があります。

まとめ

WordPressで作ったサイトをスマホで確認する方法を3つご紹介しました。

1. 自分のスマートフォンで直接見る (一番おすすめ！)
2. パソコンのブラウザ機能（デベロッパーツール）を使う
3. WordPressの「カスタマイザー」機能を使う

どの方法にもメリット・デメリットがありますので、状況に合わせて使い分けてみてください。

特に、新しい記事を公開した後や、サイトのデザインを変更した後は、必ずスマホでどのように見えるかを確認する習慣をつけましょう。訪問者にとって使いやすいサイト作りを心がけることが、たくさんの人に見てもらえるサイトへの第一歩です。

この記事が、あなたのWordPressサイト運営のお役に立てれば幸いです。