Freigeben über

SharePoint テーマでスタイルを際立たせる

  • Artikel

原文の記事の投稿日: 2012 年 10 月 30 日 (火曜日)

Lionel Robinson は、 SharePoint エンジニアリング チームのプログラム マネージャーです。ユーザー エクスペリエンスを担当しています。

SharePoint 2013 のテーマを使用すると、サイトの外観を大幅に変更して独自のサイトを作成するのが簡単になります。しかし、SharePoint サイトの新しいデザインはよくできているため、わざわざ変更する必要はないように思われます。以下は、筆者の個人的な例です。

双子が生まれたためにチャイルド シートを 2 つ設置したところ、運転席に座れなくなってしまいました。助手席でも、ダッシュボードに膝が当たるため、斜めに座らなければなりません。そこで、もっと大きな車に買い換えることにしました。子供の頃からミニバンに乗っていた妻と私は、望みどおりのメーカー、モデル、色の車を見つけて大喜びで購入しました。家族全員がゆったり乗れて、収納スペースも豊富な、実にすばらしい車でした。

しかし、おそらく気のせいだと思いますが、その日以来、同じ車 (メタリック ライト ブルーのホンダ オデッセイ) ばかり目に付くようになりました。駐車場で車の鍵が開かないと思ったら自分の車ではなかった、ということも一度ばかりではありません。

車を独自のものにするにはどのような選択肢があるでしょうか。できるだけ安く済ませるなら、車の後部やリアガラスにステッカーを貼るという方法があります。金に糸目をつけないなら、業者に徹底的なカスタマイズを依頼することができます (あるいは、思い切って自分でカスタマイズするという手もあります)。

これは、現行の SharePoint サイトで一部のお客様を悩ませていたのと同じ問題です。限られた数のテンプレートを皆が使用する限り、他のサイトと同じような外観になるのは避けられません。それを受け入れて小さな差別化に甘んじるか (車にステッカーを貼るなど)、時間と手間をかけて CSS と HTML でサイトをカスタマイズするしかありません。

新しい SharePoint テーマ エクスペリエンスは、こうした問題に対処します。このエクスペリエンスを使用すると、色、サイト レイアウト、フォント、および背景画像の 4 つの基本要素を操作することによってサイトを数分でカスタマイズできます。これらを変更することで真に独自の外観を実現できます。

簡単なチュートリアル

  1. [サイトでの作業の開始] で、[使用するスタイル] タイルをクリックします (タイルが表示されていない場合は、設定メニューの [外観の変更] をクリックするか、[サイトの設定] の [外観] で [外観の変更] を見つけます)。
  2. 最初のページには、サイトの外観の選択の幅を示すために、開始点として使用できるデザインがいくつか表示されます。いずれかを選択して作業を開始します。
     
  3. ここからが本番です。先に触れた 4 つの要素 (背景、レイアウト、色、およびフォント) を自由に変更して、その場で変更をプレビューできます。使用する背景画像を左上隅の四角形にドラッグし、目的に合うカラー パレット、サイト レイアウト、およびフォント パターンを選択します。
  4. オプションの選択が完了したら、右上隅の [プレビュー] をクリックして、実際のサイトでプレビューします。
  5. ここで魔法が起こります。サイトの CSS (外観と書式設定を定義するファイル) がコピーされて、新しい色と画像に変更されます。変更を確認したら、それを保存することも、やり直すこともできます。

特定の色やフォントを使う 

おすすめのカラー パレットとフォントがあらかじめ含まれていますが、いつでも独自のものを追加できます。そのために必要なのはテキスト エディターだけです。ここからは、やや専門的な作業になります (SharePoint 2010 のテーマに精通しているとわかりやすくなります)。最大の違いは、THMX 形式のファイルを使用しないことです。代わりに、一連の新しい単純な XML 形式を使用してテーマのオプションを記述します (カラー パレットを記述する SPColor ファイルとフォント パターンを記述する SPFont ファイル)。独自のカラー パレットとフォント パターンを作成するには、チーム サイトの既定のカラー パレットとフォント パターンから開始するのが最も簡単です。サイト コレクションのルート サイトに移動して、設定メニューの [サイトの設定] をクリックし、[テーマ ギャラリー] をクリックします。"15" というフォルダーにカラー パレットとフォント パターンがあります。

カラー パレット

各 SPColor ファイルには、使用可能な各カラー スロットの色の値 (16 進値) を定義する単純な XML が含まれています。変更するカラー スロットがわかっている場合は、新しい値を書き込んで、ファイルのコピーをテーマ ギャラリーの同じフォルダーに保存するだけです (バージョン管理や発行が有効になっている場合は、ファイルをチェックインして発行する必要があります)。これで、テーマ エクスペリエンスのカラー ピッカーで新しいパレットを使用できるようになります (前述の手順 3.)。

