投稿マニュアル 認定fpサイト · リンク先...

28
Copyright© growniche.Inc All Rights Reserved. 株式会社グロウニッチ WEB MARKETING / WEB DESIGN Date:2019/3/11 投稿マニュアル_認定FPサイト 基礎編

Upload: others

Post on 20-May-2020

3 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: 投稿マニュアル 認定FPサイト · リンク先 画像をクリックした際のリンク先を設定します。「メディアファイル」を選ぶと、Ligthboxで元

Copyright© growniche.Inc All Rights Reserved.

株式会社グロウニッチ

WEB MARKETING / WEB DESIGN

Date:2019/3/11

投稿マニュアル_認定FPサイト

基礎編

Page 2: 投稿マニュアル 認定FPサイト · リンク先 画像をクリックした際のリンク先を設定します。「メディアファイル」を選ぶと、Ligthboxで元

Date:2019/3/11

Copyright© growniche.Inc All Rights Reserved.

操作環境について

操作するにあたり、以下の環境で操作が可能です。

• ブラウザ– Google Chrome(最新版)※推奨– Mozilla Firefox(最新版)※推奨– Safari(最新版)– Windows Internet Explorer11 Microsoft Edgeなど

• OS– Windows 10以降、Mac OS X 10.8以降※推奨– iOS8以降、Android6以降※スマホでの操作も可能ですが非推奨となります。

Page 3: 投稿マニュアル 認定FPサイト · リンク先 画像をクリックした際のリンク先を設定します。「メディアファイル」を選ぶと、Ligthboxで元

Date:2019/3/11

Copyright© growniche.Inc All Rights Reserved.

ログイン方法

管理画面にログインサイトURLの末尾に login を

付けるとログインURLに移動します。

▼URL例https://fpsden.net/fp/sample/login

(!)ユーザー名とパスワードはメールでお送りしております。

(!)非公開中の場合は「login」でなく、「wp-login.php」になります。

Page 4: 投稿マニュアル 認定FPサイト · リンク先 画像をクリックした際のリンク先を設定します。「メディアファイル」を選ぶと、Ligthboxで元

Date:2019/3/11

Copyright© growniche.Inc All Rights Reserved.

管理画面

サイドメニュー

管理バー

ログイン中はサイト側にも管理バーが付きます。

ダッシュボードには、

クイック統計(アクセス数チェック)、サポート連絡先などがあります。

実際のサイト側

Page 5: 投稿マニュアル 認定FPサイト · リンク先 画像をクリックした際のリンク先を設定します。「メディアファイル」を選ぶと、Ligthboxで元

Date:2019/3/11

Copyright© growniche.Inc All Rights Reserved.

新規投稿ページ画面の各名称

投稿 > 新規追加タイトル

本文エリア

ビジュアルエディタ

投稿済みの記事は、「投稿一覧」から確認し、編集できます。

公開設定

タグ

カテゴリ

Page 6: 投稿マニュアル 認定FPサイト · リンク先 画像をクリックした際のリンク先を設定します。「メディアファイル」を選ぶと、Ligthboxで元

Date:2019/3/11

Copyright© growniche.Inc All Rights Reserved.

1. タイトルを入力

1. タイトルを入力

タイトル

本文エリア

公開設定

タグ

カテゴリ

Page 7: 投稿マニュアル 認定FPサイト · リンク先 画像をクリックした際のリンク先を設定します。「メディアファイル」を選ぶと、Ligthboxで元

Date:2019/3/11

Copyright© growniche.Inc All Rights Reserved.

タイトルが表示される箇所

1-1. タイトルが表示される箇所

投稿記事のページタイトル

サイトをオープンしました!

サイトをオープンしました!

サイトをオープンしました!

HOMEメインビジュアル下のブログ一覧

タイトルはSNSや検索など外部からの誘導に使われるので、短く分かりやすく!前半15文字で内容が分かるタイトルが推奨です。

