投稿マニュアル

マイスターズインクの投稿方法を解説する
マニュアルを作ってみました。

投稿にはIDとパスワードが必要です。
まだIDをお持ちでない方はお問い合わせページよりIDをご請求ください。
※種類欄の『ユーザー作成』をチェックください。



ページ右上の紙とペンのアイコンをクリックします。
ログイン画面で出ますのでユーザー名とパスワードを入力。
WS000016.jpg

ユーザーダッシュボードという画面に遷移しますので
画面中央の「ブログ」タブから「共通ブログ」を選択してください。
マイスターズインクの編集画面に入れます。
WS000017.jpg

まず画像をアップロードします。
ページ左のリストから「アイテム」を選択、「アイテムを作成」をクリック。
WS000018.jpg

ファイルを選択してアップロード。
アップロード先は特にいじらなくても大丈夫です。
メインとなる画像とは別にサムネ画像を予め用意しておくと少し楽。
WS000019.jpg

アップロードが完了したら
リストから「ブログ記事」を選択、「記事の作成」をクリック。
WS000020.jpg

ブログ記事は「本文」と「続き」に分ける事ができます。
「本文」にサムネ画像と短いコメント、
「続き」にメイン画像とコメント全文を入力すると
ブログがすっきりして見やすくなります。

まず「本文」を作成。「画像の挿入」ボタンを押すと
アップロードされた画像の一覧が出ますので
先ほどアップしたサムネ画像を選択。
WS000021.jpg

オプションが表示されます。
先にサムネ画像を用意していない場合でも
「サムネイルを利用」にチェックを入れ横幅を指定すれば
生成することができます。
ここでは予め用意したサムネ画像を使用するので
チェックは入れずそのまま「完了」。
WS000022.jpg

文章も入力。
WS000023.jpg

<a>ボタンをクリックするとHTMLソースで編集ができます。
WS000024.jpg

「続き」を作成します。
「本文」の時と同様に画像を挿入。

画像が大きい場合「サムネイルを利用」にチェックし
記事に表示される画像の横幅を入力します。
ブログ記事に合わせておよそ500~600ピクセル程度がよい。
WS000026.jpg

文章も入力。
WS000027.jpg

環境によるのかもしれませんが、私が記事を作成すると
改行が全て<p>~</p>タグになってしまっています。
(<p>~</p>は「段落」を作るタグなので余計な空白が入る)
WS000029.jpg

これを手動で<br>タグに置き換えます。
WS000030.jpg

ページ右の「プレビュー」ボタンで実際の表示を確認できます。
何故か「本文」と「続き」が連結して表示されますが
投稿時にはちゃんと分かれますのでご安心を。
WS000032.jpg

編集に戻る時は必ず右上の「作成画面に戻る」ボタンから。
WS000033.jpg

「カテゴリ」と「タグ」に必要事項を記入し
「公開」ボタンをクリックすれば投稿完了です。
WS000031.jpg

おかしな点がないか確認しておきましょう。
WS000035.jpg

ここまでで記事は完成ですが
もう一手間かけると見やすさがアップします。

「本文」に挿入したサムネ画像にリンクをつけます。

予め上の「パーマリンク」のURLをコピーしておきます。
<img>部分が画像を表示しているタグなので
ドラッグで選択状態にして「リンク」ボタンをクリック。
(下の画像では前後の<p>タグまでドラッグされてますが気にしない)
WS000037.jpg

表示されたウインドウにコピーしておいたURLをペースト。
WS000038.jpg

こうすることで、サムネ画像が
「続きを読む」ボタンと同様の本文記事へのリンクになります。
WS000040.jpg

「続き」に挿入した画像に
クリックで原寸が表示される「lightbox」効果を加えます。

<a>タグの末尾にrel="lightbox"を書き足すだけ。
WS000042.jpg

正しく表示されるか確認。
WS000044.jpg

これで完了です。

トラックバック(0)

トラックバックURL: http://www.meisters-inc.net/mt/mt-tb.cgi/78

コメントする

最近のコメント

Creative Commons License
このブログはクリエイティブ・コモンズでライセンスされています。