私が使用しているのはテーマはAFFINGER(アフィンガー)なんですが、標準のプロフィール機能が機能的には素晴らしいのですが、デザイン的にはあまり好みではないので、LINE風のプロフィールを設置してみました。
他のテーマでも設置可能だと思うので、気に入った方は試してみて下さい。
LINE風プロフィールとは
LINE風プロフィールとはこんな感じのプロフィールです。
メジャーなテーマでいうとSANGOもこんな感じのプロフィールですね。
LINE風プロフィールの設定方法
画像を準備する
まずは画像を準備します。
上部の背景用の画像と顔用の画像をメディアにアップしてください。
あとでCSSで中心を基準に切り取られるので手頃なサイズで用意してもらえば大丈夫です。
顔画像は正方形にしておいた方が扱いやすいかもしれません。
画像をアップしたら、画像のURLをチェックしておいてください。
アップした画像をクリックして以下の部分のURLになります。
HTMLをサイドバーウィジェットに記入
- メニューの「外観」から「ウィジェット」を選択。
- HTMLを記入できるようなウィジェットをサイドバー部分に設置
- 内容部分に下にあるHTMLコードをコピペ。
- (名前)(説明文)(twitterのID)(facebookのID)(RSSのURL)などの部分を自分用に変更
cssを子テーマのCSSファイルに記入
- メニューの「外観」から「テーマの編集」を選択。
- 「style.css」ファイルが開くので、適当な部分にコピペしたCSSを記入
- (背景画像URL)や(プロフィール画像URL)部分を自分用のURLに変更
まとめ
LINE風プロフィールをWordPressのサイドバーに設置する方法、いかがでしたでしょうか。
アフィンガーのデフォルトならこれで問題なくプロフィールを導入できると思います。
アフィンガーをカスタマイズしていたり、他のテーマの方などは、カラーやmargin、paddingなどを調整すればうまくいくと思います。