ホームページ制作、千太の絵空事

時に勝つ!投稿できることに感謝しています。(千太) SINCE 2005

Yahooブログ記事作成

[ リスト | 詳細 ]

記事検索
検索

全5ページ

[1] [2] [3] [4] [5]

[ 前のページ | 次のページ ]


「春」はもうそこまで!。まずはどんな色がいいですか!。「春色」それとも「秋色」?。
春色の文字でもたまにはいいかも!
少しだけ心をつかって、
文字のサイズを変えたり、ページに変化を!
ブログに記事を書き始めると、リンクを貼りたくなりますね。そんな場合あなたはどうしますか?
とにかく記事もだけど、イメージを入れたい、そんは方には
記事を構造的にしっかり記入したい、そんなあなたには!
https://blogs.yahoo.co.jp/IMG/ybi/1/5c/68/cen_picture21/folder/23506/img_23506_290205_1?1109818584

「見出し」の秘密

(※↑この部分が<h1>でsection-1)


ここでは、「見出し」と称してwikiで出力されるHTMLタグについて、
少しだけ語ります。

  • [出力されるタグの意味]
  • [見出しのタグの順]
  • [リンクのネーム属性の出力]
  • [ページの位置を指定してのリンク]

出力されるタグの意味

(※↑この部分が<h2>でsection-2)


まずこの「見出し1〜5」と称してwikiでの表記で出力されるHTMLタグは、
<h1><h2><h3><h4><h5>の5種類があります。

そしてそのタグの意味は、「見出し」です。

その中でも「見出し1」と称して出力される
h1要素は、実は一番最上位を意味し、
構造的なウェブページを構築する場合、
結果、
たった一つということになりますね。
  • 既に文法的に破綻しているwikiでの表記(読まなくていいですよ、笑)
    文法的にいうと、p要素に内包される、ブロック要素ということで、wiki表記はすでに破綻しています。
    又、ブログでは、複数記事を、同一ページに出力する場合は、いくら記事内で一回しか使っていなくても
    結果、複数のH1要素が存在することになってしまいます。
上記なような矛盾もでてきますが、
本来的な意味にできるだけ忠実にコーティングしようとすれば、
ページ内ではこのh1要素は一回きりの使用となります。

他の<h2><h3><h4><h5>は複数出てもおかしくはないという事です。

見出しのタグの順

(※↑この部分が<h2>でsection-3)

これも<h2>の後は<h3>というように順に出現させます。

※<h5>までを使いきり、1ページだけで表現するような内容のある文章は稀で、大抵<h3>ぐらいまででこと足りてしまいます。



  • <h1>
    • <h2>
      • <h3>
      • <h3>
      • <h3>
    • <h2>
      • <h3>
      • <h3>
      • <h3>
    • <h2>
      • <h3>
      • <h3>
      • <h3>

ページ内では、こんな構造になりますね。

リンクのネーム属性の出力(wikiでの表記Level2)

(※↑この部分が<h2>でsection-4)

「見出し」としてwikiでの表記で出力される
<h1>など以外に実は、a要素とname属性が空の内容で出力されます。
  • wikiでの表記
    = 見出しテキスト1 =
    ○○○○○○○○○
    ○○○○○○○○○
    == 見出しテキスト2 ==
    ○○○○○○○○○
    ○○○○○○○○○
    == 見出しテキスト3 ==
    ○○○○○○○○○
    ○○○○○○○○○
    == 見出しテキスト4 ==
    ○○○○○○○○○
    ○○○○○○○○○
    

  • 実際に出力されているHTMLのソース(一部わかりやすいようにしています)
    <H1><a name='section-1'></a>見出しテキスト1</H1>
    ○○○○○○○○○
    ○○○○○○○○○
    <H2><a name='section-2'></a>見出しテキスト2</H2>
    ○○○○○○○○○
    ○○○○○○○○○
    <H2><a name='section-3'></a>見出しテキスト3</H2>
    ○○○○○○○○○
    ○○○○○○○○○
    <H2><a name='section-4'></a>見出しテキスト4</H2>
    ○○○○○○○○○
    ○○○○○○○○○
    

