プロフィールページを設定していないことに気づいたので今回はプロフィールページの設定について、そしてプロフィールページに吹き出しをつけたのでそのカスタマイズについて書いていきます。
プロフィールの設定
プロフィールの作り方はいろんなサイトで可愛いカスタマイズが紹介されています。気に入ったデザインのものを使わせてもらうと良いと思いますが、私はcocoonのプロフィールがシンプルで良いなと思ったので、ワードプレスのメニューからサクッとプロフィールの設定をしました。
はじめに
まず、ワードプレスのダッシュボードを開いたら、サイドメニューの「ユーザー」→「あなたのプロフィール」に進みます。
表示させたい情報を記入
前半の難しいところにはいっさい触れずにさささーっとスルーしてw、プロフィール情報について記入していきます。
わたしの場合ですがサイト欄はメインサイトである育児ブログの方のアドレスを載せました。
連携したいsnsのアドレスもここで記入します。
「プロフィール情報」のところで記入した本文がプロフィール欄に表示されるので、お好きな本文を記入してください。
プロフィール画像の設定
私はgravatarという機能を使ってアイコンを表示させていますが、使わなくてもこのプロフィールページからプロフィール画像の設定ができます。「select image」のところで、プロフィール画像のファイルを選択して、「アップロード」を押せばokです。
ウィジェットにプロフィールを追加
先程作成したプロフィール情報を、ウィジェット（サイドバー）に追加します。 まず、「外観」→「ウィジェット」に進みます。
利用できるウィジェット欄から、「プロフィール」を選択し、「サイドバー」にチェックを入れてウィジェットを追加してください。
サイドバーからプロフィールの表示設定
サイドバーに追加された「プロフィール」の項目を開いて、プロフィールがどのように表示されるかを設定してゆきます。「タイトル」のところは「プロフィール」でも「自己紹介」でも好きなものを記入してください。
「画像を円形にする」にチェックを入れると、先程設定したプロフィール画像がまるーく切り取られてちょっと可愛くなります。
わたしはここに吹き出しを作成して、「hello！」と挨拶しているような装飾をしました。
▽完成系を先に見る▽
このピンクの吹き出しの部分がわたしがカスタマイズした部分です。
吹き出しの作り方はサルワカさんの記事を参考にさせていただきました。
参考：CSSで作る！吹き出しのデザイン19選
サルワカさんのサイトはとってもわかりやすいのでそちらを見ていただいた方が100億倍わかりやすいかと思うんですがw、記録として一応手順を載せておきます。
吹き出しのデザインを設定する
CSSの追加
まずは外観→CSS編集に進み、CSSを記入します。▽実際に追記しているCSS▽
.balloon1 {
position: relative;
display: inline-block;
margin: 1.5em 0;
padding: 7px 10px;
min-width: 120px;
max-width: 100%;
color: #fff;
font-size: 16px;
background: #ff8e9d;
border-radius: 15px;
}
.balloon1:before{
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -15px;
border: 15px solid transparent;
border-top: 15px solid #ff8e9d;
}
.balloon1 p {
margin: 0;
padding: 0;
}サルワカさんの公開されていたCSSをくっつけたり消したりしながらw、吹き出しの色や向きなどを調節しました。
「肩書きラベル」項目にhtmlを記入
先程、CSSで細かく指定した吹き出しを、htmlで呼び出す、というイメージかな・・・？とにかく、「ここにさっき作った吹き出しだすよ！」という意味らしいhtmlを肩書きラベルの項目に記入します。
▽「肩書きラベル」に記入したhtml▽
<div class="balloon1"> <p>ここに文字</p> </div>完成形はこちら
ピンクがちょっとしたポイントになって可愛いと自分では思っています！
SNSアイコンは何も触ってませんが、プロフィール情報のところで入れたものが自動的にアイコンになって表示されています。
全体的に小さめで可愛い。
カスタマイズ is FUN
よくカスタマイズする暇があったらブログを書けとブログ界隈では言われていますが、ある程度ブログを続けるため、つまりブログ愛を高めるためにもカスタマイズは必要だと私は思っています。ただ、そろそろ記事かけよって自分でも思うので一旦この辺にしときます。笑
記事かくぞ記事ー！！
わたし
何事もほどほどにな！