Page 8: 投稿マニュアル 認定FPサイト · リンク先 画像をクリックした際のリンク先を設定します。「メディアファイル」を選ぶと、Ligthboxで元

Date:2019/3/11

Copyright© growniche.Inc All Rights Reserved.

1-2. セミナータイトルのルール

セミナータイトルのルールカテゴリ「セミナー」で投稿する場合は「場所・日にち・曜日・時間・セミナー名」の順番で書いてください。

①新着セミナーの一覧で見つけやすくするため

②お申し込みメールの件名になるため

Page 9: 投稿マニュアル 認定FPサイト · リンク先 画像をクリックした際のリンク先を設定します。「メディアファイル」を選ぶと、Ligthboxで元

Date:2019/3/11

Copyright© growniche.Inc All Rights Reserved.

2-1. 本文を入力

2-1. 本文を入力

タイトル

本文エリア

公開設定

タグ

カテゴリ

Page 10: 投稿マニュアル 認定FPサイト · リンク先 画像をクリックした際のリンク先を設定します。「メディアファイル」を選ぶと、Ligthboxで元

Date:2019/3/11

Copyright© growniche.Inc All Rights Reserved.

2-1. 本文エリアの投稿方法

本文エリアでは様々な投稿方法があります。

「メディアを追加」は主に画像を挿入する機能です。

「テキスト」タブはHTMLでの入力形式になります。HTMLタグの操作に

不慣れな方は「ビジュアル」タブが選択されている事をご確認ください。

「ビジュアルエディタ」は主に文字の装飾を行います。

Page 11: 投稿マニュアル 認定FPサイト · リンク先 画像をクリックした際のリンク先を設定します。「メディアファイル」を選ぶと、Ligthboxで元

Date:2019/3/11

Copyright© growniche.Inc All Rights Reserved.

本文が表示される箇所

2-1. 本文が表示される箇所

単独記事ページの文章

投稿画面と横幅は異なり、実際は80~90文字で改行となります。

▼改行方法• 「Enter」

→ 段落改行(大きい改行)• 「Shift」+「Enter」

→ 段落内改行(小さい改行)

Page 12: 投稿マニュアル 認定FPサイト · リンク先 画像をクリックした際のリンク先を設定します。「メディアファイル」を選ぶと、Ligthboxで元

Date:2019/3/11

Copyright© growniche.Inc All Rights Reserved.

2-2. 本文のテキストを装飾

2-2. 本文のテキストを装飾

タイトル

本文エリア

ビジュアルエディタ

公開設定

タグ

カテゴリ

Page 13: 投稿マニュアル 認定FPサイト · リンク先 画像をクリックした際のリンク先を設定します。「メディアファイル」を選ぶと、Ligthboxで元

Date:2019/3/11

Copyright© growniche.Inc All Rights Reserved.

ビジュアルエディタは文字の装飾をします。① 装飾したい文字の始点を選択(「|」が直前にあるか確認)② ドラッグ(左クリックを押したままマウスを動かす)して、終点まで選択する。

③ 装飾したい内容(次頁以降参照)を選択

2-2. ビジュアルエディタ 1 基本操作

① ② ③

Page 14: 投稿マニュアル 認定FPサイト · リンク先 画像をクリックした際のリンク先を設定します。「メディアファイル」を選ぶと、Ligthboxで元

Date:2019/3/11

Copyright© growniche.Inc All Rights Reserved.

2-2. ビジュアルエディタ 2 上段の各装飾内容

絵文字を挿入できます

「テキストとしてペースト」Wordなど他ファイルから

コピー&ペーストする場合、余分な書式や装飾もコピーされてしまい見た目が崩れやすくなります。

そういう時は、こちらが選択された状態にすれば文章のみを貼り付けられま

す。

Page 15: 投稿マニュアル 認定FPサイト · リンク先 画像をクリックした際のリンク先を設定します。「メディアファイル」を選ぶと、Ligthboxで元

