当サイト使用のWPテーマ「SWELL」の評判口コミはこちら

簡単!SWELLでおしゃれなプロフィールを作成する3つの方法!

簡単!SWELLでおしゃれなプロフィールを作成する3つの方法!
URLをコピーする
URLをコピーしました!
じゅんた

本記事ではSWELLを使ったおしゃれなプロフィールの作成方法を3つテンプレートを元にご紹介!
また作ったプロフィールを効率的に使えるように再利用ブロックを使った使い回し方法やサイドバーへの設置方法まで解説しています!

ブログ記事のリード分やサイドバー、文末で使うプロフィール。

記事の信頼性や権威性を示すために重要です。

SWELLはおしゃれで読者のインパクトに残るようなプロフィールが作成できます。

本記事ではSWELLのおしゃれなプロフィール作成方法と効率的に使い回しができる方法を画像を使って解説します。

ぜひ最後までご覧下さい!

この記事を書いた人

じゅんた 

15年目商社営業マン

全日本SEO協会 SEO検定3級

1984年生まれ37歳 突破力が強みのブロガー
ブログ読者やお客様の悩み事解決を一番に考え活動

ブログや仕事で悩んでいる方向けに当サイト「しごとFUNくらぶ」を運営
副業サラリーマンとして「会社員がブログで人生を変えるための情報」を発信中

2020年 6月 「しごとFUNくらぶ」開設
✔従業員2,500人の商社で優秀社員表彰3回
✔なかじさんの「ウェブ職TV」出演
✔タケウチさん2ヶ月無料コンサル企画採用
✔サイトのドメインパワー30達成中
✔狙ったKWで検索1位19個達成中
✔SEOによるブログ月収5桁達成中

読みたいところから読める「目次」

SWELLでおしゃれなプロフィールを作成する3つのパターンをご紹介!

SWELLでおすすめのプロフィール作り方は上記の3つです。

じゅんた

それぞれ画像付きで詳しく解説していきます!

パターン1:シンプルで分かりやすいプロフィールの作り方

この記事を書いた人
プロフィール顔アイコン
じゅんた

<プロフィール>

✔しごとFUNくらぶ運営者

✔会社員副業ブロガー

✔WordPressテーマ7つ使い検証・情報発信

2つ目はキャプション付きブロックを使ったプロフィールの作り方です。

まずキャプション付きブロックを選択します。

シンプルなプロフィール作り方:キャプション付きブロックを選択

次にキャプション付きブロックのスタイルを右サイドメニューから選択します。(ここでは枠上を選択)

また題目にデフォルトで書いてあるキャプションの文字を書換えます。

ここでは「この記事を書いた人」にします。

