このページの批評は終了しました。
高度なフォーマットとあなた
はじめまして、こんにちは。 このページをご覧になっている方は、おそらく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してください。
ページコンソール
批評ステータス
カテゴリ
SCP-JP本投稿の際にscpタグを付与するJPでのオリジナル作品の下書きが該当します。
本投稿の際にgoi-formatタグを付与するJPでのオリジナル作品の下書きが該当します。
本投稿の際にtaleタグを付与するJPでのオリジナル作品の下書きが該当します。
翻訳作品の下書きが該当します。
他のカテゴリタグのいずれにも当て嵌まらない下書きが該当します。
言語
EnglishРусский한국어中文FrançaisPolskiEspañolภาษาไทยDeutschItalianoУкраїнськаPortuguêsČesky繁體中文Việtその他日→外国語翻訳日本支部の記事を他言語版サイトに翻訳投稿する場合の下書きが該当します。
コンテンツマーカー
ジョーク本投稿の際にジョークタグを付与する下書きが該当します。
本投稿の際にアダルトタグを付与する下書きが該当します。
本投稿済みの下書きが該当します。
イベント参加予定の下書きが該当します。
フィーチャー
短編構文を除き数千字以下の短編・掌編の下書きが該当します。
短編にも長編にも満たない中編の下書きが該当します。
構文を除き数万字以上の長編の下書きが該当します。
特定の事前知識を求めない下書きが該当します。
SCPやGoIFなどのフォーマットが一定の記事種でフォーマットを崩している下書きが該当します。
シリーズ-JP所属
JPのカノンや連作に所属しているか、JPの特定記事の続編の下書きが該当します。
JPではないカノンや連作に所属しているか、JPではない特定記事の続編の下書きが該当します。
JPのGoIやLoIなどの世界観用語が登場する下書きが該当します。
JPではないGoIやLoIなどの世界観用語が登場する下書きが該当します。
ジャンル
アクションSFオカルト/都市伝説感動系ギャグ/コミカルシリアスシュールダーク人間ドラマ/恋愛ホラー/サスペンスメタフィクション歴史任意
任意A任意B任意C-
- _
注意: 批評して欲しいポイントやスポイラー、改稿内容についてはコメントではなく下書き本文に直接書き入れて下さい。初めての下書きであっても投稿報告は不要です。批評内容に対する返答以外で自身の下書きにコメントしないようお願いします。
- portal:4053112 (22 Sep 2022 18:12)
気になる部分は緑色にしています。
ライセンス
Tech Cap. of SCP-JP
翻訳お疲れ様です。第5節以外のところで気になった点です。
第5節は大きい画面が使えるようになったら、見ます。(忘れてたらすみません。)
査読いただきありがとうございます。
の部分以外は変更いたしました。ありがとうございました。
1.
ここですが、おっしゃるように二重折り畳みとしたいところではあるのですが、紹介されている構文が折り畳み式リストであるため、このような訳になっています。(個人的にはHTMLブロックの紹介の流れなので難解Wikidot構文の1番初めのHTMLブロックで作られた二重折り畳みを使ったらいい感じに収まりそうな気もしなくもないんですがね……)
2.
ここに関しては恐らく Remember the Titansのネタだということはわかるのですがどう訳したらいいかがわからないため、後日Discordにて質問しようかなと考えています。
Tech Cap. of SCP-JP
修正された場所で気になった点です。
一昨日指摘した点が直っておらず、別の部分にfancyの訳が挿入されたように見えます。お考えがあってのことでしたら無視してください。
「記事のための」が「記事のような」に置き換わっているようです。
誤訳になると思います。「You can also store your CSS in another page, and import it」はおそらくCSSについての一般的な解説ですので、第三法則とはまだ関係しません。「as you can see in the canon hub」で具体例として前述の第三法則ハブに言及しています。
訳案: ページ自体の色を変えることもでき、これは第三法則ハブなど、GoIハブで広く使われています。 また、第三法則ハブに見られるように、あなたのCSSを別のページに保存しそれをインポートすることもできます。
(前の査読で色々端折って分かりにくかったかもしれません。すみません。)
Listpageに関する部分にも目を通しましたが、目立った問題点はありませんでした。
ありがとうございます。
修正いたしました。
Tech Cap. of SCP-JP