HTML エディタ スタイルを作成する

重要:  この記事は機械翻訳されています。機械翻訳についての「免責事項」をお読みください。この記事の英語版を参照するには、ここをクリックしてください。

Microsoft Office SharePoint Server 2007 発行サイトでは、コンテンツ所有者が Web ブラウザしか使わずに、サイトの Web ページを作成し更新することができます。たとえば、部門マネージャはブラウザを使用して、通知などの情報を Web サイトに直接投稿することができます (次の図を参照)。

ブラウザでのページの発行

Web サイトの開発者またはデザイナがスタイル (ページ レイアウトを基に作成されたページの一部に適用可能) を作成しておくと、コンテンツ作成者が自作のページの見栄えを良くするのに役立ちます。また、ユーザー設定のスタイルを作成しておくと、そうしたページのルック アンド フィールの標準化に役立ちます。このトピックでは、Web サイトの開発者またはデザイナが Microsoft Office SharePoint Designer 2007 を使ってユーザー設定のスタイル (ブラウザで作成/編集できる発行ページに適用可能) を作成する方法について説明します。

重要: このトピックは、Office SharePoint Server 2007 が稼働しているサーバー上にあるサイトのみに適用されます。また、サイト コレクション内の最上位レベル サイトでの発行を有効化しておく必要があります。また、ページ レイアウトを開いて編集するには、トップレベル サイトの作成権限が必要です。

このトピックの内容

発行サイトでの HTML エディターの使用方法

HTML エディターのスタイルを作成します。

発行サイトでの HTML エディタの使い方

発行ページ用のユーザー設定のスタイルを作成するにあたって、Office SharePoint Server 2007 におけるいくつかの重要な概念を理解しておく必要があります。以下は、簡単な概要です。

発行ページとページ レイアウトとの関連の仕方

ページ レイアウトは、ページの見栄え、使用可能にするページ フィールドとコンテンツ フィールドの指定、およびページ上に配置する必要のある具体的な要素 (たとえば、リストやライブラリ) の指定を制御するページ テンプレートです。たとえば、ページ レイアウトの 1 つを出張レポート用に、2 つ目をニュースレター トピック用に、3 つ目を計画更新用にセットアップすることもできます。権限ユーザーは、これらのページ レイアウトをベースに、新規の発行ページを作成することができます。権限ユーザーによって作成された各ページは、そのページに含まれる特定の種類のコンテンツに対応した一貫性のあるフォーマットに従います。ユーザーはページ作成時に毎回ページ レイアウトを選択できるオプションが用意されたブラウザで、発行ページを作成することができます。

発行ページ レイアウトの一覧が表示されたダイアログ ボックス

Office SharePoint Designer 2007では、ページ レイアウトを編集できます。詳細については、「発行ページ レイアウトをカスタマイズする」を参照してください。

ページ レイアウト書式設定の取得元

ページ レイアウトの書式設定は、マスタ ページから取得されます。この取得元マスタ ページは、共有コンテンツ (たとえば、ヘッダー、フッター、左ナビゲーション) の領域を定義し、スタイル シートを使ってテキスト、ハイパーリンク、セル、テーブル、およびその他多くの要素の書式設定を制御するページ テンプレートです。ページ レイアウトの書式設定は、そのページ レイアウトに直接適用されるスタイル シートから取得することもできます。たとえば、ページ レイアウトの書式設定ルールはマスタ ページから取得することもできます。ただし、そのページ レイアウトから作成されるページの書式設定をより正確に定義するためには、追加のスタイル シートをページ レイアウトに常に適用することをお勧めします。たとえば、ページ レイアウトのベースとして用いられたマスタ ページで、通常の全テキストに対して Verdana フォントを指定することも可能ですが、適用されている全ページの通常テキスト フォントに Arial を使用するように指定するスタイル シートをページ レイアウトに適用することも可能です。発行ページ上のすべての書式設定およびマークアップ (ただし、コンテンツ フィールドを除く) はすべて、作成時にベースとして用いられたページ レイアウトから直接に生成されます。

発行ページのコンテンツ編集方法

発行ページを作成するときは、ブラウザで作成します。作成し終えたページを編集するには、そのページを参照し、[サイトの操作] メニューをクリックして、[ページの編集] をクリックします。

[サイトの操作] メニューでの [ページの編集] コマンドの表示

ページが開いた後は、[コンテンツの編集] をクリックし、HTML エディタを開いて、リッチ テキスト フィールドをどれでも編集することができます。

開いたページ上の [コンテンツの編集] コマンド

注: リッチ テキストを含まないフィールドの場合、エディタはそのフィールド固有のものになります (たとえば、日付フィールドの場合、エディタは日付フィールド固有のものです)。

HTML エディタが開くと、コンテンツを追加または編集することも、フォントと書式設定を手動で変更することも、あるいは他の多数のオプションの中から選択することも可能になります。テキストにスタイルを適用するには、テキストを選択し、[スタイル] をクリックして、適用したいスタイルをクリックします。

