ブログカスタマイズ ワードプレス

アフィンガーでプロフィールカードを作る|サイドバーを整えよう

サイトの右側のサイドバーにある自己紹介の欄。

こちらをプロフィールカードといいますが、アフィンガーでは、プラグインなしにおしゃれで見やすいプロフィールカードを作ることができます。

今回はアフィンガーの機能をつかったプロフィールカードの作り方をご紹介していきます。

プロフィールカードの自己紹介文の装飾方法も、徹底紹介しています。ぜひご参考ください。

アフィンガーでプロフィールカードを作る 概要

手順は以下の通りです。

プロフィールカード作成手順

  1. プロフィール画像・ヘッダー画像の設定
  2. プロフィールカードのボタン設定
  3. プロフィールカードのSNSボタン設定
  4. 自己紹介文の設定

①プロフィール画像・ヘッダー画像の設定

WordPressダッシュボードの「外観」>「カスタマイズ」「オプション(その他)」「プロフィールカード」にて操作します。

アフィンガーでプロフィールカードを作る|サイドバーを整えよう

ヘッダー画像(プロフィールカード)と、アバター画像(プロフィールカード)に、お好きな画像を設定することで、以下のようなプロフィールカードが出来上がります。

アフィンガーでプロフィールカードを作る|サイドバーを整えよう

綺麗に表示させるために、アバター画像はサイズ大きめな正方形の画像、ヘッダー画像は横長の画像を設定してください。

ちなみに、「旧プロフィールカードに変更」にチェックを入れると、以下のようなシンプルなデザインのプロフィールカードになります。

アフィンガーでプロフィールカードを作る|サイドバーを整えよう

 プロフィールカードに装飾をつける

 お好みで設定で、カラー変更をしたり、プロフィールカードに影をつけたりすることができます。

アフィンガーでプロフィールカードを作る|サイドバーを整えよう

色々いじってみて、変更をしてみてください。

設定が完了したら「公開」ボタンを押して設定を保存しましょう。

②プロフィールカードの詳細ボタン

自己紹介ページがある場合は、プロフィールカード下部ボタンを設置することで、読者に自身のことを分かってもらいやすくなります。

以下画像の赤い囲みの部分です。

アフィンガーでプロフィールカードを作る|サイドバーを整えよう

先程の「プロフィールカード」設定の下の方に、詳細ボタンの設定スペースがありますので、そちらより操作していきます。

項目設定内容
ボタンURLボタンを押した時の移動先のURL
ボタンテキストボタンに表示する文字
ボタンテキスト色(プロフィールカード)ボタンの文字の色
ボタン上部背景色(プロフィールカード)ボタンの上部の色
ボタン下部背景色(プロフィールカード)ボタンの下部の色
ボタン影色(プロフィールカード)ボタンの影の色
アフィンガーでプロフィールカードを作る|サイドバーを整えよう

③プロフィールカードのSNSボタン設定

次にプロフィールカードのSNSボタンを設定していきます。以下画像の赤い囲みの部分です。

アフィンガーでプロフィールカードを作る|サイドバーを整えよう

操作する場所は、ダッシュボードのの「ユーザー」>「あなたのプロフィール」からです。

連絡先情報」の項目から各SNSのURLを入力していきます。

アフィンガーでプロフィールカードを作る|サイドバーを整えよう

こちらに入力したメディアだけプロフィールカードに表示されます。

アカウントがない場合や、表示させたくない場合は無記入にしておきましょう。

SNSのURL

  • Twitter→https://twitter.com/アカウントのユーザー名/
  • Instagram→https://www.instagram.com/アカウントのユーザー名/
  • facebook→表示される自分のアイコンをクリックすると、自分の個人アカウントページが表示されるのでそこのURLをコピー
  • YouTube→YouTube Studio にログイン→カスタマイズ>基本情報>チャンネル URLで、チャンネル URL をコピー

記入しましたら、ページ上部右側にある「プロフィールを更新」をクリックして保存します。

アフィンガーでプロフィールカードを作る|サイドバーを整えよう

④自己紹介文の設定

次にユーザー名と自己紹介文の設定をしていきましょう。

