【The Thor】背景画像付きプロフィールの設定方法

ブログ運営

WordPress有料テーマ「サンゴ」使用ブログなどでよく見かける、背景画像付きのプロフィールを作成してみたので、その設定方法をご紹介します。HTMLとCSSを使って設定を行いますが、基本はコピペでOKなので、プログラミングの知識があまりない方でも、設定できると思います。

人気の無料WordPresテーマ「Luxeritas」にサンゴ風プロフィールを実装されているサトシックスさんの記事を参考にさせていただき、The Thor用の調整を加えて作成しました。

ＳＡＴＯＳＩＸ
Luxeritasのプロフィール欄をSANGO風にカスタマイズ | ＳＡＴＯＳＩＸ

Luxeritasのサイドバーにあるウィジェットエリアに、SANGO風のプロフィール欄を作ってみました。 この記事の通り…

▼完成イメージはこちら

目次

はじめに用意するもの

はじめに、プロフィールに必要な画像素材やリンク先を用意します。

  • プロフィール画像（100×100px以上の正方形）
  • 背景画像（このブログでは1000×600pxで設定しています）
  • 自己紹介テキスト
  • 各種SNSアカウントのURL


プロフィール画像と背景画像は、WordPressのメディアにアップして、URLを取得しておきましょう。

画像URLの取得方法

事前準備

HTML・CSSを使ってプロフィールを作成する前に、もう一つ設定が必要な項目があります。

今回作成するプロフィールデザインには、Font Awesomeのアイコンを使用しています。アイコンがきちんと表示されるようにするため、headタグ内にCSSへのリンクを追加する必要があります。

Font Awesome？headタグ？何のことだかわからない！という方も気にしなくて大丈夫です。下記の手順通りに設定を進めてください。

▼ 管理画面左カラムのメニューから外観＞基本設定[THE]＞高度な設定を開き、headタグの自由入力エリア内に下記のコードをコピペします。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

　

この記事でご紹介するコードは、2019年5月時点での最新のものを貼り付けていますが、もしアイコンが意図通りに表示されない場合は、Font Awesomeのサイトにアクセスし、最新版のコードをコピペしてheadタグ内に貼り付けるようにしてください。

ここまで準備ができたら、HTML‧CSSを入力していきます。

HTML設定

早速プロフィール用のHTMLを入力していきます。設置場所はサイドバーエリアです。管理画面左カラムのメニューから外観＞ウィジェット＞サイドバーエリアと進みます。

ウィジェットを追加ボタンをクリックし、表示されたウィジェットリストの中からカスタムHTML（任意のカスタムHTML）を選択します。

すると、左カラム内下部にカスタムHTMLという項目が追加されます。

ここにHTMLを入力していきますが、上のタイトルの部分は空欄のままで大丈夫です。

内容 の部分に下記のHTMLを編集したものをコピペしてください。

変更箇所は、「プロフィール画像のURL」「管理人プロフィール（or 名前を入力）」「プロフィール本文」「ツイッターアカウントのURL」「インスタグラムアカウントのURL」です。

▼HTML

<div class="sidebar-profile"><div class="profile-center"><img src=“プロフィール画像のURL” width="100" height="100" class="profileimg" /><br/><span class="profile-name">管理人プロフィール（or 名前を入力）</span></div><p class="profile-text">プロフィール本文</p><!-- もしプロフィール内に改行を加えたい場合は、改行を加えたい箇所に<br>と記載するようにしてください --><ul class="sns-follow"><!-- Twitterのボタン --><li class="twitter-btn"><a href=“ツイッターアカウントのURL” target="blank"><i class="fab fa-twitter"></i></a></li><!-- Instagramのボタン --><li class="instagram-btn"><a href=“インスタグラムアカウントのURL”><i class="fab fa-instagram"></i></a></li></ul></div>

この時点では、文字の装飾がついていません。このあとCSSを設定して見栄えを整えていきます。

CSSの設定

CSSの追加方法には以下の２つの方法があります。

  1. テーマ＞テーマエディター（テーマの編集）から、「style-user.css」に追記する
  2. 外観＞カスタマイズ＞追加CSSに追記する

 

