みどり同盟ブログの記事投稿者用アドバイス記事です。
みどり同盟ブログの投稿権（自分専用ID＆パスワード）を持っていない人は記事を投稿できません。

更新日      難易度
2004/12/27　★★★★★　記事編集の注意点（重要）
2004/12/27　★　　　　　文字の色を変える
2004/12/27　★　　　　　内容の一部または全部を枠線で囲む
2005/04/22　★★　　　　文字クリックで画像を別ウィンドウ表示
2004/12/27　★★　　　　Habboホテル内メモ風メモに記事を書く
2005/04/22　★★　　　　画像を加工せずに大きさを変えて表示させる
2004/12/27　★　　　　　目立つ見出しをカンタンに表示
2004/12/27　★★　　　　自分の記事から他の記事へリンクする
2004/12/27　★★★★　　記事内リンクを設定する
2005/03/12　★　　　　　ミニ画像拡大機能
2005/05/12　★　　　　　画像表示位置の指定
2006/10/21　★★★★　　記事の途中で「記事の続き」を開いてジャンプ

テキストエリアの部分はソースコード（記事や画像を飾るためのプログラムのようなもの）です。この中身を丸ごとコピーして自分の記事にペーストした後で、必要な部分だけを変更すればカンタンです。

編集アドバイスへのご意見・ご要望・バグ報告などは自由コメントBOXへ、疑問・質問などはFAQへ投稿してください！

■ソースコード（文字や記事を表示するためのプログラムのようなもの）で記述する<span〜>や、<h2>などの<>でくくられた部分をタグと呼びます。
さまざまなタグを使用することによって記事を装飾することができますが、記事の中で部分的に指定して全体をごちゃごちゃにしてしまうのは現在のwebデザインの流れに反していますし、W3Cというwebの仕様を決める団体もこれを推奨していません。
W3Cで非推奨とされているということは、今後はブラウザーによって利用できなかったり、上手に表示できなくなっていく可能性があります。

■では、世の中のすべてのwebサイトが味気ないものになっていくのかと言うと、そこはうまい解決策が用意してあります。
私も皆さんにオススメしている<div〜>などを使ったクラス指定という方法があります。
これは、あらかじめ私が別のファイルで内容を定義しているもので、皆さんはそれを使って、好きな部分に定義を適用していくことができます。
こうすれば、皆さんのミスも少なくなり、もしバグが見つかっても私が定義している別ファイルを修正するだけで皆さんの記事が自動的に修正され、また、変更も簡単にできるでしょう。
もちろん<div〜>もタグですから、次の注意を守ってくださいね。

ご注意！
・タグは必ず開始タグと終了タグの対になっています。
1つの記事の中で何度でも指定できますが、たとえば<div〜>と</div>が同数存在していなければなりません。
どちらかが不足すると、自分の記事だけでなく他人の記事やコメントが崩れたり、表示に時間がかかるようになったりしてしまいます。
・タグの中には上で書いたように非推奨要素とされているものがあります。
これをわかりやすく（PONJAN流に）言い換えると、「使うのは勝手だけど、今後の新しいPCでは表示できなくなるかもしれないし、もしかしてエラーになっちゃうかもよ？それでもいいなら使ってみれば？」という意味です。
今のところは問題はありませんので、多くの環境でテストした結果安定したものものの内、便利なものはあえて紹介しています。
・コピー＆ペーストを使わずに自分でソースコードを書く場合は、プレビューでよく確認してください。
・ここに掲載している方法以外をよそのサイトで調べたからといって安易に使わないでください。
多人数参加型のみどり同盟ブログでは、より多くの環境で同様の表示ができるよう視覚表現コントロールを厳密に設定しています（まだまだアマいところもありますが修正進行中です！）。
記事に不用意にタグを挿入した結果、自分の環境ではうまく表示できていても他人の環境では大きく崩れる場合があることを念頭に。
・ここで紹介するタグ以外のものを使いたい場合は事前に自由コメントBOXなどでコメントして確認をとってください。（時間が合えば）Habboホテル内でPONJANに直接お聞きくださっても結構です。
・これらの注意を踏まえると、なぜコメントでは画像挿入やリンク・装飾などすべてのタグが使えないのかお分かりいただけると思います。

誰でも投稿できるのがコメントの魅力ですから、コメントした人が知らず知らずのうちに全体を崩してしまうのを防いでいるのです。
逆に、記事の投稿者権限を持っている方は何でもOK状態ですので、その分注意が必要です。
記事の投稿者権限＝信頼されている証、ですよ。

<span style="color: red;">この部分に色を変えたい文字を書きます。</span>

<span style="color: blue;">こんなふうに、</span><span style="color: red;">文字の色を</span>変えることができます。

管理画面の「記事編集」にあるをクリックすれば、自動的に緑メモ表示のタグが入力されます。
最初にこのボタンをクリックして自動入力されたタグの

また、先に文章を書いた場合は、メモに入れる範囲を選択（反転）させてからボタンクリックで自動的にタグがはさんでくれるよ！
モチロン、この下の解説を参考にしてカンタンに色を変えられます！

ソースコード：

ソースコード：

ソースコード：

ソースコード：

ソースコード：

<img src="画像URL" width="画像の横幅" height="画像の縦の高さ" alt="画像の説明" class="pict" />

ご注意！
■縮小表示させたものはなかなかキレイにはなりません（JPEG形式の写真は、比較的キレイに縮小表示できるようです）。
■拡大の場合も整数倍でないと汚くなる場合があります。
■縦横のサイズには小数点は指定できません。端数が出たら四捨五入してください。
■できるだけ縦横の比率を守ってください（横を半分にしたら縦も半分に）。

<div class="c1">普通に文字を書いて前後にこんなタグを追加するだけです。</div>

例：http://md.mediabird.jp/md.cgi?eid=39#comments

<a href="/md.cgi?eid=○○">クリックする部分（ジャンプ元）</a>

ご注意！
リンクは本来クリックする前にどんな内容のページにジャンプするのか閲覧者が一目でわかるようにする必要があります（とんでもない海外サイトにジャンプするなどのイヤガラセをする人もいますから…）。
そこで、一番上の使用例のように、リンク先の記事タイトルや投稿者名を明記してください（必ずしもクリックする部分に書く必要はありません。前後に明記しても良いでしょう）。

「他の記事へのリンク」と何が違うのか？
・1つの記事の中でスクロールすることなく一気に目的の場所へ画面を移動できます。
・「記事の続き」に書いた部分にもジャンプすることができるので、閲覧者が「記事の続きをクリックしてさらに下にスクロールしてやっと読みたい部分をを見つけた」なんていう手間を省くことができます。
・1つの記事の中にいくらでもジャンプ先を設定できます。どんどん内容を追加していくような記事にはピッタリです（閲覧者はメニューを見て一度読んだ記事はクリックせずに読み飛ばすことを想定）。

<a name="●●">ジャンプ先の見出しや画像など</a>

例：<a name="ponjan389a">ジャンプ先の見出し文章や画像タグ全体</a>

<a href="/md.cgi?eid=○○#●●">メニューのタイトル（クリックする部分）を書いて前後にこんなタグを追加します。</a>

例：<a href="/md.cgi?eid=179#ponjan378b">PONJANへの励ましのお便りは自由コメントBOXへ</a>