高度なフォーマットとあなた
はじめまして、こんにちは。 このページをご覧になっている方は、おそらくwikidotのコーディングでオシャレなデザインにする方法を学びに来たのでしょう。
このエッセイは、基本的な太字、斜体、折りたたみを使うことを超えたいと思っている人を対象としています。 基本的な部分も見ていきますが、このガイドのほとんどは、記事の高度なデザインに使用することを目的としています。
もっと基本的なフォーマットを知りたい方は、こちらの記事をご覧ください。
このガイドで取り上げられているものを使ってできることの例として、私の記事であるSCP-3872やSCP-027-Jが挙げられます。
このガイドの各セクションについて質問がある場合は、私にwikidot PMを送ってください。
第一節: Wikidotの基本的な書式設定のコツ
基本的なwikidotのコード自体がちょっと複雑で、必ずしも完璧には説明されていないものもあります。私が最も多く質問を受けるのは、この2つです。
引用ブロック
タブ構文
ねえねえ、Magnus、このページにはすごくいいフォーマットがあって使いたいんだけど、どうすればいいかな?
皆さん、意外と簡単なんです。 メインサイトの各ページの右下に"Option"があると思います。 それをクリックすると小さなリストが開きます。 そして"Page Source"をクリックすると、そのページを生成したWikidotのコードが表示されます。すべてはこれに尽きるのです。
あなたがあるフォーマットをどうやって使うのかわからない場合、この方法を知っていれば目当てのものは何でもwikiで見つけれるようになるでしょう。
第二節: Wikidot以外のコード1の使用
おもしろいのはここからです。 Wikidotはあらゆる種類の要素に対応しています。 独自のマークアップ言語を持っているだけではなく、カスタムdiv要素もつかうことができます。
コード:
[[div id="myDiv" style="background-color: green; color:white;"]]
これはdiv要素です!
[[/div]]
結果:
これはdiv要素です!
div要素は標準的なウェブコンテナーで、他のものを内包します。 その内容は、テキスト、他のdiv要素、span要素、その他のウェブオブジェクトなどです。 プロパティを使って、文字通り好きなようにスタイルを設定することができます。
一般的には、CSS(カスケード・スタイル・シート)と呼ばれるもので行われます。 これらは標準的なwikidotのフォーマットを上書きするので、この記事に先ほど登場した折りたたみは、おそらく皆さんが慣れ親しんでいるものとは少し違って見えるでしょう。
カスタムdiv要素を使うと、記事の内容に合わせてボックスやさまざまな形を作ることができます。
例えば、テキストメッセージの会話のように見せたいとします。
コード:
[[div id="myTextMessageConvoHolder" style="display:inline-block; width:100%;"]]
[[div id="myTextMessageConvoDiv" style="color:white; border-radius: 25px; background: #73AD21;padding: 15px;width: 150px; height: 100px;float:left;"]]
大きいお尻が好きだぜ。俺が嘘をつくはずがないだろう?
[[/div]]
@@@@
@@@@
@@@@
[[div id="myTextMessageConvoDivReply" style="color:white; border-radius: 25px; background: blue; padding: 15px;width: 150px; height: 100px;float:right;display: inline-block"]]
私の兄弟たちも否定できないな。
[[/div]]
[[/div]]
結果:
大きいお尻が好きだぜ。俺が嘘をつくはずがないだろう?
私の兄弟たちも否定できないな。
ご覧のように、これを利用できるものはたくさんあります。また、もうひとつの非標準的なwikidot要素であるHTMLブロックがあることもお分かりいただけると思います。
HTMLの書き方を知っていれば、[[html]] [[/html]]のブロックの中に、HTMLや<script>タグの中にjavascriptなど、好きなものを入れることができます。
これにより、非常に優れたコンポーネントを導入することができます。よく聞かれるコンポーネントのひとつに、折り畳み式リスト2があります。
これを作るのはそれほど難しくありません。 重要なのは、各レベルのアスタリスクの前のスペースが、前のレベルよりも1つ多いことに気づけるかどうかです。
コード:
[[div class="foldable-list-container"]]
* 折りたたみ最高!
* 2つ目
* もっと
* さらに
* Test
[[/div]]
結果:
- 折りたたみ最高!
- 2つ目
- もっと
- さらに
- Test
- さらに
また、foldable-list-containerのdiv要素をカスタマイズすることもできますが、div内の要素を含むようにCSSを変更する必要があります。 この方法については、第三節と第四節を参照してください。
管理用ページ3に含まれているwikidot以外のコードの最後の部分はiframeです。
iframeは、他のウェブサイトの全文を現在のページに含めるために使用されます。 その例を以下に示します。
コード:
[[iframe https://home.helenbot.com/tools/randomButton.php style="border: 1px black solid;" width="100%" height="25" scrolling="no"]]
結果:
これは、多くの技術的なプロジェクトをホストしている私のウェブサイトのページから読み込んだ、SCPとTaleを表示するランダムなボタンです。これは文字通り、ウェブページを取得してこの記事の小さなdiv要素に表示しています。 このようにして、SCP-895やSCP-027-Jのような記事のような、より「高度な」多くの画像を生成できるのです。
例えば、SCP-027-Jのイメージブロックは、以下のように生成されます。
コード:
[[div class="scp-image-block" style="width:200px; float: right;"]]
[[iframe http://scp-jp-storage.wdfiles.com/local--files/file%3A4053112-39-6f45/remote.html width="200px" height="200px" frameborder="0" scrolling="no"]]
[[div class="scp-image-caption" style="width:200px;"]]
SCP-027-J?
[[/div]]
[[/div]]
結果:
第三節: div要素とスタイル設定方法
div要素の中に"style"と書かれた部分を見たことがあるかと思います。これらはハードコーディング4されたCSS設定であり、必要であればオブジェクトごとに定義することができます。また、独自のカスタムCSS設定を含めることもできます。
これは、今見ているページのCSSモジュールです。
[[module css]]
#page-content .collapsible-block {
max-width: 100%;
background-color: #afe0ff;
color: black;
border-color: #b01;
border: solid 1px #b01;
padding: 5px;
}
.collapsible-block-content p {
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-top: 5px;
}
.collapsible-block-content {
text-align: left;
}
.collapsible-block-folded, .collapsible-block-unfolded {
text-align: center;
color: black;
}
[[/module]]
これは具体的には、第一節にあるように、折りたたみ要素のCSS設定を上書きするものです。
CSSモジュールにより、ページに対してあらゆることを行うことができます。 親コンテナの色を変えることもできます。 ページ自体の色を変えることもでき、これは第三法則ハブなど、GoIハブで広く使われています。 また、第三法則ハブのCSSを別のページに保存しそれをインポートすることもできます。
注意すべきなのは、親コンテナに適用された属性は、子属性で上書きされない限り、その子にも適用されることです。 あるdiv要素のテキストを中央寄せにすると、そのdiv要素の内側のdiv要素に含まれるすべてのテキストが中央寄せになります。
この記事はCSSのチュートリアルを意図したものではありませんが、簡単な概要だけ説明します。
第四節: 利益と楽しさのページ操作
最後の項では「直したいところがあるとして、実際に何を変えればいいのか、一体どうすればいいのか?」という重要な疑問について扱います。
この記事はWeb開発のチュートリアルではないはずなのでざっくりとした書き方になりますが、要素のプロパティを変更する方法について簡単に説明します。
マウスカーソルをある要素(文字通り、ウェブページのあらゆる部分)の上に置いて右クリックすると 「検証」というオプションがあるはずです。 それを選択すると、巨大なコントロールパネルのような画面が表示されます。
第二節での青い"テキストメッセージ"の部分にカーソルを合わせて要素を検証すると次のようなプロパティが見れると思います。
element.style {
color: white;
border-radius: 25px;
background: blue;
padding: 15px;
width: 150px;
height: 100px;
float: right;
display: inline-block;
}
これらのプロパティの右側をクリックして、任意の属性を変更したり、その下または上をクリックして、属性を追加することができます。 これを理解する最良の方法は、とにかく試してみることです。 もしうまくいかなかったら、その属性か、やりたいことを書いたの後に "CSS "をつけて検索してみてください。
"background: blue;"プロパティを別の色に変更してみましょう。 これは、あなたのページの見え方が変化するだけで、他の人のページの見え方には影響しません。
第五節: Listpages
さて、これはちょっと偉大なお父さんのような気がします。Listpages はWikidotが提供するモジュールで、wikiを条件検索し、結果を表示することができます。ListPagesモジュールの最も簡単なアプリケーションは次のようなものです。
コード:
[[module ListPages created_by="RTa_technology" limit="5" separate="no"]]
%%title_linked%% - %%rating%% Created On: %%created_at%%
[[/module]]
結果:
これは私DrMagnus5が作成したページをリストアップしたもので、5つまで改行させずに表示しています。モジュールの "body"6には、表示させたいものを指定します。 ここでは、タイトル、評価、作成日を表示させています。
ListPagesモジュールが沢山あるとページの表示速度が著しく低下します。1ページにつき1つ以上ListPagesモジュールがあることは本当にお勧めしません。
ListPagesモジュールで選択可能な条件の1例を次に示します。
第六節: いいもの
あなたはWeb制作を知っていますか?自慢してもいいですか?
まとめ
少なくとも、Wikidotシンタックスより高度なアプリケーションを動作させる方法について、理解できたのではないかと思います。 もし何か質問があれば、遠慮なく私にPMしてください。