WordPressで右上にプロフィールなど入れたい!ウィジェットを自作、カスタムHTMLで作成する方法を紹介します!

WordPressで右上にプロフィールなど入れたい!ウィジェットを自作、カスタムHTMLで作成する方法を紹介します!

はじめに

こんにちは!

最近はおりじなるキャラクターのOMAME(おまめ)でも

つくろうかと瞑想しております・・・

本日もブログを書いているのですが、

周りの方々でブログの右上にかっこいいプロフィールのカードが載っている方が

たくさんいらっしゃることに気づきました!

簡単なプロフィールだけでなく、画像や、SNSのボタンまで・・・!

かっこいい、まねしたい!ということで調べてみました!

どうやら簡単に設定するためには、Wordpressの中の

Wighet(ウィジェット)を使うと良い!

ということがわかりましたので、ウィジェットを自作する方法と、

カスタムHTMLはどこから入力するのかを紹介いたします!

意外とカスタムHTMLが見つからない、ない、どこにあるのという現象が多いそうなので・・・そちらも紹介いたします!

かっこいいプロフィールを作るためのHTML、CSSに関してはいろんな方が紹介しております!

その中でもこの記事では、ゆにメモさんというすばらしいブログを見つけましたので、HTMLとCSSはそちらを利用させていただきました!

素晴らしいプロフィールのHTMLとCSSを公開している方!><

今回試したところ、どうしてもアイコンの位置がずれてしまうので、そちらを修正する方法も下記記事で紹介いたしまた!

アイコンの位置がずれるときのCSS、HTMLの修正方法!Twitter、インスタ、LINEアイコンの位置修正!
アイコンの位置がずれるときのCSS、HTMLの修正方法!Twitter、インスタ、LINEアイコンの位置修正!
目次 1. はじめに2. プロフィール用にCSSを修正してみる!2.1. 1. 背景画像とアイコン画 […]

ちなみにわたしはおまめというキャラクターを作りましたが、ご自身のイラストなどを使っている方も多いです!こちらはWEBのココナラで無料登録&簡単にご依頼ができますので、ぜひ!

ウィジェットのカスタムHTMLを利用する方法!

ではさっそく、ウィジェットのカスタムHTMLを利用してかっこいい

プロフィール設定に挑戦してみようと思います!

ちなみに、こちらのブログを書く前のTOPページはこのようになっております・・・

wordpress-widget-custom-html1

 

ウィジェットを編集する!

ワードプレスの【外観】→【ウィジェット】を選択しましょう!

wordpress-widget-custom-html2

つぎに、利用できるウィジェットの中から

カスタムHTMLを選択しましょう!!

ここです!(見つけるのに時間かかってしまいました・・・・)

wordpress-widget-custom-html3

つぎに実際にHTMLを入れてみましょう!!

私は冒頭で紹介させていただいた、ゆにメモさんのHTMLとCSS(CSSは別箇所に入力)を入れさせていただきました!

wordpress-widget-custom-html4

 

次にCSSの記入をします!

CSSに関しては、【外観】→【CSS編集】から編集することができます!

wordpress-widget-custom-html5

つぎに、ゆにメモさんのプロフィールCSSを記入します!

ここでおすすめなのは

/*  文字 */とすることでCSSにメモをいれることができますので、

画像のように、このCSSは何かを明記して記入することをおすすめします!

wordpress-widget-custom-html6

 

結果

こんな感じになりました!

ちょっとずれたり写真が中に入らなかったりなどはCSSを直接編集してそれっぽくしました!

SNSのボタンだけ少しずれてるので・・下記方法で修正いたしました!・・・!

wordpress-widget-custom-html7

アイコンの位置がずれるときのCSS、HTMLの修正方法!Twitter、インスタ、LINEアイコンの位置修正!
アイコンの位置がずれるときのCSS、HTMLの修正方法!Twitter、インスタ、LINEアイコンの位置修正!
目次 1. はじめに 2. プロフィール用にCSSを修正してみる! 2.1. 1. 背景画像とアイコ […]

上記方法できれいに修正することができました!

携帯関係の記事も書いてありますので、ご興味あるかたぜひ!

またブログ執筆をしている方でもHTML、CSS、Javascriptの基礎的な知識はもっていただくことをおすすめしております。下記記事で詳しく紹介しておりますので、気になる方は御覧ください!

TechAcademy(テックアカデミー)のプログラミング無料体験の内容・評価、メリットからできることを紹介いたします!
TechAcademy(テックアカデミー)のプログラミング無料体験の内容・評価、メリットからできることを紹介いたします!
目次 1. はじめに 2. TechAcademyとは? 2.1. 運営会社 2.2. TechAc […]

 

 

人生が変わるかも?本気でプログラミング教室に関して解説しております。


知ってる人はやっている・・・・・
ネットショッピングでポイントを+1%貰う方法はこちらを登録するだけ!

WordPressカテゴリの最新記事