コンテンツ作成のヒント

  • 使用できるHTMLタグ: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img> <table> <tr> <th> <td>

    このサイトではHTMLで書かれたコンテンツの投稿を許可しています。 HTMLのすべてを習得するのは気が引けるかもしれませんが、ごく少数の基本的なHTML「タグ」の使い方を習得するのはとても簡単です。 以下の表では、このサイトで利用できるタグを、一例を挙げて説明しています。

    より詳細な情報は、W3CのHTML Specifications(英文)や、W3C 仕様書等の日本語訳集を参照するか、好みの検索エンジンからHTMLについて解説しているサイトを探し、それらを参考にしてください。

    タグの説明記述例表示例
    アンカーは他ページへのリンク作成に使用します。<a href="http://chikunai.net">Chikunai.net</a>Chikunai.net
    強調<em>強調</em>強調
    強調<strong>強調</strong>強調
    引用<cite>引用</cite>引用
    テキストをプログラムのソースコードとして明示するために使われます。<code>コード</code>コード
    順序無しリスト - 各リスト項目を <li></li> で囲み、全体を <ul></ul> で囲みます。<ul> <li>1番目の項目</li> <li>2番目の項目</li> </ul>
    • 1番目の項目
    • 2番目の項目
    順序付きリスト - 各リスト項目を <li></li> で囲み、全体を <ol></ol> で囲みます。<ol> <li>1番目の項目</li> <li>2番目の項目</li> </ol>
    1. 1番目の項目
    2. 2番目の項目
    定義リストは他の HTML リストと似ています。 定義用語を <dt></dt> 、その用語の説明を<dd></dd> で囲み、全体を <dl></dl> で囲みます。<dl> <dt>1番目の用語</dt> <dd>1番目の定義</dd> <dt>2番目の用語</dt> <dd>2番目の定義</dd> </dl>
    1番目の用語
    1番目の定義
    2番目の用語
    2番目の定義
    img タグのヘルプはありません。
    テーブル<table> <tr><th>テーブルヘッダ</th></tr> <tr><td>テーブルセル</td></tr> </table>
    テーブルヘッダ
    テーブルセル

    ほとんどの特殊記号は、特に問題なく直接入力することができます。

    問題が生じた場合は、HTMLのエンティティ表記を使用してみてください。 例えば、&amp; と入力した場合はアンド記号の「&」のように表示されます。 エンティティの全リストは、HTMLのエンティティページを参照してください。

    エンティティ表記の一例:

    文字の説明記述例表示例
    アンパサンド(&)&amp;&
    大なり記号(>)&gt;>
    小なり記号(<)&lt;<
    引用符(")&quot;"
  • 行と段落は自動的に認識され、<br />(改行タグ)や <p> </p>(段落の開始・終了タグ)が自動的に挿入されます。 もし段落が認識されない場合は、空行を2つ加えてください。
  • BBCode Guide

    BBCode allows you to specify formatting rules for your text, even if you are not allowed to use HTML in your posts. BBCode originated from the forum software named PHPBB, and this site has a special implementation of it.

    In BBCode terms, you use "tags" to add formatting to your text. Every tag is enclosed in [ and ] brackets. If you want to mark some region in your text, you need to use an opening tag and a closing tag. Closing tags start with [/, as you will see in the examples below. If you mistype a tag or forget to close it, you will not get the desired formatting.

    Simple text formatting

    BBCode allows you to make some parts of your texts stand out from the context by adding [b]old, [i]talic, [u]nderlined and [s]trikeout formatting to them. The [color], [size] and [font] tags allow you to change the color, size and font of portions of the text you enclose with these tags. Both require a parameter (which colour, how big, what font) that is suffixed to the name of the tag by an equals sign (example below). You should not repeat the parameter in the closing tag!

    You can specify any recognized color name (red, blue, green, white, etc.) or a hexadecimal color value (#CDCDCD, #FFFFFF, etc.) as the parameter of a [color] tag. The [size] tag allows you to set the font size between 6 and 48, 6 being the smallest size. Note that using very large text is considered by many to be annoying, and it is seldom a good idea to try to attract more attention to your post in this way. The [font] tag can be set to any valid font face, such as Arial, Arial Black, Courier, Courier New, Helvetica, Impact, Times New Roman, Verdana, etc.

    usagedisplay
    I [b]need to do[/b] this by the weekend I need to do this by the weekend
    John said that [i]we should[/i] ask her John said that we should ask her
    I [u]would not like to[/u] offend you I would not like to offend you
    Let's correct this [s]mispelled[/s] misspelled word Let's correct this mispelled misspelled word
    Jane was at [color=blue]the coast[/color] Jane was at the coast
    Joe was in [color=#FF0000]the forest[/color] Joe was in the forest
    You said: [size=30]HEY![/size] You said: HEY!
    She said: [font=Courier]What?[/font] She said: What?

    Creating links

    You have multiple options to specify links to other destinations in your posts.

    URLs (Uniform Resource Locators) starting with "www" or "ftp" (eg. www.example.com) are automatically recognized and replaced with links. You can also use the [url] tag with a parameter to specify a link with meaningful text to click on. If you use the url tag without the parameter, the enclosed text is assumed to be a URL, and a link is created to that destination.

    Email addresses in posts are also automatically converted to email links. For compatibility with common BBCode implementations, an [email] tag is provided.

    usagedisplay
    For more examples, visit www.example.com For more examples, visit www.example.com
    For more examples, visit http://example.com For more examples, visit http://example.com
    If you have questions ask me at joe@example.com If you have questions ask me at joe@example.com
    If you have questions ask me at [email]joe@example.com[/email] If you have questions ask me at joe@example.com
    We use [url=http://example.com/]the example site[/url] in these examples We use the example site in these examples
    We use [url]http://example.com/[/url] in these examples We use http://example.com/ in these examples

    Displaying images

    The [img] tag allows you to display an image in your post. You need to specify a URL to the image, so it needs to be accessible somewhere on the internet. Beware of adding very large images to your text, or the page will load very slowly!

    If you enclose a URL in an [img] tag, then it will be replaced with code to display the image. For example A good screenshot: [img]http://example.com/screenshot.png[/img] will show you the screenshot (if it exists).

    You can also specify the desired display dimensions of the image by adding a dimension parameter to the [img] tag. A good screenshot: [img=640x480]http://example.com/screenshot.png[/img] will display the image in 640x480 (though the full image will be downloaded). Do not use this to show a thumbnail of an image!

    You are free to link an image to an external destination by enclosing the [img] tag with a [url] tag: See [url=http://example.com][img]http://example.com/screenshot.png[/img][/url].

    Ordered and unordered lists

    The simplest list type is the unordered list, which means that there is no numbering applied to the elements. You can make such a list by enclosing the list elements in [list] opening and closing tags. Specify the start of one element with the [*] list element marker, which has no closing tag pair.

    To create an ordered list, you should add a parameter to the [list] list tag specifying what type of ordered list you would like to see. The possible parameters are "i", "I", "1", "a", "A", "c", "d" and "s" which all correspond to the display of the first list element.

    usagedisplay
    I love
     [list]
      [*]Oranges
      [*]Apples
      [*]Bananas
     [/list]
    
    I love
    • Oranges
    • Apples
    • Bananas
    I love
     [list=I]
      [*]Oranges
      [*]Apples
      [*]Bananas
     [/list]
    
    I love
    1. Oranges
    2. Apples
    3. Bananas
    I love
     [list=1]
      [*]Oranges
      [*]Apples
      [*]Bananas
     [/list]
    
    I love
    1. Oranges
    2. Apples
    3. Bananas

    Fixed-width text and block formatting

    You can use the [code] tag to add an inline fixed-width formatted part or to add a block of (usually program) code. If there is any newline present between the opening and closing tags, then a block will be displayed.

    Similarly, the [php] tag can be used to post PHP code. PHP code will automatically be syntax highlighted for easier readability.

    usagedisplay
    Edit your [code]robots.txt[/code] file Edit your robots.txt file
    An HTML title example:
    [code]
    <head>
     <title>Page Title</title>
    </head>
    [/code]
    An HTML title example:
    <head>
     <title>Page Title</title>
    </head>
    Some PHP code:
    [php]
    <?php
    function hello()
    {
      echo "Hello World!";
    }
    ?>
    [/php]
    Some PHP code:
    <?php
    function hello()
    {
      echo
    "Hello World!";
    }
    ?>

    Text and block alignment

    You can also set the alignment of the text by using [left], [right] and [center] tags. The [float] tag can be used to place floating boxes in the text (especially handy for images). You can specify the direction of the floating with [float=left] and [float=right]. The [justify] tag can be used justify text on both sides of the page.

    Other supported tags

    It is possible to quote something that has already been posted, by just putting [quote][/quote] tags around it. To quote a specific person, use something like [quote=John]. Quote tags can be nested.

    The [sub] and [sup] tags can be used to add subscript and superscript text. For example, H[sub]2[/sub]O gives H2O, while X[sup]3[/sup] gives X3.

    The [acronym] tag allow you to identify text as an acronym and provide a description when users move their mouse over the tag. For example, [acronym=Structured Query Language]SQL[/acronym] produces SQL.

    The [abbr] tag allow you to identify text as an abbreviation and provide a description when users move their mouse over the tag. For example, [abbr=World Wide Web]WWW[/abbr] produces WWW.

    The [notag] tags prevent text inside the tags from being parsed. This allows you to give examples of BBcode and not have it converted to HTML. For example: [notag]These [b]tags[/b] are not rendered[/notag] will produce "These [b]tags[/b] are not rendered".

    The [hr] tag draws a horizontal line across the page. Handy for separating chunks of text.

    Using multiple formatting tags

    You can apply more than one formatting specification to a portion of some text. I was at [b][i]the coast[/i][/b] will be rendered as I was at the coast.

    Make sure that you take care of the proper order of the opening and closing tags. You should close the tags in the opposite order in which you opened them. Otherwise you might get very strange rendering results. Also check your post with the preview function before submitting it, in case there are formatting errors due to improper BBCode usage.

  • 次のタグを使用してソースコード構文をハイライトすることができます:

    • 一般的な構文ハイライトタグ: "<code>", "<blockcode>"
    • 言語特有の構文ハイライトタグ:

    オプションと使用のヒント:

    • 一般的な構文ハイライトを行う言語では、タグの属性として type, lang, language, class のいずれかを指定できます。 指定した属性に設定できる値は "bash" (Bash コード), "c" (C コード), "cpp" (C++ コード), "drupal5" (Drupal 5 コード), "drupal6" (Drupal 6 コード), "java" (Java コード), "javascript" (Javascript コード), "php" (PHP コード), "python" (Python コード), "ruby" (Ruby コード), "sql" (SQL コード) です。
    • The supported tag styles are: <foo>, [foo].
    • 行番号の表示/非表示は "linenumbers" 属性を使用して設定します。 行番号の表示方法として選択できる値は、"off" (行番号を表示しない)、"normal" (一般的な行番号を表示)、"fancy" (指定行毎に行番号を装飾)です。 開始番号を指定する場合は "start" 属性を使用します。 開始番号を設定した場合、行番号の表示指定をしていなくても自動的にノーマルタイプの行番号が表示されます。 また、指定行毎に行番号の装飾を行う場合は、何行毎に装飾するかの行数を "fancy" 属性の値として設定します。 行番号の装飾を設定した場合、行番号の表示指定をしていなくても自動的に装飾された行番号が表示されます。
    • タグとタグで括られたコンテナ内のソースコードに改行が含まれる場合(例: 開始タグの直後など)、ハイライトされたソースコードはコードブロックとして表示され、そうでない場合はインラインコードとして表示されます。
    • A title can be added to a code block with the attribute "title".

    デフォルト:

    • 一般的な構文ハイライトタグのためのデフォルトのハイライトモード: "php" がデフォルトの構文ハイライト言語として使用されます。
    • デフォルトの行番号表示: 行番号あり(ノーマル)

    例:

    入力出力
    <code>foo = "bar";</code>デフォルトモードで構文ハイライトされたインラインコード
    <code>
    foo = "bar";
    baz = "foz";
    </code>
    デフォルトモードで構文ハイライトされたコードブロック
    <code lang="javascript" linenumbers="normal">
    foo = "bar";
    baz = "foz";
    </code>
    Javascript ソースコードとして構文ハイライトされたコードブロック
    ノーマルタイプの行番号を表示
    <code language="javascript" start="23" fancy="7">
    foo = "bar";
    baz = "foz";
    </code>
    Javascript ソースコードとして構文ハイライトされたコードブロック
    23 から開始される行番号を表示
    7 行毎に行番号を装飾
  • Video Filter

    You may insert videos from popular video sites by using a simple tag [video:URL].

    Examples:

    • Single video:
      [video:http://www.youtube.com/watch?v=uN1qUeId]
    • Random video out of multiple:
      [video:http://www.youtube.com/watch?v=uN1qUeId1,http://www.youtube.com/watch?v=uN1qUeId2]
    • Override default autoplay setting: [video:http://www.youtube.com/watch?v=uN1qUeId autoplay:1]
    • Override default width and height:
      [video:http://www.youtube.com/watch?v=uN1qUeId width:X height:Y]
    • Override default aspect ratio:
      [video:http://www.youtube.com/watch?v=uN1qUeId ratio:4/3]
    • Align the video:
      [video:http://www.youtube.com/watch?v=uN1qUeId align:right]

    Supported sites: Archive.org, Blip.tv, Capped, College Humor, DailyMotion, Flickr Slideshows, Flickr Video, Game Trailers, Game Videos, GodTube, Google Video, Meta Cafe, MySpace, Picasa Slideshows, Slideshare, Streamhoster, Teachertube, Vimeo, Wistia, YouTube, YouTube (Playlist).

    Special instructions:

    Some codecs need special input. You'll find those instructions here.
    • Picasa Slideshows:
      You must use the URL of the RSS feed for the Picasa album:
      1. View the album in Picasa (you should see thumbnails, not a slideshow).
      2. Find the "RSS" link and click it.
      3. Copy the resulting URL from the browser address bar. Example:
        [video: http://picasaweb.google.com/data/feed/base/user/USER_NAME/albumid/5568104935784209834?alt=rss&kind=photo&hl=en_US]
    • Slideshare:
      You need to construct your own URL, using the "Wordpress Embed" code from Slideshare, extract the "id", and form the URL like this: slideshare.net/1759622
  • ウェブページアドレスとメールアドレスは、自動的にハイパーリンクに変換されます。
Drupal theme by Kiwi Themes.