先程と同じくダッシュボードの「ユーザー」>「あなたのプロフィール」にて作成していきます。

「名前」の項目にある「ニックネーム (必須)」より、メインの名前を設定します。

続いて、「あなたについて」の項目にある「プロフィール情報」に、自己紹介の文章を入力します。文章入力にて改行はプロフィールカードに反映されませんので、ご留意ください。

アフィンガーでプロフィールカードを作る|サイドバーを整えよう
アフィンガーでプロフィールカードを作る|サイドバーを整えよう

プロフィールカード自己紹介文の改行方法

通常の改行キーでは、プロフィールカードの自己紹介文は改行させませんので、一工夫必要です。

まずは、ダッシュボードの「AFFINGER管理」>「投稿・固定記事」>「この記事を書いた人」をクリックしてください。

「プロフィール情報にhtmlタグを許可する」にチェックマークを入れてください。

アフィンガーでプロフィールカードを作る|サイドバーを整えよう

この設定を行うことで、プロフィール内の文章を記事装飾することができるようになります。

チェックを入れた後は、下へスクロールをして「save」をお忘れなくクリックしましょう。

次に、「ユーザー」「プロフィール」へ戻って、「プロフィール情報」に必要なコードを改行したい箇所に入力していきます。

<br>

<br>を挿入した箇所で改行がされます。

最後は「プロフィールを更新」をクリックするのをお忘れなく。

これで任意の場所に改行が反映されます。

アフィンガーでプロフィールカードを作る|サイドバーを整えよう
アフィンガーでプロフィールカードを作る|サイドバーを整えよう

プロフィールカード自己紹介文を太字にする

より目立つプロフカードにするために、自己紹介文を太字にするというのもありです。

先ほどの「AFFINGER管理」>「投稿・固定記事」>「この記事を書いた人」>「プロフィール情報にhtmlタグを許可する」にチェックマークが入った状態であることが条件です。

以下のコードをご使用ください。

<b>太くしたい文字</b>

<b>文字</b>というように、 タグで囲んだ部分の文字が太字になります。 

アフィンガーでプロフィールカードを作る|サイドバーを整えよう


プロフィールカード自己紹介文を左寄せにする

デフォルトですと、自己紹介文は中央揃えですが、これを左寄せにしたい場合は、以下のコードを使用してください。

<p style="text-align:left">テキストを左寄せ</p>
アフィンガーでプロフィールカードを作る|サイドバーを整えよう

プロフィールカード自己紹介文を簡単にHTML編集する

ここまでHTMLコードをお伝えしてきましたが、例えば文字をカラフルにするなど、奇抜な自己紹介文にする際に、便利な方法をご紹介していきます。

アフィンガーでプロフィールカードを作る|サイドバーを整えよう

新規で記事作成を開き、クラシックエディターで文章作成してください。

アフィンガーでプロフィールカードを作る|サイドバーを整えよう

作成しましたら、「HTMLとして編集」に切り替えて、その内容をコピーしてください。

アフィンガーでプロフィールカードを作る|サイドバーを整えよう

あとは「プロフィール情報」へペーストするだけです。

プロフィールカードを設置する

以上の操作でプロフィールカードの作成は完了したので、パソコンやスマートフォンに表示させるように、サイドバーに設置していきます。

プロフィールカードの設置は、ダッシュボードの「外観」>「ウィジェット」ページから行います。

アフィンガーでサイドバーをデザインする方法を徹底解説!

プロフィールカードは、「STINGERサイト管理者紹介」というウィジェットです。

こちらを「サイドバーウィジェット」にドラッグ&ドロップで置いてください。

アフィンガーでプロフィールカードを作る|サイドバーを整えよう

ウィジェットを開きタイトルを「プロフィール」など任意の文字にして、右下の「保存」をクリックしてください。

これでプロフィールカードの設置は完了です。

サイトで反映されているか、確認してみましょう。

アフィンガーでプロフィールカードを作る まとめ

プロフィールカードは、読者にどんな人が書いているのかを知ってもらう重要な場所です。

ぜひとも素敵に仕上げてください!