Date:2019/3/11

Copyright© growniche.Inc All Rights Reserved.

2-2. ビジュアルエディタ 3 :リストと引用の各装飾内容

※当マニュアルでは省略します。様々な装飾があります。操作は同じになので慣れてきましたら試してみましょう。

装飾を解除する場合は、もう一度ビジュアルエディタの各装飾を再度選択すると元に戻ります。

Page 16: 投稿マニュアル 認定FPサイト · リンク先 画像をクリックした際のリンク先を設定します。「メディアファイル」を選ぶと、Ligthboxで元

Date:2019/3/11

Copyright© growniche.Inc All Rights Reserved.

リンク修正時についてリンクを修正する時は、対象のリンクをクリックすると以下のようなポップアップが出てくるので鉛筆マークをクリックし、

次に出てきたポップアップでURLを変えるか歯車マークをクリックして設定を編集します。

リンク挿入時について別ウィンドウでリンク移動させたい場合は「リンクターゲット」を「新規ウィンドウ」に選択して「OK」を押すと反映されます。

2-2. ビジュアルエディタ 4 :リンク

① ② リンクの挿入

リンクの解除

①②

Page 17: 投稿マニュアル 認定FPサイト · リンク先 画像をクリックした際のリンク先を設定します。「メディアファイル」を選ぶと、Ligthboxで元

Date:2019/3/11

Copyright© growniche.Inc All Rights Reserved.

① HTMLを表示します。※OKをクリックするとソースが崩れるので参照までが推奨

② 本文エリア内の文字検索を行います。③ 一つ操作を戻します。④ 戻した操作をやり直します。

2-2. ビジュアルエディタ 5 下段その他

① ② ③ ④

Page 18: 投稿マニュアル 認定FPサイト · リンク先 画像をクリックした際のリンク先を設定します。「メディアファイル」を選ぶと、Ligthboxで元

Date:2019/3/11

Copyright© growniche.Inc All Rights Reserved.

2-3. 本文に画像を挿入

2-3. 本文に画像を挿入

タイトル

本文エリア

メディアを追加

公開設定

タグ

カテゴリWordファイルなどに挿入済みの画像を直接コピー&ペーストは出来ませんので、原稿に挿入された画像は一度ダウンロードして、「メディアを追加」でアップロードしてください。

Page 19: 投稿マニュアル 認定FPサイト · リンク先 画像をクリックした際のリンク先を設定します。「メディアファイル」を選ぶと、Ligthboxで元

Date:2019/3/11

Copyright© growniche.Inc All Rights Reserved.

2-3. メディアを追加 1

① 画像を挿入したい箇所を選択する

② をクリック③ 起ちあがったポップアップに挿入したい画像をドラッグ

選択されている箇所は「|」が点滅します。

デスクトップにある画像を左クリックを押したまま移動

(ドラッグ)

Page 20: 投稿マニュアル 認定FPサイト · リンク先 画像をクリックした際のリンク先を設定します。「メディアファイル」を選ぶと、Ligthboxで元

Date:2019/3/11

Copyright© growniche.Inc All Rights Reserved.

2-3. メディアを追加 2

④ 挿入したい画像をチェック する(チェックされていればそのまま)

⑤ 画像の詳細を設定する。※次頁で説明⑥ をクリック

Page 21: 投稿マニュアル 認定FPサイト · リンク先 画像をクリックした際のリンク先を設定します。「メディアファイル」を選ぶと、Ligthboxで元

Date:2019/3/11

Copyright© growniche.Inc All Rights Reserved.

2-3. メディアを追加 3 詳細設定

タイトル 画像のaltとして使われます。

キャプション 画像にキャプションとして説明書きを入れたい場合はこちらに入力します。※レイアウトが崩れやすく非推奨

代替テキスト 画像のaltとして使われます。(タイトルより優先)

説明 画像についての説明です。特に表面上には表示されません。