「マルチサイト（一つのWordPressアカウントで複数のサイトを運営する機能）」を利用されている場合は、２の方法での指定をお勧めします。マルチサイトを使っている場合でも、「サイトネットワーク管理」のダッシュボードから設定すれば１の方法でも実装できますが、サイトネットワーク内に他にもThe Thor（子テーマ）を使っているサイトがあった場合、そちらにも変更内容が適用されてしまいます。

▼CSS

.sidebar-profile {width: 100%;font-size: 1.2em;background-image: url(“背景画像のURL”); 　background-repeat: no-repeat;background-size: 100% auto;padding: 40% .5em 2em .5em;}div#custom_html-2 { padding: 0 !important;}@media only screen and (min-width: 992px){.sidebar-profile {padding: 43% .9em 2em .9em;}}@media (max-width: 991px) and (min-width: 576px){.sidebar-profile {padding: 50% .9em 2em .9em;}}@media only screen and (max-width: 575px){.sidebar-profile {padding: 45% .5em 2em .5em;}}.profile-center{text-align: center;margin-bottom: 15px;}.profileimg{width: 100px;height: 100px;border-radius: 50%;border: solid 4px #fff;}@media only screen and (max-width: 575px){.profileimg{width: 80px;height: 80px;}}.profile-name{font-size: 1.2em;font-weight: bold;color: #505454;}.profile-text{line-height:150%;}ul.sns-follow {text-align: center;}ul.sns-follow li{display: inline-block;height: 45px;vertical-align: middle !important;margin-bottom: 0;padding: 10px 5px !important;}ul.sns-follow li a{display: block;width: 45px;height: 45px;border-radius: 50px;color: #FFFFFF !important;}ul.sns-follow li.twitter-btn a{background: rgba(29,161,242,0.7);box-shadow: 0 2px 5px rgba(0,0,0,0.2);line-height: 47px;transition: .3s;font-size: 160%;}ul.sns-follow li.twitter-btn a:hover { opacity: 1; box-shadow: 0 10px 20px -4px rgba(0,0,0,.25); transform: translateY(-5px);}ul.sns-follow li.instagram-btn a{background: rgba(241,63,121,0.7);box-shadow: 0 2px 5px rgba(0,0,0,0.2);line-height: 47px;transition: .3s;font-size: 160%;}ul.sns-follow li.instagram-btn a:hover { opacity: 1; box-shadow: 0 10px 20px -4px rgba(0,0,0,.25); transform: translateY(-5px);}
もし、<head>内にFont Awesome設置用コードを入力しているにも関わらず、SNSアイコンが表示されない（アイコンの代わりに□マークが出ている）場合は、各アイコンのコードが変更されている場合があります。その場合は、Font Awesomeのサイトにアクセスして、アイコンを設置したいSNS名（英語）で検索し、最新版のコードを入手の上差し替えるようにしてください。

▼各アイコン設置用のコード例（HTMLファイル内）

<i class="fab fa-twitter"></i><i class="fab fa-instagram"></i>

※2019年5月時点での最新のコードを利用しています。

▼Twitterアイコンの最新コードの取得方法

Font Awsomeのツイッターアイコンページ

▼Instagramアイコンの最新コードの取得方法

Font Awsomeのインスタグラムアイコンページ

完成

ここまで作業を進めると、サイドバーにこのような背景付きプロフィールが設定されているかと思います。

背景付きプロフィール完成図

終わりに

最後までお読みいただきありがとうございました。当ブログでは、The Thorのカスタマイズ方法に関する記事を随時更新中です。よろしければ、そちらも合わせてご覧ください。

関連記事
【The Thor】ヘッダーメニューの設定方法

このブログでは、ページ最上部に以下のようなメニューバーを設置しています。メニューバーの各項目はカテゴリ名になっており、各カテゴリの記事一覧ページにリンクしています。今回は、このようなカテゴリを利用したヘッダーメニューの作成[…]

にほんブログ村 マタニティーブログ 海外出産へ