プロフィールカードの画像は写真でなく、アイコンでも良いですね。ココナラなどで発注するのも、オリジナリティあるプロフィールカードへの一歩になりますね。

アフィンガーでサイドバーを整える

サイドバーは、ブログの顔といっても過言ではない重要なスペースです。サイドバーを整頓することで、見た目の良さだけでなく、利便性も変わってきます。

現在管理人は、ユーザビリティ向上を第一に、以下の項目をサイドバーに置いています。

  • 検索ウィジェット
  • おすすめ記事
  • プロフィール
  • カテゴリー
  • タグ
  • 目次
  • 最新記事

読者目線を意識しながら、ご自身の好みのサイドバーを作って、オリジナル感を出していきましょう。

アフィンガーを使ってのブログの作り方については、こちらの記事をご参照ください。

アフィンガーでプロフィールカードを作る|サイドバーを整えよう

2022/11/8

アフィンガーでプロフィールカードを作る|サイドバーを整えよう

サイトの右側のサイドバーにある自己紹介の欄。 こちらをプロフィールカードといいますが、アフィンガーでは、プラグインなしにおしゃれで見やすいプロフィールカードを作ることができます。 今回はアフィンガーの機能をつかったプロフィールカードの作り方をご紹介していきます。 プロフィールカードの自己紹介文の装飾方法も、徹底紹介しています。ぜひご参考ください。 Contentsアフィンガーでプロフィールカードを作る 概要①プロフィール画像・ヘッダー画像の設定 プロフィールカードに装飾をつける②プロフィールカー ...

ReadMore

アフィンガーでサイドバーをデザインする方法を徹底解説!

2022/10/28

アフィンガーでサイドバーをデザインする方法を徹底解説!

サイドバーは、ブログの顔といっても過言ではない重要なスペースです。サイドバーを整頓することで、見た目の良さだけでなく、利便性も変わってきます。 現在管理人は、ユーザビリティ向上を第一に、以下の項目をサイドバーに置いています。 検索ウィジェット おすすめ記事 プロフィール カテゴリー タグ 目次 最新記事 この記事では、上記のうち「カテゴリー」「タグ」「検索ウィジェット」などを置く方法、サイドバーウィジェットのタイトルカラーの変更方法をお伝えします。 Contentsアフィンガーでサイドバー作成の概要カテゴ ...

ReadMore

アフィンガーでおすすめ記事をサイドバーの好きな場所に設置する方法|プラグイン使用なし!

2022/10/28

アフィンガーでおすすめ記事をサイドバーの好きな場所に設置する方法|プラグイン使用なし!

多くのブロガーが設置しているサイドバーの人気記事。 おすすめ記事の表示がある事で、ユーザーに興味を持ってもらい、別記事へのアクセスやブログの滞在時間を伸ばしてもらう事に繋がります。 それを可能にしてくれる、人気なプラグインは「WordPress Popular Posts」です。アフィンガー利用者でも、このプラグインをおすすめしている方は多くおられますが、このプラグインはとにかく重いのです。 管理人もWordPress Popular Postsを一時期利用していましたが、設定いじって対策してもサイトは重 ...

ReadMore

アフィンガーでおしゃれなトップページを作る|ブロックエディタでの作り方を解説

2022/10/26

アフィンガーでおしゃれなトップページを作る|ブロックエディタでの作り方を解説

AFFINGER6(アフィンガー6)を購入したかたは、せっかくの有料テーマですので、それを生かした素敵なトップページをつくりたいと考えていると思います。 クラシックエディターを使った方法が上位表示されていますが、当ブログでは、ブロックエディターのみを用いたアフィンガーでのトップページの作り方をご紹介していきます。 現在のトップページは、すべてブロックエディターで作り上げました。ご参照ください。 前置きはそこそこに、早速作っていきましょう! このブログは「AFFINGER」を使用しています Contents ...

ReadMore

Table of Contents Plusで見やすいブロブにカスタマイズする|AFFINGER環境

2022/10/26

Table of Contents Plusで見やすいブロブにカスタマイズする|アフィンガー環境で快適目次