配置 左寄せ、右寄せ、中央ぞろえなど、画像の配置を決めます。

リンク先 画像をクリックした際のリンク先を設定します。「メディアファイル」を選ぶと、Ligthboxで元画像がポップアップします。

サイズ 元の画像を元に2~3種類のサイズが自動生成されておりますので、いずれかを選びます。

この部分を下にスライドすると、配置や写真のサイズを変更できる欄が出てきます。

Page 22: 投稿マニュアル 認定FPサイト · リンク先 画像をクリックした際のリンク先を設定します。「メディアファイル」を選ぶと、Ligthboxで元

Date:2019/3/11

Copyright© growniche.Inc All Rights Reserved.

3-1. グループ分け:カテゴリ

3-1. グループ分け:カテゴリ

タイトル

本文エリア

ビジュアルエディタ

公開設定

タグ

カテゴリ

Page 23: 投稿マニュアル 認定FPサイト · リンク先 画像をクリックした際のリンク先を設定します。「メディアファイル」を選ぶと、Ligthboxで元

Date:2019/3/11

Copyright© growniche.Inc All Rights Reserved.

3-1. グループ分け:カテゴリ 1

記事はカテゴリでグループ分けします。お知らせ新規商品のお知らせや、移転・休日などオフィシャルなお知らせ

コラム仕事に関わる情報発信。自分や他の出版物の紹介など。

セミナー情報セミナー開催時の事前告知。申込フォームが自動で付きます。

同じカテゴリの記事一覧ページに加わります。(新しい記事順)

Page 24: 投稿マニュアル 認定FPサイト · リンク先 画像をクリックした際のリンク先を設定します。「メディアファイル」を選ぶと、Ligthboxで元

Date:2019/3/11

Copyright© growniche.Inc All Rights Reserved.

3-2. グループ分け:タグ

3-2. グループ分け:タグ

タイトル

本文エリア

ビジュアルエディタ

公開設定

タグ

カテゴリ

Page 25: 投稿マニュアル 認定FPサイト · リンク先 画像をクリックした際のリンク先を設定します。「メディアファイル」を選ぶと、Ligthboxで元

Date:2019/3/11

Copyright© growniche.Inc All Rights Reserved.

3-2. グループ分け:タグ 1

タグもカテゴリのようにグループ分けします。

単語を挿入して「追加」ボタンをクリック

※一度に「追加」する場合カンマ( , )で区切ります。

例)確定拠出年金,相談

同じタグが付いた投稿もリスト化されたページが自動生成されます。

タグは検索誘導に関わるので、記事中にある単語が望ましいです。また、単語は短く区切ると効果的です。

Page 26: 投稿マニュアル 認定FPサイト · リンク先 画像をクリックした際のリンク先を設定します。「メディアファイル」を選ぶと、Ligthboxで元

Date:2019/3/11

Copyright© growniche.Inc All Rights Reserved.

3-2. グループ分け:タグ 2

投稿 > タグタグの新規作成、修正、削除が可能です。

Page 27: 投稿マニュアル 認定FPサイト · リンク先 画像をクリックした際のリンク先を設定します。「メディアファイル」を選ぶと、Ligthboxで元

Date:2019/3/11

Copyright© growniche.Inc All Rights Reserved.

4. 公開設定

4. 公開設定

タイトル

本文エリア

ビジュアルエディタ

タグ

カテゴリ

公開設定

Page 28: 投稿マニュアル 認定FPサイト · リンク先 画像をクリックした際のリンク先を設定します。「メディアファイル」を選ぶと、Ligthboxで元

Date:2019/3/11

Copyright© growniche.Inc All Rights Reserved.

4. 公開設定で出来る事

「公開設定」で出来る事

記事が完成したら「公開」をクリック

公開前 公開後

編集中のページをプレビューで

確認

公開中の記事の変更は更新して反映させます。

記事を削除したい場合はゴミ箱へ移動。

未完成記事は下書き保存し、

後日完成させる。