Wordpress

【WordPress】サイドバーのプロフィールに画像と文字を並べて表示する方法

投稿日:2016-06-19 更新日:

 

るしる(@646blog)です。

 

前回の記事

【Wordpress】サイドバーにプロフィールを設置する方法。その1(リンク・枠つき)

を今日は、さらにカスタマイズしていきたいと思います。

 

スポンサーリンク

プロフィール画像を表示させる

 

メディアに使いたい画像をアップロードしておきます。画像のコードは新規投稿で作ります。

 

「メディアを追加」をクリックし、使いたい画像をクリックすると左側に詳細が表示されます。

 

7

 

画像の大きさなのですが、私の使っている画像の大きさで70×70です。大きく表示したいときは150×150で中央に表示するとバランスが良いかと思います。

 

画像の配置は「添付ファイルの表示設定」配置のプルダウンから選び、「投稿に挿入」をクリックします。

 

8

 

コード(赤枠)が表示されるので、コピーしてウィジェットのテキストに貼りつけます。

 

9

 

これでも良いかと思うのですが、右上が寂しい気もします。

 

画像の横にも文字を配置

 

画像の横にも文字を表示させる=回り込む と言うようです。先程作った画像のコードに[style=”float:left”]を追加します。

 

 

ウィジェッドのテキストにコードを追記すると以下のようになります。

10

 

画像の右側に文字を表示することができました。「ブログ著者」の部分に名前を表示させている場合は、追記したコード以降に本文であるプロフィールを書けば良いと思います。私はもう少し、文字のバランスも含め調整してみます。

 

完成品

今日の完成品はこちらです。
11

 

画像右の名前は太字にし、twitterのリンクも付けました。文字の配置は空白を入れて少しずらしてあります。通常でテキストにスペースキーを入れても空白は出来ないので、以下のコードを使います。

 

 

[5em]の数字は空白の数です。

今回作ったテキストのコードは以下のようになります。

 

 

なかなか文字のバランスが取れなかったので,空白と改行のコードを使って微調整しました。

 

まとめ

 

今日作ったコードも念のためevernoteにメモしておきました。作ってるうちにコードが抜けたり、元に戻したくなった時のために別途保存は大事です。

 

楽しい作業なので次々にカスタマイズしたくなるのですが、今日はここまでとさせていただきます。まだまだ進化させる予定です。

 

アディオス!

この記事が気に入ったら
いいね ! しよう

Twitter で

    関連記事    


-Wordpress
-

Copyright© るしるし , 2017 All Rights Reserved Powered by AFFINGER4.