WordPressで目を引くSNS風プロフィールの作り方【コピペOK!】

Wordpress

WordPressで目を引くSNS風プロフィールの作り方【コピペOK!】

2018年09月23日 6:50 

WordPressで目を引くSNS風プロフィールの作り方【コピペOK!】

おはようございます!社員Aです👩



WordPressでSNS風のプロフィールを簡単につくれる方法をご紹介します!

コピペOKなので、ブログなどで活用できます。

ぱっと目を引くSNS風プロフィールカード

当ブログでは、サイドバーにプロフィールカードを設置しています。

よく見るSNS風のプロフィールカードで、自己紹介はもちろんのこと、各SNSや仕事依頼への誘導も出来ますので、ブログからさらに仕事につなげたい方にもおすすめです。

コピペOKなので、初心者の方でも簡単に設置ができるようになっています。

 

プロフィールカードの設置方法

プロフィールカードをサイドバーに設置するには、2つのやり方があります。

  1. sidebar.phpを直接編集する
  2. 外観のウィジェットから追加する

WordPressを触りなれている方は①の「sidebar.phpを直接編集する」、あまり触りなれていない方や初心者の方は②の「外観のカスタマイズから追加する」方法がおすすめです。

 

①sidebar.phpを直接編集する場合

まずは、sidebar.phpを開き、プロフィールカードを設置したい位置に下記のソースコードを追加します。

それぞれ下記は自由に書き換えたり削除したりしてください。

  1. 背景画像URL
  2. プロフィール画像URL
  3. 名前
  4. プロフィール説明文
  5. SNSへのリンク(Facebook・Twitter・Instagram・Feedly・公式サイト)
  6. ボタン(外部リンクなど)

つづいて、style.cssへ下記を追加してください。

これで、サイドバーにプロフィールカードが実装できたと思います!

色はデフォルトで青色にしていますが、CSSなどで自由に色を変えちゃってください。



 

②外観のウィジェットから追加する

外観のウィジェットから追加をするには、ダッシュボードから、外観 > ウィジェットへと進みます。

サイドバーにカスタムHTMLを追加し、下記のソースコードを追加します。

それぞれ下記は自由に書き換えたり削除したりしてください。

画像URLは、メディアに画像をアップロードすることで取得できます。

  1. 背景画像URL
  2. プロフィール画像URL
  3. 名前
  4. プロフィール説明文
  5. SNSへのリンク(Facebook・Twitter・Instagram・Feedly・公式サイト)
  6. ボタン(外部リンクなど)

続けて、外観 >テーマの編集へと進み、「style.css」を開きます。

最終行に、下記のCSSを追加します。

これで、サイドバーにプロフィールカードが実装できたと思います!

今後プロフィール画像やSNSのリンクを編集したい場合も、先程と同様に、外観 > ウィジェットから変更できます!

 

まとめ

簡単に設置できて、目を引くプロフィールカードが実装できました!

そのまま使っていただいても良いですし、CSSをカスタマイズすることでよりオリジナル感を出せます。

SNSを沢山されている方も、こういうプロフィールカードでまとめた方が訪問者にもわかりやすく伝えることができます。

スマホからもキレイに見えますので、ぜひ試してみてください!

 

スポンサーリンク

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。ブログの執筆を通じて、やっと日本語Lv.20くらいになれた気がします。 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物が好きな皆さん、小動物トークしましょう!