7月 « 2011 « 高品質HTMLテンプレート＆Wordpressテーマ

さて、それでは画像を貼り付けて見ましょう。「投稿」の場合も「ページ」の場合も貼り付け方は同じです。今回は例として新しく作成する「ページ」の記事の中にパソコンにある写真を貼り付ける手順です。まずダッシュボードにログインし「ページ」→「新規追加」をクリックします。

タイトル欄に「製品情報2」と入力します。そして取りあえず記事入力画面を「ビジュアル」にしておきましょう。そして記事入力欄の上の「アップロード/挿入」の横のマークをクリックします。

すると、以下のような画面になります。

ここで「ファイルを選択」をクリックするとあなたのパソコンを参照します。掲載する写真を選択するとアップロードが始まります。アップロードが完了すると以下のような画面になります。ちなみに今回アップロードした画像の横幅は500ピクセルです。

ここでいくつか入力項目があります。「画像のタイトル」、「代替テキスト」必要があれば「キャプション」や「説明」も入力します。今回は「画像のタイトル」、「代替テキスト」、「キャプション」にそれぞれ「タイマー」と入力しました。

そして「リンク URL」です。この画像にリンクを作成するかどうかです。「必要ない」か、「この画像（ファイルのURL）にリンクする」か、「この記事にリンクする」、「どこか別のアドレスにリンクする」かを選択します。今回は「この画像（ファイルのURL）にリンクをする」ことにします。

「配置は」画像をどちらに寄せるかです。今回は右側にしました。

「サイズ」一番小さな「サムネイル」こうすると貼り付けた画像（サムネイル）はアップロードした画像「幅が500ピクセル」にリンクしていますので、サムネイルをクリックすると拡大して画像を見ることができるようになるのです。「投稿に挿入」をクリックします。

文章も入力しておきましょう。今回入力したのは次のとおり「シンプルなタイマーです。24時間までセットすることが出来ます。もちろん時計の機能もついていますので机の片隅においておいたり、キッチンでの利用にも便利です。背面はマグネットになっていますので冷蔵庫やオフィスデスクにも貼り付けておくことが出来ます。」

「親ページ」を「製品情報」にして「公開」をクリックします。

さてその記事を確認してみましょう。以下のようになっているでしょうか？

小さいサムネイル画像をクリックしてみましょう。大きく表示されますね。

WordPressでは「投稿」や「ページ」の記事にあなたのパソコンにある画像や、すでにサーバーにアップロードされている画像を貼り付けることが出来ます。

画像を貼り付ける作業をする前にひとつ確認をしておきましょう。その画像のサイズは適切でしょうか？デジカメで撮影した写真はたいていの場合ものすごく大きな写真です。横幅が3000ピクセル以上ある場合も良くあります。

ホームページのページの幅はたいていの場合800から1000ピクセル程度です。そこに貼り付ける写真は幅が何ピクセルが適切か良く考えましょう。少なくともホームページの幅より大きな写真は必要ありませんね。

ホームページ上で文章の右や左に配置されている画像の幅はたいてい100から400ピクセルくらいでしょう。今あなたのパソコンにある写真のサイズが大きなものであればそれをあらかじめ適切なサイズに変更しておくと良いでしょう。

WordPressでは大きな画像を縮小して表示したり、Wordpress上でサイズを変更することも可能ですが、サーバーのスペースを無駄に使ったり、画像のアップロードに無駄に時間がかかったりします。ですから、あなたのパソコンにあるうちにその画像のサイズはホームページ上で表示したいサイズに変更しておくのが賢明でしょう。

たいていの場合、デジカメを購入した際についている付属ソフトの中にカンタンな画像編集ソフトがついていると思います。それらを使って画像の編集を行いましょう。

※この上の画像は3000ピクセルの幅じゃありません。わかりやすくするためにかなり小さくしています。今ごらんのこのページの本文が書かれている背景が白い部分…ここの幅が600ピクセルです。

投稿、ページいずれも記事の追加や編集を行う画面において、その内容を書くところの上に「ビジュアル」と「HTML」のタブがあります。

これは内容を編集したり追加したりするときのその入力欄の表示形態を選択するものです。

「ビジュアル」その名のとおり概ね見た目のとおりに編集でき、HTMLを記述することが出来ません。「HTML」では見た目はすべてテキストになってしまいますが、HTMLのタグを直接入力することが出来ます。

ただ文章を書いていくだけなら、どちらでもかまいません。お好みで使うと良いでしょう。HTMLに慣れていない人は「ビジュアル」ほうがとっつきやすいかもしれませんね。

しかし、アフィリエイトなど、どこかのHTMLソースを貼り付ける必要があったりした場合には「HTML」での編集が必要ですね。

このタブは記事の編集途中でも切り替えられますので、そのつど自分にあった方で入力、編集すると良いでしょう。

WordPressのページの記事には階層を持たせることが出来ます。親ページ、子ページの関係を作ることが出来ます。

では先ほどの「製品情報」のページを親ページとする、「製品情報1」という子ページを作成してみましょう。ダッシュボードにログインし、左のメニューの「ページ」の下の「新規追加」をクリックします。

「新規ページ」画面でタイトルに「製品情報1」と入力し、記事内容に「これは製品情報1についてのページです。製品1はこれからの季節とても便利な道具です。お近くのショールームでご覧ください。試用体験も出来ます。」と書きました。もちろんタイトルや文章はあなたのサイトにあったもので…

ここがポイントです…画面右側の「属性」のところ、「メインページ（親なし）」のところをクリックすると「製品情報」が表示されますので「製品情報」を選択します。

そして「公開」をクリックします。それではトップページを見てみましょう。ヘッダーメニュー部分を注意深く見てみましょう。

「製品情報」の下に「製品情報1」が表示されています。このようにページの記事では階層を持たせることが出来ます。

続いて、Wordpressのページの記事を編集してみましょう。ダッシュボードにログインし左のメニューの「ページ」の横の「▼」をクリックし、「編集」をクリックします。

すると以下のような画面になります。

そこで「紹介」という記事の下の「編集」をクリックします。

すると以下のような画面になります。

ここでタイトルを「製品情報」とし、記事のところに「私たちは常にお客様のことを第一に考え、より使いやすく、より安全な製品作りを心がけています。では、私たちが自信を持っておすすめする製品をご紹介しましょう。」と入力しました。もちろんここはあなたのサイトにあった内容を書きましょう。
入力が終わったら、「更新」をクリックします。

そしてトップページに戻って確認してみましょう。以下のように「製品情報」というリンクが出来ています。

このページの記事はトップページには記事が表示されません。トップページに表示されるのは「投稿」で書いた記事だけです。このように「ページ」で書いた記事は時系列とは関係なく作成できるページです。ですからメニューのところにリンクが作成されるだけなのです。そしてこの「ページ」には階層をつけることが出来ます。親ページ、子ページという関係です。

「投稿」のときの「親カテゴリー、子カテゴリー」と混同しないでくださいね。

さて、ここでいったんトップページに戻ってみましょう。ダッシュボードの左上の「サイトのタイトル」かその横の「サイトを表示」をクリックします。

はて・・・

何も変わりませんね。せっかく作ったカテゴリーはどこへ行ってしまったのでしょう？？？

大丈夫です。Wordpressではカテゴリーを作成してもその中に投稿記事が無ければメニュー部分には表示されないのです。ではもう一度ダッシュボードに戻ってください。「投稿」の下の「投稿」をクリックします。
そして、記事のタイトルの下に表示される編集をクリックします。

すると、投稿記事の編集画面に移ります。その右側に「カテゴリー」を選択する部分がありますので現在チェックの入っている「未分類」のチェックをはずし、適切なカテゴリーにチェックを入れます。ここでは「最新情報」にチェックを入れました。

そして「更新」をクリックします。

同様に他の記事のカテゴリーも変更しましょう。ここでは「ようこそ」の記事も「最新情報」のカテゴリーに変更しました。では、もういちどトップページに戻ってみましょう。

どこか変わりましたか？

右のメニューのカテゴリー名が「未分類」から「最新情報」に変わっていますね。

このカテゴリーの変更は「投稿」の下の「編集」をクリックした画面の各投稿記事タイトルの下の「クイック編集」でも出来ます。

試してみましょう。

WordPressではカテゴリーに階層構造を持たせることが出来ます。例をあげてみましょう。

前の解説で「最新情報」というカテゴリーと「スタッフブログ」というカテゴリーを作成しましたね。ではここでスタッフブログを書くAさんとBさんがいてそれぞれカテゴリーに分けるとしましょう。つまり「スタッフブログ」のカテゴリーの中に「スタッフAのブログ」というカテゴリーと「スタッフBのブログ」というカテゴリーを作成します。

先ほどと同じように「投稿」の下の「カテゴリー」をクリックします。

カテゴリー名に「スタッフAのブログ」、カテゴリースラッグに「staff-a」と入力し親のところで「スタッフブログ」を選択します。

そして必要であれば「説明」に入力し「新規カテゴリーを追加」をクリックします。すると以下のように「スタッフブログ」の下に「 スタッフAのブログ」という子カテゴリーが追加されます。

同様にして「スタッフBのブログ」というカテゴリーをカテゴリースラッグ「staff-b」で親を「スタッフブログ」で作成します。すると以下のようになります。

なんとなく階層をもっているようですね。