JIN:R「吹き出し」ブロック一歩先ゆくアレンジのアイディア
web-kumitatekoubou
ウェブ組み立て工房
JIN:R「プロフィールブロック」一歩先ゆくアレンジのアイデア
web-kumitatekoubou
記事内に商品プロモーションを含む場合があります
ちゃんとブログを運営する筆者の自己紹介をして、PRしたほうがいいのかなと感じているんですが、、、
プロフィールブロックを使えば、アイコンを使いデザインの整った自己紹介エリアが色々なところに作れますよ。
誰が言っているか分からない話よりも、ウェブサイトやブログを運営している人が、どのような人物か分かった方が安心できるのが読者心理です。
そこでこの記事では、筆者のこと伝えられるJIN:Rのプロフィールブロックの使い方とアレンジのヒントをサンプルを使い紹介します。
この記事を読めば、明確な自己紹介エリアを通じて、どのような人が何を伝えるためのサイトなのかをアピールできるようになります。サイトを訪れた人に自己紹介をして、安心と信頼を得られるサイト作りをしたい方は、ぜひ最後まで読んでください。
もし、WordPressテーマを「JIN:R」にしようかと迷っているなら、あなたの決断を後押しする情報になっていると思います。
Contents
プロフィールブロックのクイックガイド
プロフィールブロックは、「プロフィール登録した内容」を表示するオリジナルブロックです。
プロフィールブロックを使う前に、WordPress管理画面の左サイドバーにあるメニューの外観＞カスタマイズ＞プロフィールから登録をする必要があります。表示内容を変更したい場合も、プロフィール登録を修正します。
プロフィール登録で設定できる項目
- プロフィール画像
- プロフィール名
- 肩書き
- プロフィール紹介文
- プロフィールページへのURLリンク
- ラベルテキスト
- 表示エリアの設定（記事下）
プロフィール登録の内容は、全ての記事下に自動的に表示されます。不要な場合は、表示エリアの設定（記事下）をOFFにして非表示にもできます。
SNSアイコンは、同じくWordPress管理画面のカスタマイズにあるSNS登録で設定したアカウントが表示されます。
JIN:Rのオリジナルブロックであることがポイントで、柔軟にプロフィールを表示する場所を選べます。
トップページや個別ページ内で表示するときは、「/プロフィール」でブロックを呼び出します。ウジェットエリアに設置したい場合は、サイドバーなど対象のウィジェットを開いてブロックを設置するとサイト内で共通して表示できます。
自動で表示される記事下以外で表示するなら、トップページやサイドバー、記事はじめの場所がおすすめです。
選択できる設定項目
- デザイン選択
- SNSフォローボタンの色
- SNSフォローボタンの表示
ブロックのデザインは、背景色がないデザイン1とテーマカラーの背景色が入るデザイン2の2種類から選択できます。
SNSフォローボタンの色はブランドカラーかテーマカラーから選べ、表示のON ／OFFも選べます。
デザインパターン一覧
JIN:Rの「プロフィールブロック」で、設定項目を変更したデザインパターンを紹介していきます。
最初は、デザイン選択：デザイン1、SNSフォローボタンの色：テーマカラー、SNSフォローボタンの表示：表示 です。
次は、デザイン選択：デザイン2、SNSフォローボタンの色：テーマカラー、SNSフォローボタンの表示：表示 です。
次は、デザイン選択：デザイン1、SNSフォローボタンの色：ブランドカラー、SNSフォローボタンの表示：表示 です。
次は、デザイン選択：デザイン1、SNSフォローボタンの表示：非表示 です。
Profile
2020年9月から細々とブログを書き始め、現在2つのブログ運営中です。
主に、JIN:R購入者限定コミュニティ「JIN BLOG CAMP」 で学びを得ています。
元々、ITやWeb、デザインとは縁遠い、普通の会社員だった私でも、JINやJUN:Rに出会ったことでこんなに整ったブログが作れて感動です。
プロフィールを読む主に、JIN:R購入者限定コミュニティ「JIN BLOG CAMP」 で学びを得ています。
元々、ITやWeb、デザインとは縁遠い、普通の会社員だった私でも、JINやJUN:Rに出会ったことでこんなに整ったブログが作れて感動です。
最後はデザイン選択：デザイン2、SNSフォローボタンの表示：非表示 です。
Profile
2020年9月から細々とブログを書き始め、現在2つのブログ運営中です。
主に、JIN:R購入者限定コミュニティ「JIN BLOG CAMP」 で学びを得ています。
元々、ITやWeb、デザインとは縁遠い、普通の会社員だった私でも、JINやJUN:Rに出会ったことでこんなに整ったブログが作れて感動です。
プロフィールを読む主に、JIN:R購入者限定コミュニティ「JIN BLOG CAMP」 で学びを得ています。
元々、ITやWeb、デザインとは縁遠い、普通の会社員だった私でも、JINやJUN:Rに出会ったことでこんなに整ったブログが作れて感動です。
様々な設定項目を選んだのサンプルは、表示イメージを膨らませるサポートになりましたでしょうか。
プロフィールブロックをアレンジした使い方
私が思う「プロフィール」ブロックでおすすめの使い方をご紹介します。
背景ブロックと組み合わせて、デザイン1のプロフィールブロックに枠線を作りました。
ウィジェットエリアに設置するときに、「カテゴリー区別」のオリジナルブロックと組み合わせて、特定のカテゴリだけに表示する設定ができます。特に自己PRしたいカテゴリーがあるときに有効です。
JIN:Rのブロックは基本的にPCとスマホの全ての端末で表示されますが、それをPCのみ表示とスマホのみ表示に設定も可能です。下記は、PCはデザイン1とSNSフォローボタン有りで、スマホではデザイン2とSNSボタン無しとボックスのデザインが異なるように設定しています。
Profile
2020年9月から細々とブログを書き始め、現在2つのブログ運営中です。
主に、JIN:R購入者限定コミュニティ「JIN BLOG CAMP」 で学びを得ています。
元々、ITやWeb、デザインとは縁遠い、普通の会社員だった私でも、JINやJUN:Rに出会ったことでこんなに整ったブログが作れて感動です。
プロフィールを読む主に、JIN:R購入者限定コミュニティ「JIN BLOG CAMP」 で学びを得ています。
元々、ITやWeb、デザインとは縁遠い、普通の会社員だった私でも、JINやJUN:Rに出会ったことでこんなに整ったブログが作れて感動です。
スマホで見たときはしっかりと色の入ったデザインで直感的に目に留まるようにして、SNSフォローボタンを無しにしてページをスッキリとさせています。
JIN:RにはこのWordPressテーマを開発したJIN運営の方々デザインした、コードをコピーするだけで使えるデザイン見本帳があります。こちらも超助かる便利メニューなので活用してくださいね。オリジナルのプロフィールのJINRパターンブロックが2種類も含まれています。
JIN:R公式 デザイン見本帳の紹介はこちらからプロフィールブロックの基本的な使い方
「プロフィール」ブロックの使い方を説明していきます。ブロックの設定項目は、右サイドバーに表示される内容を選択するだけで完了です。
準備：プロフィール登録をする
デザインプリセットを使いマニュアル通りに進めていれば設定しているはずですが、事前にプロフィール登録とSNS登録をします。
WordPress管理画面の左サイドバーにある外観からカスタマイズに移動し、プロフィールとSNS登録の項目を入力します。
プロフィールブロックを設置する
「/プロフィール」と入力する
ブロックの設定をする
デザイン選択とSNSフォローボタンの表示設定をします。
まとめ：しっかりと自己紹介して信頼してもらおう
WordPressテーマ JIN:Rのオリジナルブロック「プロフィール」の使い方とアレンジのヒントを紹介してきました。
オリジナルブロックなのでプロフィール情報をいろいろな場所へ設置ができます。サイドバーや記事はじめなど決まった場所以外にも、トップページや個別記事の中など読者の目に触れやすい場所で自己PRを行えます。
人と対面で接する際も自己紹介することでつながりが深まります。ブログやウェブサイトではプロフィールブロックを活用して、自分を知ってもらい安心と信頼の構築をしましょう。
この記事がJIN:Rをもうすでにお使いの方にも、検討されている方にもお役に立てば幸いです。
ABOUT ME
2020年9月から細々とブログを書き始め、現在2つのブログ運営中です。
主に、JIN:R購入者限定コミュニティ「JIN BLOG CAMP」 で学びを得ています。
元々、ITやWeb、デザインとは縁遠い、普通の会社員だった私でも、JINやJUN:Rに出会ったことでこんなに整ったブログが作れて感動です。
主に、JIN:R購入者限定コミュニティ「JIN BLOG CAMP」 で学びを得ています。
元々、ITやWeb、デザインとは縁遠い、普通の会社員だった私でも、JINやJUN:Rに出会ったことでこんなに整ったブログが作れて感動です。