HTML エディタでのスタイル一覧の表示

HTML エディタのスタイル取得場所

HTML エディタで使用可能なスタイルは、サイトまたはサブサイトの _layouts ディレクトリに格納されている、次の 2 種類のスタイル シートから生成されます。

  • HtmlEditorCustomStyles.css は、ユーザー設定のスタイル用の書式設定を定義するため、次の場所に置かれています。

    http://your_site/_layouts/1033/styles/HtmlEditorCustomStyles.css

  • HtmlEditorTableFormats.css は、テーブル用の書式設定を定義するため、次の場所に置かれています。

    http://your_site/_layouts/1033/styles/HtmlEditorTableFormats.css

これらのスタイル シートは、サイト内の保護付き _layouts ディレクトリに格納されているため、Office SharePoint Designer 2007 で修正することはできません。ただし、これらのスタイル シートを指定変更することは可能です。この指定変更を行うには、発行ページの作成に使用するページ レイアウトに、追加のスタイルを適用します。

ページの先頭へ

HTML エディタ用のスタイルを作成する

HTML エディタ用の新規スタイルを作成するには、Office SharePoint Designer 2007 でサイトを開き、次の手順を実行します。

ページ レイアウトを見つけて開く

ページ レイアウトの作成が済み、今度はブラウザの HTML エディタで使用可能な新規スタイルを作成するには、まずページ レイアウトを検索して開きます。ページ レイアウト自体をダブルクリックするか、そのページ レイアウトから作成された発行ページをどれかダブルクリックして、ページ レイアウトを開くことができます。

  1. Office SharePoint Designer 2007 で、変更するページ レイアウトが含まれているサイトを開きます。

  2. [フォルダ一覧] で、新規スタイルの適用先となるページ レイアウトを使用するページを検索して、そのページをダブルクリックします。

    注: サイト内の [ページ] ドキュメント ライブラリに、発行ページが格納されています。発行ページの適用先ページ レイアウトを探して開くには、発行ページをダブルクリックするのが簡単な方法です。新規スタイルを作成する対象のページ レイアウトの名前が既にわかっている場合は、ページではなくページ レイアウトをダブルクリックします。

    ページまたは基になるページ レイアウトに関するプロンプトを含むフォルダー リスト

    発行ページはブラウザでしか編集できないため、ブラウザでページを編集するか、それとも基本ページ レイアウトを編集するかをたずねるメッセージが現れます。

  3. [ページ レイアウトの編集] をクリックします。

    ページ レイアウトが開きます。

既存のスタイルを指定変更する

既存のスタイルを指定変更したい場合は、既存のスタイルを HtmlEditorCustomStyles.css または HtmlEditorTableFormats.css からコピーし、そのページで使用される別のスタイル シートに貼り付けてから、スタイルを変更します。スタイル シートは _layouts ディレクトリ内のものが最初に適用されるため、HtmlEditorCustomStyles.css または HtmlEditorTableFormats.css から取得されたスタイルよりも、ページ レイアウトで使用される他のスタイル シート上のスタイルの方が優先されます。

  1. Web ブラウザで、ブラウザの [アドレス] バーに次のいずれかの場所を入力して、スタイル (1 つまたは複数) のコピー元となるスタイル シートの場所に移動します。

    http://your_site/_layouts/1033/styles/HtmlEditorCustomStyles.css

    または

    http://your_site/_layouts/1033/styles/HtmlEditorTableFormats.css

  2. 実行するファイル操作をたずねるメッセージが表示されたら、[開く] をクリックします。

    Office SharePoint Designer 2007 でスタイル シートが開きます。

  3. 変更するスタイルを選択し、右クリックして、ショートカット メニューの [コピー] をクリックします。

    スタイル シートのショートカット メニューを開き、[コピー] コマンドを選択したようす

  4. Office SharePoint Designer 2007 が表示されたままの状態で、スタイルを指定変更する対象のページ レイアウトを開き (あるいはそのページ レイアウトに戻り)、[スタイルの管理] 作業ウィンドウの [オプション] をクリックします。

    注: [スタイルの管理] 作業ウィンドウが表示されていない場合は、[作業ウィンドウ] メニューの [スタイルの管理] をクリックします。

  5. [現在のページで使用されているスタイルを表示] が選択されていることを確認します。

    [オプション] メニューで、[現在のページで使用されているスタイルを表示] コマンドが選択されているようす

  6. [スタイルの管理] 作業ウィンドウで、このページで使用されているいずれかのスタイル シート (たとえば、pageLayout.css) をダブルクリックして、編集用に開きます。

    現在のページに適用されている各スタイル シートが、[スタイルの管理] 作業ウィンドウの [CSS スタイル] の一覧にセクションの見出しとして表示されます。どのスタイル シートも見出しをダブルクリックすれば、そのスタイル シートを編集することができます。

  7. スタイル シートの下部までスクロールし、スタイルの貼り付け先を右クリックして、ショートカット メニューの [貼り付け] をクリックします。

  8. 必要に応じてスタイルを編集します。

    注: [CSS のプロパティ] 作業ウィンドウで提供されているスタイル編集方法は視覚的です。この作業ウィンドウが表示されていない場合は、[作業ウィンドウ] メニューの [CSS のプロパティ] をクリックします。

  9. スタイル シートを保存するには、[ファイル] メニューの [上書き保存] をクリックします。

