はじめに
こんにちは！
最近はおりじなるキャラクターのOMAME（おまめ）でも
つくろうかと瞑想しております・・・
本日もブログを書いているのですが、
周りの方々でブログの右上にかっこいいプロフィールのカードが載っている方が
たくさんいらっしゃることに気づきました！
簡単なプロフィールだけでなく、画像や、SNSのボタンまで・・・！
かっこいい、まねしたい！ということで調べてみました！
どうやら簡単に設定するためには、Wordpressの中の
Wighet（ウィジェット）を使うと良い！
ということがわかりましたので、ウィジェットを自作する方法と、
カスタムHTMLはどこから入力するのかを紹介いたします！
意外とカスタムHTMLが見つからない、ない、どこにあるのという現象が多いそうなので・・・そちらも紹介いたします！
かっこいいプロフィールを作るためのHTML、CSSに関してはいろんな方が紹介しております！
その中でもこの記事では、ゆにメモさんというすばらしいブログを見つけましたので、HTMLとCSSはそちらを利用させていただきました！
素晴らしいプロフィールのHTMLとCSSを公開している方！＞＜
今回試したところ、どうしてもアイコンの位置がずれてしまうので、そちらを修正する方法も下記記事で紹介いたしまた！
ちなみにわたしはおまめというキャラクターを作りましたが、ご自身のイラストなどを使っている方も多いです！こちらはWEBのココナラで無料登録＆簡単にご依頼ができますので、ぜひ！
ウィジェットのカスタムHTMLを利用する方法！
ではさっそく、ウィジェットのカスタムHTMLを利用してかっこいい
プロフィール設定に挑戦してみようと思います！
ちなみに、こちらのブログを書く前のTOPページはこのようになっております・・・
ウィジェットを編集する！
ワードプレスの【外観】→【ウィジェット】を選択しましょう！
つぎに、利用できるウィジェットの中から
カスタムHTMLを選択しましょう！！
ここです！（見つけるのに時間かかってしまいました・・・・）
つぎに実際にHTMLを入れてみましょう！！
私は冒頭で紹介させていただいた、ゆにメモさんのHTMLとCSS（CSSは別箇所に入力）を入れさせていただきました！
次にCSSの記入をします！
CSSに関しては、【外観】→【CSS編集】から編集することができます！
つぎに、ゆにメモさんのプロフィールCSSを記入します！
ここでおすすめなのは
/* 文字 */とすることでCSSにメモをいれることができますので、
画像のように、このCSSは何かを明記して記入することをおすすめします！
結果
こんな感じになりました！
ちょっとずれたり写真が中に入らなかったりなどはCSSを直接編集してそれっぽくしました！
SNSのボタンだけ少しずれてるので・・下記方法で修正いたしました！・・・！
上記方法できれいに修正することができました！
携帯関係の記事も書いてありますので、ご興味あるかたぜひ！
- auから楽天モバイルUN-LIMITの8つメリット
- auから楽天モバイルUN-LIMITへ実際にしてみた
- auのSIMロック解除方法
- 楽天モバイルにお得に申し込みには？
- 楽天モバイルでテザリングできないときの解決方法
- 楽天モバイルUNLIMITの通信速度は？確認方法は？
- 楽天モバイル1年間無料終了？！
- 楽天モバイル速度制限でもYoutubeは見れる？
- 楽天モバイルesim+eKYCってなに・・・？
またブログ執筆をしている方でもHTML、CSS、Javascriptの基礎的な知識はもっていただくことをおすすめしております。下記記事で詳しく紹介しておりますので、気になる方は御覧ください！
人生が変わるかも？本気でプログラミング教室に関して解説しております。
知ってる人はやっている・・・・・
ネットショッピングでポイントを+1%貰う方法はこちらを登録するだけ！
