メンジム投稿マニュアル 2-1【簡単な記事作成用】

其の弐
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

WPの使い方はある程度理解できましたでしょうか?

メンジム投稿マニュアル 其の壱【WPの使い方】

続いて記事の中身に関してもう少し詳しくご紹介していきます。

メンジムの投稿記事で使用するHTMLの基本と使い方、メンジムのライティングルールなどをまとめています。

細かいですが覚えればサクサクライティングできますのであまり身構えずリラックスしてご覧ください。

記事の構成

まず始めに、記事の構成を軽くご説明させていただきます。

▶良い記事参考
▶悪い記事参考

メンジムでは、

ライティング構成

の繰り返しや他の組み合わせと最後の記事のまとめで構成されています。

ライターの皆様には、画像の入れ込みなどの作業を除いた

文章作成

文字の装飾

サブテキストの文章作成(マニュアル①参照)

上記の作業が主なお仕事となります。

まずはそれぞれの役割をご紹介しながら、ライティングのルールを説明させていただきます。

書き出し文章

書き出し文

読者が記事を開いて一番最初に見る文章です。

この記事にはどんな内容のものが書かれており、読者側が知りたいと思っている情報は入っているか、このサイトは読む価値があるか等を見極めるための文章になっています。

そのため、記事の内容が目的のものでなければ読者は去ってしまいますし、興味がない人は読み進めてくれません。

必ず記事のタイトルと、本文の内容に沿ったテキストを160文字~190文字程度でまとめて入れてください。

書き出し文章にも記事のキーワード5個を入れるようライティングをお願いいたします。

見出し

見出し

見出しは大きく分けて3種類あります。

記事の頂点である大見出し(h1)
大見出しから派生して細分化、テーマごとに扱う中見出し(h2)
中見出しからもっと細分化し細かく紹介する小見出し(h3)

それぞれ見出しは大きいごとに、h1、h2、h3と「h」と数字で表します。

h1は、新規投稿ページで作成したキーワードをもとにした32文字以内の文章になり、メンジムの本文の中では中見出し[h2]と小見出し[h3]を使用します。

階層ごとに枝分かれして、何について書いているか詳しくタイトルを付けるといった感じです。
メンジムの他の記事を見ていただき感覚を掴んでみてください。

▶良い見出しの記事参考
▶悪い見出しの記事参考

文章

ライティング内容です。
今この部分のことです。

h2やh3の見出しに沿った内容の文章を作るようお願いいたします。

文章は、5つのキーワードを1記事につき10個以上含めて、オリジナルテキスト2500文字以上でライティングしていただきますようお願いいたします。

キーワードの使用回数は、プレビューを開きCtrl+Fでそのページに単語がいくつ含まれているか調べることができるので、ご活用ください。

最後”まとめ”で締める

まとめ

最後に、記事のまとめで締めくくります。

最後の[h2]に記事作成HTMLについてのまとめといった風にタイトルをつけていただき、記事の内容をまとめます。

自分が感じた事などを入れてもらっても大丈夫です!

HTMLの基本

HTMLとは、

ハイパーテキストを記述するためのマークアップ言語の1つである。ウェブページを表現するために用いられる。ハイパーリンクや画像等のマルチメディアを埋め込むハイパーテキストとしての機能、見出しや段落といったドキュメントの抽象構造、フォントや文字色の指定などの見た目の指定、などといった機能がある。

というものです。
簡単に言うと、一番簡単なプログラムの一種です。

アメブロや、はてなブログなどを使ったことがある方は、軽く知っている方もいると思いますが、初めてでもわかりやすくご説明させていただきたいと思います。

HTMLは、装飾を施したい文章をコードで囲って反映させます。

<コードを指定>文章を書く</ここで終わりを示す>という書き方をします。

ソースコードを使いながらライティング

こちらで修正しやすいように、書き方を統一していただきたく思っております。

段落ごとで改行していただき、h2、h3の前は一行開けるというのを守って下さい。

書き方

中見出し

先ほどご紹介させていただいた文章の大枠です。

こちらは<h2></h2>囲うことで表示できます。

 

小見出し

中見出しの下に複数個設置されている小見出しは、<h3></h3>で示します。

h3は、必ずh2の下に入るのが鉄則です。

 

段落の指定

HTMLでは、文章の段落毎にコードを入れ囲う必要があります。

段落を表すコードは<p></p>ですが、メンジムの仕様上「p」で段落を表すとテキストとテキストの幅が小さくなり過ぎてしまうため、必ず<p class=”m20-t”></p>というコードを使ってください。

