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

記事の書き方詳細


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


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

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

「漫画」を指定した場合は画像ビューアーが漫画ビューアーに切り替わります。


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

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


3)詳細記事モード

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

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

4)小説[横]モード

5)小説[縦]モード

基本は詳細モードと同様ですが、テキスト表示を縦横に切り替えたり、文字サイズを変更するためのテキストコントローラが表示されるようになります。
小説向けのモードです。

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

6)固定ページ

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


HTMLタグの利用

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

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

Markdownの利用

記事の中身には2つの方法でMarkdownを使用することができます。
見出し、強調、テーブルについては常時使用可能です。
（下記サンプルは全角で記載されていますが実際には半角で入力してください）
Markdownコマンド内容
# title見出し1
## title見出し2
### title見出し3
…同じ形で見出し7まで
＊＊ ~ ＊＊強調
＊ ~ ＊強調2
｜header｜header｜
｜-｜-｜
｜value｜value｜
｜value｜value｜		テーブル。
各カラム内では改行できないため、<br>タグで改行してください。

より詳細なMarkdownを利用したい場合は{md}～{/md}で囲った範囲でMarkdownを記述してください。

特殊記述

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


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

{caption}が指定されていない場合は本文先頭100文字が使用されます。
{1}、{2}、{3}…この記事の画像を表示します。

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

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

例）
{1 b l} … 1番の画像を枠線付き・左寄せで表示
{c}左寄せ・右寄せした画像に対する文字の回りこみを解除します。
CSSの「clear:both」に該当します。
{.UserCSSName}～{/.}
{..UserCSSName}～{/..}
ユーザー定義CSSを呼び出します。

例）
{.red}～{/.}
{..blue}～{/..}

上記の表記は
<span class="user_red">～</span>
<div class="user_blue">～</div>
に置換されます。
.が一つの場合はSPAN、二つの場合はdivになります。

ユーザー定義CSSは設定画面-デザイン編集で定義します。
{#color}～{/#}文字色を変更します。

例）
{#ff0000}～{/#}
{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 … 一覧を作る対象のタグ。「ALL」 (大文字で表記)を指定すると全記事が対象になります。
sort … asc または desc を指定。昇順/降順の指定。また、likeをしてすることでいいね順にできます。
style ... 省略可能。normal, thumbs, text, imagesを指定できる。
count ... 省略可能。1ページ当たりの表示件数。

article_listの使い方はこちらを参照してください。
{vt}～{/vt}
縦書きエリア。{vt}～{/vt}で囲まれた文章が縦書きになり、その下に文字サイズコントローラが表示される。
小説用。
{tc}～{/tc}縦書き用の文字結合。2桁の数字など、縦書き時に一組で表示したい文字を囲います。
{rb}～|～{/rb}漢字にルビを振ります。
{rb}漢字|ふりがな{/rb}のように記述すると、漢字(ふりがな)のようにかながふられます。
{border}

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

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

いいね！


次へ | -