広告・PR(アフィリエイト広告を利用しています)

ブログ・WordPress

ブログにプロフィール画像【其の2】ウィジットを利用してサイドバーに表示しよう

sayakaです。

昨日はブログに表示するProfile画像に使用できる、無料アバター作成サイトの紹介をしました。今日はsimplicityブログに実際に表示するための手順をご紹介しようと思います。

画像が決まったら、表示させよう!

ブログに表示するProfile画像は決まりましたか?

これだ!と言う画像が決まったら、早速ブログに表示させる為の設定をしましょう♪
私も使用している、WP初心者にも優しいテーマのsimplicityなら簡単にサイドバーに画像を表示させることが出来ますよ。初心者の私もできたので、ご心配なく!!

 

私が参考にさせて頂いたサイト様です↓

http://pontopi.com/how-to-setup-profile-sidebar-simplicity-wp/

WPを始めたばかりでも、Ponta様の解り易い解説のおかげで一発で表示できました。

 

では、これから順を追って説明していきますね。

 

プロフィール画像の表示方法

PC内のファイルに画像を保存したら、まず最初にPCに保存した画像をWP内のメディアにアップロードする事から始めます。

画像をメディアにアップロードする

WP管理画面の『メディア』マウスポインタを乗せると、『新規追加』と表示されるのでクリックします。

profileimage-setup1

 

画面中央に表示された『ファイルを選択』クリックして、保存したファイル内の画像をクリックします。

profileimage-setup2

 

PCファイル内の画像をクリックしたら、上の画像の真下にアップロードした画像が表示されます。右端の『編集』をクリック→『メディアを編集』と言う画面が開くので、画面内の右側にある『ファイルのURL』内をコピーし、メモ帳に貼りつけて置きます。

profileimage-setup3

 

ウィジットを開きます

管理画面の右側、先ほどのメディアより下に『外観』があるのでポインタを合わせます。画像のように『ウィジット』が表示されるのでクリックで開きます。

profileimage-setup4

 

ウィジット一覧が表示されているので、『テキスト』をドラッグドロップでサイドバーウィジット欄へ移動します。

profileimage-setup5

 

 

サイドバーウィジット欄に移動した『テキスト』を開きます。

 

『タイトル』に運営者とか、管理人などの好みの名前を付けます。私の場合は「赤字家計を脱却したい人」と入力しています。

 

続いて『内容』の部分に、下記をコピーペーストします。

<center><img src="画像URL" align="center" width="画像サイズ" height="画像サイズ"></center>

画像URL部分に、メモ帳に貼りつけていたprofile画像のURLをコピペします。
画像サイズ部分には、お好みのサイズを入れてくださいね。

ちなみに私は、width=220・height=210 のサイズにしています。

 

次に、『画像の下に表示する文章』を入力していきます。
私のProfile画像を例にしてみますね。画像を貼りつけた後に、ハンドルネームから始まる簡単な自己紹介を書いています。

profileimage-mihon

自己紹介文の下には、ヘッダー下のグローバルメニュー内にある固定ページの『Profile』に飛べるようリンクを貼っています。より詳しく知りたいと思った読者さんが読めるように、固定ページに詳しいprofile記事を書いておくのも良いかと思います。

 

詳しいprofile記事へのリンクは、下記をコピペしてみてください。

<a href="リンクしたい記事URL" target="_blank">リンク先へ案内する文章</a>

リンクしたい記事URLに、各当固定ページのURLを入れ、リンク先へ案内する文章の部分に「詳しいprofileはこちらから」などの文章を入れてみましょう。

 

ここまで出来たら、内容欄の下にある『自動的に段落追加する』にチェックを入れて『保存』をクリックで完了です!!お疲れ様でした。

 

画像のサイズや文章などの変更はいつでも可能

画像のサイズや文章を変更したくなったら、いつでもテキストウィジットを開いて変更できます。もちろん、画像URLを入れ替えて、画像自体をまるっと変更することも出来ます。

ブログの雰囲気に合わせて、カスタマイズを楽しんでみましょう♪

 

ウィジットについて

今回使った『テキスト』以外にも『パソコン用テキストウィジット』と『モバイル用テキストウィジット』があることに気が付きましたか?

文字通り、PC画面でのみ表示されるテキスト・モバイル画面でのみ表示されるウィジット・両画面で表示されるウィジットと用途別にウィジットが用意されています。

今後、カスタマイズして行く中で「これはPCのみに表示させたいな」など思った時に、とっても便利な機能です。用途によってウィジットを選んでカスタマイズを楽しみましょう♪