Title: 高さの異なるセクションを組み合わせてダッシュボードをレイアウトするには

ここでは、ダッシュボードにセクションを下図ようにレイアウトする方法を紹介します。左側のセクションの高さが右側のセクションのそれの2倍あることに注目してください。

セクションを上図のようなレイアウトで表示するには、記事の中にテーブルを作成して記事セクションを埋め込み、その記事をダッシュボードに表示するという方法があります。以下、その設定方法を解説します。

ダッシュボードに表示する記事を作成する

テーブルの作成

新しい記事の作成フォームを表示し、ツールバーから [表] > [表の挿入] でテーブルの列数と行数を選択し、本文にテーブルを挿入します。

セルの設定

セルを結合する

挿入されたテーブルの左側のセル 2 個を上下に結合します。

まず左上のセル内をクリックし、そのまま下のセルまで（指を離さず）ドラッグします。すると、上下のセルが選択された状態になります。選択状態のセルを右クリックしてメニューを表示し、[セル] > [セルの結合] を選択します。

セルが結合されたことを確認します。

セルの罫線を無色化する

セルを右クリックし、表示されたメニューの [セル] > [セルの詳細設定] を選択します。

表示されたダイアログ上の、[背景色] と [境界線色] をクリックし、表示された色パレットの [X] を選択します。この [X] は「色を付けない（透明にする）」を意味します。

背景色と境界線色を選択したら、[OK] をクリックしてダイアログを閉じます。

残りのセルに対しても同じ設定を行います。下図のように、透明になったセルの境界線が破線で表示されます。

しかし、まだ外枠に色が付いています。これは、セルではなくテーブルの罫線です。次に、このテーブルの罫線を無色化します。

テーブルの境界線を無色化する

テーブルをクリックして選択状態にし、ツールバーの [表] > [表の詳細設定] を選択します。

表の詳細設定ダイアログが表示されます。[枠線の色] をクリックして表示された色パレットで [X] をクリックして無色化し、[Border width] を空欄（何も記入しない）にします。

設定が済んだら [OK] をクリックし、表とセルの全てが透明色（破線で表示）になったことを確認します。

記事セクションの作成

フォーム右下の [詳細表示] をクリックします。

[セクションの追加] リンクをクリックして、記事内に表示するセクション（記事セクション）を作成・登録します。

セクション設定を済ませたら [OK] をクリックして画面を閉じます。

記事の作成フォームに戻り、[セクションの編集 (N)] でセクションが登録されていることを確認します。（「N」はセクションの数）

セクションの挿入

作成・登録したセクションをテーブルのセルに挿入します。

セクションを挿入するセルをクリックしてカーソルを移動させ、[ウィジェットの挿入/編集] > [記事セクション] を選択します。

ドロップダウンリストに作成・登録したセクションが表示されるので、挿入するセクションを選択し、[OK] をクリックします。

セルに記事セクションのウィジェットが挿入されたことを確認します。

同様に、残りのセルにも記事セクションのウィジェットを挿入します。

記事を投稿する

記事を投稿し、セクションが意図通りのレイアウトで表示されることを確認します。

この記事の ID（下の画面では "Sales279" です）をメモします。

ダッシュボードに記事を埋め込む

ダッシュボードの設定

セクション入りの記事（上記の "Sales279"）をダッシュボードに丸ごと表示します。

表示するページによってセットアップの場所が異なります。

すべてのスペースのダッシュボード（フロントページ）に表示する
--> サーバーセットアップ > フロントページ > 内容

スペースのダッシュボード（ニュースページ）に表示する
--> スペースセットアップ > ダッシュボードタブ > 内容

ユーザーのプロフィールページのダッシュボードに表示する
--> パーソナルセットアップ > パーソナル情報 > プロフィールページ > プロフィールのセクション

注意: プロフィールページの [ダッシュボード] タブは既定で非表示になっていますので、パーソナルセットアップ > パーソナル情報 > プロフィールページ > Proteus ユーザープロフィールタブで [ダッシュボード] タブが表示されるように設定変更する必要があります。

対応するセットアップの［内容タブ］を表示し、次のようにセクションを設定します。

タイプ = 特定の記事のときに表示
記事ID = セクションを作成した記事の記事ID（ここでは "Sales279"）
幅 = 大
大きさ = すべて
セクションタイトルの表示 = いかなる場合も非表示
[表示] チェックボックス = すべてオフ

設定が終わったら［適用］をクリックして設定を確定させます。

ダッシュボードの表示確認

ダッシュボードを表示し、セクションが指定した配置で表示されることを確認します。

FAQ2161: Proteus スキンで、セクションを3列や4列で表示するには

Forum1196

Attachments:

section_layout1.png
table01.png
table02.png
table03.png
table06.png
cellconfig1.png
cellconfig2.png
cellconfig3.png
tableconfig1.png
tableconfig2.png
tableconfig3.png
entrysection1.png
entrysection2.png
entrysection4.png
entrysection5.png
entrysection6.png
entrysection7.png
entrysection8.png
sales279.jpg
section_settings.png
space_dashboard.png

参照している (1)

FAQ2161: Proteus スキンで、セクションを3列や4列で表示するには

Article: FAQ2602 (permalink)
Categories: :FAQ:ダッシュボード, :FAQ:ニュースページ, :FAQ:セクション設定, :DocJp:FAQ
Date: 2016/02/02; 14時05分49秒 JST

Author Name: TeamPage サポート
Author ID: jpbo