ピッと気になるコトとモノをご紹介

カリルノ

当サイトでは、商品・サービスの紹介にアフィリエイトプログラムを利用しています。

ウェブ・ブログ

LINE風プロフィールをWordPressのサイドバーに設置する方法

投稿日:

私が使用しているのはテーマはAFFINGER(アフィンガー)なんですが、標準のプロフィール機能が機能的には素晴らしいのですが、デザイン的にはあまり好みではないので、LINE風のプロフィールを設置してみました。
他のテーマでも設置可能だと思うので、気に入った方は試してみて下さい。

LINE風プロフィールとは

LINE風プロフィールとはこんな感じのプロフィールです。
メジャーなテーマでいうとSANGOもこんな感じのプロフィールですね。

LINE風プロフィールの設定方法

画像を準備する

まずは画像を準備します。
上部の背景用の画像顔用の画像をメディアにアップしてください。
あとでCSSで中心を基準に切り取られるので手頃なサイズで用意してもらえば大丈夫です。
顔画像は正方形にしておいた方が扱いやすいかもしれません。

画像をアップしたら、画像のURLをチェックしておいてください。
アップした画像をクリックして以下の部分のURLになります。

HTMLをサイドバーウィジェットに記入

  1. メニューの「外観」から「ウィジェット」を選択。
  2. HTMLを記入できるようなウィジェットをサイドバー部分に設置
  3. 内容部分に下にあるHTMLコードをコピペ。
  4. (名前)(説明文)(twitterのID)(facebookのID)(RSSのURL)などの部分を自分用に変更

+ HTMLコードはこちらをクリック

cssを子テーマのCSSファイルに記入

  1. メニューの「外観」から「テーマの編集」を選択。
  2. 「style.css」ファイルが開くので、適当な部分にコピペしたCSSを記入
  3. (背景画像URL)や(プロフィール画像URL)部分を自分用のURLに変更

+ CSSコードはこちらをクリック

まとめ

LINE風プロフィールをWordPressのサイドバーに設置する方法、いかがでしたでしょうか。

アフィンガーのデフォルトならこれで問題なくプロフィールを導入できると思います。
アフィンガーをカスタマイズしていたり、他のテーマの方などは、カラーやmargin、paddingなどを調整すればうまくいくと思います。

-ウェブ・ブログ
-

Copyright© カリルノ , 2024 All Rights Reserved.