これは、<h1><h2><h3><h4><h5>の種類にかかわらず、出現する順(見た目は上から下の順)につけられています。
ですから、例えば上から2つ目に見出しに位置に移動させたければ、#section-2などとしてURLに含めページ内の位置を指定して、移動させることができます。

  • URLを表示してのリンクの場合(wikiでの表記Level1)
    [http://○○○○.○○○○○.○○.○○/○○○○○#section-2]
    

では、実際に「wikiでの表記2」のページの見出し「テキストリンク」にリンクしてみます。

http://blogs.yahoo.co.jp/cen_picture21/380750.html#section-7

  • テキストでリンクの場合(wikiでの表記Level2)
    [http://○○○○.○○○○○.○○.○○/○○○○○#section-2 リンクテキスト]
    

では、実際に「wikiでの表記2」のページの見出し「テキストリンク」にリンクしてみます。


開く トラックバック(1)

「表」の秘密(wikiでの表記Level2)


表のタグをwiki表記で出力するには、パイプを利用します。
ここでは、そのパイプの数字によって出力されるHTMLのソースについて少しだけ説明します。

  • [表]
  • [表の結合(属性colspan)]

wikiでの表記2

  • 表記
    ||テキスト文字||テキスト文字||テキスト文字||
    ||テキスト文字||テキスト文字||テキスト文字||
    
  • 見え方
テキスト文字テキスト文字テキスト文字
テキスト文字テキスト文字テキスト文字

となります。

実際に出力されているHTMLのソースは
  • HTMLのソース(一部、見やすいようにしています)
    <table cellpadding='3' cellspacing='2'>
    <tr>
    <td>テキスト文字</td>
    <td>テキスト文字</td>
    <td>テキスト文字</td>
    </tr>
    <tr>
    <td>テキスト文字</td>
    <td>テキスト文字</td>
    <td>テキスト文字</td>
    </tr>
    </table>
    
となり、きちんとtable,tr,td各要素とも正常に出力されています。

表の結合(属性colspan)

  • 表記
    ||||テキスト文字||テキスト文字||
    ||テキスト文字||テキスト文字||テキスト文字||
    
  • 見え方
テキスト文字テキスト文字
テキスト文字テキスト文字テキスト文字

と、パイプ||の後に||をくっつけて||||とすると、
いわゆる、セルの結合が行われます。


  • 表記
    ||||||テキスト文字||
    ||テキスト文字||テキスト文字||テキスト文字||
    
  • 見え方
テキスト文字
テキスト文字テキスト文字テキスト文字

と、パイプ||の後に||||をくっつけて||||||とすると、
さらに、3つのセルの結合が行われます。

実際に出力されているHTMLのソースは
  • HTMLのソース(一部、見やすいようにしています)
    <table cellpadding='3' cellspacing='2'>
    <tr>
    <td align='center' colspan='3'>テキスト文字</td>
    </tr>
    <tr>
    <td>テキスト文字</td>
    <td>テキスト文字</td>
    <td>テキスト文字</td>
    </tr>
    </table>
    
となり、きちんと結合を意味するcolspanの属性値に3が正常に出力されています。


そして、この場合、align='center'も出力され、center寄せができています。

※このalign='center'が出力されるのは、セルを結合した場合の見栄えをよくする目的での「あくまで付加的な出力」だと推測されます。

Yahooブログをあなたの色に!。





少しだけ心をつかって、
「春」ですね!。まずはどんな色がいいですか!。「春色」それとも「秋色」?。
春色の文字でもたまにはいいかも!
文字のサイズを変えたり、ページに変化を!
ブログに記事を書き始めると、リンクを貼りたくなりますね。そんな場合あなたはどうしますか?
とにかく記事もだけど、イメージを入れたい、そんは方には
記事を構造的にしっかり記入したい、そんなあなたには!
https://blogs.yahoo.co.jp/IMG/ybi/1/5c/68/cen_picture21/folder/23506/img_23506_290205_1?1109818584
Yahooブログをあなたの色に!。

「春」はもうそこまで!。まずはどんな色がいいですか!。「春色」それとも「秋色」?。
春色の文字でもたまにはいいかも!
少しだけ心をつかって、
文字のサイズを変えたり、ページに変化を!
ブログに記事を書き始めると、リンクを貼りたくなりますね。そんな場合あなたはどうしますか?
とにかく記事もだけど、イメージを入れたい、そんは方には
記事を構造的にしっかり記入したい、そんなあなたには!
https://blogs.yahoo.co.jp/IMG/ybi/1/5c/68/cen_picture21/folder/23506/img_23506_290205_1?1109818584

全5ページ

[1] [2] [3] [4] [5]

[ 前のページ | 次のページ ]


.
*************
*************
非公開 / 非公開
人気度
Yahoo!ブログヘルプ - ブログ人気度について
検索 検索

過去の記事一覧

ブログバナー

友だち(1)
  • ペーパーキャプテン・りヴぁ
友だち一覧

Yahoo!からのお知らせ

よしもとブログランキング

もっと見る

プライバシー -  利用規約 -  メディアステートメント -  ガイドライン -  順守事項 -  ご意見・ご要望 -  ヘルプ・お問い合わせ

Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

みんなの更新記事