「Table of Contents Plus」は記事に目次を表示できるWordPressプラグインです。 今回はTable of Contents Plusを用いて、AFFINGER(アフィンガー)環境化でスマホに目次に戻る項目を表示させる方法と、実装したカスタムをご紹介します。 このブログは「AFFINGER」を使用しています Contents概要Table of Contents Plusを設置する(インストール)Table of Contents Plusを設定する方法位置表示条件以下のコンテンツ ...

ReadMore

アフィンガー|「目次に戻る」をスマホの固定フッターメニューの中に入れる

2022/10/28

アフィンガー|「目次に戻る」をスマホの固定フッターメニューの中に入れる

今やスマホでサイトを閲覧することが多いです。 「興味あるところだけ読みたい」「さっき読んだところをもう一度確認したい」というニーズが発生することは、往々にしてあります。そのときにあると便利なのが「目次に戻るボタン」なのです。 今回は、フッターの中に「目次に戻る」項目を作っていきたいと思います。 フッターメニューに入れることで、追従してくれますのでとても便利です。 この記事を読めば、以下の動画のようなことができるようになります。 まだ、スマホに固定するフッターメニューを設置していない方は、こちらご参照くださ ...

ReadMore

UpdraftPlusで自動バックアップから復元方法を解説|保存先はGoogle ドライブ

2022/8/28

UpdraftPlusで自動バックアップから復元方法を解説|保存先はGoogleドライブ

UpdraftPlusは、WordPressのデータをバックアップ・復元できるプラグインです。 WordPressで構築したウェブサイトのデータベース、プラグイン、テーマ、アップロードファイル、wp-content ディレクトリと、WordPressを丸ごとバックアップして、復元までプラグインで行えます。 WordPressのデータをバックアップとして有名なプラグイン「BackWPup」がありますが、BackWPupの復元はFTPでファイルアップロードして、phpMyAdminでデータベースを復元する手順 ...

ReadMore

アフィンガーでヘッダーカードを作る|設定と表示の方法を徹底解説

2022/10/15

アフィンガーでヘッダーカードを作る|設定と表示の方法を徹底解説

AFFINGERで"ヘッダーカード"を設定する方法をご紹介します。 ヘッダーカードを入れることで、以下のようにサイトが変化します。 ヘッダーカードを設置することで、「サイトがおしゃれに華やかになる」「サイト訪問者に読んでもらいやすくなる」というメリットがあります。 作成方法【簡易版】 どのようなヘッダーカードを作るか、構想を練る ヘッダーカードの背景画像を作る(canvaなど) ヘッダーカードの挿入と設定(デザインや文字入など) ヘッダーカードの背景を変更する(必要な場合のみ) Contentsどのような ...

ReadMore

2022/10/28

ブログの作り方(アフィンガー)|当ブログのサイトマップ

ブログを始めるにあたり、おすすめのサーバーやテーマ、またブログをはじめたら押さえておくべき設定などの記事をまとめました。 Contentsおすすめサーバー「スターサーバー」スターサーバーのメリット・デメリットスターサーバーの契約方法・設定方法独自ドメインからメールアドレスを作成するブログのバックアップ問い合わせフォームを作成するスパム対策アフィンガー関連設定ヘッダーとヘッダーメニューをおしゃれにするトップページを作るサイドバーを整えるスマホでも追従する目次を設定するスマホに固定フッターメニューを追加する記 ...

ReadMore

Contact Form 7の問い合わせフォーム作成方法と使い方を紹介

2022/8/28

Contact Form 7の問い合わせフォーム作成方法と使い方を紹介

ブログをはじめたら必ず導入するべき、問い合わせフォームのプラグイン「Contact Form 7」。作成者は日本人ですので、公式サイトは日本語で解説されています。 Contact Form 7公式サイト Contact Form 7の導入方法と、問い合わせフォームを作成する方法を紹介します。 下記のようにお問い合わせフォームを作り、サイトのフッターメニュー(ブログの最下部エリア)に設置していきます。 ContentsContact Form 7の使い方【簡易】step1.Contact Form 7をイン ...

ReadMore

スターサーバーのメリット・デメリットと、性能や料金を徹底紹介

2022/8/28

