「プロフィール」はどうやって作るの? サイドウィジェットの使い方

profille_eyecatch

 

よく、ブログに

「自己紹介とか
「運営者プロフィール」

が書いてあるのを見かけますよね。

 

今日はアレの作り方をご説明します(*^_^*)

プロフィール欄の作り方

まずは「プロフィール欄」
どんなものかご覧ください。

私のサイトでいうと、
左側に出ている、この欄のことです。

プロフィールウィジェットの位置

 

これは

「運営者プロフィール、
なんちゃら~」という文字を

「ウィジェット」
という箱に入れて作っています。

私は左側に置いていますが
他にも置けますよ♪

テーマによって「ウィジェット」を
置ける場所が決まっています。

一般的には、左、右、下などに
おけるテーマが多いです。

 

ウィジェット、って何?

ウィジェット、という言葉
聞いたことありますか?

スマホで聞いたことある方も
いるかもしれませんね。

なんとなく、

「画面に好きに配置できるモノ」

というような意味だと思っていたのですが

ちゃんと調べてみました。

ウィジェットとは?

 

ウィジェットの翻訳画面

 

カタカナにしただけやないかΣ(´∀`;)

ちょっとウケた(笑)

 

冗談はさておき、簡単にいうと
画面に配置する部品の総称、
いうことで良いようです(笑)

 

というわけで
この「ウィジェット」というものを使って

画面に好きなもの…「自己紹介」を
配置していく方法を説明しますね。

 

ウィジェットメニュー

メニューの「外観」のなかに
「ウィジェット」があります。

 

これを開くと
こんな画面が出ます。

ウィジェット一覧

(※この画像は、テーマ「ジラフ」のものです。)

右側の白い枠が「ウィジェット」

それぞれ、ブログのどこに配置するか決まります。
(お使いのテーマによって異なります)

ではまず「サイドバーウィジェット」
自己紹介を入れてみましょう。

 

ウィジェットに自己紹介を入れる

 

次は左側の項目を見て下さい。

「利用できるウィジェット」
というところに、
いろんなメニューがあります。

ここからテキスト」を探してください。

これをマウスでぐいっとひっぱると
右側のウイジェットの中に
入れることができますよ。

 

サイドバーウィジェット使い方

マウスでドラッグして、
好きなウィジェットにのせて、

それだけで配置することが出来ます。

 

これで、「テキスト」が入りました。

でも、そのテキストはまだ
白紙の状態なので

ここに、好きな文字を
どんどん書いていくわけです。

テキストウィジェット

右側のウィジェットに
書いた文字が表示されてきます。

 

このように「テキスト」は
文字を書く場所をつくるものです。

 

ここに

【自己紹介】や
「運営者プロフィール」など

タイトルに入れて
自己紹介文を記入していけば
完成ですよ!

 

画像の入れ方

ただ、

この「ウィジェット」欄は横幅が狭く
長文を書くとこんな感じになり
ちょっと読みづらいですね。

プロフィール欄テキストサンプル

適度に行間を入れたり
文字の大きさなども
変えてみることと

肝心なのは

 

プロフィールですから
ご自身の写真を入れるのがおすすめです。

名前と顔を出すだけで
信頼感がぐっと高まりますよ!

 

 

画像の入れ方は…

htmlでコードを書きます。

 

あっ!

「コード!?無理!!」と叫んで
画面を閉じようとないでください!(笑)

簡単な方法がありますから!!

 

何も考えず
コピペするだけでいい方法を
こっそり(?)お知らせします。

 

 

画像の入れ方

 

ふつうに、コードを入れて
画像を挿入するには

<img src=”画像” alt=”説明文” height=”画像の縦幅” width=”画像の横幅” />

というようなコードを書くのですが

そんなことしなくても
もっと簡単な方法があります。

 

まず、新しく記事を投稿する画面で
普通に画像の貼り付けの操作をします。

ここで、「メディアを追加」を選び

メディアを追加

プロフィール画像にしたい写真を
記事に挿入します。

ここでのポイントは
横幅の狭い自己紹介の欄に入れる画像なので
サイズは小さめに
150px~200px前後にすることです。

 

挿入したら
鉛筆マークの編集ボタンを開きます。

 

挿入メニュー

カスタムサイズを選びます。

ここで画像の大きさを
好きな大きさに変更してくださいね。

画像が入りました(*^_^*)

 

いや、こんな所に貼り付けてどうすんの?

 

  • とお思いですよね(;´∀`)

実は、これは「コード」を
コピーするためのものなんです。

画像が挿入されたら、ここで
右側の「テキスト」タブを開いてください。

WordPressビジュアルエディタ・テキストエディタタブ画像

 

すると、
画像を入れるためのhtmlコードが
自動的に書かれています。

 

これをそのままコピーして
先ほどのウィジェットに貼り付けます。

ウィジェットも
よく見ると
「ビジュアル」と
「テキスト」があるので

テキストの方に張り付けて下さいね^^

 

ウィジェットタグ

 

これで保存すると

プロフィール欄に
画像が入りました~*(^o^)/*

プロフィール画像挿入例

 

このように、わざわざコードを
調べなくても

 

ワードプレスが
自動的に生成してくれるので
それをコピペしちゃう方が
らくちんですよ(*^_^*)

 

というわけで今日は
プロフィール欄の作り方
画像の入れ方でした。

お試しくださいね!

 

村重 敦子

「猫でもわかる!」くらい簡単にわかりやすく、WordPressの使い方をサポートする、WordPressソムリエです。デザインを学んだ後、なぜかレストランでワインサービスに従事。絵も描けるワインソムリエでした。その後大手通信会社に勤めIT・Webの各種サポートを経験。ソムリエもWebも常に「専門知識をお客様に合わせてわかりやすくご提案し、期待以上のサービスをする」ことをモットーとしています。テクニカルサポートの経験は、通算1,100人以上。現在はWebデザイン・ディレクターをしながら、ブログ集客をしたい方へWordPressの制作、使い方のレクチャーなどを行っています。

Pocket