著者ページのページタイトルデザインをカスタマイズする方法

 

著者ページのページタイトル設定(各設定メニューの使い方)

基本設定

ページタイトル設定を個別に設定

「ON」を選択すると、著者ページでのページタイトル設定が可能になります。

※「OFF」を選択すると、「共通コンテンツエリア設定」→「ページタイトル設定」の設定内容が、著者ページにも適用されます。

表示環境を選択

ページタイトルをPC・スマホ、どちらの閲覧環境で表示させるか設定する機能です。

以下の4つの項目から表示環境を選択できます。

例えば、スマホ/PCで表示を選択すれば、スマホ・PCともに「ページタイトル」が表示されます。

  • スマホ/PCで表示
  • スマホ/PCで非表示
  • スマホで非表示
  • PCで非表示

表示エリアを選択

ページタイトルを表示させる場所を設定する機能です。

以下の項目の中から表示場所を選択できます。

  • ヘッダーエリア
  • メインカラムエリア
  1. 下記サンプル画像➀では:「ヘッダーエリア」
  2. サンプル画像②では:「メインカラムエリア」

を選択した事例をご紹介しています。

サンプル画像①

サンプル画像②

枠デザインを選択

ページタイトル表示エリアの枠デザインを設定する機能です。

以下の項目の中からデザインを選択できます。

  • 無し
  • 角丸
  • 角丸(強)

下記サンプル画像③では、角丸を選択した事例をご紹介しています。

サンプル画像③

表示高さを選択

ページタイトル表示エリア全体の高さを設定する機能です。

表示幅を選択

