このページについて
このページにはwiki3で使える技術を集約させたページです。
wiki3ではソース(詳しくは下記参照)を直接書き換えることで、様々な動作を実現させることができます。
それらのノウハウを集約・共有することがこのページの目的です。
基本的なwiki3の操作方法
ここで扱う内容はあくまで応用編です。
あなたが初心者の場合は、まずwiki3公式が公開しているこちらのサイトを参照すると良いでしょう。
Wiki3（うぃきさん）のガイド
（外部リンク）
特殊な編集のための基礎知識
特殊な技術の多くはHTMLのソースを直接書き換えて行われます。
ソースを書き換えるためには、下図のボタンを押してください。
（このボタンはPCでの編集画面でのみ表示され、スマートフォンでは基本的に使うことができません）
編集画面にHTMLのコードが出てきたら、その部分に実装したい動きをするコードを入れれば完成です。
それらのコードについては、下の「技術内容一覧」からいろいろ探してみると良いでしょう。
技術内容一覧
・開閉エリアに関するTips
|
wiki3の基本機能「開閉エリア」を応用して、「タブのような機能」を実装できます。 「タブのような機能」を簡単に実装できるスクリプトが作成されました。(作成者: 小倉スタジオ) |
・画像を円形に切り取る
|
四角い画像を右図のように丸く切り取ります。 |
・バルーンテキストの表示
|
特定の文字列(画像)にカーソルを合わせると、バルーンで補助テキストを表示することができます。カーソルを乗せる対象の文字列のクラスをclass="balloon_ex"、バルーン表示したいテキストのクラスをclass="balloon_text_ex"で指定しています。下に示すコードを参考にしてください。注意点:バルーン幅は200pxで固定されていますが、これは文字幅をフレキシブルにするとバルーン幅がカーソルオーバー対象の文字幅以下に自動修正されてしまうためです。例えば、1文字に適用するとバルーン幅も1文字になってしまいます。現状これを回避する手段は無いので、脚注を長めにして違和感を無くすなどで対処してください。 普通の文字列に適用する場合…… 応用:脚注として適用する場合(アンカー名:anc_1、適宜変更してください)…… <p>ここが脚注したい文字列です<sup><span class="balloon_ex"><a href="#anc_1">脚注番号です</a><span class="balloon_text_ex">ここが脚注の内容です</span></span></sup></p> <p><a name="anc_1">脚注番号です</a>:上の*1をクリックするとこの行に飛びます</p> 記述結果: ここがカーソルを合わせる対象となる文字列ですバルーンの内容はここに入ります ここが脚注したい文字列です脚注番号ですここが脚注の内容です 脚注番号です:上の脚注番号をクリックするとこの行に飛びます |
・脚注エリアの作成
|
脚注エリアを区切ることができます。 コード例: <p class="uk-text-right">*1:こんな感じです</p> </div> 記述結果: *1:こんな感じです |
・モーダルウィンドウ(ポップアップ)の作成
|
クリック時にモーダルウィンドウ(ポップアップ)表示をすることが出来ます。使用するにはクラスやアンカーの仕様をある程度理解していることが前提になるため、よく分からない方は以下のコード例からコピー&ペーストして記述を書き換える方法をおすすめします。 コード例: <p><a href="#modal1"><img class="modal_window_open_ex" src="https://img.wiki3.jp/ray_co99/サンコウチョウ表紙.png" /> </a></p> <div class="modal_window_ex" id="modal1"> <p>てすとてきすと</p> <p><a class="modal_window_close_ex" href="#close">close</a></p> 記述結果:
|
・トップに戻るボタン
|
画像を画面右下に常駐させることができます。このままでは画像を表示しているだけなので、ページ最上部に置いたアンカーにリンクさせればクリックでトップに移動させることができます。 コード例: <p><a id="top" name="top">ここに飛びます(この文章はソースコード上で削除しても大丈夫です)</a></p> <p><a href="#top"><img class="return_to_top_ex" src="https://img.wiki3.jp/jgp-sandbox/return_to_top.png" style="width: 150px; height: 45px;" /></a></p> 記述結果: ここに飛びます(この文章はソースコード上で削除しても大丈夫です)
|
・被リンク時ハイライト表示
|
リンクで飛んできたときにハイライト表示ができます。他のリンクをクリックすると解除されます。 コード例: <p><a href="#highlight_1">ここをクリック</a></p> <p><span class="link_target_ex" data-link-target-after-ex="◄文字の後に入ります" data-link-target-before-ex="文字の最初に入ります►" id="highlight_1">リンク先です</span></p> 記述結果: リンク先です |
・ホバー・クリック時の画像切り替え機能
|
画像に「通常時」「マウスホバー時」「クリック時」の3パターンを設定できます。イラストの差分を組み合わせることを想定しています。 コード例: <p><span class="img_switch_ex"> 記述結果:
|
・マウスホバー時の透過
|
マウスを乗せたときに透明度をあげることができます。他の画像やリンクなどと組み合わせることを前提にしています。 コード例: <p><a href="https://wiki3.jp/jgp-sandbox/page/75"><img class="clear_ex" src="https://img.wiki3.jp/ray_co99/Sign_Up1.png" style="width: 100px; height: 33px;" /></a></p> 記述結果:
|
・変化のアニメーション化
|
サイズや色、透明度などが変化するクラスと併記することでその変化をアニメーションにすることができます(時間は0.5s固定)。コード例では「clear_ex」の効果をアニメーション化させており、他のクラス名の後に半角スペースを空けてslow_motion_exを入力することでアニメーションになります。 コード例: <p><a href="https://wiki3.jp/jgp-sandbox/page/75"><img class="clear_ex slow_motion_ex" src="https://img.wiki3.jp/ray_co99/Sign_Up1.png" style="width: 100px; height: 33px;" /></a></p> 記述結果:
|
・スマホで表示させたときに画像が潰れて表示されてしまう現象を回避する方法
|
横幅が大きい画像をwikiに載せると、スマホで表示させたときに潰れて表示されてしまうことがあります。 そんな時はソースを、 とすると、スマホで潰れて表示されることがなくなります。 |
・インデント(自動字下げ)をつける方法
|
段落の二行目以降を一文字字下げした状態にできます。 コード例: <div class="indent"> <p>一行目に項目名<br /> <div class="indent"> <div class="indent"> 記述結果: 段落一行目 一行目に項目名 二重インデント一行目
二行目 三行目
四行目 |
・画像に囲みとキャプションをつける
|
"の"のマーク 右のように画像の説明をつけることができます。 <p><img class="image" src="ここに画像のURL"></p> <p>ここに画像の説明</p> </div> 右寄せしたい場合には"imgRight"を、左寄せしたい場合には"imgLeft"を指定してください。 imgのクラス、"image"は背景を白色にするためのクラスです。 |
コメント
最新を表示する
NG表示方式
NGID一覧