フロントページのメインビジュアルに、プラグイン「grayish MV add」を使用中!詳しくはここをClick!
PR

プロフィールボックスの設定

マニュアル
記事内に広告が含まれています。

サイト運営者のプロフィールを設定する手順と、プロフィールボックスウィジェット等でどのように表示されるのかが分かる見本を載せています。

プロフィールボックスはウィジェットで様々な場所に設定できるようになっています。
本記事では省略しますが、ショートコードでも設置できます。
記事内のCocoonブロックからも呼び出せます。

grayishでは、定番の記事のサイドバーや、ウィジェットでフッター上に設置されることを想定しています。

スポンサーリンク

管理画面のユーザー>プロフィールで入力

公式のマニュアルの通りなのですが、一応ざっくりと手順を書きます。

プロフィール入力手順

設置場所ごとの表示見本

設置される場所によって少々スタイルが異なります。

投稿や固定ページの記事でCocoonブロックで設置

まず、エディタでCocoonブロックから設定した場合は以下のように表示されます。

Cocoonブロックの中から、「プロフィールボックス」を選択してください。

ウィジェットと同じように肩書きラベルを表示したい場合は、エディタにあるラベル欄に入力します。

ななふ
ななふ
ラベル欄のテキストがここに表示されます。

フリーランスWebデザイナーのななふです。
WordPressテーマ、Cocoonのスキン「grayish(グレイッシュ)」を作りました。
シンプルなデザインで、コンテンツを引き立てるスキンになってますので、是非お試しください。

ななふをフォローする

Cocoonレイアウトブロックやコアのカラムブロックで配置すると縦表示に

Cocoonレイアウト2カラム使用時の見本

ななふ

フリーランスWebデザイナーのななふです。
WordPressテーマ、Cocoonのスキン「grayish(グレイッシュ)」を作りました。
シンプルなデザインで、コンテンツを引き立てるスキンになってますので、是非お試しください。

ななふをフォローする

Cocoonレイアウト2カラム・3カラムを使用するとこのように分割した表示が可能です。

プロフィールボックスは縦表示になります。

ただし、カラム比率で幅が狭くなるほどプロフィールボックスの表示も微妙になっていきますので、ご利用の際はよく確認するようにしてください。

Cocoonレイアウトブロックは画面幅834px以下で1カラムの縦並びに変化します。

コアのカラムブロック使用でも同様に縦表示

ななふ
ななふ
コアのカラムブロック使用

フリーランスWebデザイナーのななふです。
WordPressテーマ、Cocoonのスキン「grayish(グレイッシュ)」を作りました。
シンプルなデザインで、コンテンツを引き立てるスキンになってますので、是非お試しください。

ななふをフォローする

Cocoonレイアウトの他に、コアのカラムブロックでも縦表示になります。

コアのカラムブロックを使用し、2カラムで比率を「

33/66」を選択した場合の例です。

尚、1カラム選択でも縦表示になります。

コアのカラムブロックはスマホ表示では1カラムの縦並びに変化します。

コアのカラム・カバーブロックを組み合わせるとこんな表現も

カバーブロックで背景画像を設定し、その中にカラムブロックを1カラムで配置し、プロフィールボックスを設定します。
カラムブロックのレイアウトで「コンテント幅を使用するインナーブロック」をONにし、「コンテンツ」を400pxに設定しています。

カバーブロックの画像は固定背景にしてパララックス風に見せることも可能になっていますが、iOS(iPhoneやiPad)では動作しないのでご注意ください。

ななふ

フリーランスWebデザイナーのななふです。
WordPressテーマ、Cocoonのスキン「grayish(グレイッシュ)」を作りました。
シンプルなデザインで、コンテンツを引き立てるスキンになってますので、是非お試しください。

ななふをフォローする

ウィジェットで「サイドバー」に設置

ウィジェットで「サイドバー」にプロフィールボックスを設置した場合、投稿、固定ページのサイドバーに表示されます。

ブログでは一般的な使用方法と思いますので、まずはサイドバーに設定することをおすすめします。

プロフィールボックスをサイドバーに設置

ウィジェットでプロフィールボックスを設定する手順

WordPress管理画面 > 外観 > ウィジェットを開きます。

