17 章 発展学習 ト ッ プ ペ ー ジ や 製 品（ サ ー ビ ス ） 案 内 ペ ー ジ は、 他 の ホ ー ム ペ ー ジ を 参 考 に し て こ れ ま で 学 ん だ WordPress の基本操作方法を使って作成しましょう。ここからは、ホームページを作成するにあたり、知っ ているとさらに便利な事柄をご紹介します。 17-1 固定ページに親子関係をつける 固定ページでは、コンテンツに親子関係をつけることができます。こここでは、 「代表あいさつ」ページを親、 新規に作成した「会社概要」ページを子として作成してみましょう。 １．ダッシュボードの「固定ページ」 ⇒ 「新規追加」を選択し、「会社概要」というタイトルの固定ペー ジを新しく作る。 ２．ページ属性のうち以下の項目を変更してから「公開」を押す。 （１）「親」を「代表あいさつ」とする。 （２）「テンプレート」は「サイドバーテンプレート」を選ぶ。 （３）「順序」は「10」と数字（半角）を入力 ホームページを確認してみましょう。 「代表あいさつ」にカーソルを合わせると、下に「会社概要」とい う項目が新しく選択できます。「会社概要」は、会社の創業年月や事業内容、従業員数などを示したものです。 正式に会社・団体のホームページを作成する際は、会社の登記簿（履歴事項証明書）を元に作ります。授 業では、他の会社のホームページを参考に本文を入力してみましょう。 また、会社（団体）の歩みを年代ごとに記した「会社沿革」もあるとなお良いので、子ページを追加して 作ってみましょう。 17-2 写真や動画の入ったページを作成する。 写真が多数入った記事や動画の入った記事は閲覧者の目を惹きます。新しく固定ページを作成して掲載し てみましょう。 １．フォトアルバム （１）ダッシュボードの「固定ページ」 ⇒ 「新規追加」を選択し、「フォトアルバム」というタイトルの固 定ページを新しく作る。順序は「お問い合わせ」の後に表示するように「60」（半角）にします。 （２）掲載したい画像は、前もってパソコンに保存しておきましょう。 （３）画像の挿入 ８章 8-3 で説明したとおり、入力画面の上にある「メディアを追加」を選択 ⇒ 「メディアを挿入」の画面が表示されたら、「ファイルを選択」 ⇒ 別画面で「ファイルをアップロード」が表示されるので、画像の保存先を表示 ⇒ 使用する画像を選択して「開く」（複数枚を１度に選択する時は、Ctrl キーを押しながらクリック） ⇒ メディアライブラリ一覧で、追加された画像にチェックがされているのを確認したら、左側の「ギャ 41 ラリーを作成」を選択 ⇒ ⇒ 右下に表示された「ギャラリーを追加」を選択 ギャラリーの編集画面が開く。 （４）編集画面の操作 ① リンク先は「メディアファイル」を選択。 ② 右側の「ギャラリーの設定」のうち「カラム」とは、１行に並ぶ写真の枚数を表しています。 表示設定を変更してください。 ③ 画像の下の「この画像のキャプション」と記載されるところには、画像の説明文を入力することができます。 ④ 写真の順番を入れ替えるには、ドラッグ＆ドロップ操作で行います。 ⑤ 設定が終わったら「ギャラリーの更新」を押します。 （５）固定ページの画面に戻り、 「更新」を押します。 以上の手順で、写真の一覧が固定ページに表示されます。 本文に挿入したフォトアルバムの編集を行いたいときは、８章 8-3 で説明したとおり、画像をクリックすると左上 に表示される２つのマークのうち左の「画像を編集する」を選択します。削除する時は、右の「画像の削除」を選択 します。 ２．You Tube の動画をホームページに表示させる。 （１）ダッシュボードの「固定ページ」 ⇒ 「新規追加」を選択 ⇒ 「フォトアルバム」を親ページとして「動画」というタイトルの固定ページを新しく作る。 （２）You Tube で使いたい動画を検索 （３） 「動画」の編集画面 ⇒ 「共有」 ⇒ 「埋め込みコード」を選択 ⇒ HTML コードをコピー ⇒ 「テキスト」を選択 （４）コピーした HTML コードを貼り付け ⇒ 「更新」 以上の手順で、You Tube の動画が自分のホームページに表示されるようになります。 17-3 覚えておくと便利なタグ タグとは、< タグ名 > の記号で囲まれた半角の英字のことで、このタグを使ってホームページは作られています。 WordPress のページは基本的に「ビジュアル」画面で作成していましたが、「テキスト」画面を選択すると、 HTML や PHP などのプログラミング言語で記載された内容を確認できます。はじめに説明したように、HTML の専 門的な知識がなくともホームページを作れるのが WordPress の最大の利点です。しかし、いくつかタグを覚えてお くことでホームページの表示を整えることができます。 これまでの授業でも紹介していますが、覚えていると便利なタグを説明します。 １．<center> 中央揃え <center> ～ </center> に囲まれた部分を、画面の中央に表示します。 ２．<br> 改行 WordPress では、文章を入力していて Enter キーで改行したのに、ホームページの画面で見ると思ったとおりに 改行ができていないことがあります。その場合は「テキスト」画面を表示し、改行したい箇所にカーソルを合わせて <br> と入力すると、１行改行することができます。 42 17-4 ホームページの表示について １．複数のブラウザでホームページの表示を確認する ２章で説明したとおり、 Windows パソコンでインターネットを見るときに使うブラウザとして主に挙げられるのは、 Internet Explorer、Firefox、及び Chrome です。 これらのブラウザは表示方法や機能等に違いがあるので、WordPress で作成した同じホームページでも、Firefox で見ると正常に表示されるのに Internet Explorer では表示が崩れてしまう、というような差が生じることがあります。 どちらが良い・悪いということではなく、どんな環境でも自分が想定した通りに表示させるためには、どのブラウザ にも対応したレイアウトの仕方が必要になってきます。 当教室では Firefox を使ってホームページを作成してきましたが、Firefox だけで確認して大丈夫だと思っても、 Internet Explorer ユーザーが満足にホームページを見ることができないこともあり得ます。 そこで重要になってくるのが「複数のブラウザによる確認」です。 Windows パソコンにはあらかじめ Internet Explorer がインストールされていますが、それ以外のブラウザは無料 でインターネット上からダウンロードすることができます。全てのブラウザをダウンロードして確認するようにすれ ば完璧ですが、少なくとも Internet Explorer と Firefox で確認しておけば、最低限の崩れは防ぐことができます。 ２．レスポンシブな WordPress テーマを利用する 13 章では、プラグインを追加することでホームページの表示を携帯電話やスマートフォン向けに自動で出力する 方法を学びました。 最近、パソコンやタブレット、スマートフォンなどの画面サイズの異なる端末で同じホームページを見ても、自動 で画面サイズに合わせて表示される「レスポンシブデザイン」テーマが配布されています。このテーマを使うと、プ ラグイン不要で、スマートフォンやタブレット端末でもパソコンと同じようにきれいなホームページを作ることがで きます。 レスポンシブ対応テーマデザインは、今後、企業や団体の需要が増えると思われますので、ぜひ利用してみてくだ さい。 43
© Copyright 2024 Paperzz
