i-8jo.com（Yahoo!blog入門）

Yahoo!blogに「エディターモード」登場？

今日、新規投稿部分のソースを見ていたら面白いものを見つけました。

---

function changeEditorMode( type) {

var frm=document.f;

var oType = 't';

var submit = false;

if ( oType == type ) return;

switch(type) {

case 't':

if ( confirm("一般編集に切り替えますか?" ) {

frm.changeEditor.value = 'T';
submit = true;
if ( oType == 'y' ) {

frm.content.value = frm.yeditor.bodyHTML.replace(/<BR>/g, "\n";
if ( frm.content.value == "<P> </P>" ) frm.content.value = "";

}

}

break;

case 'y':

if ( confirm("HTMLツールに切り替えますか?" ) {

frm.changeEditor.value = 'Y';
submit = true;
frm.content.value = frm.content.value.replace(/\r\n/g, "<BR>";

}

break;

case 'p':

if ( confirm("ペイントツールに切り替えますか?" ) {

frm.changeEditor.value = 'P';
submit = true;
if ( oType == 'y' ) {

frm.content.value = frm.yeditor.bodyHTML.replace(/<BR>/g, "\n";
if ( frm.content.value == "<P> </P>" ) frm.content.value = "";

}

}

break;

}

---

私は詳しくないのですが、これは恐らく新規投稿画面での新しい機能の一部だと思われます。

現段階で、記事を飾り付けるには手打ちでhtmlタグやwikiを打ち込まなくてはなりませんが、
これを見ていると「htmlツール」なるものが出てくるようですね。
更に「ペイントツール」とありますので、もしかしたら画像編集のツールまで付くのかもしれません。

あくまでも、推測に過ぎないですが、これは期待できますね。

、、、でも、その前にサーバーの重さを何とかしてもらいたいものですね。
今でも、私は夜にYahoo!blogには近づきません。だって、開かないんですもの、、。

記事本文を飾り付けてみよう「（その２４）Wiki超入門１４」

今回はテーブルの色やサイズの変更の仕方をご説明します。
テーブルの中で改行ができないので、あまり使い勝手は良くありませんが、見た目にアクセントを付けるにはアイディア次第で有効な方法だと思います。それでは、やってみましょう。

※Wikiを使用する場合は、記事本文を記入する欄の右上にある「Wiki文法使用」をチェックしておいてください。

基本的なルールとしては

||||
||<#色の値' width=横幅 height=高さ ``表の文

です。

・"|"は縦棒です（何て言うのか判りません）。私のキーボードでは右上の"\"キーをShiftと一緒に押すと出てきます。
・色の値の次にあるのは['](シングルクォーテーション)です。私のキーボードでは"7"キーをShiftと一緒に押すと出てきます。
・表の文の前にあるのは[`](何て言うのか判りません)。私のキーボードでは右側の"@"とshiftを一緒に押すと出てきます。

■テーブルの色と大きさを変える（1行で横幅100px・高さ100pxの時）

文法）
||||
||<#ff0000' width=100 height=100 ``赤色です
||<#00ff00' width=100 height=100 ``緑色です
||<#0000ff' width=100 height=100 ``青色です

結果）

赤色です	緑色です	青色です

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■テーブルの色と大きさを変える（2行で横幅100px・高さ50pxの時）

文法）
||||
||<#ff0000' width=100 height=50 ``赤色です
||<#00ff00' width=100 height=50 ``緑色です
||<#0000ff' width=100 height=50 ``青色です
||||
||<#ffff00' width=100 height=50 ``黄色です
||<#00ffff' width=100 height=50 ``水色です
||<#ff00ff' width=100 height=50 ``ピンクです

結果）

赤色です	緑色です	青色です
黄色です	水色です	ピンクです

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

如何でしょうか？上手く表示されましたか？
いろいろと細かい設定がでてきて、難しく感じるかもしれませんが、一つ一つやっていけばそんなに難しいことではないと思います。恐れずに試して見てくださいね。

参考
色見本はこちらをご覧ください。
色見本１
色見本２

また、Yahoo!blogの場合、記事の部分の横幅は560pxに設定されているようです。
テーブルの大きさを設定する時は、横幅の合計をそれ以下にしておいた方が良いでしょう。

[感謝]
この記事は「きろくぶろぐ」さんの記事を参考にさせていただきました。
もしも、参考になりましたら「きろくぶろぐ」さんのページにて、ボタンをお願いします。
「きろくぶろぐ」さんの研究の成果に感謝！！

[☆歓迎☆]
コメント・トラックバック大歓迎！
転載をご希望の方は右下のを押してください。

cssテスト

こんにちは	こんにちは	こんにちは
	こんにちは	こんにちは

記事本文を飾り付けてみよう「（コラム）CSS超入門はじめる前に」

今まで、html、wikiとご説明してきましたが、次回よりCSSの説明に入りたいと思っています。
ここで、少し整理をしておきたいと思います。

まず、これらが一体何なのか？という話です。

皆さんがインターネットをする時に見ているホームページやブログは「html」という言語で書かれています。（正確には違うページなどもありますが、大まかにはそう言えます。）
なので、このhtmlがあくまでも基本だと思ってください。
ちなみに、これまで説明してきたhtml文法はその中でも文字などを飾りつける機能の一部分です。

それでは、「wiki」とは一体何なのでしょうか？

wikiとは、文法が複雑なhtmlを簡単にする為のものだと考えてください。（本当は違うのですが、大まかにそう考えておいてください。）

例えば、文字を太字にする場合

＜htmlの場合＞
<b>太字にする</b>

＜wikiの場合＞
'''太字にする'''

という風になります。どちらが便利で使いやすいか？というのは議論が分かれる部分ですが、わざわざhtmlタグを打つよりもwikiを使った方が簡単になる部分もやはりあると思います。

Yahoo!blogがなぜwikiを採用したかは分かりませんが、初心者を重視するYahoo!にとってhtmlよりもwikiの方が分かりやすいと判断したのかもしれませんね。

ここで、皆さんに知っていて頂きたいのは、実はwikiも裏ではhtmlに変換されているということです。
文法的には違って見えますが、上の場合もwikiで入力した文法はhtmlに変換されて、皆さんが見るページになっているのです。

なので、やはりhtmlが基本となる訳ですね。

さて、それでは次に出て来たCSSとなんでしょうか?
CSSとは「Cascading Style Sheets（カスケーディング スタイルシート）」の略で、一般に「スタイルシート」とも呼ばれています。この言葉も覚えておいてくださいね。

このスタイルシートはhtmlで記述した文章を細かく飾りつけするための言語なのです。

これまでもご説明したようにhtmlで文章を飾りつけすることも可能なのですが、それだといろいろと不都合なことがでてきます。（ここでは細かく説明しません。）
そこで、htmlは文章を書くものに専念させて、飾りつけを担当する言語としてスタイルシートが登場してきました。

本来、スタイルシートを利用すると様々な表現が可能になります。
しかし、Yahoo!blogの場合はwikiを利用しているので、その利用できる部分が限られています。

限られた範囲ですが、いよいよ次回からはこのスタイルシートの説明に入りたいと思います。

記事本文を飾り付けてみよう「（その２３）Wiki超入門１３」

今回はテーブルの表示の仕方をご説明します。
記事の中に表を作りたい時など、テーブル表示ができるととても便利ですね。
複雑に表示させることも可能なようですが、まずは簡単なところからやってみましょう。

※Wikiを使用する場合は、記事本文を記入する欄の右上にある「Wiki文法使用」をチェックしておいてください。

基本的なルールとしては

||表の文||表の文||表の文||

です。
("|"は縦棒です（何て言うのか判りません）。私のキーボードでは右上の"\"キーをShiftと一緒に押すと出てきます。）

■テーブルを入れる（単純なテーブルを入れる）

文法）
||表の中の文1の1||表の中の文1の2||表の中の文1の3||
||表の中の文2の1||表の中の文2の2||表の中の文2の3||
||表の中の文3の1||表の中の文3の2||表の中の文3の3||

結果）

表の中の文1の1	表の中の文1の2	表の中の文1の3
表の中の文2の1	表の中の文2の2	表の中の文2の3
表の中の文3の1	表の中の文3の2	表の中の文3の3

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■テーブルを入れる（セルを結合する）

文法）
||表の中の文1の1||表の中の文1の2||表の中の文1の3||表の中の文1の4||
||||表の中の文2の1||||表の中の文2の2||
||||||表の中の文3の1||表の中の文3の2||
||||||||表の中の文4の1||

（隣のセルと結合したい場合は、「結合したい数×2」の数だけはじめに"|"(縦棒)を追加します。

結果）

表の中の文1の1	表の中の文1の2	表の中の文1の3	表の中の文1の4
表の中の文2の1		表の中の文2の2
表の中の文3の1			表の中の文3の2
表の中の文4の1

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

如何でしょうか？上手く表示されましたか？
結合がでてくると少し難しく感じるかもしれませんが、基本の部分は簡単ですね。
行数は改行をして同じように入れていけば、何行でも増やせそうです。
この様に、単純なテーブルの組み方を一つ覚えておくと、後がとても便利になると思いますので、是非使ってみてくださいね。

[感謝]
この記事は「きろくぶろぐ」さんの記事を参考にさせていただきました。
もしも、参考になりましたら「きろくぶろぐ」さんのページにて、ボタンをお願いします。
「きろくぶろぐ」さんの研究の成果に感謝！！

[☆歓迎☆]
コメント・トラックバック大歓迎！
転載をご希望の方は右下のを押してください。