【SWELL】記事内にプロフィールを挿入する方法

記事内にプロフィールを挿入する方法

WordPressテーマ「SWELL」を使用していて、記事内にプロフィール(この記事を書いた人)を挿入したいと思ったことはありませんか?

サイドバーのウィジェットのプロフィールや、投稿記事下エリアの著者情報は設定方法があるのですが、記事内に挿入できるプロフィールは今のところありません。

>>>プロフィールを表示できるウィジェットの設定方法

ここではプラグインなどを使用せずに、SWELLで、自分で記事内プロフィールをカスタマイズする方法を解説します。

画像付きで詳しく説明していきますので、この通りに作ってもらえば簡単に作成できます。

よければ使ってみてください。

この記事の内容
  • 記事内プロフィールの作り方
  • 記事内プロフィールの挿入方法

↓↓↓こんな感じのプロフィールが出来ますよ!↓↓↓

この記事を書いた人
しんでぃ
  • 本職は最高マーケティング責任者
  • しんでぃブログ(主にブログ運営×SWELL)
  • SWELLレビュー記事は公式サイト掲載
  • ブログ開設5か月目で5桁収益

Twitter : (@shinshindy33)

SWELLをまだ導入していない方は以下の記事が参考になります。

目次

プロフィールを特定の位置に表示する方法

SWELLで用意されたプロフィールは、特定の位置であれば挿入できます。

「外観」>「ウィジェット」から、SWELLプロフィールをクリックすると、挿入する箇所を選択できます。

ウィジェットのSWELLプロフィール

今回紹介するプロフィールは、

  • 好きな箇所に挿入できる
  • プロフィールを記事ごとに変えられる

というものです。

記事内プロフィールの作り方

それでは具体的なプロフィールの作り方を説明していきます。

ブログパーツで作成すると、記事ごとに修正しなくても一括で管理できます。

「WordPress管理画面」>「ブログパーツ」>「新規追加」

ブログパーツ

通常の記事のように作成して、「公開」をクリックすればOKです。

用途は使い方に合わせてお選びください。

ブログパーツの用途
STEP
キャプション付きブロックを選択。

ブロックエディタからキャプションブロックを選択します。

キャプションブロックの選び方
STEP
キャプションブロック内でカラムを選択。

キャプションブロック内のブロックをカラムで作成します。

※ブロック内で「/」と入力すると、下記のようにブロック一覧が表示されるので便利ですよ。

カラムの呼び出し方
STEP
2カラム・30/70を選択

左に画像、右側に説明を入れるため、2カラムを選択します。

バランス的に30/70がベストです。

2カラムのサイズ30-70
STEP
左のカラムで画像を選択

左側のカラムに、プロフィールで使う画像を選択します。

プロフィールの画像呼び出し方

挿入すると以下のような状態になります。

プロフィールの画像2

キャプション部分に自分の名前を入れましょう。

プロフィール画像が大きい時は、画面右側の「追加スタイル」>「画像の表示サイズ」を「小さく表示」にするとちょうどいいと思います。

プロフィールの画像3
STEP
右カラムで段落もしくはリストを選択

続いて右の説明文を作成します。

右カラムをクリックし、段落もしくはリストのお好きな方を選択してください。

プロフィールの右カラム
STEP
右カラムにプロフィールの説明を入力

右カラムにプロフィールで説明したい内容を記入してください。

リストの方が見やすいかと思います。装飾も好きなようにできます。

プロフィール内リスト
STEP
説明の下のブロックにSNSなどを入れる

手順⑥で作った説明ブロックの下にSNSなどのリンク先を入れます。

下記のようにブロックを追加して、段落を選択してください。

プロフィール内リスト下ブロック

アイコンを入れない場合

段落内に、例えば、Twitter : (@shinshindy33)のように文字だけ記入して、リンクを張り付ければ完成です。

アイコンを入れる場合

「Font Awesome」のアイコンを使う設定は、あらかじめ以下のページの「① Font Awesomeファイルを読み込ませよう」を設定しておいてください。

通常のショートコードブロックから入力してアイコンを呼び出そうとすると、なぜかコードがそのまま表示されてしまうので、下記の方法でショートコードを入力していきます。

段落になんでもいいので文字を入力すると、エディターツールバーが表示されます。

アイコン用ショートコードがあるので選択してください。

アイコン用ショートコードの呼び出し方

ショートコードを呼びだし、先ほど適当に入力をした文字を消すと以下のようになります。

アイコンクラス名

この”アイコンクラス名”部分に、表示させたいアイコンのクラス名を入力します。

クラス名に関しては以下を参考にしてください。Twitterなら”icon-twitter”です。

以上で、以下のように出来たかと思います。

キャプション
  • プロフィール
  • プロフィール
  • プロフィール

 ココ

入れたいアイコンとリンク先を同様の方法で追加していきます。

STEP
固定プロフィールページボタンを作成する

固定プロフィールページに飛ばしたい場合は、SWELLボタンで作成します。

SWELLボタン
STEP
キャプションブロックを装飾

あとは、「キャプション」という部分を、「この記事を書いた人」や「プロフィール」などに変更します。

キャプションブロックのスタイルを「枠上」、「枠内」などの好きなスタイルを選び、アイコンを付けたら完成です。

キャプションブロックスタイル

完成したプロフィールはコチラ

プロフィール
Shindy
  • プロフィール
  • プロフィール
  • プロフィール

  

ブログパーツでプロフィールを使いまわす

プロフィールができたら、ブログパーツに名前を付けて「公開」をクリックすれば完成です。

ブログパーツを保存

プロフィールを呼び出す時は、エディタツールバーから「ブログパーツ」をクリックし、わかりやすい名前をつけて保存します。

ブログパーツを呼びだす

自分で登録した用途を選択し、作ったブログパーツを選択すればOKです。

呼び出して用途を選択

まとめ

以上、記事内プロフィールの作成方法を紹介しました。

ブログを読み始める前に、「どんな人が書いているの?」と伝えたい時は、冒頭部分にプロフィールを入れると効果的です。

そんな時に、記事内でプロフィールを呼び出す方法がなかったので、自分でカスタマイズしてみました。

よければ使ってみてください!

その他SWELLの設定に関してはこちらをどうぞ。

記事内にプロフィールを挿入する方法

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる