サイト製作記

WordPressで記事を書く

投稿日:

投稿の方法は非常に簡単

WordPressをインストールし、テーマを決めたらいよいよ記事を作成する。
記事製作のプロセスは私が選んだテーマ「STINGER8」をベースとして説明していく。

が、その前に簡単なサイトの骨組みを考えておく必要がある。どのようなメニューを用意して、どのような記事を書くか? ザックリとでいいので簡単にメモ書きしておくと整理しやすい。

私の場合は下記のようなイメージを事前に考えた。

WordPressには「投稿ページ」「固定ページ」の2種類がある。
「投稿ページ」は新しい記事を常に更新するページ。ショップのWEBサイトであれば「新着情報」とか「新入荷情報」など。いわゆるブログページ。
「固定ページ」は常に固定されたページ。例えば、ショップ紹介のWEBサイトであれば「ショップ情報」「ショップへのアクセス」がこれに相当する。

その程度の知識はかろうじて備えていた私は、軽い気持ちで上のサイトイメージ図を作った。ブルーは「固定ページ」。オレンジは「投稿ページ」。

すでにWordPressを使っている先輩方であれば「ん?」となるだろうが、この時点で私はWordPressの仕組みをまったく理解していなかったため、後に四苦八苦することになる。その理由は後日ご説明しよう。

何はともあれ、まずは記事を作成することを始めよう。
WordPressがこれほど多くの人に使われているのが理解できるほど、素人でも記事製作は非常に簡単。

投稿ページの新規記事を作成するなら「ダッシュボード」から「投稿→新規追加」をクリックする。固定ページの新規記事を製作する場合は、「固定ページ→新規追加」すればいい。

新規投稿ページは非常にわかりやすく、「ここにタイトルを入力」という場所に記事タイトル、下の大きなスペースに本文を書いていけばいい。

直接入力してもいいが、私はパソコンのテキストエディタで文章を下書きして、校正(文章チェック)した後にコピペして貼り付けるようにしている。その際、画像を入れたい場所に●を入れて、全体の流れが自分でもわかるようにしている。

まさにこんな↑だ。
ひと通り文章を書いて、チェックし、誤字脱字など間違いが無いことを確認したらコピペして貼り付ける。次に右側にある「プレビュー」をクリックすると、実際に公開された時の状態をプレビューで確認することが可能だ。

そのまま公開したければ「公開」。まだ修正するから公開はしたくないという場合は「下書きとして保存」を押せばいい。

画像のアップはどうするか?

ブログサイトに欠かせない画像、WordPressではメディアと呼ぶ。投稿ページの本文入力枠の上に「メディアを追加」がある。これをクリックして画像を挿入することになる。実際にやってみる。まず「メディアを追加」をクリック。

すると「ファイルをドロップ」または「ファイルを選択」という画面になる。アップしたい画像をドロップしてもいいし、選択してアップロードしてもいい。私はいつも選択してアップロードしている。

画像を選択して「開く」をクリックすると……。

メディアライブラリに追加される。

そして右下の「添付ファイルの表示設定」で掲載サイズを決める。

サムネイル、中、フルサイズから選べる。サイズを選んで「投稿に挿入」をクリックすると、選んだ画像が投稿画面に挿入されているはずだ。ここで注意したいのは、あまり大きなサイズの画像を貼り過ぎるとサイトが重くなってしまう恐れがある。その場合は最適な大きさに画像サイズを変更した方がいいだろう。

画像サイズの変更方法

私は大きな画像サイズの場合、横幅を700ピクセルに設定することが多い。特に根拠はないが、サイトに表示された場合に、色々な画像の横幅が合っていた方が美しく表示できると思ったからだ。700ピクセルよりも小さい場合は無理に拡大すると解像度不足でぼやけてしまうので、そのままのサイズ、つまりフルサイズで使う。

画像サイズの変更方法は簡単だ。

メディアライブラリで挿入したい画像を選び、右上の「添付ファイルの詳細」→「画像を編集」をクリック。

すると「縮尺変更」ができるので。横幅を700に変更する。縦横比は変わらないので、横幅を700と入力すると自動的に縦幅の数値も変わる。「縮尺変更」をクリックし、下の「戻る」をクリック。

すると先ほどのサイズのプルダウンで「幅700」が選べるようになっている。幅700を選択して「投稿に挿入」をクリックすれば、下記の通り幅700ピクセルの大きさで投稿に画像が挿入される。

画像だが、現在はサイト製作をしながらパソコンの画面をスクリーンショットして掲載する場合が多い。スクリーンショットした画像は拡張子が「PNG」となっているが、私はすべて「JPG」に変換してから使っている。これについても近々詳しく解説したいと思っている。というか、私自身「PNG」が何なのかすら理解していない……。




スポンサーリンク
スポンサーリンク

-サイト製作記

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

知識ゼロからのサイト製作記

Step.01:ドメイン&レンタルサーバーはココを選べ! Step.02:独自ドメインの取得は超簡単! Step.03:サーバー契約&ドメインを紐付ける Step.04:WordPressをインストー …

サーバー契約&ドメインを紐付ける

Contents1 サイト製作準備の難関に挑戦1.1 評価の高いエックスサーバーと契約1.2 ちょっと細かいが焦らず設定を サイト製作準備の難関に挑戦 評価の高いエックスサーバーと契約 すでにレンタル …

独自ドメインの取得は超簡単!

Contents1 ムームードメインでのドメイン取得方法1.1 ドメイン取得が可能か瞬時に検索1.2 ドメインの申し込み〜設定1.3 契約年数&支払い方法を決める1.4 連携サービスの提案は無視1.5 …

ドメイン&レンタルサーバーはココを選べ!

いよいよネットビジネスの準備に取り掛かる。が、私はまったくの初心者。正直何から始めればいいのかわからない。途方に暮れながら色々なサイトを見ていると、「ドメイン取得」「レンタルサーバー契約」が、初めの一 …

「JPG」「GIF」「PNG」の使い分け

前回、私は「スクリーンショットの画像は拡張子がpngだが、すべてjpgに変更して使っている」と書いた。その理由は……私は元雑誌編集長、画像データ=jpgというのがもっとも定番であり馴染みやすいだけ。 …