ページタイトル表示エリア全体の表示幅(横幅を設定する機能です。

コンテンツ領域を選択

コンテンツの表示領域の幅を設定する機能です。

コンテンツ領域とは、ページタイトル表示エリアのうち、ページタイトルなどが表示されている領域を指します。

下記画像(➊赤枠内)で示された領域がコンテンツ領域です。

内側余白をpxで指定

ページタイトル表示エリアの内側余白の幅を設定する機能です。

外側余白をpxで指定

ページタイトル表示エリアの外側余白の幅を設定する機能です。

境界線設定

境界線を選択

ページタイトル表示エリアの境界線(外枠)のデザインを設定する機能です。

無し・ボーダー・シャドウの中からデザインを選択できます。

  • 下記サンプル画像①は:「ボーダー」
  • サンプル画像②は:「シャドウ」

を指定した事例をご紹介しています。

ボーダー・シャドウともに、細かなデザイン設定が可能ですので、お好みに合わせ設定してください。

サンプル画像①「ボーダー」

サンプル画像②「シャドウ」

コンテンツ設定

背景画像の表示/非表示を選択

ページタイトル表示エリアに背景画像を表示するか設定する機能です。

下記サンプル画像①では、「表示」を選択し、新聞の画像を設定した事例をご紹介しています。

※背景に表示される画像は、「ユーザー」→「プロフィール」→「背景画像」で設定されている画像です。

「プロフィール」で背景画像を設定していない場合は、「共通背景画像を指定」で指定した画像が表示されます。

サンプル画像➀

共通背景画像を指定

ページタイトル表示エリアの共通背景画像を指定する機能です。

※「ユーザー」→「プロフィール」→「背景画像」で背景画像を設定していない場合、「共通背景画像を指定」で指定した画像が表示されます。

背景画像サイズを選択

背景画像のサイズを設定する機能です。

コンテンツの表示位置を選択

画像・タイトル・サブタイトルなどが収まるエリアの表示位置(上下の位置を設定する機能です。

画像・タイトル・サブタイトルなどが収まるエリアとは、下記サンプル画像➀(➊赤枠内)で示したエリアです。

  • トップ(上部寄せ)
  • センター(中央寄せ)
  • ボトム(下部寄せ)

の中から表示位置を選択できます。

「トップ」「ボトム」を選択すると、それぞれ「トップからの距離」「ボトムからの距離」をpxで指定できます。

下記サンプル画像➀では、ボトムを選択した事例をご紹介しています。

サンプル画像➀

テキスト水平位置を選択

タイトル・サブタイトルなど、テキストの水平方向の表示位置を設定する機能です。

以下の項目の中から選択できます。

  • レフト(左寄せ)
  • センター(中央寄せ)
  • ライト(右寄せ)

下記サンプル画像➀では、「ライト」を選択し、右寄せに設定した事例をご紹介しています。

サンプル画像➀

画像の表示/非表示を選択

ページタイトル表示エリア内に画像を表示するか設定する機能です。

下記サンプル画像➀では、「表示」を選択し、女性の後ろ姿の画像を設定した事例をご紹介しています。

※表示される画像は、「ユーザー」→「プロフィール」→「プロフィール画像」で設定されている画像です。

「プロフィール」で画像を設定していない場合は、「共通画像を指定」で指定した画像が表示されます。

 

サンプル画像➀

共通画像を指定

ページタイトル表示エリアの共通画像を指定する機能です。

※「ユーザー」→「プロフィール」→「プロフィール画像」で画像を設定していない場合、「共通画像を指定」で指定した画像が表示されます。

画像サイズを選択

ページタイトル表示エリア内に表示される画像のサイズを設定する機能です。

画像の横幅をpxで指定

ページタイトル表示エリア内に表示される画像の横幅を設定する機能です。

画像の表示位置を選択

ページタイトル表示エリア内に表示される画像の表示位置を設定する機能です。

  • スマホでは:上下
  • PCでは:左右

の位置を変更することができます。

下記サンプル画像➀では、PCで左を指定した事例をご紹介しています。

サンプル画像➀

タイトル文字色を指定

タイトルの文字色を設定する機能です。

下記サンプル画像➀(➊赤枠内)で、「GOLD」と表記されているのが、タイトルの表示個所です。

サンプル画像➀

タイトル文字サイズを指定

タイトルの文字の大きさを設定する機能です。

タイトル文字ウェイトを指定

タイトルの文字の太さを設定する機能です。

サブタイトル文字色を指定

サブタイトルの文字色を設定する機能です。

下記サンプル画像➀(❷赤枠内)に表示されている管理人/男性」以下のテキストが、サブタイトルの表示個所です。

サンプル画像➀

サブタイトル文字サイズを指定

サブタイトルの文字の大きさを設定する機能です。

サブタイトル文字ウェイトを指定

サブタイトルの文字の太さを設定する機能です。

著者ページ独自項目

レイアウトデザインを選択

レイアウトデザインを設定する機能です。

デザインを「通常」「SNS」の中から選択できます。

下記サンプル画像➀では、通常を選択した事例をご紹介しています。

サンプル画像➀

アーカイブタイプの表示/非表示を選択

アーカイブタイプを表示するか設定する機能です。

下記サンプル画像➀(➊赤枠内)が、アーカイブタイプの表示事例です。

背景エフェクト設定

ページタイトル表示エリアの背景を加工し・効果を加える機能です。

【オーバーレイ】

背景にオーバーレイを利用するか設定する機能です。

「利用する」にチェックを入れると、設定メニューが表示され、背景のデザイン加工が可能になります。

※オーバーレイとは、「重ねて貼る」という意味です。

Webデザインでは、画像の上にさらに色・画像などを重ねて、印象を変える効果があります。

デザインを選択

背景オーバーレイのデザインを設定する機能です。

下記サンプル画像①では、メッシュ(大)を選択した事例をご紹介しています。

サンプル画像①

色を指定

背景オーバーレイの色を設定する機能です。

透明度で指定

背景オーバーレイの透明度を設定する機能です。

ブレンドを選択

オーバーレイと背景画像のブレンドを設定する機能です。

下記サンプル画像➀では、「ハードライト」を選択した事例をご紹介しています。

サンプル画像➀