今ではもう、ブログの記事に編集・装飾がある程度できるようになりました。さらに、seesaablogのコンテンツも充実し、最新記事下のカテゴリーごとのご紹介が効果的に表せるようになりましたので、これを機に過去の記事も改めて修正し直し、整理して、同様な記事を繰り返し書かずに、上書きのみにして、カテゴリごとに学びやすいようにします。

カテゴリことの表記は→ 【テーブル】・・・ とします。

それぞれの記事タイトルも
【テーブル】@表組みの基本から・・・のような表記にします。 ○番号で続きの学びが確実にできるように表していきます。最初から学ぶときは@からたどってみてください。

従って、記事更新の日付は参考にせずに、【カテゴリ】から学びたい項目を探して進んでいってください。 今後とも末永くいつでも戻ってきて学んでみてください。

2012年03月15日

【テキストJ】改行やスペースなどを入れたそのままで表示


テキストの改行やスペースなどをソース通りに(入れたそのままで)表示に挑戦しましょう。

<PRE>と</PRE>で囲まれた範囲はそのままで表示に反映される便利なHTMLです。たとえば次のようになります。
続きを読む

【テキストI】メインだけでなくサイトもきれいに見せたい


きれいに私のブログを見てもらいたいと思い左右のサイトも整理したいと貼り付けた画像に中央に位置するようにHTMLを貼り付けていました。

<center>貼り付けるアフィリエイト画像や文章など</center> …@

<div style=”text−align:center;”><貼り付けるアフィリエイト画像や文章など></div> …A

というように入れていました。@でもAでもOKです。Aは下のボタンにあります。

その後に簡単な文章を入れる時に、(左サイトに入れてあります。マキアレイベル広告参照)

<div style=”text−align:center;”><貼り付けるアフィリエイト画像や文章など>上質の潤いでお肌を包み込む</div>

とすると、文章が画像の脇に入ってしまう。そこで、文章のまとまりを表す記号を入れる。
<p>と</p>の間に文章を入れます。この間の文章を一つのまとまりとして表す意味です。

<div style=”text−align:center;”><貼り付けるアフィリエイト画像や文章など><p>全身を美容洗浄する</p></div>

すっきりと中央に位置します。


<div>文章</div>にすると一つのまとまりを表します。こちらは<p>文章</p>のように段落でないので一行分の間を開けません。

左サイトの画像の後には<p>文章</p>を入れましたので間が少し開いています。
<div>文章</div>の場合は間が開きません。

両方を使い分けて見ましょう。

=追伸=
私は、@の方を入れていて、centerをcentre入れ間違えて、メインの文章やコメントまで中央揃えになってしましました。間違い箇所を見つけるのが大変でした。気をつけてください。




ラベル:テキスト サイト

【テキストH】文字の大きさを変えてみる


シーサーブログの記事入力には、強調(太)やイタリック(斜体)表示があります。
「大」と「小」もありますが、それを、好みの大きさに変えたいときは、
たとえば、範囲指定して「大」とクリックした場合

<DIV style=”font−size:large”>囲んだ文字</DIV>

となりますから、この中の、「large」を『16PX』に変えてみてください。幾分小さくなります。好みの大きさを探してください。

数学の大カッコ、中カッコ、小カッコの使い方を参考にして、いくつもの要素を文章の中に盛り込むことができます。


はじめまして、私のブログのテーマは「おいしいコーヒー」です。

にいくつかの要素をこの文章に入れて見ます。

はじめまして、私のブログのテーマは「おいしいコーヒー」です。


これは、次のようになります。

数式のカッコを
はじめまして、私のブログのテーマは「おいしいコーヒー」です。
それぞれのあらわしたいもので挟みます。

<DIV style=”font−saiz:17p”>はじめまして、わたしのブログのテーマは<b>「おいしいコーヒー」</b>です。</DIV>
と、なります。

シーザーブログの記事ページで文章を入力し、いろいろと試してみてください。
*HTMLはここでは英数全角であらわしていますが、実際に使う際は英数半角で入力してください。
今日はここまで
ラベル:テキスト 文字

【テキスト】G小見出しと小さな文章というまとまりとして表現する。


皆さん、HTMLの学びは進んでいますか。
今日は、小見出しと説明する文章(短め)、或いは 用語と説明文のような関係の文章表現に挑戦してみましょう。

<DL>
 <DT>@小見出し(改行のない短い文章) <DD>A本文@を受けての文章
</DL>

・・・・・・・繰り返しも表現できます。下記のように<DT><DD>を繰り返して入れます。

<DL>
 <DT>@小見出し(改行のない短い文章) <DD>A本文@を受けての文章 (改行)
<DT>@小見出し(改行のない短い文章) <DD>A本文@を受けての文章  (改行)
<DT>@小見出し(改行のない短い文章) <DD>A本文@を受けての文章  (改行)
</DL>