次回 HTML エディタを使って、ページ レイアウトを基に作成されたトピックを編集する際には、修正後のスタイルが使用可能になり、[スタイル] 一覧に表示されるようになります。

[スタイル] 一覧に表示された、修正済みスタイル

新しいスタイルを作成する

新規スタイルを作成して、HTML エディタの [スタイル] 一覧に表示されるようにすることもできます。新規にスタイルを入力するよりも、既存のスタイルをベースに作成を開始する方が容易です。そのため、この作業を既存スタイルのコピーおよび名前変更によって遂行する方法を、このセクションで説明しておきます。

  1. Web ブラウザが表示されたままの状態で、ブラウザの [アドレス] バーに次のいずれかの場所を入力して、スタイルのコピー元となるスタイル シートの場所に移動します。

    http://your_site/_layouts/1033/styles/HtmlEditorCustomStyles.css

    または

    http://your_site/_layouts/1033/styles/HtmlEditorTableFormats.css

  2. 実行するファイル操作をたずねるメッセージが表示されたら、[開く] をクリックします。Office SharePoint Designer 2007 でスタイル シートが開きます。

  3. 変更するスタイルを選択し、右クリックして、ショートカット メニューの [コピー] をクリックします。

    スタイル シートのショートカット メニューを開き、[コピー] コマンドを選択したようす

  4. Office SharePoint Designer 2007 が表示されたままの状態で、新規スタイルの追加先となるページ レイアウトを開き (またはページ レイアウトに戻り)、[スタイルの管理] 作業ウィンドウの [オプション] をクリックします。

    注: [スタイルの管理] 作業ウィンドウが表示されていない場合は、[作業ウィンドウ] をクリックし、[スタイルの管理] をクリックします。

  5. [現在のページで使用されているスタイルを表示] が選択されていることを確認します。

    [オプション] メニューで、[現在のページで使用されているスタイルを表示] コマンドが選択されているようす

  6. [スタイルの管理] 作業ウィンドウで、このページで使用されているいずれかのスタイル シート (たとえば、pageLayout.css) をダブルクリックして、編集用に開きます。

    現在のページに適用されている各スタイル シートは、[スタイルの管理] 作業ウィンドウの [Css.styles] 一覧の中にセクションの見出しとして表示されます。どのスタイル シートも見出しをダブルクリックすれば、そのスタイル シートを編集することができます。

  7. スタイル シートの下部までスクロールし、スタイルの貼り付け先を右クリックして、ショートカット メニューの [貼り付け] をクリックします。

  8. 必要に応じてスタイルを編集します。

    コピーした既存のスタイルを上書きされないようにするには、スタイルの名前を変更する必要があります。たとえば、新規スタイルに redHeadline という名前を付けたい場合は、次の CSS コードを変更します。

.ms-rteCustom-ArticleTitle, .ArticleTitle{font-weight: bold;font-family: Arial;font-size: 14pt;color: #8C0000;text-transform: capitalize;}

次の操作を実行します。

.ms-rteCustom-redHeadline, .redHeadline{font-weight: bold;font-family: Arial;font-size: 14pt;color: #8C0000;text-transform: capitalize;}

注: [CSS のプロパティ] 作業ウィンドウで提供されているスタイル編集方法は視覚的です。この作業ウィンドウが表示されていない場合は、[作業ウィンドウ] メニューの [CSS のプロパティ] をクリックします。

  1. スタイル シートを保存するには、[ファイル] メニューの [上書き保存] をクリックします。

    このページ レイアウトをベースに作成されたトピックを次回 HTML エディタで編集するときには、修正後のスタイルが使用可能になり、[スタイル] 一覧に表示されるようになります。

    [スタイル] 一覧に表示された、修正済みスタイル

ページの先頭へ

注: 機械翻訳についての免責事項: この記事の翻訳はコンピューター システムによって行われており、人間の手は加えられていません。マイクロソフトでは、英語を話さないユーザーがマイクロソフトの製品、サービス、テクノロジに関するコンテンツを理解するのに役立てるため、こうした機械翻訳を提供しています。記事は機械翻訳されているため、用語、構文、文法などに誤りがある場合があります。

スキルを磨く
トレーニングの探索
新機能を最初に入手
Office Insider に参加する

この情報は役に立ちましたか?

ご意見をいただきありがとうございます。

フィードバックをお寄せいただき、ありがとうございます。Office サポートの担当者におつなぎいたします。

×