メンジム投稿マニュアル 2【記事に使用するHTMLについて】

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

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

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

あとは画像と規定のショートコードの入れ方だけです。

画像については覚えることがありますが、慣れてしまえば一瞬です。
また、画像内のテキストでSEOが変わりますので間違えないよう気を付けてください。

画像について

画像について 

続いて、記事を書くにおいて重要になってくる画像についてです。

画像を入れることによって、読者を惹きつける効果があるだけでなく、PCやスマホで見た時に見やすくなりますので必ず入れるようにしてください。

また、ネット上の画像に関しては規約がありますのでルールを守るように心がけてください。

使用する画像の注意点

使用する画像は、ネット上で使用されているものや自身で持っている画像を使用していただいて構いません。

ですが、ネット上で公開されている画像は、すべて著作権があります

著作権に引っかかってしまいますと、サイトの停止の危機に陥ります。

使用する画像は、

・フリー素材、フリー画像サイトのもの
・自身が撮影したもの、作成したもの

を使用してください。

また、フリー素材サイトであっても、規約によっては使用できないものもありますので各自利用規約の確認をしていただきますようお願いいたします。

自身が撮影したもの、作成したものを使用していただく場合でも、こちらから報酬アップはございませんのでご理解のほどよろしくお願いいたします。

公式サイトの画像や、どうしても使いたい画像がある場合

出典の記載

ネットの画像は、所有者が判れば使用しても良いという条件があります。(2018年現在)

そのため、出典として使用者のURLを張り付けることができれば使用可能になっています。
出典のやり方は後ほど、画像の入れ方と共にご説明させていただきます。

また、有料画像サイトで画像を取得していただいても、こちらからその分の金額をお支払いすることは出来かねますのでご了承ください。

画像を入れる場所

画像のソース

画像を入れる場所は、見出しの下になります。

h2、h3の下にそれぞれ入れていただく形になります。
h2、h3の下に入る画像は、見出しに沿ったものを入れるようにしてください。

h2の画像は中央に入れ、h3の画像は左右交互になるように入れていただきますようお願いいたします。

ただし、例外記事もございますので過去記事を見ていただき判断してください。

▶通常の画像の記事   
▶例外となる画像の記事

画像サイズ

h2の下と、h3の下に入れる画像によってサイズが異なります。

画像サイズは、
h2下=縦:335px 横:670px
h3下=縦:200px 横:300px

というサイズでお願いします。

画像のサイズの変え方は、お手持ちの画像編集ソフトなどを使用して既定の大きさにしていただければ幸いです。

また、画像の解像度が低すぎるものに関しましては修正の対象になってしまいますのでご注意ください。

画像の入れ方

画像の入れ方

見出しに沿った画像を選び、既定のサイズに変更いたしましたらメンジムの内部で画像の挿入をしていただきます。

画像を見ながら確認し、入れてみてください。

メディアに保存

メディア

本文入力の枠の上部、メディアを追加をクリックしていただき、[ファイルをアップロード]を選択。

ファイルを選択ボタンを押して指定の画像を入れていただくか、ドラッグすることでメディアライブラリに画像が保存されます。

メディアライブラリには、メンジムで使用されている画像の全てが入っていますので、

画像は絶対に削除しないようにお願いいたします。

使用する画像の確認をしてタイトル設定

タイトルとテキスト

使用する画像にチェックがついており、右側に添付ファイルの詳細が出ていることを確認して画像のタイトルと代替テキストを入れます。

タイトルには半角英数字で画像のタイトルを入れ、代替テキストには日本語で画像に沿ったタイトルを入れてください。

真ん中のキャプションは出典を入れる時のみ使用します。

出典を入れたい画像に関して

使用したい画像の所有者を出典で出す場合にはタイトルと代替テキストの間のキャプションに、

という形で書き入れることで自動的に出典を表示してくれるのでご活用ください。

フリー画像の場合は空欄でお願いします。

画像の配置とサイズを指定

サイズ

タイトルを書き入れたら、スクロールし添付ファイルの表示設定を変更します。

h2の画像なら配置は中央に、h3の画像なら左右どちらかに指定します。

リンク先が[なし]になっていることを確認し、サイズはフルサイズを選択。ここでも編集が行われた画像サイズに間違いはないかご確認をお願いします。

 

挿入して確認

挿入

最後に、投稿に挿入ボタンを押すと画像が英数字の羅列で挿入されます。

プレビューを確認して、画像の入り方に間違いがないか、見出しに合った画像になっているかを確認してください。

 

h3下の画像の注意点

h3の下に来る画像は、画像とテキストが横並びで表示されます。

そのため、画像の縦サイズよりもテキストの量が少ないと下のテキストや見出しに空間がなくなり、レイアウトが崩れる原因になってしまいます。

画像下にテキストが来るように文字数を増やすして調整するようにしてください。

 

いいわるい

SNSの活用法

どうしても画像が見つからない場合や、口コミなどを使用したい場合、Twitterやインスタグラムの投稿を使用することもできます。

口コミを入れることで、リアル感が増し、記事のボリュームもアップしますので、入れられそうな投稿があったら入れてみてください。

テキストの途中にTwitterやインスタグラムを挿入する場合には、上に空間を持たせるため

を入れてください。

Twitterの入れ込み

Twitter

使用したい呟きを開き、その他をクリック。

