既存技術

ページ名:既存技術

このページについて


このページにはwiki3で使える技術を集約させたページです。
wiki3ではソース(詳しくは下記参照)を直接書き換えることで、様々な動作を実現させることができます。
それらのノウハウを集約・共有することがこのページの目的です。

 

基本的なwiki3の操作方法


ここで扱う内容はあくまで応用編です。
あなたが初心者の場合は、まずwiki3公式が公開しているこちらのサイトを参照すると良いでしょう。

Wiki3(うぃきさん)のガイド
(外部リンク)

特殊な編集のための基礎知識


特殊な技術の多くはHTMLのソースを直接書き換えて行われます。
ソースを書き換えるためには、下図のボタンを押してください。

(このボタンはPCでの編集画面でのみ表示され、スマートフォンでは基本的に使うことができません)

 

編集画面にHTMLのコードが出てきたら、その部分に実装したい動きをするコードを入れれば完成です。
それらのコードについては、下の「技術内容一覧」からいろいろ探してみると良いでしょう。

 

技術内容一覧


・開閉エリアに関するTips

wiki3の基本機能「開閉エリア」を応用して、「タブのような機能」を実装できます。
複数の情報をコンパクトにまとめるのにおすすめです。
詳しい実装方法についてはリンク先を参照してください。


「タブのような機能」を簡単に実装できるスクリプトが作成されました。(作成者: 小倉スタジオ)
以下のリンクよりダウンロードできます。
[配布サイト(外部リンク)]

 

・画像を円形に切り取る

四角い画像を右図のように丸く切り取ります。
ソースを開いて、<img src="画像名"/ >の部分に「class="uk-border-circle"」 を加え、
<img class="uk-border-circle" src="画像名"/ >に書き換えてください。

 

 

・バルーンテキストの表示

特定の文字列(画像)にカーソルを合わせると、バルーンで補助テキストを表示することができます。カーソルを乗せる対象の文字列のクラスをclass="balloon_ex"、バルーン表示したいテキストのクラスをclass="balloon_text_ex"で指定しています。下に示すコードを参考にしてください。注意点:バルーン幅は200pxで固定されていますが、これは文字幅をフレキシブルにするとバルーン幅がカーソルオーバー対象の文字幅以下に自動修正されてしまうためです。例えば、1文字に適用するとバルーン幅も1文字になってしまいます。現状これを回避する手段は無いので、脚注を長めにして違和感を無くすなどで対処してください。

普通の文字列に適用する場合……

<p><span class="balloon_ex">ここがカーソルを合わせる対象となる文字列です<span class="balloon_text_ex">バルーンの内容はここに入ります</span></span></p>

応用:脚注として適用する場合(アンカー名: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>

記述結果:

ここがカーソルを合わせる対象となる文字列ですバルーンの内容はここに入ります

ここが脚注したい文字列です脚注番号ですここが脚注の内容です

脚注番号です:上の脚注番号をクリックするとこの行に飛びます

 

・脚注エリアの作成

 

脚注エリアを区切ることができます。
脚注エリアを作りたい場所で<div class="footnote_ex"></div>内に脚注文を入力してください。

コード例:

<div class="footnote_ex">
<p class="uk-text-right">*1:こんな感じです</p>
</div>

記述結果:

*1:こんな感じです

 

・モーダルウィンドウ(ポップアップ)の作成

 

クリック時にモーダルウィンドウ(ポップアップ)表示をすることが出来ます。使用するにはクラスやアンカーの仕様をある程度理解していることが前提になるため、よく分からない方は以下のコード例からコピー&ペーストして記述を書き換える方法をおすすめします。
・modal_window_open_exクラス…画像サイズを180*180pxに制限します。主に画像拡大表示のために用いることを想定しています。
・modal_window_exクラス…モーダルウィンドウの本体です。これで囲まれた中にウィンドウ内の情報を記述します。
・modal_window_bg_exクラス…モーダルウィンドウの背景部分です。サイズは内部の記述によって自動整形されます。
・modal_window_close_exクラス…これで囲まれた記述はモーダルウィンドウの右上に重なるように配置されます。閉じるボタンに対して使うことを想定していますが、これ自体に閉じるボタンとしての効果はありません。

コード例:

<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">
<div class="modal_window_bg_ex">
<p><img src="https://img.wiki3.jp/ray_co99/サンコウチョウ表紙.png" /></p>

<p>てすとてきすと</p>

<p><a class="modal_window_close_ex" href="#close">close</a></p>
</div>
</div>

記述結果:

 

・トップに戻るボタン

 

画像を画面右下に常駐させることができます。このままでは画像を表示しているだけなので、ページ最上部に置いたアンカーにリンクさせればクリックでトップに移動させることができます。
コード例をソースコードの一番最初にコピー&ペーストして画像を差し替えればすぐに実装可能です。

コード例:

<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">
<img class="img_switch_normal_ex" src="https://img.wiki3.jp/ray_co99/norm.png" style="width: 100px; height: 33px;" />
<img class="img_switch_hover_ex" src="https://img.wiki3.jp/ray_co99/hover.png" style="width: 100px; height: 33px;" />
<img class="img_switch_click_ex" src="https://img.wiki3.jp/ray_co99/click.png" style="width: 100px; height: 33px;" />
</span></p>

記述結果:

 

・マウスホバー時の透過

マウスを乗せたときに透明度をあげることができます。他の画像やリンクなどと組み合わせることを前提にしています。

コード例:

<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に載せると、スマホで表示させたときに潰れて表示されてしまうことがあります。 そんな時はソースを、

 <img src="画像URL" style="width: 100%;" />

とすると、スマホで潰れて表示されることがなくなります。

 

・インデント(自動字下げ)をつける方法

段落の二行目以降を一文字字下げした状態にできます。
字下げを行いたい段落を、divのclassで "indent" を指定してください。
二重、三重にすることもできます。

コード例:

<div class="indent">
<p>段落一行目<br />
二行目</p>

<p>一行目に項目名<br />
二行目以降に説明文<br />
といった使い方をすることができます</p>
</div>

<div class="indent">
二重インデント一行目<br />
二行目<br />

<div class="indent">
三行目<br />
四行目
</div>
</div>

記述結果:

段落一行目
二行目

一行目に項目名
二行目以降に説明文
といった使い方をすることができます

二重インデント一行目
二行目
三行目
四行目

 

・画像に囲みとキャプションをつける

"の"のマーク
けものフレンズを代表するマークになっている

右のように画像の説明をつけることができます。

<div class="imgRight">
<p><img class="image" src="ここに画像のURL"></p>
<p>ここに画像の説明</p>
</div>

右寄せしたい場合には"imgRight"を、左寄せしたい場合には"imgLeft"を指定してください。
divの内側にあるp要素がキャプションになります。
imgとpの順番を入れ替えることによって画像の上側にキャプションをつけることもできます。

imgのクラス、"image"は背景を白色にするためのクラスです。
普通の場合は特に何も起こりませんが透過色がある画像では、このクラスを指定すると白色になります。

 

 


シェアボタン: このページをSNSに投稿するのに便利です。

コメント

返信元返信をやめる

※ 悪質なユーザーの書き込みは制限します。

最新を表示する

NG表示方式

NGID一覧