ページテンプレートを使用すると、記事の作成がこれまで以上に簡単になります。
ページエディターは、あらかじめ用意されたWorkvivoテンプレート、組織独自のカスタムテンプレートから選択するか、ページをゼロから作成することもできます。
新規ページビルダー機能を通じて、お客様によく見られる一般的なユースケースに対応した、多数のデフォルトテンプレートをご用意しました。これらのテンプレートは、新規ページまたはHTMLページを作成する際に活用できます。
カスタムテンプレートを作成し続けることで、プラットフォーム全体で公開されるページの一貫性を高めることもできます。デフォルトのテンプレートには以下が含まれます。
| ページタイプ | テンプレート | 使用例 |
|---|---|---|
| 新規ページ | ニューリリース | 製品のアップデート、新機能、サービスのリリースに関する社内発表。 |
| 当社について | 来訪者に会社のアイデンティティ、ミッション、価値観を明確に理解してもらう。 | |
| 人事ポリシー | 最新の人事ガイドライン、福利厚生情報、職場の方針にアクセスできる共通のアクセス先。 | |
| イントラネットリンク | 従業員が日常的に使用する主要な社内ツール、リソース、プラットフォームへのクイックアクセスハブとして機能します | |
| 所在地 | 組織の各地域におけるオフィス拠点を、住所、連絡先情報、施設の特徴などの詳細情報とともに紹介します。 | |
| 会議の議題 | 会議の詳細や議題、アクションアイテムを共有するための、整理されたページとして役立ちます。 | |
| HTMLページ | ホーム画面 | 従業員の主なアクセスポイントとして機能し、重要な更新情報や発表、リソースに素早くアクセスできるようにします。 |
| ナビゲーションメニュー | 組織全体の主要なセクション、ページ、アプリに、ユーザーが構造化された直感的な方法で簡単に見つけてアクセスできます。 | |
| 新しいスターター | 新入社員が会社の文化、ツール、プロセスなどをスムーズに理解できるよう支援する、専用のオンボーディングハブ。 | |
| 当社について | 来訪者に会社のアイデンティティ、ミッション、価値観を明確に理解してもらう。 | |
| チーム紹介 | 組織を支える人々を強調し、部門間のつながりと透明性を高めます。 |
デバイス: デスクトップ
役割/権限:
- 権限:ページテンプレートの編集
- ロール: 管理者、編集者、スペース マネージャー
テンプレートの仕組み
新規ページを作成する際(SpaceページとGlobal Pagesの両方に適用)新規ページまたはHTMLページタイプを選択するオプションがあります。どちらも作業用のデフォルトテンプレートを提供します。
新規ページビルダーでテンプレートを追加する
[+ Add Page(ページを追加)] > [New Page(新規ページ)] をクリックすると、空白のページビルダーが表示されます。一から作成することも、 [Start with a Template(テンプレートから開始)] をクリックしてテンプレートを使用することもできます。ポップアップ画面から、Workvivoが提供するデフォルトテンプレートの1つから作成するか、組織独自のカスタムテンプレートを使用するかを選択できます。
ヒント:選択する前に、プレビューアイコンをクリックしてそれぞれの見た目を確認してください。
適切なテンプレートを選択すると、ページエディターが開き、選択したテンプレートがページ本文にあらかじめ入力された状態で表示されます。今回は「About Us」テンプレートを選びました。ここから、あらかじめ入力されているコンテンツを編集したり、コンポーネントを追加したり、テンプレートをニーズに合わせてカスタマイズできます。
HTMLページビルダーを使用してテンプレートを追加する
[+ Add Page(ページを追加)] > [New HTML Page(新規HTMLページ)] をクリックすると、空白のページビルダーが表示されます。ポップアップ画面から、空白のキャンバスから始めるか、Workvivoが提供するデフォルトテンプレートの1つから作成するか、組織独自のカスタムテンプレートを使用するかを選択できます。
ヒント:選択する前に、プレビューアイコンをクリックしてそれぞれの見た目を確認してください。
適切なテンプレートを選択すると、ページエディターが開き、選択したテンプレートがページ本文にあらかじめ入力されている。今回は「ホームスクリーン」テンプレートを使った。
カスタムテンプレートの管理
テンプレートマネージャー内で、カスタムテンプレートの表示、管理、作成を行うことができます。ドロップダウンリストから [Options(オプション)] > [Edit Page(ページを編集)] > [Options(オプション)] > [Manage Templates(テンプレートを管理)] をクリックしてアクセスできます。
ここでは、当社向けに独自に作成したテンプレートを使用したテンプレートマネージャーのサンプルをご覧いただけます。ここから、現在のテンプレートを「編集」、「複製」、「削除」できます。新規ページビルダーと従来のHTMLの両方の環境で保存されたテンプレートをプレビューしたり、切り替えることもできます。
ページエディターでのカスタムテンプレートの作成
既存のページをテンプレート化して今後再利用したいとお考えですか?その場合は、 [Options(オプション)] > [Save as Template(テンプレートとして保存)] をクリックします。今後は、テンプレートマネージャーで利用できるようになります。
ページアンカー
新しいビルダー機能を使用してページを作成する場合、すべての見出しにアンカーが自動的に設定されます。閲覧者は、ページコンテンツの右側にあるアイコンからこれらのコンテンツにアクセスできます。
ページアンカーの作成(HTMLエディタのみ)
ページの本文でソースコードを編集して、記事やページにアンカーURLを入力できます。
ページ上部にあるセクションをリンクすると、記事内のそのセクションに直接移動できます。
ステップ1:ハイパーリンクを含む箇条書きリストを作成し、このリンクに一意のタグ名を付けます。例えば、会社の更新には「#updates」などのタグを使用できます。
<ul>
<li><a href="#welcome">こんにちは</a></li>
<li><a href="#spot">注目のチーム<br></a></li>
<li><a href="#espot">注目の従業員<br></a></li>
<li><a href="#updates">会社の最新情報</a></li>
<li><a href="#news">ニュース</a></li>
</ul>
ステップ2:次に、ページや記事に作成したセクションでその一意のタグ名を参照します。
<p id="updates"><strong>最新情報</strong></p>
以下は、アンカー URL の動作を理解するために使うサンプルコードです。
<p>workvivo へのリンク</p>
<div>
<ul>
<li><a href="#welcome">こんにちは</a></li>
<li><a href="#spot">注目のチーム<br></a></li>
<li><a href="#espot">注目の従業員<br></a></li>
<li><a href="#updates">会社の最新情報</a></li>
<li><a href="#news">ニュース</a></li>
</ul>
</div>
<p> </p>
<p id="welcome" style="padding-top:100px; margin-top:-50px;"><strong>こんにちは</strong></p>
<p>テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト</p>
<p>テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト</p>
<p>テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト</p>
<p id="spot" style="padding-top:100px; margin-top:-50px;"><strong>注目のチーム</strong></p>
<p>テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト</p>
<p>テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト</p>
<p>テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト</p>
<p id="espot" style="padding-top:100px; margin-top:-50px;"><strong>注目の従業員</strong></p>
<p>テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト</p>
<p>テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト</p>
<p>テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト</p>
<p id="updates" style="padding-top:100px; margin-top:-50px;"><strong>最新情報</strong></p>
<p>テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト</p>
<p>テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト</p>
<p>テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト</p>
<p id="news" style="padding-top:100px; margin-top:-50px;"><strong>ニュース</strong></p>
<p>テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト</p>
<p>テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト</p>
<p>テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト テスト</p>