利用できるウィジェットの中にある、[C]プロフィールをクリックします。

設置場所の選択画面になるので、サイドバーを選び、下にある「ウィジェットを追加」ボタンをクリック。

これでサイドバーにウィジェットが設定されます。

コンテンツ下部に設定する場合は、サイドバーへ設定後に再度[C]プロフィールをクリックし、設置場所の選択画面でコンテンツ下部を選択します。

サイドバーの中に追加されたプロフィールボックスについて、必要な項目を入力します。

タイトル欄に入力したテキストは、サイドバーの見出しになります。

タイトル欄のテキストを見出しに表示したくない場合は、テキスト先頭に「!」を付けます。

「画像を円形にする」は無効です。常に円形で表示される仕様になっています。【スキン独自】

ウィジェットで「コンテンツ下部」に設置

ウィジェットで「コンテンツ下部」にプロフィールボックスを設置した場合、スキン独自機能で背景に画面横幅いっぱいの任意の画像を設定可能になります。

こちらのスキン独自機能は、テーマカスタマイザーで設定を行います。

テーマカスタマイザーでコンテンツ下部のプロフィールボックスカスタマイズ

テーマカスタマイザーの立ち上げ方法は、以下を参照してください。

テーマカスタマイザー手順

テーマカスタマイザー立ち上げの手順
  • STEP1
    管理画面 > 外観 > カスタマイズ を選択

    テーマカスタマイザーが立ち上がります。

  • STEP2
    左側の一番下にある、「skin-grayish: カスタマイズ」をクリック

    スキン独自のカスタマイズ項目が表示されます。

スキン独自のカスタマイズ項目の一覧は以下になります。

スキン独自のカスタマイズ項目の一覧 (v1.0.4より変更)
  • 全体:英字フォント設定
    • サイトタイトルなどに反映される英字フォントを選択
  • 全体:カラー設定
    • テキストカラー、アクセントカラーのカラー選択
  • 全体:テキスト変更
    • フロントページの「New Post」などを任意のテキストに設定
  • フロントページ設定:ヘッダー
    • フロントページのヘッダーに関するカスタマイズ
  • フロントページ以外の設定:ヘッダー
    • フロントページ以外のページのヘッダーに関するカスタマイズ
  • コンテンツ下部ウィジェット:プロフィールBOX
    • プロフィールボックスをフッター上に表示する時、背景の画像について設定
  • モバイル設定
    • タブレット・スマホでのヘッダーの設定など
テーマカスタマイザー ポイント

テーマカスタマイザーで設定を変更した場合は、必ず最後に画面上の「公開」ボタンをクリックしてください。
「公開」ボタンをクリックしないと変更が反映されません。

テーマカスタマイザーの、「コンテンツ下部ウィジェット:プロフィールボックス」を開きます。

プロフィールボックスの背景画像について、デフォルトで白オーバーレイのフィルターがかかっています。この不透明度を調整可能です。

また、画像の変更も可能になっています。

設定の変更を行った場合は、必ず画面上の「公開」ボタンをクリックしてください。

ウィジェットの表示は制御可能

Cocoonのウィジェットはページやカテゴリなどの条件で表示を制御できます。

ハート
ハート

すごく便利・・・!!!

例えば、コンテンツ下部に表示したプロフィールボックスをフロントページのみに表示することも可能です。

設定の詳細は、公式の以下記事をご覧ください。

Cocoon v2.6.9での不具合情報もご覧ください

プロフィールボックスに関して、Cocoon ver2.6.9で複数の不具合があります。詳細は以下の記事をご覧ください。

上記記事にある不具合は、Cocoon ver2.7.0にアップデートすることで解消されます。

もし、ご自身でgrayishのプロフィールボックスについて、CSSでカスタマイズされている場合
Cocoon ver2.7.0で想定通りの表示にならない可能性があります。

ver2.7.0では、プロフィールボックスについてHTMLの構造を変更する修正を行っているため、CSSで書いていたクラス名が当たらなくなる可能性があります。

その場合は大変申し訳ありませんが、CSSを変更後のHTMLに合わせて修正していただきますよう、宜しくお願いいたします。


今回の記事は、以上になります。

タイトルとURLをコピーしました