wikiDBリストページの表示カスタマイズ

ページ名:wikiDBリストページの表示カスタマイズ

wikiDBのデータリストページ(/{wiki_id}/db/{wikidb_id})の表示は2021/06/17にリストテンプレートを利用する表示になりました。
ただ、この変更により編集リンクがなくなったりと前の表示にしたいというご意見が見られましたので、リストテンプレート編集とCSSカスタマイズを使用して表示を変える方法をご紹介します。ご参考までにどうぞ。

以下、wikiDBSandboxの表示を例に説明していきます。

表示Before after

Before

 

After

 

手順

1. リストテンプレートの編集

編集およびデータページリンクの作成は置き換えタグで行います。

編集リンク @edit_link[リンク文字列]@
データページリンク @page_link[リンク文字列]@

編集リンクを作成したい場合は、@edit_link[リンク文字列]@を、データページリンクを作成したい倍は、@page_link[リンク文字列]@をテンプレート編集画面で記述してください。
リンク文字列の部分は自由に変更してください。例では編集に変更しています。
データページリンクなどをカード名などデータに紐付けたい場合は、@page_link[@col[識別ID]@]@ とすることでリンクを作成できます。

※テンプレートが見たままモードの場合の注意点

テーブル要素がuk-overflow-containerをもつdivタグで囲まれている可能性があります。
divタグは残して、classだけ削除してください。
これをソースモードなどで削除しないと、以下の手順をとっても表示が前の状態になりませんのでご注意ください。

2. カスタマイズCSSの記述

おおまかに分けて以下3種類の変更をかけていきます。

  1. テーブル自体への変更
  2. 見出しへの変更
  3. セル幅の指定

2-1. テーブル自体への変更

今の表示ですとテーブルの上下の余白の有無、セル幅の指定などがうまく通らないことがあるのでこれらに対処します。

#db_data_list table.uk-table { margin: 0px; table-layout:fixed; }

2-2. 見出しへの変更

上の変更までだと表が並んでいる状態ですので、一番上の見出し以外を消して、テーブル枠が並んで太く見えるのを解消しようと思います。

テンプレートがwikiモードの場合

#db_data_list table.uk-table:not(:first-child) { margin-top: -1px; }
#db_data_list table.uk-table:not(:first-child) tr:first-child{ visibility: collapse; }

テンプレートが見たままモードの場合

#db_data_list div.uk-margin-bottom div:not(:first-child) { margin-top: -1px; }
#db_data_list div.uk-margin-bottom div:not(:first-child) tr:first-child{ visibility: collapse; }

2-3. セル幅の指定

最後に各列に対する幅を指定する必要があります。
テーブルのセル幅は基本的に1行目に依存するので、見出し行に対して幅を指定していきます。
このとき、2-1の工程でtable-layoutをfixedに指定している都合、すべてのセルに対して幅を指定しないと表示が崩れます。
指定方法は一つ一つでもかまいませんし、一括した指定でもかまいません。
例では一つ一つに対して指定しています。項目数が10個と編集用セルをあわせて11個のセルがあるので、11の幅を指定しています。
※幅指定の際の目安として、半角文字2文字、全角文字1文字が13pxです。
※4桁数字なら30px、日本語10文字なら140pxあれば折り返されずに表示されます。(数字は余裕をもたせてあります)

#db_data_list table.uk-table tr th:nth-of-type(1) { width: 20px; }
#db_data_list table.uk-table tr th:nth-of-type(2) { width: 20px; }
#db_data_list table.uk-table tr th:nth-of-type(3) { width: 80px; }
#db_data_list table.uk-table tr th:nth-of-type(4) { width: 80px; }
#db_data_list table.uk-table tr th:nth-of-type(5) { width: 100px; }
#db_data_list table.uk-table tr th:nth-of-type(6) { width: 20px; }
#db_data_list table.uk-table tr th:nth-of-type(7) { width: 20px; }
#db_data_list table.uk-table tr th:nth-of-type(8) { width: 80px; }
#db_data_list table.uk-table tr th:nth-of-type(9) { width: 200px; }
#db_data_list table.uk-table tr th:nth-of-type(10) { width: 50px; }
#db_data_list table.uk-table tr th:nth-of-type(11) { width: 50px; }

全幅共通でいいから一括して指定したい場合は以下のような形です。

#db_data_list table.uk-table tr th { width: 80px; }

複数のDBを作成した場合の幅指定について

データを囲むdiv要素にdata-wikidb_id属性が付与されています。
これをCSSで追加指定することで、DB毎にデータ一覧の表示を変更することが出来ます。
ID指定に加えて、属性内容による指定を以下のように追加してください。

#db_data_list[data-wikidb_id=wikiDB識別ID]

 

CSSまとめ

例で記述したCSSをまとめると以下になります。例で指定しているCSSカスタマイズは以下のみです。
ここであげたCSSはあくまでも一例に過ぎません。ユーザ様各自ご自由にカスタマイズしてください。

