ホームページ制作 福岡【ホームページ制作のエディス】.

ブログシステム使い方(新規投稿・編集編)

制作日記

最近、弊社でもWordPressを導入してブログを運営されるお客さまが多くなって来ましたので、本日はWordPressの使い方をご案内します。

ブログ記事の新規投稿や編集方法から文字の装飾、画像の挿入まで画像を交えながらご説明します。

「イマイチ、使い方が分からないんだよねー」という方は、ぜひ参考にしてみてください。

 

管理画面へのログイン

ログイン画面にアクセスすると下図のようなページが表示されます。

「ユーザー名」「パスワード」の欄にお客さまのユーザー名とパスワードを入力します。

2014-10-23 21_46_03-ブログシステム使い方(新規投稿・編集編) (1).pdf - Adobe Acrobat Pro

※ユーザー名とパスワードは、弊社スタッフよりお客さまごとにご準備してお知らせ致します。
※「ログイン状態を保存する」をチェックしておくことで、次回からスムーズにログインすることができます。

 

 

ブログ記事の新規追加

ログイン後、表示される画面の左側に表示されるメニューは、主に記事の投稿や編集を行う際に使用します。

「投稿」→「新規追加」を選択

2014-10-23 21_46_14-ブログシステム使い方(新規投稿・編集編) (1).pdf - Adobe Acrobat Pro

 

ブログ記事を書く

①の部分に記事のタイトル、②の部分に記事の本文を書きます。

文字の色や大きさなどの装飾は、ブログの記事を書き終わった後にまとめて行うと比較的スムーズです。

③記事に見出しをつける

1つの記事の中で、項目を分けて記事を書きたいときは、それぞれの文章の先頭に見出しをつけると、記事が読みやすく、分かりやすくなります。

見出しに設定したい文章を記入します。
マウスの左ボタンを押したまま横にスライドし、見出しに設定したい文字を選択します。(文字が青色に反転されます)

④「段落」メニューから見出しの種類を選択します。(今回は見出し3を選択します)

※見出しのデザインは、御社のサイトのデザインに合わせてあらかじめ設定している場合がございます。
※現時点では、デザインは適用されていないように見えますが、実際のページでは見出しの設定が適用されます。
プレビュー(確認)方法については「公開前に記事の見方を確認する(プレビュー)」をご覧ください。

2014-10-23 21_46_27-ブログシステム使い方(新規投稿・編集編) (1).pdf - Adobe Acrobat Pro

 

文字を装飾する(太字・大文字・文字色)

文字を太字にする

①太字に設定したい文章を記入します。
マウスの左ボタンを押したまま横にスライドし、太字に設定したい文字を選択します。(文字が青色に反転されます)
②ツールボックスの「B」ボタンをクリックします。太字が適用されると、①で選択した箇所が太字に変わります。

文字のサイズを変更する

③ツールボックスの「フォントサイズ」から文字のサイズを選択し、クリックします。
文字のサイズが適用されると、選択した箇所の文字サイズが変わります。

文字の色を変更する

④ツールボックスの「テキスト色」からご希望の色を選択し、クリックします。
文字に色が適用されると、選択した箇所の文字色が変わります。

2014-10-23 21_47_39-ブログシステム使い方(新規投稿・編集編) (1).pdf - Adobe Acrobat Pro

 

番号付きリストを活用する

最初に項目となる内容を記載します。その際、リストにする内容はなるべく箇条書きにして、最後にリスト機能を適用すると簡単です。
①リストに設定したい文章を記入します。
マウスの左ボタンを押したまま横にスライドし、リストに設定したい文字を選択します。(文字が青色に反転されます)
②ツールボックスの「番号付きリスト」ボタンをクリックします。
③のようなメニューが表示されますので、「デフォルト」をクリックします。
※番号付きリスト以外にも「・」タイプや「■」タイプなど複数種類のリストがありますので、用途に合わせて選択してください。
(番号付きリストボタン左側「番号なしリスト」から選択できます)

2014-10-23 21_48_28-ブログシステム使い方(新規投稿・編集編) (1).pdf - Adobe Acrobat Pro

 

他のホームページにリンクを貼る

知り合いのホームページをブログで紹介したい時や参考ホームページなどをお知らせする時には、文字をクリックするだけでホームページへジャンプできる「リンク機能」が便利です。

文字にリンクを貼る

①あらかじめリンクを貼りたい文字(ホームページ名など)を入力します。
マウスの左ボタンを押したまま横にスライドし、リンクを設定したい文字を選択します。(文字が青色に反転されます)
②ツールボックスの「リンクの挿入/編集」ボタンをクリックします。