スターサーバーのメリット・デメリットと、性能や料金を徹底紹介

月額138円~という格安でありながら、高性能サーバーであると言われているスターサーバー。 日本マーケティングリサーチ調べでは、 WordPress 利用者注目度・ブロガー&アフィリエイター満足度・レンタルサーバー初心者満足度No.1を記録しています。 管理人も、スターサーバーを利用してこのブログを運営しています。 この記事では、スターサーバーの機能や料金まとめ、メリット・デメリットをお伝えします。 \スターサーバーの公式サイト/ Contentsスターサーバー機能一覧無料お試し2週間は、 ...

ReadMore

スターサーバーの契約方法・設定方法を徹底解説

2022/8/28

スターサーバーの契約方法・設定方法を徹底解説

この記事ではスターサーバーを使い、ワードプレスの設定方法を初心者でもわかりやすいようにお伝えします。 スターサーバーのメリット・デメリットについては、こちらの記事をご参照ください。 スターサーバーの有料プランを契約すると、独自ドメインが無料で作成することができます。 また、スターサーバーは各サーバーの中でもお得な値段設定ですので、費用を抑えてブログを始めてい方には、うってつけです。 管理人も、スターサーバーの安さと設定のしやすさから、契約を決めました。 はてなブログやアメーバーブログなどの、大手ブログから ...

ReadMore

アフィンガー|スマホのヘッダーやメニューをおしゃれに設定する方法

2022/10/28

アフィンガー|スマホのヘッダーやメニューをおしゃれに設定する方法

当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」にて、スマホのヘッダーをおしゃれにする方法を、ブログ初心者さん向けに1からわかりやすく解説していきます。 今回紹介する方法で、どのようなデザインになるのか、ご提示します。 デフォルトはシンプルなものですが、好きな画像をヘッダーに置いておしゃれで個性的なデザインにしていきましょう。 Contents操作方法(簡易)事前情報.「ヘッダーエリア」や「ヘッダーメニューエリア」ってどこのこと?step1.スマホヘッダーメニューを表示 ...

ReadMore

投稿タグを選択式(チェック)にする|らくらくタグ設定

2022/8/25

投稿タグを選択式(チェック)にする|らくらくタグ設定

投稿記事の作成編集ページのタグは、フリー記述方式なので、タグの入れ漏れがある可能性があります。 管理人も、どんなタグ前に作ったっけ?と、確認しながら入力していました。 しかしながら、そのような面倒な作業はもう必要ありません! この方法を使うことで、以下のようになるのです。 予め作ったタグを一覧表示にし、その上選択式になります。 このようにすることで、投稿編集ページで確認しながら簡単にタグをつけることができます。 プラグイン無しで、コードの貼付けのみで実装できますので、手軽です。 それでは、タグを選択式にす ...

ReadMore

AFFINGERでヘッダーを個性的でおしゃれにする方法

2022/10/28

AFFINGERでヘッダーを個性的でおしゃれにする方法

有料テーマのAFFINGERを購入したからには、デザインに優れた機能をつかい、かっこいいブログにしたいところです。 今回は、AFFINGER6のヘッダーエリアと、ヘッダーメニューエリアを個性的でおしゃれにする方法をお伝えします。 AFFINGER6のデフォルト状態のヘッダーと、今回紹介するカスタマイズ方法を利用したヘッダーの完成イメージを提示します。                                                  ▼▼▼▼▼ 何ということでしょう、シンプルでザ・デフォルト ...

ReadMore

このサイトはアフィンガーを使用しています

アフィンガー

WING(AFFINGER6 ver)

デザイン簡単、SEO対策と広告収入UPの機能が標準装備。さらに美しく、パワフルに。「稼ぐ」に特化したテーマ。

WING(アフィンガー6)公式サイト

2022年最新!おすすめレンタルサーバー

月額料金がライトプランで220円〜(税込)なので、コスパよく爆速なサイト運営が可能に!

管理画面は使いやすくなっているので、これからはじめてサイト運営をする方にもおすすめです!

Twitterでも口コミ良好!

スターサーバー公式サイト

-ブログカスタマイズ, ワードプレス
-, ,