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

234243images

前々からブログのサイドバーにプロフィール画像を載せたいと思ってたんですが、なんだかんだで、先延ばしにしてました(^_^;)

調べてみると、プラグインを使ってやる方法もありましたが、過度にプラグインを導入するのもどうかと思ったので、もっと簡単な方法をとりました。

今回は下記サイトを参考にしながら作成してみました。

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

こちらに分かりやすく載ってたんですが、html知識のない自分はちょっとてこずったので、それも含めて書いていきます。

スポンサーリンク

 手順

やり方についてですが、まずはダッシュボードの外観⇒ウィジェットへいきます。

そこで、左下にあるテキストを右側のサイドバー欄に挿入します。

この画像もお借りしてます。面倒なので(笑

テキストをクリックすると、入力欄が出てくるのでそこに、

<img src="画像のURL" align="left" vapace="5" hspace="5">
性別:男<br/>
年齢:秘密<br/>
HTML、CSS、PHP初心者。<br/>

こちらをコピペで貼り付けます。(これも転載)

黄色の部分に自分のプロフィール画像にしたい画像URLを張り替えます。

画像URLの取得方法

お手本サイトに書かれているやり方がイマイチ分からなかったので我流になります。

ブラウザがFirefoxかグーグルチャームの場合(IEは不可)

画像の上で右クリックをするとこんな画面が出ると思います。

o0312031712659388625

ここをクリックすると、画像のURLを取得することができます。

IE(インターネットエクスプローラー)の場合

画像の上で右クリック⇒プロパティ

アドレス(URL)の部分をコピー

これが、画像のURLになります。

参考サイト⇒ 超簡単!!ブログの画像のアドレス(URL)の取得方法

スポンサーリンク

意外と難しい

画像のURLが取得できたら、先ほどのhtmlに書き換えましょう。

しかし、僕の場合は上手くいきませんでした。そのまま張ると・・・

2014y04m10d_112713494

あれ・・・?

なんか右にはみ出してる。なんでだろう?

さっきまで色々悩んでましたが、画像を加工していたことが原因でした。

横幅を縮めていたので、自然と文字が上に来てしまったんですね。

もし画像を加工した場合は

<img src="画像のURL" align="left" vapace="5" hspace="5">
性別:男<br/>
年齢:秘密<br/>
HTML、CSS、PHP初心者。<br/>

黄色の部分を「center」にすると、上手く表示できます。しかし、これだと微妙に位置がずれています。

2014y04m10d_113337891

もちっと右に寄せたい・・・

そこで、「vapace」と「hspace」は余白を調整できる言語なので、僕の場合は「hspace」を30とかに調整すると、中央に表示されました。

2014y04m10d_113449161

めっちゃ細かいけど。。。

あとは下にプロフィール文章を書いて終わり

2014y04m10d_115558841

なんてネガティブなプロフィール(^_^;)

まあ、これも個性ってことで。

次の記事

朝日の販促カレンダーで季節物をアフィリエイト!

スポンサーリンク