以下は、SPColor ファイルのスニペットです。このリリースでは、色と共に不透明度の値を指定することもできます。そのためには、8 桁の 16 進値を使用します。最初の 2 桁が不透明度を表し、残りの 6 桁は、従来のとおり、赤、緑、および青の値を表します。

<?xml version="1.0" encoding="utf-8"?>

<s:colorPalette isInverted="false" previewSlot1="BackgroundOverlay" previewSlot2="BodyText" previewSlot3="AccentText" xmlns:s="https://schemas.microsoft.com/sharepoint/">

    <s:color name="BodyText" value="444444" />

    <s:color name="SubtleBodyText" value="777777" />

    <s:color name="StrongBodyText" value="262626" />

    <s:color name="DisabledText" value="B1B1B1" />

    <s:color name="SiteTitle" value="262626" />

    <s:color name="WebPartHeading" value="444444" />

    <s:color name="ErrorText" value="BF0000" />

    <s:color name="AccentText" value="0072C6" />

    <s:color name="SearchURL" value="338200" />

    <s:color name="Hyperlink" value="0072C6" />

    <s:color name="BackgroundOverlay" value="D8FFFFFF" />

    ...

</s:colorPalette>

フォント パターン 

フォントは、サイトの個性にとって重要な要素です。SharePoint のテーマの最もすばらしい点の 1 つが Web フォントのサポートです。この機能が導入される前は、8 ～ 10 種類の同じ古い Web セーフ フォント (Arial、Times New Roman、Georgia など、ほとんどのデバイスに既定でインストールされていることがわかっているフォント) しか選択できませんでした。Web フォントを使用すると、インターネットで入手できる多彩なフォントを自由に選択できます。必要なファイルは、ページの残りの部分と共に Web ブラウザーによってダウンロードされます。

SPFont ファイルは、カラー パレットの SPColor ファイルと同様に、使用可能な各フォント スロットに対して使用されるフォントを定義します。カスタム フォント パターンを作成するには、既に使用できるフォント パターンを必要に応じて調整するのが最も簡単です。SharePoint では、多くの言語とスクリプトがサポートされているように、フォント テーマも数多くサポートされています。各フォント スロットについて、各スクリプトで使用するフォントを定義する必要があります。Web セーフ フォントの場合は、各フォント スロットの typeface 属性に名前を含めるだけです。Web フォントを指定する場合は、4 つのフォント形式 (さまざまなブラウザーをサポートするため) の Web フォント ファイルの URL と、フォント ピッカーでフォント名を表示するために使用される大小のサムネイル画像を指定する必要があります (上述の手順 3. を参照)。

<?xml version="1.0" encoding="utf-8"?>

<s:fontScheme name="Impact" previewSlot1="title" previewSlot2="body" xmlns:s="https://schemas.microsoft.com/sharepoint/">

    <s:fontSlots>

        <s:fontSlot name="title">

            <s:latin typeface="Impact"

                eotsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.eot"

                woffsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.woff"

                ttfsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.ttf"

                svgsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.svg"

                largeimgsrc="https://blogs.msdn.com/_layouts/15/fonts/ImpactLarge.png"

                smallimgsrc="https://blogs.msdn.com/_layouts/15/fonts/ImpactSmall.png" />

            ...

            <s:font script="Arab" typeface="Segoe UI Light" />

            <s:font script="Deva" typeface="Nirmala UI" />

            <s:font script="Grek" typeface="Segoe UI Light" />

            ...

        </s:fontSlot>

        <s:fontSlot name="navigation">

            <s:latin typeface="Segoe UI" />

  ...

            <s:font script="Arab" typeface="Segoe UI" />

            <s:font script="Deva" typeface="Nirmala UI" />

            <s:font script="Grek" typeface="Segoe UI" />

            ...

        </s:fontSlot>

        ...

    </s:fontSlots>

</s:fontScheme>

構成された外観

"構成された外観" とは、テーマ エクスペリエンスの最初に表示される開始点です。独自のカラー パレットとフォント パターンを使用する、新しい構成された外観を追加することができます。これにより、一連のデザインを、いつでも適用できるように保存しておくことができます。構成された外観のリストは、[サイトの設定] の [Web デザイナー ギャラリー] で確認できます。ここで、既存のものを管理したり、新しいものを追加したりできます。新しいものを追加するには、新しいリスト アイテムを追加して、名前およびタイトルと、マスター ページ、SPColor ファイル、背景画像 (省略可能)、および SPFont ファイル (省略可能) の URL を指定するだけです。リスト アイテムを追加すると、新しい構成された外観のプレビューが [外観の変更] ページに開始点として追加されます。

以上で説明は終わりです。どのサイトにも似ていない、個性あふれる魅力的なサイトを作ってみてください。私のミニバンもこんな風にカスタマイズできればよいのですが…。

これはローカライズされたブログ投稿です。原文の記事は、「Show Off Your Style with SharePoint Theming」をご覧ください。