ネットと副業

副業が本業の収入を大きく超えたので会社やめました

WordPressでサイドバーウィジェットを使ってサイドバーにプロフィールをいれよう。

投稿日:


サイドバーにこんな感じで自己紹介をいれたいです。よく見ますよね。こういうやつ。

プラグインで実現できないかなぁといろいろ調べてみましたが、機能面でちょうどいいもので、かつ安心して使えそうなものがなかったので、ちょっとがんばってHTMLを使って実現させましょう!

まずはウィジェットを用意

サイドバーはウィジェット機能で簡単にいじくれますので、ウィジェットを使っていきましょう。

外観>ウィジェットを開きます。

 

左側の利用できるウィジェットからテキストを、右側にドラッグアンドドロップします。

 

右側にいれこんだテキストをクリックすると、タイトルと内容を編集できる画面がひらきます。


とにもかくにも、自己紹介を入力していきましょう。タイトル部分は表示されません。
入力できたら保存をお忘れなく。

こんな感じでツラツラと入力してみますた。
表示するとこんな感じ。

これだけでも悪くないすが、なんとも味気ないのでカスタマイズしていきましょう!!

 

HTMLを使ってカスタマイズ

ここでちょころびっと、HTMLが必要になってきます。サイドバーウィジェットのテキストは、なんと申しましょうか、ただのテキストです。記事投稿のときは入力した情報を、ある程度自動的にHTMLとして装飾してくれますが、サイドバーウィジェットのテキストはそれをしてくれません。

HTMLとか苦手だなーって方も、コピペでできちゃうのでチャレンジしてみましょう!

 

画像をいれてみる。

固定ページでプロフィールを作成したときに、自分のプロフィール画像をWordPressにアップロードしたかと思われます。その画像を使います。

メディアからプロフィール画像を開きます。
URLの箇所を全選択してコピー!

プロフィールを入力したウィジェットを開いて、↓こんな感じで入力します
<img src=コピーした画像のURL>
わたしの場合こうなります。
<img src=http://dafneta.com/wp-content/uploads/2017/04/profile.jpg>


保存してページを表示してみましょう。
どどーん。

 

改行をいれてみる。

プロフィール文章の中の、《部屋の管理人 自己紹介》とWordPressの間に改行がほしいところです。
ウィジェット上は改行されてますが、表示上はされておりません。なぜなのか….

ここもHTMLを入力して解決します。
改行したい箇所に
<br>
と入力します。
HTMLの改行指示です。

 

できました!!

 

プロフィールページへのリンクをいれてみる。

最後に前回作成したプロフィール詳細へのリンクをはっておきましょう。
まずは自分のプロフィールページを開いて、ページのURLをコピーしておきます。

 

ウィジェットにこんな感じで入力します。
WordPressサイドバーにプロフィールをいれる
<a href=”自分のプロフィールページのURL”>リンクを貼りたい文章</a>

深く考えずにコピペして使いましょう。

いい感じでリンクが表示されます!

 

プロフィールは読者にとっては大事な情報です。しっかりプロフィールを充実させておくと親切ですね!

-

執筆者:

関連記事

no image

スマホのブラウザでページ全体をキャプチャーしたい

お仕事で「ランディングページを使って求人しよう」ってことこで PC版とスマホ版のランディングページを制作しました。 PC版のページはさておいといて、スマホ版のページを 校正するのにアホみたいに苦労して …

Windows10で画面右下のタスクバーの時計に秒数も表示する方法

わたくし、長年(約15年以上)、ずーっとMacintoshユーザーでございます。Apple信者というわけではなく、選んだ仕事がMacしか使わないお仕事だったので、ずーとMacを使っておったわけです。 …

iPhoneで動画でスクリーンショットを撮る方法

iPhoneでアプリを操作しているところを動画にしたいのです。 アプリの操作説明を動画にしたり、実際にスマホの操作は動画にした方がわかりやすいですよね。 新しく動画スクリーンショット用のアプリが必要か …

no image

アメブロにGoogleマップを貼る方法(ホームページに貼る場合もほぼ同じです)

誰でもGoogleMapはれます! アメブロの記事の中にGoogleMapをはっつけたいときありませんか?ひと昔前は、ホームページにGoogleMap貼るのに、GoogleMapのapi読み込んで位置 …

no image

《iPhone買い替え》その4 〜事前準備 ゲームアプリのバックアップGameCenter〜

iPhone買い換え前の事前準備だけで、疲れてきました(;´Д⊂)フゥ〜 ゲームアプリをバックアップします。 ゲームについては、わたくし、無課金ライトユーザーなのですが、BoomBeachだけずっとや …