Xeoryサイドバーにプロフィール欄を作成する方法
ブログには必ずと言っていいほど存在するプロフィール欄。そのプロフィール欄をXeoryのサイドバーに作成してみました。その方法をご紹介します。
画像を用意する
まずはじめにプロフィール画像を用意します。画像の内容はなんでもいいのですが、サイズだけ注意が必要です。
仮に大きいサイズの画像を設定した場合でも、今はブラウザ側で自動的に画像を縮小してくれます。その為、大きくレイアウトが崩れることはないと思いますが、自動縮小することによる表示速度の低下や、意図しない形での縮小が懸念されます。
そのため、自動縮小されない程度のサイズの画像を設定するようにしましょう。私は200 × 200ピクセル程度のサイズで作成しました。
画像を登録する
プロフィール画像をまずはWordPressにアップロードします。左メニューの「メディア」＞「新規追加」から以下の画面を表示します。
「ここにファイルをドロップ」または「ファイルを選択」より対象の画像をアップロードします。アップロードすると以下のように画像が追加されます。
「編集」ボタンを押して画像の詳細情報を設定します。
ここで必ず設定する必要がある項目は「代替テキスト」です。「代替テキスト」は何かしらの理由で画像が表示できない場合に表示されます。「プロフィール画像」とか入力してよいでしょう。
「キャプション」は画像の下に文字を表示したい場合に設定してください。私は設定しませんでしたが「自画像」とかってキャプションをつける方もいらっしゃいますね。
「説明」は管理用のメモ欄です。一目見て画像の内容や使用している記事がわかるなら設定する必要はありませんが、似たような画像が多い場合などは設定しておいた方がいいと思います。
必要な情報の入力が完了したら忘れずに「更新」ボタンを押しましょう。あと、ファイルURLはあとで必要になりますのでメモ帳などに保存しておいてください。
プロフィール欄を作成する
いよいよプロフィール欄の作成です。「外観」＞「ウィジェット」から以下の画面を表示してください。
画面が表示されたらウィジェット「テキスト」をサイドバーに追加します。追加はサイドバーにドラッグするか、クリックすることでおこないます。
追加すると以下のように赤枠のエリアが表示されますので、必要な情報を入力します。
「タイトル」はウィジェットのタイトルになります。「タイトル」も表示されますので、「プロフィール」とでも入力しておきましょう。
次に「内容」の設定ですが、以下の文言にさきほどメモ帳に保存した「ファイルURL」を追記してください。これがプロフィール画像を表示するコードになります。
<img src="ファイルURLを設定">
あとはお好きなようにプロフィールを書いていただければ、以下のようにサイドバーにプロフィール欄が表示されます。
おわりに
レスポンシブデザインに影響がないように今回はサイズが小さい画像を使用しましたが、もっとしっかりとレスポンシブデザインを意識した作りにすることも可能です。ただ、あまりメリットがないので私はこの方法でよいと思っています。