のアイコンは下記ショートコードで呼び出せます。(SWELLのアイコン詳細はこちら

[icon icon-pen]
シンプルなプロフィール作り方:キャプション付きブロックのスタイル変更

次にプロフィールアイコンと紹介文を分けるためカラムブロックを選択します。

シンプルなプロフィール作り方:カラムブロックを選択

カラムブロックのパターンを選択。

プロフィールアイコンを設置する方を30にします。

シンプルなプロフィール作り方:カラムブロックでアイコンと自己紹介文を分割

次にプロフィールアイコンを画像ブロックから設置します。

シンプルなプロフィール作り方:アイコンを取り込み

そしてキャプションに名前を入力し、自己紹介文を入力します。

Twitterアイコン「」を使用する場合は下記のショートコードで呼び出します。

[icon icon-twitter]

そしてショートコードにTwitterのURLをリンクすればクリックするとTwitterの画面が開くようになります。

シンプルなプロフィール作り方:自己紹介文を入力

シンプルで分かりやすいプロフィールの完成です。

この記事を書いた人
プロフィール顔アイコン
じゅんた

<プロフィール>

✔しごとFUNくらぶ運営者

✔会社員副業ブロガー

✔WordPressテーマ7つ使い検証・情報発信

パターン2:インパクトがあり印象に残るプロフィールの作り方(1カラムでおすすめ)

この記事を書いた人

プロフィール顔アイコン

じゅんた 

✔しごとFUNくらぶ運営者

✔会社員副業ブロガー(商社勤務)

✔WordPressテーマ7つ使い検証・情報発信中

まずはSWELLの独自機能フルワイドブロックを使ったインパクトのあるプロフィールの作り方です。

フルワイドブロックを使うので1カラム(サイドバー非表示)推奨します。

また「Fixed Background」や「パララックス効果」をつける背景画像を動かすことで更に読者の印象に残せます。

それでは早速作り方をご紹介します。

まずはフルワイドブロックを選択します。

フルワイドブロックを選択

次にフルワイドブロックの見出しを削除します。(プロフィール上に見出しがあるのはSEOとして良くないので)

フルワイドブロックの見出し削除

そしてプロフィールの題目を入れます。(ここでは「この記事を書いた人」にします。)

のアイコンは下記ショートコードで呼び出します。(SWELLアイコンの詳細はこちら

[icon icon-pen]
プロフィールの題目を入力

次にカラムブロックでプロフィールアイコンと紹介文を左右に分けます。

カラムブロックを選択

プロフィールアイコンと紹介文を分けます。

プロフィールアイコンを設置したい方を30にします。

カラムブロックでプロフィールアイコンと紹介文を分割する

プロフィールアイコンを画像ブロックから選択し設置します。

プロフィールアイコンを入れる

画像を設置したら自己紹介文を入力します。(テキストサイズはLにしています。)

Twitterアイコン「」を使用したい場合は下記のショートコードで呼び出せます。

[icon icon-twitter]

そしてショートコードにTwitterのURLをリンクすればクリックするとTwitterにとぶようになります。

プロフィール紹介文を入力する

次にプロフィール背景画像を設定します。

プロフィール背景画像を選択

このままだと文章が読みにくいので背景画像やテキストカラーをお好みで調整します。

今回はテキストカラーを白にしてオーバーレイカラーを黒にしています。

背景画像をカスタマイズ調整する

次に背景効果を選択してできあがりです!

背景画像の効果を選択

インパクトがあり印象に残るプロフィールの完成です。

■背景効果「Fixed Background」の場合

背景画像が動きます。※モバイル端末ではFixed Background効果は適用されません。

この記事を書いた人

プロフィール顔アイコン

じゅんた 

✔しごとFUNくらぶ運営者

✔会社員副業ブロガー(商社勤務)

✔WordPressテーマ7つ使い検証・情報発信中

■背景効果「パララックス効果」の場合

背景画像がゆっくり動きます。※モバイル端末でも効果は発揮されます。

この記事を書いた人

プロフィール顔アイコン

じゅんた 

✔しごとFUNくらぶ運営者

✔会社員副業ブロガー(商社勤務)

✔WordPressテーマ7つ使い検証・情報発信中

パターン3:プラグインを使った可愛いプロフィールの作り方

この記事を書いた人

<プロフィール>

✔しごとFUNくらぶ運営者

✔会社員副業ブロガー

✔WordPressテーマ7つ使い検証・情報発信

じゅんたです!

最後にSWELL開発者の了さんとWEBデザイナーのぽんひろさんが作ったプラグイン「Useful Blocks」で作成する方法です。

Useful Blocksは無償版、有償版両方あるので公式サイトを確認の上、選んで頂ければと思います。

>>Useful Blocksの公式サイトはこちら

Useful Blocksのアイコンボックスを選択

次に下記の通り「画像を変更」をクリックしてプロフィールアイコンを追加します。

Useful Blocksプロフィールアイコンの追加

次に右サイドメニューからお好みのカラーやアイコンの位置を決めます。

ここではカラーを「ピンク」にして、アイコンの位置を「左」にしています。

Useful Blocksのカラーやアイコンの位置を選択

次に下記のようにプロフィールの題目を入力します。

ここでは「この記事を書いた人」にします。

のアイコンは下記ショートコードで呼び出せます。

[icon icon-pen]
Useful Blocksのプロフィール題目を入力

次に名前と自己紹介文を入力します。

Twitterアイコン「」を使用する場合は下記のショートコードで呼び出します。

[icon icon-twitter]

そしてショートコードにTwitterのURLをリンクすればクリックするとTwitterの画面が開くようになります。

Useful Blocksに名前と自己紹介文を入力

プラグインを使った可愛いプロフィールの完成です。

この記事を書いた人

<プロフィール>

✔しごとFUNくらぶ運営者

✔会社員副業ブロガー

✔WordPressテーマ7つ使い検証・情報発信

じゅんたです!

以上で3パターン紹介したのでお好みのプロフィールを作成してみて下さい。

SWELLのサイドバーに表示させるプロフィール設定方法

サイドバーに表示させるプロフィールの設定方法

上記のように、2カラム設定時に右サイドバーに表示されるプロフィールです。

(当記事はフルワイドブロックを見せるために1カラムに設定しております。他の記事は2カラムが多いです。)

設定方法は簡単ので早速、解説します。

サイドバーのプロフィールはダッシュボードの「外観」→「ウィジェット」から設定します。

WordPressダッシュボードからサイドバーのプロフィール設定

「SWELLプロフィール」を右側の「共通サイドバー」にドラッグします。

共通サイドバーにSWELLプロフィールをドラッグ

後はプロフィールを入力してアイコンと背景画像を選択すれば完成です。

SWELLサイドバーにプロフィール設定完了

作ったプロフィールを再利用ブロックで効率よく使う方法をご紹介!

プロフィールは毎記事のように使うことも多いので都度作成していては時間がかかり大変です。

そのため作成したプロフィールを再利用ブロックに登録することをおすすめします。

再利用ブロックに登録すればプロフィールを簡単に呼び出せます。

また記事に設置した再利用ブロックは編集すると全てのプロフィールが更新されます。

プロフィールは時とともに変わっていくので都度全ての記事を編集するのも大変ですよね。

ここではそんなお役立ちの「再利用ブロック」の使い方を解説します。

じゅんた

再利用ブロックを使うと時短になります!

1.プロフィールを再利用ブロックに登録しよう!

まず先ほど作ったプロフィールを下記図のように再利用ブロックに登録します。

プロフィールを再利用ブロックに変換

すると再利用ブロックに変換できます。

しかし変換した再利用ブロックのタイトルが「無題の再利用ブロック」になっており使いづらいので変えます。

プロフィールを再利用ブロックに変換完了

保存した後、WordPressのダッシュボードに戻り「再利用ブロック」を選択します。

WordPressダッシュボード画面(再利用ブロックのタイトル変更)

再利用ブロックの管理画面になるので先ほど変換した「無題の再利用ブロック」をクリックします。

再利用ブロック管理画面(プロフィールのタイトル変更)

後はお好みのタイトルに変更して「更新」をクリックします。

プロフィール再利用ブロックのタイトル変更

これにて再利用ブロックへの登録完了です。

プロフィールの再利用ブロック一覧

2.プロフィールを効率的に呼び出そう!

再利用ブロックに登録したプロフィールを呼び出すのはとても簡単です。

ブロックの検索で使いたい再利用ブロックのタイトルの一部を入力すると表示されるのでクリックするだけです。

作成したプロフィールを再利用ブロックで呼び出す

呼び出し完了です。このまま再利用ブロックのまま設置しておくと、再利用ブロックの大元を編集した時に反映されます。

再利用ブロックからプロフィール呼び出し完了

3.プロフィールを効率的に編集しよう!

再利用ブロックに登録しているプロフィールを編集すると全ての記事に設置しているプロフィールが変更されます。

プロフィールは変わっていくものですし、ブラッシュアップしたいときに便利です。

再利用ブロックに登録しているプロフィールを編集するときはWordPressのダッシュボードからアクセスします。

WordPressダッシュボード画面(再利用ブロックの編集)

編集する再利用ブロックをクリックします。

編集する再利用ブロックを選択

再利用ブロックのプロフィールを編集して「更新」をクリックします。

再利用ブロックに登録されたプロフィールを編集する

すると下記のように全ての再利用ブロックで設置している全てのプロフィールが変更されます。

編集が反映されたプロフィール
じゅんた

便利なのでぜひ活用してみてください!

4.再利用ブロックを通常のブロックに戻す方法

再利用ブロックを通常のブロックに戻す方法も解説しておきます。

再利用ブロックのままにしておくと大元を変更すると全て変わるので、変更されたくない場合は通常ブロックに戻しておきましょう。

再利用ブロックで呼び出したプロフィールを通常ブロックに戻す方法

まとめ:SWELLの3パターンのプロフィールを使いこなそう!

まとめ

上記のようにプロフィールの作り方を3パターン紹介しました。

私の場合は下記のように使い分けています。

  • 2カラムの通常の記事にはパターン1かパターン3
  • トップページや1カラムで目を引きたい記事はパターン2

みんさんも状況に合わせて使ってみて下さい。

\おしゃれなプロフィールを作ろう!/

>>SWELLのレビュー記事「私の本音口コミとネット上の評判」はこちら♪

何かご不明な点があれば下記連絡先から問い合わせ下さい。

関連記事>>経験談!SWELLアフィリエイトが稼げる5つの理由と始め方を徹底解説!

関連記事>>時短!25項目のSWELL初期設定を公式マニュアルにない具体的な値で解説

関連記事>>【簡単にサイト型へ】SWELLトップページのカスタマイズ方法を解説!

シェア頂けると嬉しいです!よろしくお願いします!
URLをコピーする
URLをコピーしました!

コメント

コメントする

読みたいところから読める「目次」
閉じる