読み易さを考慮していただければ、どんな書き方をしていただいても構いませんが、出来れば「。」が付いたら段落を締める様にしていただくと、統一感が出て、読みやすい文章になります。

<p class=”m20-t”></p>のコードは、このままコピペしてもプレビューで反応しない場合があるため、お手数ですが下記のまとめシートからコピペをしてライティングをお願いします。

コピペをした際に、”m20-t”の「”」が半角であれば行間があきますが、全角ですとHTMLが反応しません。コピペをした際に自動的に「”」が書き変わってしまう場合があるので、コピペをする際は必ず下記のシートからお願いいたします。

▶メンジム HTMLまとめ参考シート

改行について

段落にする程でもない、段落にすると意味が繋がりにくい。という時には<br />を設置します。

このコードには終了タグがないので単体で力を発揮します。

HTMLのコード一覧

▶メンジム HTMLまとめ参考シート

メンジムの文字装飾について

メンジムの記事は、通常のテキストのほかに3種類の文字装飾を使って、重要ポイントの強弱をつけるようにしています。

 

太文字
色のついた太文字
色のついた大きい太文字

下の投稿記事を参考に、文字の装飾をしていただくようにお願いします。

h2、h3のテキストの中に装飾をしていただくと華やかになるので調整してみてください。

太文字

3種類の装飾の中では重要度が低いですが、目を引く太文字は使い勝手も良いので覚えておいてください。

太文字のコード指定をするとこのような文字装飾になります。

太文字のコード指定は、<b></b>

必ず、スラッシュで太文字の終了を示さないと<b>以降すべての文章が太文字になってしまうのでご注意ください。

メンジムカラーの太文字

続いて、本サイトのモチーフカラーを使用した装飾です。

この装飾ではカラーコードと言われるものを指定します。

このコードを使用することによってメンジムカラーの指定と太文字を同時に行うことができ、色を変えて太さも変えることができます。

重要なポイントなどに活用してみてください。

メンジムカラーの大きい太文字

一番強調したいテキストは、このような形で表します

font=文字 color=色を指定 size=文字の大きさをそれぞれ指定をする事でこのような装飾にしてあげることができますので、これらを組み合わせて記事を作成します。

文字装飾の注意点

文字の装飾方法や、構成方法は基本的にはライターさんの自由にしていただきたいと思っております。

ただし、色の装飾が偏ってしまったり、強弱が付かず単調な記事になるのを避けるため、

h2内には1種類以上使用
h3の中には3種類中2種類以上を使用

で装飾をお願いしております。

記事のキーワードになっている部分や、結論付けている部分など、装飾は感覚さえ掴めればとても簡単ですので、調整してみてください。

▶良い文字装飾の記事参考
▶悪い文字装飾の記事参考

HTMLの活用方法

HTML

記事の見た目は、文字だけだと単調になってしまいますし、見にくくなってしまいます。

そのため、枠組みやtableと呼ばれるコードを使ってテキストを装飾する事で、魅力的な記事を作成することもできます。

HTMLは覚えると楽しいので、興味のある方はぜひ使ってみてください。

基本的に適度の装飾で有ればご自由にしていただいて構いませんが、

※記事内にスタイルCSSの挿入はしないようにお願いいたします。
システム上バグを誘発してしまうためです。

枠組み

一番使い勝手の良いコードです。

商品の紹介や、情報をまとめるのに便利です。

 

このような枠組みです。

枠組みのHTMLコードは、こちらのコピペ枠わく様のサイトより枠のコードを使用してください。

先ほど使用した枠組みのコードがこちら。

また、テキストサイズに枠を合わせたい場合には、コード内に[display:inline-block;]を入れていただくと

 

このように、枠のサイズを合わせることができます。

 

テーブル

記事内で比較したいときに活用できるtableコードですが、メンジムではスマホでも見やすくしているため使用はあまりお勧めしておりません

どうしても使用したい。という方が居ましたら、下記のスプレッドシートからコードを確認してください。

▶メンジム HTMLまとめ参考シート

HTMLと装飾まとめ

大変長くなってしまいましたが、ここまで読んでいただければある程度記事の作成ができると思います。
ご不明点がございましたら、お気軽に連絡用のチャットにて担当者にお声かけいただければ幸いです。

HTML、WPは弊社以外にも活用できる場が多いので一連の流れを覚えていただくと嬉しく思います。

簡単にHTMLをスプレッドシートにまとめてありますので、下記のリンクから活用して頂けるとスムーズに記事作成ができるかと思います。

▶メンジム HTMLまとめ参考シート

記事作成のほど、どうぞよろしくお願いいたします!

あなたへのオススメ

コメントを残す

*