初心者向け:似顔絵プロフィールをワードプレスのサイドバーに表示する方法

ワードプレス

サイドバーにプロフィール欄を作ろう

簡単なものだがサイドバーに似顔絵付きのプロフィール欄を作った。似顔絵の入手方法とその表示方法をまとめたい。

まずは似顔絵を入手しよう

僕はイラストレーターじゃないので絵が得意ではない。そこで今回は似顔絵を作成してくれるFACE YOUR MANGAというネットサービスを使った。自分に似ているかどうかはこの際問題としないことにしよう。

»Face Your Manga(似顔絵ジェネレーター)

Face Your Mangaは外国のサービスなのでメニューが英語だが基本的には絵のパーツを選ぶだけなので英語が苦手な人でも問題ないだろう。日本人でも使用できるクセのない絵柄である。

まず画面上のメニューから「CREATE」を選んで新規作成画面に入る。

Face Your Manga

次は性別を選ぶ画面になるので、左の男か右の女のどちらかを選ぼう。

Face Your Manga 性別を選択

次は実際に似顔絵を作成する画面に入る。最初は顔の輪郭を選ぶ画面だが、画面右のアイコンや文字をクリックすると、髪型や服装など他の要素を選べるようになる。

手当たりしだいクリックして何が変わるか試してみよう。似顔絵がどう変わっていくかは画面左側に表示されている。

Face Your Manga 作成中

納得いく似顔絵が完成したら画面右上のSAVEをクリック。

SAVEを押すと名前やメールアドレス等の入力画面になる。

Face Your Manga メール

ここで注意してほしいのが、僕の環境だとキーボードから名前とメールアドレスを入力しようとしてもなぜか反応しなくて入力できなかった。なのでメモ帳などに名前とメールアドレスを入力してそれをコピペした。名前は本名ではなく適当なニックネームでOK。

そしてSAVEを押すとメールでダウンロードリンクのアドレスが送られてくる。ちなみにこのFace Your MangaからのメールはGメールだと迷惑メールフォルダで受信されていた。なのでなかなかメールが来ない方は迷惑メールフォルダも確認してほしい。

無事メールを受信できたらダウンロードリンクから似顔絵をダウンロードしよう。

スポンサーリンク

ダウンロードしたファイルをアップロード

ワードプレス管理画面左のメニューから、「メディア」→「新規追加」を選ぶと、画面に画像をドラッグしてメディアライブラリに追加できる。

ワードプレスのサイドバーに似顔絵プロフィールを表示する

ワードプレス管理画面左のメニューから「外観」→「ウィジェット」を選ぶ。

「利用できるウィジェット」の「テキスト」というのを、右側のサイドバーにドラッグ。さらにダブルクリックしてタブを開く。

そしてこのようにタイトルに「自己紹介」「プロフィール」など好きなように入力。内容には画像のアドレスと自己紹介文を入れる。

画像のアドレスは「メディア」→「ライブラリ」から該当する画像の編集を選ぶと、画面右側にファイルのURLというのが表示されるのでそれをコピーする。

そして挿入するには「img」タグを使わなければならないので、次のように書くと良いだろう。

<span style="float:left;"><img src="画像アドレス" width="画像の幅(90ぐらい)" alt="自分の名前"></span>

span style="float:left;というのは画像を左寄せにして、文字を画像の右に回り込ませるための記述。最後は「保存」を押すこと。

表示はこんな感じになる。

プロフィール float:left;

span~を書かないとこのように画像の下に文字が来る。画像を大きくしたい時は、画像の下に文字が来るようにしてもいいかもしれない。

プロフィール floatなし

ツイッターのフォローボタン設置

ついでにツイッターのフォローボタンを設置しよう。

まずツイッターにログインした状態でボタン入手ページに行く。そして下の画像のような画面が現れたら赤枠の箇所をお好みで変更。

ツイッターフォローボタンページ

画面右に出てきたコードをコピーして、プロフィールを入力したウィジェットにペーストしよう。そうするとフォローボタンが表示される。

ついでにFeedly登録ボタンも設置

FeedlyというのはRSSリーダーである。RSSリーダーというのは簡単に言えばサイトが更新された通知を閲覧者が受け取る場所である。閲覧者にとって便利なものなのでとにかくボタンを設置しておこう。

まずFeedlyボタンページへ行く

そうすると下のような画面が現れるので好きなボタンを選ぶ。

Feedlyボタン

次は自分のサイトのRSSフィードを入力する。

ワードプレスならば

http://自分のURL/feed

が自分のRSSフィードである。

Feedlyアドレス入力

次に出てきたコードをコピーして先ほどのツイッター同様、プロフィールウィジェットに貼り付ける。

Feedlyコードをコピー

そうするとプロフィール欄にFeedly登録ボタンが現れる。

ツイッターとFeedlyボタンを設置した結果がこちら。

プロフィール

無事ボタンを設置終了!誰かフォローしてください!

簡単なプロフィールが表示された

以上で簡単なボタン付きプロフィールが表示された。アドセンスの審査にもプロフィール欄があると有利などというウワサもあるので、プロフィール欄は作っておいた方がよいのだろう。

スタイルシート(CSS)をいじってもっと見栄えを良くしたりもできるだろうから、いろいろ挑戦してみてほしい。僕は古いテーマを使っているのでよくわからないが、テーマによってはもっと簡単にできるのもあるのかもしれない。

本当はもっと詳細なプロフィールページを作って、サイドバーのプロフィール欄からリンクするとよいのだろうが、僕は恥ずかしいので今のところ作っていない(汗)

スポンサーリンク


広告
広告