各記事ページの表示形態とHTMLの利用

記事の書き方詳細


各記事の表示形態は大きく分けて3つあります。
投稿画面の「スタイル」により、形式を変更できます。

1) シンプル（画像あり）

シンプルに、数行のコメントと画像を投稿したいときに使います。
先頭にコメントが表示され、続けて連続で画像が表示されます。
pixivの閲覧ページのような感じです。

2)シンプル（画像なし）

画像なしで、小説など文字で構成される記事を投稿したいときに使います。

3)詳細記事モード

文章と画像を自由に配置して表示するモードです。
画像・文字・画像・文字といったような形で、文字のあいだに画像を表示することができます。
この説明ページはこのモードで作成されています。

画像を表示する際は{1}、{2}といった表記をコメント文中に行います。
{1}は1番目の画像、{2}は2番目の画像に置き換わります。
　

4)固定ページ

すこし特殊なモードです。
トップページと同じスタイルで表示されるページを作成します。
個人ページでよく作成される、「About」や「Works」、「Link」など、記事とは違った
固定ページを作成します。
このモードでは見た目がトップページと同じようなスタイルになります。
また、このモードのページが作成された場合はトップページ先頭にメニューが表示されるようになります。
画像を表示したいときは詳細記事ページと同様に{1}、{2}という形で画像をコメントに挿入します。


HTMLタグの利用

コメント内にはHTMLを使用することもできます。
HTMLを使用すれば文字の色やサイズを変えるなど、凝った表現が可能です。

記事内の改行が<br>に変換されますので、<br>は不要です。

Markdownの利用

記事の中身には2つの方法でMarkdownを使用することができます。
見出し、強調、テーブルについては常時使用可能です。
より詳細なMarkdownを利用したい場合は{md}～{/md}で囲った範囲でMarkdownを記述してください。

特殊記述

特殊な記述をすることで画像の位置を任意に指定したり、ほかの記事にリンクができます。

記述内容
{caption}～{/caption}この記事の概略を記述します。リスト表示された際の説明文と、記事ページタイトル下の部分に表示されます。
{1}、{2}、{3}…この記事の画像を表示します。

数字の後にスペース区切りでオプションが指定できます。

s … 小さなサムネイル画像で表示します。
b … 画像に枠を付けます。
c … 画像を中央寄せします。
l … 画像を左寄せします。
r … 画像を右寄せします。

例）
{1 b l} … 1番の画像を枠線付き・左寄せで表示
{c}左寄せ・右寄せした画像に対する文字の回りこみを解除します。
CSSの「clear:both」に該当します。
{search:value}検索用のリンクを生成します。

例）
{search:説明 「説明」タグが付いた記事の検索リンク}
{link:index text}
記事へのリンクを生成します。

例）
{link:11 記事番号11へのリンク}
{link:url text}
外部へのリンクを生成します。
urlはhttps://またはhttp://から記述する必要があります。
textを省略することができます。この場合はURL自体が表示されます。

例）
{link:https://www.google.com Googleのリンク}
{article_list:tag sort style count}
指定したタグを持つ記事の一覧を作ります。
目次ページを作るようなときに使用します。

tag … 一覧を作る対象のタグ
sort … asc または desc を指定。昇順/降順の指定。
style ... 省略可能。normal, thumbs, text, imagesを指定できる。
count ... 省略可能。1ページ当たりの表示件数。
{vt}～{/vt}
縦書きエリア。{vt}～{/vt}で囲まれた文章が縦書きになり、その下に文字サイズコントローラが表示される。
小説用。
{tc}～{/tc}縦書き用の文字結合。2桁の数字など、縦書き時に一組で表示したい文字を囲います。
{rb}～|～{/rb}漢字にルビを振ります。
{rb}漢字|ふりがな{/rb}のように記述すると、漢字(ふりがな)のようにかながふられます。
{border}

{border #color}
画像に枠線をつけます。borderの後ろに#ff0000のような形で枠の色を指定することができます。
この記事全体に影響します。
{hidden:target}一部のシステム要素を非表示にします。

crated_at … 記事の更新日付
tag-links … タグクラウド
caption … caption
{md}～{/md}Markdown記述を表します。
この記述に囲まれた範囲内ではMarkdownを使用することができます。
{more}～{/more}
{more open|close}～{/more}
「続きを読む」をクリックするまで隠されたエリアを作成できます。
open|closeのように開くときの文字列、閉じるときの文字列を指定できます。

いいね！


次へ | -