上から2番目の[ツイートをサイトに埋め込む]を選択し、コードをコピーして入れ込みたい部分に張り付けることでTwitterを記事内に表示させることができます。

 
 

インスタグラムの入れ込み

インスタ

使用したい投稿を表示させ、右下の[…]をクリック。

上から3番目の埋め込みを選択してTwitter同様コードをコピーして本文に貼り付けます。

この時、キャプションを追加をチェックすると写真以外の文章も表示され、チェックを外すと画像のみの表示になります。

 

そのままコードを張り付けると大きすぎる画像になってしまうので、
コード内のmax-width:658px;を、max-width:400px;に変更してください。

サイズを変更することでちょうど良い大きさになります。

▶Twitterとインスタグラムを使用した記事の参考

※引用内のテキストは【オリジナルテキスト】には含まれません。
文字数稼ぎには使用できませんのでご了承ください。

ショートコードの使い方

ショートコード

公式サイトへの誘導や、販売店舗への誘導また、YouTubeで公開されている動画を記事の内部に入れ込むことができます。

ショートコードという補助ツールを使用することで入れることができますので、使用したい方はぜひ試してみてください。

本文の上[ショートコードを挿入]から入れることができます。

ボタン

ボタン

お店の紹介や、販売店のHPへの誘導に使用できるボタン機能です。

[ショートコードを挿入]から、ボタンを選択。

リンクに移動したいサイトのURLを貼り付け、背景色を変更(ご自由にお選びください)、テキストの色をもしくはを選択し一番下のコンテンツ枠にボタンの中に表示されるテキストを書き込みます。
「公式サイトはこちら」「購入はこちらから」等

最後にライブプレビューをクリックして表示を確認し、ショートコードを挿入で記事内部に入れ込みます。

その他の項目はバグの原因になってしまいますので、変更しないようにお願いいたします。

 

動画

どうが

YouTubeで公開されている動画で有れば使用可能です。

[ショートコードを挿入]から、YouTubeを選択します。

URLに使用したい動画のURLを挿入し他の項目は何も触らず、一番下の[ショートコードを挿入]で記事内部に入れ込みます。

プレビューから、動画が挿入されていることを確認して完了です。

ショートコード内の高度なYouTubeは使用しないようお願いいたします。

広告と別記事へのリンク

記事が書き終わったら、リンクと広告、関連記事を記事内部に挿入します。

広告を張り付けることで、読者にクリックしていただき、皆さんの給与としてお支払いすることができますので、必ず広告を張り付けるようお願いいたします。

また、関連記事を入れることで、メンジム内で投稿されている記事をより多くの人に見てもらうことができますので、こちらも忘れずに挿入してください。

書き出しにリンクを挿入

リンク

記事の書き出し文にもリンクを挿入していただきます。

挿入するリンクは、メンジムのカテゴリー・タグページです。

その時書いている記事に見合ったカテゴリーやタグページに誘導する目的があります。

文章中に入れるので、『デート』や『タバコ』また、『アイコス』など派生した単語で入れてもらっても構いません。

タグ・カテゴリーのURL一覧もスプレッドシートに記入してありますのでご確認いただけると幸いです。

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

広告の挿入

広告

広告の挿入は、広告を入れる位置を選択し本文枠の上部にある[Ads1][Ads2]をクリックするだけで簡単に挿入することができます。

Ads1を、一番最初のh2上に設置し、Ads2は記事の中間地点のお好きなところに挿入してください。

Ads1はプレビューを見た時に目次の上に来ていれば正解です。

記事の一番下には自動的に[Ads3]が挿入されますので、[Ads2]まで挿入していただければ結構です。

近すぎない程よい位置に設置してみてください。

※プレビューをみても広告が表示されない場合がありますが、公開時に現れるので気にしなくて大丈夫です。

関連記事(ブログカード)

関連記事は、今書いている記事に共通するメンジム内の記事を挿入する作業になります。

メンジムの検索窓に、今書いている記事の内容、例えば『タバコ』の記事ならタバコと検索窓に入れ検索、内容に似ているような記事のリンクを次の形で挿入していただきます。

こうすることで、

人気の電子タバコ『ビタフル』はどこで購入するのが一番安い?
今話題の電子タバコ『ビタフル(VITAFUL)』は、ニコチン・タールの代わりにビタミンが入っているリフレッシュできる水蒸気スティックです。美味しくて匂いも良い人気のビタフルを購入したい!という訳でどこの販売店が一番安いのか大調査してみました!
iSMOKEの評判まとめ!アイコス互換機の中でもおすすめな理由
今、加熱式タバコで使用するタバコスティックを使用して喫煙することが出来る互換機が人気なんです!今回はアイコスの互換機の中でも、おしゃれで連続喫煙が可能なiSMOKEの評判やおすすめポイントをまとめました。
 

という形になります。

入れる場所は、

1つ目
一番最初のh2テキストの下

2つ目
記事のちょうど中央部分辺り、h2もしくはh3のテキスト下

3つ目
まとめh2の上

と言った風に、バランスよく挿入していただけたらと思います。

こちらは、1記事内に3セット6記事分入れていただく必要があります。
どうしても似通った記事がない場合は、同カテゴリー内のものを使用し、内容が似ている順に上から埋めていって下さい。

同じ記事がブログカードで被らないように注意して下さい

HTMLと装飾まとめ

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

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

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

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

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

あなたへのオススメ

コメントを残す

*