【WordPress】名刺風プロフィールをサイドバーに作る方法【コピペOK】

スポンサーリンク
宿を安くする方法

やっほう!WEBエンジニアのテツヤマモト(@okapo192)です。

今回は「WordPressブログにおしゃれなプロフィール欄を設置する方法」を共有します。

 

プロフィール欄は、読者の方がブログにやって来た時に、必ずと言っていいほど目を通す場所です。

記事はもちろんのこと、自分のファンになってもらうためには、このスペースを魅力的に見せるのが1つのコツですね。

 

今回はこのブログのあまりイケてなかったプロフィール欄を、おしゃれな名刺風のデザインに変更していきます。

初心者でも簡単にカスタマイズできるので、気になる方は試してみるといいですよ〜。

カスタマイズ概要

今回変更するのは、ブログのサイドバーによくあるプロフィール欄になります。

このブログでは、以前までこのような形になっていました。

スクリーンショット 2018 07 20 14 57 50

まぁ悪いわけではないんですけど、パッと見たときに「名前」「仕事」がわかりにくいのが難点でした。

それと、Twitterのフォローボタンが、公式提供のものになっていて、ブログに馴染んでないような…?

 

こちらをこのように変更しました。

スクリーンショット 2018 07 20 17 08 52

うん、スッキリしましたね。

「名前」と「職業」を独立させて、パッと見て誰なのかわかるようにしました。

また、SNSボタンの欄をブログ全体でも使っている色にすることで、目立たせると同時に、全体に馴染んだように思います。

今回のプロフィール欄のデザインは、WordPressテーマ「JIN」をかなり参考にしています。僕は「STORK」を使っていますが、JINを使えば、今回の作業を行う必要なく、単に情報を入力するだけでおしゃれなデザインを作れるので、めんどくさい方はご購入おすすめします。

カスタマイズの手順

では、カスタマイズのやり方を順に紹介していきます。

流れとしては、以下のようになります。

  • ①CSSをコピペ
  • ②-1. ウィジェットにHTMLをコピペ
  • ②-2. プロフィール情報を入力

①CSSを入力する

まずは、WordPress管理画面「外観」→「カスタマイズ」→「追加CSS」と進んで、こちらのCSSコードをコピペします。

( 子テーマのstyle.cssにコピペする形でも構いません。やりやすい方でOKです。)

 

デフォルトはSNSの欄が水色なので、「/*好きな色を適用させてください*/」の項は、自分のサイトに合ったカラーコードを入力します。

カラーコードがわからない人は、HTML Color Codeで好きな色のコードを探してみるといいですよ。

②ウィジェットにHTMLをコピペ

続きまして、WordPress管理多面「外観」→「ウィジェット」に進みまして、ウィジェット「カスタムHTML」を表示させるサイドバー欄に移動させます。

ここでこちらのHTMLコードを入力します。

 

あとは必要なプロフィール情報を入力していくだけです。

デフォルトではこちら用意しています。

  • プロフィールページへのリンク
  • プロフィール写真のURL
  • 名前
  • 仕事
  • プロフィール分
  • 各SNSのURL

何か他のSNSも紹介したいとか、メールアドレス追加したいって場合は(@okapo192)まで連絡くれたらアップデートします。

ここまで終わったら、保存ボタンを押してブログを更新すれば、プロフィール欄が出来上がっているかと思います。

デフォルトはSNSアカウントがあることを前提に作っていますが、もしSNS欄が必要ない場合は、こちら削除してください。

注意:font-awesomeを使用している

こちらのカスタマイズでは、SNSのボタンの部分に、font-awesomeというアイコン素材を使用しています。

もしアイコンが表示されない場合は、ご使用のWordPressテーマがfont-awesomeを読み込んでいない状態です。

 

その場合は、WordPress管理画面「外観」→「テーマの編集」→右側のバーにある「header.php」に進みます。

そこで<head>〜</head>で囲まれたスペースの中に、こちらのコードをコピペします。

よくわかんない場合は</head>の直前に貼ればOKです。

プロフィール欄は名刺です

ブログのプロフィール欄は、言わばあなたの名刺となる部分です。

人のブログを見るときに、プロフィール欄を欠かさずチェックするのは僕だけですかね?

その時に、適当に書いていたり、情報が少なかったりすると、もう2度と見ることはなかったりします汗

 

逆にプロフィールが魅力的だと、継続的なあなたのブログを見にきてくれるファンになる確率も上がります。

パッと見てどんな人かわかる、魅力的なプロフィール欄を作って、読者の身近な存在になりましょう。

【STORK】トップページにカテゴリー切り替えタブを導入する【カスタマイズ】

2018.06.25

【WordPress】STORKで記事抜粋を削除する手順【カスタマイズ】

2018.06.14

ABOUT

海外ノマド系フリーランス, ブロガー, WEBエンジニア, 24歳。フットワーク軽く生きたくて、新卒でフリーに。その後、海外35カ国を旅しながらノマドワーク。現在は1ヶ月ごとに拠点を変えつつ、旅生活を継続中です。勉強が大好きで年に3回語学留学をします。 

>>詳しいプロフィールはこちら!