③のような画面が表示されますので、「URL」の部分に表示させたい(A)ホームページのアドレスを入力します。
※使いやすさに配慮して「リンクを別ウィンドウまたはタブで開く」にチェックを入れておきます。
(A) ホームページのアドレスは、ホームページを開いた際に④のように表示されます。(画面はホームページ制作のエディスの場合)
※アドレスの始まりから終わりまでマウスの左ボタンを押したまま横にスライドし、文字を青色く反転させます。その後、右クリックでコピー(アドレスをコピー)を選択します。
②の画面の「URL」の部分で右クリックで貼り付け(ペースト)を選択します。
入力ミスなくリンクを設定する事ができます。

2014-10-23 21_50_39-ブログシステム使い方(新規投稿・編集編) (1).pdf - Adobe Acrobat Pro

 

記事に画像を掲載する

記事の中に画像を掲載することで、メリハリのある読みやすいブログを書くことができます。

記事に掲載する画像を準備する

あらかじめ、記事に掲載したい画像をお使いのパソコンのデスクトップなどに準備しておきます。
①画像を表示させたい位置にカーソルをあわせて、1度クリックします。(I字のカーソルが点滅します)
②「メディアを追加」ボタンをクリックします。
③さらに「ファイルをアップロード」をクリックします。
④画面中央の「ファイルを選択」から表示される画面の指示に従って記事に掲載したい画像を選択します。
⑤自動的にファイルのアップロードが開始されます。
アップロードが完了したら、画面右下の「投稿に挿入」ボタンをクリックします。
指定した位置に画像が挿入されます。

2014-10-23 21_51_42-ブログシステム使い方(新規投稿・編集編) (1).pdf - Adobe Acrobat Pro

 

記事カテゴリーの選択

記事を書き終えたら、記事のカテゴリーを設定します。
カテゴリーとは、記事の種類のようなものです。種類別にラベルを付けておくことで、ブログを見る方が関連記事を見つけやすくなります。

カテゴリーの選択

①画面右側の「カテゴリー」から該当する項目を選択します。
※カテゴリーはお客さまによって内容が異なります。

カテゴリーの作成・追加

カテゴリー一覧に該当するカテゴリがない場合は、新しく作成します。

②「新規カテゴリーを追加」クリックします。
入力項目が表示されるので、追加したいカテゴリー名を入力し「新規カテゴリーを追加」ボタンをクリックします。
今あるカテゴリーの中に新しくカテゴリーを追加したい場合は「親カテゴリー」の項目から追加したい項目を選択します。

2014-10-23 21_52_46-ブログシステム使い方(新規投稿・編集編) (1).pdf - Adobe Acrobat Pro

 

 

公開前に記事の見方を確認する(プレビュー)

プレビュー機能を使って、記事を公開する前に確認する事ができます。

記事のプレビュー

①画面右側の「公開」から「プレビュー」ボタンをクリックすると、公開後の実際の記事を画面上で確認することができます。
※プレビューは、確認を行うものですので、実際に公開されることはありません。

2014-10-23 21_53_38-ブログシステム使い方(新規投稿・編集編) (1).pdf - Adobe Acrobat Pro

 

記事の公開・予約投稿

記事の公開には、通常の「公開」と「予約公開」があります。

①記事を公開する

画面右側の「公開」から「公開」ボタンをクリックすると、記事が公開されます。

②記事を予約投稿する

予約投稿は、あらかじめ記事を下書きしておくことで、指定した日時に公開できる機能です。
すぐに公開するの右側の「編集」をクリックし、項目欄に従って公開したい日時を設定して「OK」ボタンをクリックします。

2014-10-23 21_54_20-ブログシステム使い方(新規投稿・編集編) (1).pdf - Adobe Acrobat Pro

 

 

記事の編集

既に投稿、公開している記事の編集をします。

①記事を編集する

「投稿」→「投稿一覧」を選択

②編集する記事を選ぶ

表示された記事一覧の中から、編集したい記事を探します。
該当する記事のタイトル付近にマウスカーソルを近づけると「編集」という文字が表示されます。
「編集」をクリックし「投稿の編集」ページが表示されたら、新規投稿と同じ方法で記事を編集し、公開します。

2014-10-23 21_55_23-ブログシステム使い方(新規投稿・編集編) (1).pdf - Adobe Acrobat Pro

この記事を書いた人 : 福岡・大分 ホームページ制作のエディス

日高
日高
お客さまの『サービスや商品に対する想い』をホームページを通して具体化できるような制作を心がけています。他部署の会報誌などホームページ以外の制作にも携わっています。