Luxeritasでサイドバーにプロフィールと画像を設置してみよう！

Luxeritas（ルクセリタス）のサイドバーにプロフィールを設定したい。

サイト内に自分のプロフィールがあることで、自分のことを知ってもらうためにも大切なこと。この項目があることで相手に好印象を与え、アクセス数増につなげるきっかけづくりになります。

そこで、Luxeritasのプロフィールの設定方法を解説していきましょう。

プロフィールの設定の目的とは

そもそもグローバルナビに設定しているプロフィールをどうしてサイドバーに表示する必要性があるのでしょうか？

プロフィールをサイドバーに表示する目的には、下記のようなメリットがあります。

プロフィールを見やすい位置に掲載することで、人とのつながりが増え、リピーターが多くなることがあります。また写真や画像を掲載することで、誘導率が変化することもあります。

じゃあ、「自画像がいいのか」「サイトのイメージキャラクター」のどちらがいいのかというと、これは、一概にもはっきしたことは言えません。

自画像で誘導率が上がるケースがあるようですが、自画像⇒自画像を変えても誘導率が落ちるケースもあるため、この辺は試しながら、設定していく必要性があるようですね。

プロフィールの設定位置

それでは、プロフィールの設定位置について解説していきましょう。

１．設置項目位置

まずは、下記を選択しましょう。

これができた後で、ウィジェットから「カスタムHTML」をまずウィジェット（サイドバー）に追加していきましょう。

２．「ウィジェット」 ⇒「カスタムHTML」を選択、まずウィジェット（サイドバー）に追加

カスタムHTMLを選択したら、それを下記のように、カスタムHTMLをドラッグ＆ドロップで下の左位置追加をしていきます。

このウィジェットの項目に移すことで、実際の画面に表示されるようになります。

プロフィールの設定方法

それでは続いて、プロフィールの設定を作っていきましょう。

カスタムHTMLをウィジェットに追加

まずは、カスタムHTMLをウィジェットに追加してから、プロフィールのタイトルと内容部分に、プログラムを記述していきましょう。

プログラムの記述は、下記の内容をコピーして見様見真似でまずは作ってみるよ良いでしょう。

プロフィール画像のサイズ調整の仕方

続いて、プロフィール画像の設定の仕方について解説していきましょう。どうせプロフィールを設定するのであれば、できれば画像も設定しておきたいものです。

しかし実際には、普通のプロフィール画像をそのまま画像表示しても、中心に表示されしまい、画像と文章が重なった状態で表示されてしまうため、

これでは、プロフィール文章と画像がみえにくくなってしまいます。そこで、CSSで表示位置を設定することもできますが、下記のように設定することも可能です。

＜プロフィール画像の設定の仕方＞

このようにして、ペイントで上部半分ぐらいにサイズ調整していきます。

そして、なるべく小さ目のサイズで調整後、この画像を自分が借りているレンタルサーバーに直接アップロードしていきます。

サーバーのアップロード先は、下記になります。

こちらに格納しましょう。

またこの画像の「格納先」と「カスタム HTML」の設定位置を同じになるように設定してあげることで、画像が表示されます。

まとめ

このように、プロフィールの画像をサイドバーに表示すると、うまく表示できないことがあります。それには、画像そのものを調整してしまう方法とCSSで調整する２つの方法があります。

自分のわかりやすいやり方で、サイドバーにプロフィール画像を設定して、多くのユーザーに届けることができるサイト設計を行っていきましょう。