【第3回:記事投稿編】ブログ記事を書いてみよう!記事の投稿方法と画像のアップロードをマスターすればブロガーへの第一歩

初めてのWordPress

この記事で学べること

  • WordPressでブログ記事を書いて公開(投稿)する
  • 画像をアップロードする
  • サムネイル画像を設定する

こんにちは~。春が近づいてきて気分も晴れやか。私は散歩が趣味なのです。お菓子を持って公園に行ってみようかな~ (o’∀`o)♪ あ、その前に、今日もWordPressのお勉強、いってみましょう~

前回は、スタート用コンテンツを利用して、見た目を整えるところまで、できましたね! 今回は、ブログの記事を書いて、公開してみましょう!スタート用コンテンツを使っていない人も、同じようにできるはずですので、是非一緒にやってみてくださいね。

記事を追加して投稿する

投稿>投稿一覧
                          

投稿>投稿一覧を開いてみてください。インストールしてすぐの状態では、「Hello world!」というタイトルの記事がひとつだけ入っていますね。 「新規追加」をクリックして、新しい記事を追加してみましょう。

タイトルと本文を入れて、「公開」ボタンをクリックするだけで、記事を公開することができます!簡単ですね。

公開された記事を見て見ましょう。

ここでちょっと補足を。

タイトルのすぐ下にある、「パーマリンク:」の隣のリンクがURLとなります。記事タイトルが日本語だと、自動的に日本語が入ってしまいますが、ここは「<a href="http://~」からはじまるURLの一部となりますので、半角英数字にしておいたほうが無難です。

画像をアップロードする

せっかくなので、文字だけじゃなく写真もアップロードしてみましょう。

写真の用意はいいですか?

「メディアを追加」のボタンをクリックします。

メディアを追加>ファイルをアップロード>ファイルを選択

「メディアを挿入」の画面が開いたら、「ファイルを選択」のボタンをクリックしてパソコン上の写真を選びます。

(ここで注意。画像のファイル名は、半角英数の文字にしてください。日本語のファイル名だと、うまく表示されないことがあります。)

これで、パソコン上にある写真が、サーバー上にアップロードされたはずです。

「投稿に挿入」ボタンをクリックします。

管理画面に、今選択した写真が表示されましたか? 更新ボタンをクリックして、記事を見てみましょう。

ちゃんと表示されていますね!大成功ヾ(o´▽`o)ノ))

写真の位置を変更したい場合

ここまでくると、写真を右寄せにしたり、真ん中に配置したりしてみたくなりますよね。

それでは写真の配置を変更する方法を2種類お伝えします。

ビジュアルエディタを使う

ビジュアルエディタを使っているときには、写真をクリックすると

  • 左寄せ
  • 中央揃え
  • 右寄せ
  • 配置なし

などの指定を、クリックひとつで行うことができます。

ビジュアルエディタの投稿画面

テキストエディタを使う

テキストエディタでは、このようなimgタグが表示されていますか?

テキストエディタの投稿画面

写真のタグを省略形で表すと、このようになります。

<img class="写真の配置" src="ファイル名.jpg">
                          

写真の配置は、class名で指定できます。何も指定していないと、

class="alignnone"
                          

となっています。「alignnone」の部分が位置指定ですので、この部分を入れ替えるだけで右寄せ・左寄せ・中央揃えにすることができるようになります。

  • 左寄せ(alignleft)
  • 中央揃え(aligncenter)
  • 右寄せ(alignright)
  • 配置なし(alignnone)

<img class="alignright" src="xxx.jpg">
                          

右寄せにすると、このような表示になります。

サムネイル画像(アイキャッチ画像)を設定する

「サムネイル画像」とは、「アイキャッチ画像」とも呼ばれます。「その記事を代表する1枚の写真」と思っていただければOKです。ひとつの記事の中に、たくさんの写真を使うことがあると思いますが、その中でも「これが記事の内容を表すのにふさわしい」と思われる画像を1枚選んで、設定しておきましょう。

TwenteenSeventeenテーマでは、アイキャッチ画像に選ぶと、個別投稿記事の一番上に、ドーンと大きく配置されるようになっています。

アイキャッチ画像を設定する場所は、右下にあります。「アイキャッチ画像を設定」リンクをクリックしましょう。

使いたい画像を選んで、右下の青いボタン「アイキャッチ画像を設定」をクリックします。

アイキャッチ画像を設定することができました。更新ボタンをクリックします。

個別のブログ記事に、大きなアイキャッチ画像が表示されました。

公開したくないけれども削除せず置いておきたい記事をどうする?

投稿一覧には、「Hello World!」と書かれた一番最初の記事が残ったままでしたね。

削除したい場合には記事を「ゴミ箱へ移動」します。

投稿>投稿一覧>ゴミ箱へ移動
                          

もしくは、「クイック編集」で下書き状態にして、「更新」ボタンをクリックしておけば、一般の閲覧者には見られることがありません。

投稿>投稿一覧>クイック編集
                          

次回は、たくさんある記事を、どうやって分類するのか?「カテゴリ」を分ける方法についてお話しします。コンテンツが増えていくと、だんだんサイトらしくなってきますね。

どうぞお楽しみに!

本日のまとめ

いかがでしたか?

記事を投稿する方法を理解できたら、あとは好きなだけ文章や写真を追加して、どんどん更新していくことができますね!

オリジナルの文章や写真をブログで発信していくことで、新しい世界が開けるかもしれません。

みんなにシェアしよう!

もくじ

  1. 【第1回:準備編】ドメイン?サーバー?WordPress? まずはホームページ・ブログを開設するための準備運動から!
  2. 【第2回:ビジュアル編】スタート用コンテンツ機能を利用して、まずは固定ページの見た目から整えましょう!
  3. 【第3回:記事投稿編】ブログ記事を書いてみよう!記事の投稿方法と画像のアップロードをマスターすればブロガーへの第一歩
  4. 【第4回:カテゴリー編】記事が増えてきたらカテゴリーに分けてみよう
  5. 【第5回:応用設定編】WordPressでできること、いろいろ覚えて思い通りの表示に!
  6. 【第6回:最終回】機能を追加&カスタマイズ、そして仕組みについて学び、安全に運用する

著者:松尾祥子

フリーランスのWebデザイナー兼ディレクター。
デザイン事務所勤務を経て、2000年にピクセルデザインの屋号で独立。
小〜中規模サイトのディレクション、デザイン、WordPress構築、リーフレットや書籍の装丁などの印刷物制作まで幅広く手がける。
制作を通して、クライアントの事業を手助けすることが主な業務。
2013年からWordCamp Tokyoにスタッフとして参加し、WordPressを遊びながら学べるWordPressカルタを発案&制作。
現在は、制作業務と並行して専門学校HAL東京にて、講師としてHTML/CSSを教えています。
URL:http://wp.pxdesign.jp
X:https://x.com/shoko_webdesign

あわせて読みたい連載

あなたにオススメの記事

close

みんなにシェアしよう!

menu