#db_data_list table.uk-table { margin: 0px; table-layout:fixed; }
#db_data_list table.uk-table:not(:first-child) { margin-top: -1px; }
#db_data_list table.uk-table:not(:first-child) tr:first-child{ visibility: collapse; }

#db_data_list table.uk-table tr th:nth-of-type(1) { width: 20px; }
#db_data_list table.uk-table tr th:nth-of-type(2) { width: 20px; }
#db_data_list table.uk-table tr th:nth-of-type(3) { width: 80px; }
#db_data_list table.uk-table tr th:nth-of-type(4) { width: 80px; }
#db_data_list table.uk-table tr th:nth-of-type(5) { width: 100px; }
#db_data_list table.uk-table tr th:nth-of-type(6) { width: 20px; }
#db_data_list table.uk-table tr th:nth-of-type(7) { width: 20px; }
#db_data_list table.uk-table tr th:nth-of-type(8) { width: 80px; }
#db_data_list table.uk-table tr th:nth-of-type(9) { width: 200px; }
#db_data_list table.uk-table tr th:nth-of-type(10) { width: 50px; }
#db_data_list table.uk-table tr th:nth-of-type(11) { width: 50px; }

 

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


最近更新されたページ

メニュー

Wiki3をはじめよう Wiki3とは? 新規登録する 管理画面にログインする 追加でWikiを作成する Wikiの作り方(初心者ガイド)Wikiの管理画面の使い方 基本設定 デザイン設定 ライブラリ...

用途別記述例

wikiモードを使用して編集している際に、「これってどうすればいいんだろう?」の解決策の一例を紹介するページです。編集の一助になれば幸いです。テーブル関連横幅の大きいテーブルをスマホで表示する(画面か...

アフィリエイト設定

ここでは、アフィリエイト設定で設定できる各項目についての説明を行います。順次、アフィリエイト先を追加する予定です。Amazon アソシエイトIDamazonのアフィリエイトである、Amazonアソシエ...

amazonプラグインの使い方

基本表記とプラグインの機能について#amazon(商品ID)指定した商品のAmazonリンクを作成するプラグインです。wikiの設定でAmazonアソシエイトIDが設定されている場合、アフィリエイトリ...

showrssプラグインの使い方

基本表記とプラグインの機能について#showrss(RSSリンク)指定したRSSからリンクを表示するプラグインです。パラメータ一覧パラメータ説明urlRSSのURLを指定しますlinelimit=数字...

スパム対策設定

スパム対策でできることスパム対策として Wiki編集(ページ新規作成)の禁止ワード(NGワード) Wiki編集(ページ新規作成)の除外ワード(ホワイトワード) コメント投稿の禁止ワード(NGワード) ...

欲しいプラグインについて

今後Wiki3に実装してほしい このプラグインを改善してほしいなど、Wiki3のプラグインについてご意見やご要望ありましたら、このページのコメント欄にてお気軽にご連絡ください。現在実装されているプラ...

ゲーム攻略wikiの作り方

 ゲーム攻略wiki作成に向いているかどうか?自分自身がターゲットのゲームが好きであること好きでもないゲームを稼ぐためにやるのは無駄な労力で終わるから諦めましょう。理由やっていないゲームだと...

コメントNGID機能について

コメントNGID機能とは特定IDのコメントを不可視にすることができる機能です。荒らし行為の書き込みを見たくない方は、ぜひご利用ください。※この機能を使用するにはコメントのIDが表示されている必要があり...

ウィキ内検索(β版)

Wiki3のウィキ内検索(β版)についてWiki3の管理者・メンバーがログインしている場合のみ、ページ本文またはページタイトルに対して完全一致の検索ができる機能です。 単純な単一検索のみ対応...

プラグインリファレンス

このページでは、ページ作成時に使える各プラグインについて説明します。プラグインの呼び出し方編集画面のプラグインボタンをクリックすると、画面右側にプラグインメニューが開きます。メニューの中から任意のプラ...

投票結果を確認する

では、投票結果を確認してみましょう。まずは上部メニューから「ツール」→「投票一覧」へ移動します。1. 投票一覧ページ投票一覧ページではそのwikiで作成した投票を確認することができます。「投...

投票を作成する

1. 作成ページへ移動する下部画像のように、投票作成のページには上部メニューの「ツール」→「投票の作成」から移動できます。2. 各種設定を変更する作成ページへ移動したら、まず作成する投票に関...

投票機能について

投票機能とは独自の投票を作成することが可能な機能になります。アンケートのような使い方や人気投票の作成などにご利用できるかと思います。期限や投票回数、一度の投票数などいろいろ設定が変更できるのでぜひご利...

投票ページの作成

作成した投票を実際に投票画面にするにはvoteプラグインを使います。下記画像は、「投票機能とは」のページでvoteプラグインを記述している例になります。voteプラグインの利用方法基本表記とプラグイン...