ここでは、完成した記事をES研究所にアップするまでの手順を説明する。
もくじ
- ログインから編集画面へ
- 書いた記事を貼り付ける
- 【難】タグ・画像などの装飾の手順
- パーマリンク(URL)を編集する
- Google用のタイトルと記事の説明文を入れる
- SNS用のタイトルと記事の説明文を入れる
- 読者タイプ・カテゴリを選択する・アイキャッチ画像を設定する
- 公開or予約投稿
ログインから編集画面へ
まず、インターン用のIDで管理画面にログイン。
※ログインできなかったら管理人へ要連絡
ログインできたら管理画面左側の「就活よもやま話」からフロー記事を追加をクリック
書いた記事を貼り付ける
1.ここにタイトルを記入の欄に、あらかじめ考えていたタイトルを貼り付ける
2.編集モードがテキストモードになっていることを確認し(ビジュアルモードになっていたらテキストモードをクリック)、書いた記事を貼り付ける
【難】タグ・画像などの装飾の手順
ブログを筆頭に、Web上に文章で見出しや箇条書きなどのアレンジをする場合、「タグ」というものが必要になる。
また、ブログのビジュアルをよくする為には画像も必要である。
以下の手順を参照し、タグを付けや画像を貼って、より見やすい記事を完成させてほしい。
1.タグ付けとは
ここで言うタグ付けとは、HPの見栄えをよくする為に文章の前後につけるラベルのことである。
百聞は一見にしかずなので、タグ付けをすることによってHPの見栄えがどのように変わるのか見ていただきたい。
(a)タグ付けを全く行わない場合のHPの見栄え
(b)タグ付けをした場合のHPの見栄え
以上の画像を比較していただければ、タグ付けの必要性を理解いただけると思う。
2.トップ画を貼り付ける
まず最初にトップ画を決めるのだが、これはFacebookで言うところのプロフィール画像に当たるので記事の第一印象を決める重要なファクターである。
よって、できるだけ記事の内容合った画像を見つけ出せればよりクリックされやすい記事となる。では、トップ画の貼り方手順を説明する
(a)どのような画像が記事の内容に合っているか考える
例えば、就活の靴に関する記事だったら革靴の画像、ような感じで見当をつける。
(b)実際に画像を探しだし、ダウンロードする
基本的に、画像については著作権フリーの画像を使うのが無難である。参考にフリー画像がGETできるまとめサイトを以下に記載するので是非ブックマークしてほしい。
- ※注意点※
- ・ できるだけ絵ではなく写真の素材を使うこと
- ・ ジャニーズ/ディズニーはご法度！！
(c)ダウンロードした画像をES研究所にアップロートする
Ⅰ.メディアを追加をクリック
Ⅱ.ファイルのアップロード→ファイルを選択をクリックし、トップ画にしたい画像を取り込む
(d)画像が取り込めたら、該当の画像にチェックを入れ、画面右側にあるURLをコピーする
(e)URLがコピーできたら、一旦メディア挿入画面を閉じる
(f)記事本文の一覧上にカーソルを合わせ、画像タブを押し、<img src=”画像url” alt=”画像タイトル” width=”800″ height=”493″/>と言う画面が出るか確認する
(g)画像urlと書いてあるところに、(d)でコピーしたURLをペーストする。また、画像タイトルと書いてあるところに画像のタイトルを任意で記入する
(h)タグ一文を全部選択し([shift+↓]で楽にできる)、<figure class=”cnter”>タグを押す。
(i)よく見ると、「center」が「cnter」になっているので、最後にeを挿入してトップ画は終わり。
3.目次を作る
読み手に向け、全体像を把握させやすくしたり、見たいところから記事を読めるようにすることを目的に、目次を作成する。
(a)記事の内容に応じて、大見出し・中見出しを構成し、トップ画タグの下に貼り付ける。
(b)「もくじ」の文字に<h2>タグを挿入した後、全体を選択して「ol」ボタンをおす。
(c)１行ごとに選択し、<a href=”#アンカー名”>ボタンをおす。これを全ての見出しに対して行う
(d)再び同じように１行ごと選択し、「li」ボタンをおす。これも全ての見出しに対して行う
(e)中見出しがある場合は、中見出しの範囲を選択し、「ul」ボタンをおす
(f)最後に、<a href=”#アンカー名”>のアンカー名と書いてあるところに任意のキーワードを挿入する。ここは無難に見出し名と同じでも良い
[例]<li><a href=”#アンカー名”>ログインから編集画面へ</a></li>
→ <li><a href=”#ログインから編集画面へ”>ログインから編集画面へ</a></li>
4.見出しを作る
目次に書いてある見出しをクリックすると該当の見出しのページまで移動できるようにするため、見出しにもダグを挿入する
(a)それぞれの見出しの欄まで移動し、大見出しにはh2タグ、中見出しにはh3タグ、小見出しにはh4タグを挿入する
[例]<h2>4.見出しを作る</h2>
(b)h2とh3に関しては、「id」ボタンを押して、下図になるように挿入する。
また、” “の中身については、目次作成の際にアンカー名と書いてあるところに入れた任意のキーワードを挿入する
[例]<h2 id=”見出しを作る”>4.見出しを作る</h2>
5.見出し毎に画像を貼り付ける
トップ画以外にも、見出し毎に画像を貼り付ける。これについては必須ではないので、時間がなければ飛ばしてもらっても構わない
(a)見出しの下の欄にカーソルを合わせる
(b)見出しにあった画像を貼り付ける。貼り付け方は「2.トップ画を貼り付ける」と同様の流れなので詳しくはそちらを参照してほしい
6.１文ごとにpタグをつける
見出し以外の文には全て１文ごとに<p>タグを挿入する。
[例]<p>この文章のように、タグを入れる。</p>
<p>また、１つの文章がセットである。（「。」がつくごとに１セット）</p>
7.太字にする
これは、簡単である。太字にしたいところを選択し、「b」ボタンをおすだけである。頑張れ。
[例]ああああああ<b>ここをが太字になる</b>ああああああ
8.箇条書き（ドット・数字）
記事の中には箇条書きを使う時もあるが、この場合もタグをつける
これについては以下のサイトがわかりやすいので、これを参考にしてほしい
9.編みかけ（囲み枠）を作る
箇条書きと組み合わせて使うことが多いが、強調したい場所を囲むのに使う。
囲みたい範囲を選択し、青色で囲見たい場合は「編みかけ（青）」、灰色で囲みたい時は「編みかけ（灰）」ボタンをおす。以上。
10.引用
他人様の文章（HPや本の内容）をどうしても使いたい場合は、「この文章は他の人の文章を拝借してますよ〜」という印が必要になる。これを引用という。
引用タグは以下の手順で行う。
- ビジュアルモードにする
- 引用する文章を選択する
- 引用ボタンをおす。
11.リンクを貼る
ES研究所内の他の記事や、他サイトに飛ぶリンクを貼りたい時のタグの付け方を以下に載せる
パーマリンク(URL)を編集する
デフォルトだと、記事のURLは日本語になっていることが多いので、アルファベットに修正する。
下図の例だと、[upload-kiji]や[upload-houhou]みたいな感じで、検索されやすそうなワードを自分で考えてオリジナルに作って可
Google用のタイトルと記事の説明文を入れる
Google用のタイトル→32文字で必ず検索されそうなワードを入れる
Google用の説明文 →100-150文字で検索されそうなワードを極力入れる
SNS用のタイトルと記事の説明文を入れる
タイトルも説明文もGoogle用のものをコピペしたのでOK
読者タイプ・カテゴリを選択する・アイキャッチ画像を設定する
読者タイプは非会員・カテゴリは記事内容に最適なものを「１つだけ」選ぶこと。アイキャッチ画像は記事一番上の画像を使う
公開or予約投稿
公開する。予約投稿（時間を指定して公開）するときは「すぐに公開する」の横の編集から日時を指定