では実際に、使ってみましょう。
リンクシェア レビュー アフィリエイト

では、実際に使って見ましょう⇒続きをクリック

【テキスト】Fテキストにルビをふる練習です。


ふり仮名と言えば、「ふりがな」と書いている書類と「フリガナ」と書いてある書類とがあります。
もちろん「ふりがな」ならひらがなでルビを振り、「フリガナ」ならカタカナでルビを振ります。大人になる過程で身に付く常識ですよね。

今日はテキストにルビをふってみましょう。

<RUBY>@<RP>B</RP><RT>A</RT><RP>B</RP></RUBY>
@・・・ルビをふる文章
A・・・ルビ
B・・・RUBY非対称のブラウザで表示させる文字・・・( と )、[ と ]など。
<RUBY>@<RP>(</RP><RT>A</RT><RP>)</RP></RUBY>
では、実際に使って見ましょう⇒ここをクリック

【テキスト】E略語を文章の中で表記する例…カードルを持っていくと現せる。


用語が略語、頭文字であることを表現する練習です。

そうそう、マクドナルドも略語あるよね
「マック」と「マクド」あなたのところはどっち

私は「マック」

それぞれの用語には細かい下点線で表示され、カーソルを持っていくとTITLE属性でポップアップします。
略語は・・・<ABBR title=”et cetera”>etc.</ABBR>

インタレスト↑
では、実際に使って見ましょう⇒ここをクリック
ラベル:テキスト 略語

【テキスト】D引用文章(短文=短い語句)を分かりやすく表示してみよう


引用文章を分かりやすく表示してみます。今日は短い文章の場合を練習します。

短い文章=改行を伴わない短い文章を指します。
citeは引用文の引用元を示します。機能十なしになります。

<Q cite=”@”>A</Q>
@は引用した文章の引用元を示すURL(http://・・・)
Aは引用する文章(改行を伴わない短い語句)
となります。

※win版explorerでは無効になります。よってこの後の「使ってみようでは」表示されません。
では、実際に使って見ましょう⇒ここをクリック
ラベル:テキスト 引用

【テキスト】C引用した文章(長文)であることを表示してみよう


引用した文章であることを表示してみます。今日は長文の場合を想定して見た目で分かるように表示できます。

<BLOCKQUOTE cite=”@”>A</BLOCKQUOTE>
@は、http://・・・引用元を示すURL
Aは、引用した文章
となります。

Aの文章は、左右にインテンド(余白を開けた)表示になります。さらに一回りテキストのフォントサイズを小さくすると分かりやすいかも知れません。
下のボタンの「小」や、その中のsmallを○○PXとして、丸に数字を入れてフォントの大きさを変えてみて自分の気に入った大きさにしてみてください。
では、実際に使って見ましょう⇒ここをクリック
ラベル:テキスト 引用

【テキスト】B入力したそのままで表すHTMLがコレ。


テキストの改行やスペースなどをソース通りに(入れたそのままで)表示に挑戦しましょう。

<PRE>と</PRE>で囲まれた範囲はそのままで表示に反映される便利なHTMLです。たとえば次のようになります。
では、実際に使って見ましょう⇒続きをクリック

【テキスト】A文字の配置/右中左


テキストの表記を「中央ぞろえ」「右ぞろえ」「左ぞろえ」で表現してアクセントを盛り込むことができます。

ブログではタイトルや見出しをこれらで表現してアクセント表記すると有効です。

ビフィズス菌を大腸まで届けるカプセル技術

胃酸に弱いビフィズス菌は、その多くが腸に届くまでに死んでしまうことをご存知でしょうか。
森下仁丹のビフィーナは、独自開発した耐酸性の「植物性ダブルプロテクトカプセル」で、胃酸に負けずビフィズス菌をしっかり大腸まで届けます。

中央ぞろえの例
では、実際に使って見ましょう⇒続きをクリック

【テキスト】@大きさを変えてみる


シーサーブログの記事入力には、強調(太)やイタリック(斜体)表示があります。これを利用しただけで大きさを変えてアクセント表記できますが、文字の大きさを指定するには、これから学ぶ方法で変換できます。

すぐ上のリンクボタンの「A+」…大と「A−」…小もありますが、それを、好みの大きさに変えたいときは、任意の文字を範囲選択してブルーにします。
次に、リンクボタン「A+」とクリックすると、大きな文字で表現できます。

<DIV style=”font−size:large”>囲んだ文字</DIV>

となりますから、この中の、「large」を『16PX』の表記に変えてみてください。幾分小さくなります。数字を大きくあるいは小さくして好みの大きさを探してください。(色はついていません・分かりやすくしただけです)

数学の大カッコ、中カッコ、小カッコの使い方を参考にして、いくつもの要素を文章の中に盛り込むことができます。
では、実際に使って見ましょう⇒続きをクリック

トップページへ戻る方は次項有クリックして

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。