ワードプレステーマ「the thor」のプロフィール情報のカスタマイズ方法

the thorのプロフィール設定方法その①

著作者情報機能を使用するパターン

the thorに元から備わっている機能を使ってプロフィールを設定する方法を解説します。下記の画像が完成イメージです。

下記の4点を誰でも自由にカスタマイズできます。

  • 自己紹介(タイトル)
  • プロフィールアイコン(画像)
  • kyo(ユーザー名)
  • その下の詳細説明部分(説明文章)

 

著作者情報機能のプロフィール完成イメージ
the thorの「著作者情報機能」を使ったプロフィールの完成イメージ

手順① 外観→カスタマイズ→ウィジェット→サイドバーエリア→著作者情報の順番に移動

 

外観からカスタマイズへ移動
外観の上にマウスのカーソルを移動させ、カスタマイズをクリック
カスタマイズ画面からウィジェットへ移動
「ウィジェット」をクリック

 

次に、ウィジェットを配置する場所を選びます。今回はサイドバーエリアに設置していますが、どこに設置しても問題ありません。

ただ色んなサイトを見ていると、サイドバーエリアにプロフィールを設置していることがおおく、ここに設置するほうが見やすいかなとは思います。

ウィジェットからサイドバーエリアへ移動
「サイドバーエリア」をクリック
著作者情報をクリック

「タイトル」の下の空白には好きな文字を入れて下さい。今回はわかりやすく「自己紹介」という単語を入れています。

また、「記事一覧ボタン」「フォローアイコン」は今回は説明を省きますが、興味あればクリックして変化を楽しんで下さい。

次に、「kyo」と記載している部分とその下の詳細説明部分の設定方法を解説します。

 

著作者情報の編集箇所の説明

 

手順② ダッシュボード→ユーザー→あなたのプロフィールへ移動

ユーザー情報からプロフィール画面へ移動
ユーザーの上にマウスのカーソルを持ってきて、「あなたのプロフィールをクリック」

下にスクロールしていくと、「プロフィール情報」があります。個々に記載した内容が、「著作者情報」の詳細説明部分に反映されます。

ただ、この著作者情報機能を使って、改行や文字の装飾、リンクをキレイに貼ることはできません。

次に、もっとキレイにおしゃれにプロフィールを作る方法を解説します。

the thorのプロフィール設定方法その②

カスタムHTMLを使うパターン

the thorの「著作者情報機能」を使って、プロフィールを設定しても、なんだか味気ないですよね。

そこで、次にカスタムHTMLを使ってプロフィールを設定する方法を解説します。

完成イメージはこんな感じです。

改行もできますし、文字の装飾も出来ます。

また、よくブログで見るような、「プロフィール詳細はこちら」みたいなボタンを設置することも出来ます。

この「PROFILE」ボタンをクリックすると動きをつけることも出来ます。

このページの下部に、コードを記載しておくので、よければコピペしてお使い下さい。

プロフィール完成イメージ
プロフィール完成イメージ

手順① 外観→カスタマイズ→ウィジェット→サイドバーエリア→カスタムHTMLの順番に移動

外観からウィジェットへ移動
外観の上にマウスのカーソルを移動させ、カスタマイズをクリック
カスタマイズ画面からウィジェットへ移動
「ウィジェット」をクリック

ウィジェットの配置箇所は、好きに決めてくださいね。

ウィジェット内でサイドバーエリアへ移動
「サイドバーエリア」をクリック
カスタムHTMLをクリック

カスタムHTMLをクリックすると下記のように、「タイトル」を記入するところと、「内容」を記入するところがあります。

「タイトル」は何でも好きな単語を入力して下さい。

 

手順② カスタムHTMLの編集方法について

まず、下記のコードをコピペして、「内容」に貼り付けてください。

ちなみにこちらのコードですが、下記のサイトから引用しています。

http://photoshopvip.net/91115

他にも魅力的なボタンがたくさんあったので、気に入るものがあればそちらをコピペして使ってもいいかと思います。

変更箇所は大きく2箇所あります。

1つ目は、プロフィール説明部分。もう一つはボタンをクリックした際のリンク先の部分です。

  1. 父親はヤクザで刑務所に。母親は心労で職場自殺。新卒入社した会社が倒産。<br>
  2. <br>
  3. その後とあるプログラミングスクール運営会社に転職して、いろいろうまく回りだしました。<br>
  4. <br>
  5. その過程で、得たこと/やってよかったこと/やればよかったことをアウトプットしてます。時々奥さんも書いてくれる予定。<br>
  6. <br>
  7.  
  8. <div class=”wrap”>
  9.  ?<button class=”button”><a href=”https://kyo-log.com/profile/”>Profile</a></button>
  10. </div>
  11. <style>
  12. html, body {
  13.   height: 100%;
  14. }
  15.  
  16. .wrap {
  17.   height: 100%;
  18.   display: flex;
  19.   align-items: center;
  20.   justify-content: center;
  21. }
  22.  
  23. .button {
  24.   width: 100px;
  25.   height: 40px;
  26.   font-family: ‘Roboto’, sans-serif;
  27.   font-size: 11px;
  28.   text-transform: uppercase;
  29.   letter-spacing: 2.5px;
  30.   font-weight: 500;
  31.   color: #000;
  32.   background-color: #fff;
  33.   border: none;
  34.   border-radius: 45px;
  35.   box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  36.   transition: all 0.3s ease 0s;
  37.   cursor: pointer;
  38.   outline: none;
  39.   }
  40.  
  41. .button:hover {
  42.   background-color: #2EE59D;
  43.   box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
  44.   color: #fff;
  45.   transform: translateY(-7px);
  46. }
  47. </style>

 

変更箇所1つ目-プロフィール説明部分の編集-

6行目までは、プロフィーの詳細部分に当たります。ここは自分自身のプロフィール説明文を記入して下さい。

<br>というタグは改行タグなので、必要に応じて増減してくださいね。

変更箇所2つ目-ボタンのリンク先

7行目以下は、「PROFILE」ボタンのカスタマイズを行っています。

ここで絶対に変更する必要があるのが、9行目のリンク先です。

<button class=”button”><a href=”ここに自分のプロフィール詳細のURLを記入“>Profile</a></button>

該当箇所に自分自身のプロフィール詳細のURLを記入すれば完成です。

その他のカスタマイズ箇所について

23行目から39行目では、ボタンの装飾を行っています。

41行目から46行目でボタンに動きをつけています。

余裕があればググってカスタマイズしてみて下さい。

 

 

ブログ運営の最新記事4件