多重折り畳みWikidotは非常にパワフルなWikiシステムです。そのため、限界に挑戦すると魔法のようなページを作ることができてしまいます。このページは、そのようなエソテリックなWikidotノウハウのまとめです。このページはテクニカルスタッフが管理しています。ここに追加したい機能があれば、スタッフまで連絡してください。htmlブロックとは本機能はhtmlブロックという機能を拡張するものです。htmlブロックとはWikidotページ内にhtml構文によって描画するスペースを作る機能です。htmlブロック内ではjavascriptというプログラミング言語を用いたギミックを作成する事が可能になります。閲覧終了こんな時はこれで解決!その名も"scp-WikidotCss.css"と"scpHTMLblockCtrl"!実際に使ってみましょう。閲覧終了え?htmlブロックに面倒くさい記述を入れたんじゃないかって?そんな事ありません!簡単に作れるように仕上げました!使い方:htmlブロックに以下の記述を入れてください。閉じる">ここに折り畳みの文章を入れてね</collapsible>とwikidotの構文とほとんど同じものを入れるだけです。hideLocation="bottom">ここに折り畳みの文章を入れてね</collapsible>これもwikidotの構文と同じです。引用囲いをする場合はどうするかというと<blockquote>ここに引用したい文章を入れてね</blockquote>この様に引用で囲いたい文章の上下に"<blockquote>"と"</blockquote>"をつけましょう。さぁ、これでもっと自由にhtmlブロックが使えるようになりました。htmlブロックを折り畳みの中に入れない場合は下記のように書いてください。id="scpHTMLblockResizeSwitch"></div>折り畳み文に入れる時の違いは下記の構文が入っているか否かです。true;</script>折り畳みの中にhtmlブロックを入れていない状態で上記の構文を使用しても問題ありませんが、しかしこの構文を使用すると、「このhtmlブロックが入った折り畳み文が開かれたかどうかの監視」をずっと続ける事になります。この監視は折り畳み文が一度開かれれば終わりますが、該当するhtmlブロックが折り畳みに入っていない場合は監視が終わりません。無駄なプログラムがずっと動いている事になります。繰り返しますが、折り畳み文にhtmlブロックを入れていない状態でこの構文を入れても問題はありません。ここからはhtmlおよびcssの知識が必要となります。閉じる">折り畳み文</collapsible>これを下記のhtmlコードに書き換えます。"scpCollasibleLink+n+0"のnには、実際には該当するcollapsibleが同html内の何個目のcollapsibleかを示す数値が入ります。この数は0から始まる事にご注意ください。具体例としては以下のようになります。n',0)"という箇所は該当するcollapsibleの位置によって下記のように変化します。任意の数値"という形式のidを使用する事はできません。id="scpHTMLblockResizeSwitch"></div>のように折り畳み開閉ボタンのデザインを変更する事ができます。最後に"scpHTMLblockCtrl"のグローバル変数及びグローバル関数の名前の一覧を掲載します。本スクリプトを使用した上でjavascriptを組む場合、下記一覧に載っている名前は使用できないのでご留意ください。scpHTMLblockUrl_arrayscpHTMLblockIframe_hashscpForResizeRandomNumberscpHTMLblockResize_div_idscpHTMLblockResize_iframe_idscpHTMLblockResize_urlscpMonitoringTimeSpanscpHTMLblockResizeSwitchHTMLblockOldHeightisHTMLblockHidescpParentCollasibleClassNamescpCreateCollapsiblescpResizeHTMLblockctrlHideHTMLblockSizescpRunCollasiblecorrectIframeSizeこのスクリプトによって皆様の表現の幅が広がれば幸いです。p.53~58よりそう、つまりHTMLブロックの中でjavascriptを走らせて、HTMLブロック内の文章を次々と書き換えていくギミックですね。いうのを作った時、こんな事に困った事はありませんか?HTMLブロック内に長い文章を表示した後、短い文章に書き換えたらHTMLブロックの高さが伸びきったままになる一度でもこういうのを作ろうとした人にはご共感頂けると思います。上のHTMLブロック、文章の長さに合わせて大きさを変えていませんか?そう、実は本スクリプトのHTMLブロックのリサイズ機能は好きなタイミングで発動させる事ができるのです。皆さんが作ったjavascriptの中で"correctIframeSize()"という関数を動かせば、そのタイミングでHTMLブロックのリサイズが行えます。HTMLブロックの文章をJavascriptで書き換える時、その書き換えを行う関数の最後にcorrectIframeSize();というコードを挿入してみてください。str3;というコードを見かけますが、下記の様にHTMLを組み立てれば簡単に、しかも複雑なHTMLコードに書き換える事ができます。}</script>つまり、書き換え後の文章を非表示(display:none;)の要素に格納するのです。ページを書き換える際はこの非表示の要素の中身をコピーすれば良いのです。すれば書き換え後の文章が増える度にstr等の変数を増やす必要はありませんし、書き換え後の文章も普通のhtmlの様に書けます。最後の変数を次々と足していくコードで変数を足し忘れた為に文章の一部が表示されないという事態も起こりにくくなります。何より書き換え後の文章の編集が楽です。このトピックのサンプルも上記の方法を応用して作りました。こんなものが作れるSCPの画像ボックスを使って、動画を入れる記事は有名なものだと、SCP-895がありますよね。今回はこういうものの作り方の情報共有です。これを丁寧なエッセイにしたら、凄まじい長さになると思うので、概要だけを掻い摘んで見ました。読者のhtmlとjsとcssの知識を前提にしています。Gifを使わないもちろん、動画やGifアニメをアップロードしても構いません。Gifアニメならまだしも動画だと埋め込みが困難です。これらのいずれもサイズが大きく、読み込みに時間がかかってしまいますし、何より監視カメラ感を出すためのタイムスタンプを入れることができません。したがって、動画やGifアニメなどの変化が起こらないファイルはSCP記事においては不利であるのです。html+css+jsの組み合わせを全部アップロードして使おう!SCP-845や、今回私が用意した例は、動画ではなく、JavaScriptでブラウザの読み込み時点で生成した映像です。動画風のhtml+css+jsを書くときに気をつけること重要なことから順に紹介していきます。高さを固定する動画ファイルは高さが変わることは、滅多にありませんよね?だからあなたが書くファイルも高さが変わらないようにしてください!というのは建前で、これらの動画風ファイルはiFrameを使って読み込ませています。私の知る限りでは、ブラウザは横の長さの計算は非常にすんなりとやってくれますが、縦の長さはちょくちょく計算がバグります。(例えばCSSの縦書きは、えらいことになる)ですから、最初から高さを固定して、ユーザー側からも高さを指定する方法を取るのが最も安全です。相対パスが使える同じページにアップロードしたファイルならば相対パスが使えるので覚えておきましょう。こいつ→"./"です。htmlの余白を全てなくす画像フレームによくわからない余白があると不恰好なので、あなたの作るhtmlの時点で余白を全て無くしましょう。具体的には、cssファイルにこれを入れておくのが吉です。}スマホでも、パソコンでもまともに見えるようにするSCP財団をスマホで見る方は多いです!なんとかしましょう!つまり、Flashを使って作るのは無茶ということです。5のCanvas要素の限界を極めるのが良いでしょう。埋め込み方法のテンプレート例えば縦横が(300px,300px)ならばこのような感じで、あなたの記事に埋め込みます。3.0とフレンドリーなライセンスで公開しなければなりません。3.0に対応するものを使うべきです。cssやjsファイルに使うコードも、商用不可能なものや、改変不可能なものを使ってはならないです。3.0を使いましょう。コードは無数のライセンス形式がありますが、その中でもMITライセンスが良いのではないでしょうか?もしMITライセンスならアップロードしたファイルの中に、直接MITライセンスの著作権表示および許諾表示を書いて、フォーラムでもMITライセンスを使っていることを説明すると良いでしょう。CodePenが便利CodePenはパブリック公開されている作品のライセンスが、MITライセンスです。effectを参考に作りました。CodePenは見ていて楽しいサイトなのでオススメですよ。鼻のあたりをじっと眺めていてください。すると、画像が切り替わります!でもその画像は白黒なのに色がついて見えますね......今回は、画像をCSSのフィルター機能で、白黒にしたりする方法について軽く説明します。SCP-993の画像ですね。grayscale(100%);filter:grayscale(100%);max-width:200px;"]]これをスタイルに入れると白黒になります。スタイルの以下の部分が肝です。hue-rotate(125deg);max-width:200px;"]]こんな感じにもできます。これはfilterにhue-rotate(125deg)を適用させたものです。webkit-filter:hue-rotate(125deg);-moz-filter:hue-rotate(125deg);filter:hue-rotate(125deg);これらのフィルターは合わせることもできます。これは一旦セピア色にしてからhue-rotate(125deg)を適用させたものです。このようにフィルターは空白で区切ることで、複数のフィルターをかけることができます。これは、画像以外にも、cssが適用できる要素全てにかけることができます。サイドメニューを白黒にしたりね!画面全体をセピアにすることもできます。text}}構文が使えなくなります。日本語フォントでは、テレタイプの雰囲気が別のフォントを使わない限り出せません。Wikidotの備え付けの機能だと、日本語のフォントの場合以下のような表示になります。俺は三人の男たちが血と糞と光に満ちた部屋で死ぬのを見た。一人がくしゃみをしただけで奴らは死んだ。今日また別の三人が部屋へと入る。安いモップとそいつら全員の命だけを持って。俺は尊敬すべき男が撃たれて死ぬのを見た。与えられるべきではなかった傷でボロボロになった女の子に薔薇を残すためにそいつは死んだ。今日その子はそのことを覚えていない。三つの防音室が閉まっても俺は彼女の悲鳴を聞くことができる。俺は兵士たちが戦いに行くのを見た。相手は奴らの死んだ戦友だった。俺達は次のサンプルのテストを行う。確かに、等幅フォントですが、テレタイプ端末の雰囲気が出ません。そこで、ビットマップフォントで表示してみると以下のようになります。俺は三人の男たちが血と糞と光に満ちた部屋で死ぬのを見た。一人がくしゃみをしただけで奴らは死んだ。今日また別の三人が部屋へと入る。安いモップとそいつら全員の命だけを持って。俺は尊敬すべき男が撃たれて死ぬのを見た。与えられるべきではなかった傷でボロボロになった女の子に薔薇を残すためにそいつは死んだ。今日その子はそのことを覚えていない。三つの防音室が閉まっても俺は彼女の悲鳴を聞くことができる。俺は兵士たちが戦いに行くのを見た。相手は奴らの死んだ戦友だった。俺達は次のサンプルのテストを行う。一気に端末感が出ましたね。時にこのビットマップフォントを使うと、より翻訳の見た目がブラッシュアップされるかもしれません。以下をインクルードしてください。:scp-jp-sandbox2:inc:ayu18]]このように利用できます。俺は三人の男たちが血と糞と光に満ちた部屋で死ぬのを見た。一人がくしゃみをしただけで奴らは死んだ。18ドットゴシックを、ライセンスを埋め込るためwoff化してweb-fontで表示しています。元の、ttfは先ほどのリンクから得ることができます。physicslike概要SCP-2998やSCP-1111-JPに代表される記事は、特殊なギミックを用いることで複数の異なる内容のページを評価などが同じ一つのページとして表示しています。このギミックは、実はListPageモジュールと子ページを組み合わせる事で実現されています。これは逆に言えば、同じようなページを作りたいと思った場合子ページを複数作成しなければならず、そのアップロードの順番も厳密に管理しなければならないという面倒臭さがあります。何よりも通常のサンドボックス上では子ページを安易に作れないため、ギミックのテストをすることができずに一発勝負になってしまうというハードルの高さが問題となります。そこで、ここでは同じように動作するギミックを、単一のページで再現する方法を紹介します。下のリンクで次の文章を表示します。>次の文章を読むその他!偽りの認証HEY!パスワードなんて分からないぜ、ニック!まあ、まあ、とにかく認証を押してみましょう。職員コード1bd747aee19c50c6fda16bf1177807f2_1685256526パスワード0a4456177df8b91be362a821a958434c_1685256526認証ログアウト職員コードが認識されました。あなたの閲覧権限に応じた情報を開示します。Ho!パスワードが出鱈目なのに開いたぞ、どうなってやがるニック!これは、そういうものなのです。hide="ログアウト"]]いつも通りの折りたたみブロックと思いましょう![[/collapsible]][[/div]]あなたは『name=』の後をカスタマイズすることができます。サイト名を変更するところで皆さん。このページの左上をご覧ください。「SCP財団日本支部」って書かれていますよね?「え?いつの間にかサイト名変わったの?」そんな風に思われるかも知れませんがそうではありません(実際他のページは「SCP財団」のままです)。これは下記の構文を使って表示されるサイト名を変更したのです。文字の色を入力してください色はRGBによって指定します。RGBがよくわからない場合は下のスクリプトで色を作ってください(モダンなスタイルじゃありませんが......)。上記の赤、緑、青のグラデーションがかかっている箇所を左クリックした状態でカーソルでなぞるか指でなぞるかすると、カラーサンプルと書かれた下の欄の色が変わります。この色がご自身の使いたい文字の色と同じになったら、"値"という欄に書かれている"#"から始まる文字をコピーしてください。この文字を本モジュールのCOLORの項目に記入すれば、変更後のタイトルの文字の色はそれと同じになります。これはご自身がオリジナルのCSSモジュールを作ろうとした際に上記のモジュールとの併用を図る際に必要な情報です。CSSモジュールを作る予定がない方は無視して頂いてかまいません。技術ノートを開く上記CSSモジュールを適用した場合、wikidotのページに標準で配置されている下記要素が書き換わりますのでご留意ください。none;本モジュールを適用した場合、wikidotのページに標準で配置されている要素に下記の疑似要素が加わりますのでご留意ください。このモジュールは上述の「サイト名を変更する」を一緒に使わないと機能しません。ページのタイトルをそのままに、ページの上部にサブタイトルを追加したいだけの方は「サイト名を変更する」に掲載した構文サンプルをコピペしてから、この構文をご使用ください。JP-branch"と書かれていますが、SCP財団の仕様が変わったのでしょうか?そうではありません。これは下記の構文によって追加されたものなのです。文字の色を入力してください文字の色はRGBによって指定します。RGBがよくわからない方は「サイト名を変更する」で記載した色作成のスクリプトを使ってください。これはご自身がオリジナルのCSSモジュールを作ろうとした際に上記のモジュールとの併用を図る際に必要な情報です。CSSモジュールを作る予定がない方は無視して頂いてかまいません。技術ノートを開く上記CSSモジュールを適用した場合、wikidotのページに標準で配置されている要素に下記の疑似要素が加わりますのでご留意ください。技術ノートを閉じるロゴ変更このページの左上のロゴを見てください。アレ?いつものロゴじゃない。これはSCP-INTの日本支部のロゴだ(え?それどころかグルグル回ってる?それは後述します)。ロゴの変更は下記の構文によって行えます。http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Achangeguruguru/medium2.png]]IMAGEの箇所にあなたのオリジナルロゴのURLを記入してください。下に何のマークも入っていない財団ロゴの外枠を用意しましたので、こちらを使って皆さんのオリジナルロゴを作ってみてはいかがでしょうか?画像を編集する際は透明色が使用可能な画像編集ソフトをお使いください。変更するロゴの画像は必ず正方形のカンバスに収まった画像にしてください。しなければ画像が縦に潰れたり横に潰れたりします。http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Achangeguruguru/medium2.png]]IMAGEの箇所にあなたのオリジナルロゴのURLを記入してください。inc:guruguru]]の下にグルグル用のロゴ変更の構文を記入してください。しなければロゴ変更は反映されません。これはご自身がオリジナルのCSSモジュールを作ろうとした際に上記のモジュールとの併用を図る際に必要な情報です。CSSモジュールを作る予定がない方は無視して頂いてかまいません。技術ノートを開く上記CSSモジュールを適用した場合、wikidotのページに標準で配置されている要素に下記の疑似要素が加わりますのでご留意ください。技術ノートを閉じるサブタイトルの変更このページのサブタイトルが変更されています!?これはSCPの仕業ですか!?いいえ。これもincludeで実現されている魔法のような機能です。title=確保、収容、ナナフシ]]神代文字コレハホツタマエデスアナタハヨクワカラナイモジツテステキダトオモイマセヌカミシラヌモジニヨルエキゾチックタイケヌ以下をインクルードしてください。:scp-jp-sandbox2:inc:hotsu]]このように利用できます。_[[/div]]フォントは、神代國ノ文字達から借りてきました。ライセンスはフリーですが、作成者の変更は厳禁です。このため、ライセンスを埋め込るためwoff化してweb-fontで表示しています。元の、ttfは先ほどのリンクから得ることができます。折り畳みタブと言えばサンドボックスで複数の下書きを収めるのに使いますよね。タブ1タブ2下書き1下書き2ただ、たまには違ったレイアウトの折り畳みタブを使いたくありませんか?今回はいつもと違ったレイアウト違いの折り畳みタブを用意しました!下の様な見た目です。タブ1タブ2下書き1長い文章が格納された時のサンプルです。下の黒い四角の中に長い文章が入っていると思ってください。導入方法は以下の通りです。下記の構文を記します。:scp-jp-sandbox2:inc:addspecialcss]]これは下記にご紹介する「記事の中にフォーラムを!」でも使う構文です。タブ2]]折り畳み文章2[[/tab]][[/tabview]][[/div]]更に今回は、このレイアウト違いの折り畳みタブの色違いバージョンもご用意致しました。:scp-jp-sandbox2:inc:addspecialcss]]を導入した上でご使用ください)。:scp-jp-sandbox2:inc:addspecialcss]]を使えば、後は折り畳みタブを[[div]]で囲むだけでちょっと違った折り畳みタブを使用する事ができます。IEもしくはEdgeでこのページを閲覧している方は気付いたかも知れませんが、このレイアウト違いの折り畳みタブ、IEもしくはEdgeで閲覧した場合はタブの高さが固定されます。タブの長さ以上の文章は隠れて見えなくなります。これは意図的な仕様であり、どうしてこのような仕様にしたのかは専門的な話になるので割愛します。このレイアウトの折り畳みタブでタブに長いタイトルを付けると見た目が格好悪いものになるので、このレイアウトの折り畳みタブを使用する際は、タブの中に書くタイトルはなるべく短くしてください。12:15HTMLブロックは使いたくないんです。:scp-jp-sandbox2:inc:addspecialcss]]を使ってみてはどうでしょうか?新しくコメントを投稿するもしかしたら、これを読んでいる読者の中には、記事の中にフォーラムを出現させたい、なんて一風変わった事をしたい人もいるかも知れません。ここではフォーラム風の表現を可能にする構文をお伝えします。この文章には、以下の形式で書かれた構文が頻出します。:scp-jp-sandbox2:inc:"という文までは全て共通している事がわかります)。実はこの書き方はSCP財団で疑似フォーラムを適用する書き方です。この書き方だとサンドボックス内では疑似フォーラムを適用できません。inc:hoge]]Code:2の様に"inc"の前にある":scp-jp-sandbox2"という文を削除してください。サンドックス内においてもCode:1で記した構文を使用しても問題ありません。SCP記事に疑似フォーラムを使う際、サンドボックスでもCode:1の記述を用いた方がコピペで済みますので、Code:1の構文をご使用ください。下の一文を挿入してください。これ無しではここから紹介する構文を書いてもフォーラム風の表現はできません。フォーラムではスレッドの作成者及びポストの投稿者のアカウント画像が表示されます。その画像には下記のものをご使用ください。ご自身で制作した画像を使用する事もできます。wikidotのフォーラムでは日付がイギリス式に表示されます。2017年4月2日の12時8分だと以下の様に表記します。12:08日本での日付表記と順番が違うの注意してください。月に関しては以下のようにアルファベット3文字で表します。Dec以上を踏まえて日付の記述をおこなってください。フォーラムの各スレッドの上部には、スレッドのタイトルとそのスレッドのカテゴリーが書かれています。記事の中にフォーラムを!ガイド日本語表現用Wiki構文拡張スタイル記事の中にフォーラムを!上記の表現は下の構文で実現できます。class="DummyForumTitle"]]~[[/div]]の間に文章をそのまま打ち込むとそれがタイトルに、リスト(番号なし)を書き込むとそれがカテゴリになります。フォーラムではスレッドのタイトルの下にそのスレッドの趣旨を記述するサマリーが配置されています。追加のオプション上記のサマリーは以下の構文によって作られています。:scp-jp-sandbox2:inc:pseudosummary-end]]Code:5ここでURL等の各種設定をおこなっていますが、その意味を説明します。※後述しますExplain:1上記の内のSUMMARYという設定に関してですが、まずは下記のサマリーをご参照ください。追加のオプションこのサマリーには説明文が記述されていませんが、同時に「サマリー」という文章も消えています。実はサマリーに何も書き込まない場合は、この「サマリー」という4文字も表示されないのです。この文字を消したい場合は上記の設定項目の内SUMMARYをnoneにします。inc:pseudosummary-end]]Code:6「サマリー」という文字を表示する場合はここの設定はblockにしてください。ここが一番複雑な構文になります。はりきってまいりましょう。フォーラムにおける1つのポストは以下の様に表示されます。12:08フォーラムっぽい記事を書きたいけど、どうやって書けばいいの?この表現は以下の構文で実現できます。12:08|TITLE=記事の中にフォーラムを]]フォーラムっぽい記事を書きたいけど、どうやって書けばいいの?[[/div]][[/div]]Code:7構文の最後に[[/div]]が2つ付いている事に注意してください。これはhtmlの構文に慣れた人の方がひっかかりやすいでしょう。ポストのタイトルを記述してくださいExplain:2さて、この構文の最後にある[[/div]]と[[/div]]の間にCode:7と同じ構文を挟む事で、そのポストに対する返信を表現できます。12:18|TITLE=記事の中にフォーラムを!]]気合[[/div]][[/div]][[/div]]Code:8恐らく何重も返信したり、1つのポストに対して複数の返信をつけると、最後の[[/div]]の数でこんがらがると思いますので、1つのポストの上下にコメントを挿入する事をおすすめします。--]Code:9この返信の表現はかなり複雑な構文に感じると思います。[[/div]]という一文の数に注意する事を忘れないでください。スレッドの最後には「新しくコメントを投稿する」という文が書かれた、下記のボタンが配置されています。新しくコメントを投稿するこれは以下の構文で表現する事が可能です。class="fake-link"]]新しくコメントを投稿する[[/span]][[/div]]Code:10以上が疑似フォーラムを実現する構文です。この構文で皆様の表現の幅が広まれば幸いです。name2017年のエイプリルフールのデザインを覚えていますか?記事のヘッダーに上記の様な星空とUFOが出現していましたよね?これらは下記の構文で皆様の記事及びサンドボックスに出現させる事ができます。url(http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/BasicNightBackScreen6.css);[[/module]]Code:3下記のwikidot構文で任意の場所に星空とUFOを出現させる事ができます。class="ufo"]][[/div]][[/div]]Code:4夜空単体(グラーデション背景)は下記になります。この要素に文章を打ちたい場合はstyle="color:#FFF;"等の記述を追記する事を推奨します(そうしないと文字が見えない為)。style="color:#FFF;"]]style="color:#FFF;"を追記する事でここに書かれた文字が白色になります。[[/div]]Code:5style="color:#FFF;"を追記する事でここに書かれた文字が白色になります。style="width:90%;height:200px;"の様な記述を加えると、夜景の大きさを調整できます。夜景に星を追加する場合は下記のコードになります。--][[/div]]Code:6UFOを追加する場合は下記の記述になります。この場合はUFOの軌道の関係上夜景のheightは150以上にしてください。--][[/div]]Code:7これであなたのページでも宇宙コスモを感じる事ができます。これはご自身がオリジナルのCSSモジュールを作ろうとした際に上記のモジュールとの併用を図る際に必要な情報です。CSSモジュールを作る予定がない方は無視して頂いてかまいません。技術ノートを開く上記CSSモジュールの内、Code:1及びcode:2を適用した場合、wikidotのページに標準で配置されている下記要素が書き換わりますのでご留意ください。div機能アカウントにカーソルを合わせた際に表示される拡大画像用要素3変更点position:absolute;z-index:4;code2適用による変更点:要素名#skrollr-body機能オプションの折り畳み部分以外の全ての要素を含むdiv変更点overflow:hidden;width:100%;position:relative;またアニメーションを行わせる為、下記のidを持つ要素に疑似要素を追加しています。UFO本体ご自身が作成したCSSモジュールが単独の動作は成功しても本モジュールと併用した際に巧く動作しなかった場合は上記の項目をご確認ください。閉じる折り畳むことが出来ます。閉じる]]折り畳むことが出来ます。加えて、coltopとcolendで別々のリンクテキストを表示することが出来ます。加えて、coltopとcolendで別々のリンクテキストを表示することが出来ます。