【解決】THE THOR(ザ・トール)にプロフィールを表示する方法【WordPress】

  • 2019年10月14日
  • 2019年10月22日
  • WordPress

「だいたいのブログって、書いている人のプロフィールが右端のサイドバーに載ってるなぁ」
「ザ・トールにプロフィールを追加するにはどうすればいいんだろう?」

こんな方のために僕がこのブログにプロフィールを追加した方法についてご紹介します。

ザ・トールではプロフィールに関する項目がない・・・

いきなり出鼻をくじいてしまうようですが、ザ・トールにはプロフィール設定のようなものはありません。

基本的に「ダッシュボード」-「カスタマイズ」からブログの画面の編集を行います。
しかし、この中にプロフィールという項目を見つけることができませんでした。

なので、自分でプロフィールを作成することにしました。

幸いザ・トールにはカスタマイズ画面から直接HTMLを書いて、ウィジェット(ブログに配置するパーツ)を作ることができます。

HTMLを直接書くことのできるウィジェットは「テキスト」と「カスタムHTML」の2つあるのですが、「テキスト」のほうが、簡単に画像を取り込めます。
なので、今回はこの「テキスト」のウィジェットを使ってプロフィールを作成します。

 

ザ・トールでプロフィールを「テキスト」を使って作成する

「テキスト」ウィジェットを追加する

まずは、WordPressの「ダッシュボード」から「サイトのカスタマイズ」をクリックします。

ダッシュボードのサイトのカスタマイズ

 

今回はサイドバー(このブログで言えば右側のプロフィールやカテゴリーなどが縦に表示されている部分です)にプロフィールを追加したいので、「ウィジェット」をクリックします。

ウィジェット

 

「サイドバーエリア」をクリックします。

サイドバーエリア

 

下の方にある「ウィジェットを追加」をクリックします。

ウィジェットを追加

 

この中に「テキスト」という項目があります。
これをクリックします。

 

テキスト

 

プロフィールアイコンを追加する

「テキスト」の中身を見てみると、「メディアを追加」というものがあるので、ここからプロフィール画像を追加します。

メディアを追加

 

まずは、プロフィールアイコンにする画像をWordPressにアップロードします。
画面左上に「ファイルをアップロード」というタブがあるので、ここからアップロードする画像を選択します。

ファイルをアップロード

 

画像をアップロードしたら「メディアライブラリ」タブに自動で移動し、アップロードした画像が選択されています。
その状態で「代替テキスト」を入力します。
これはHTMLでいうと、「alt」に該当する部分です。
特に理由がない限りは、設定しておいたほうが良いと思います。

その後、「投稿に挿入」をクリックします。

メディアライブラリ

これで「テキスト」ウィジェットの中にプロフィールアイコンが表示されます。

 

プロフィールの内容を追加する

ここではプロフィールに記載する内容を追加していきます。

テキストを入力できる欄に、以下のように入力しました。

<div class="txt_profile">
  <div class="prof_center">
    <img class="alignnone size-full wp-image-67" src="http://bisquesnake74.sakura.ne.jp/wp/wp-content/uploads/2019/10/IMG_0618.png" alt="" width="150" height="150" />
    <strong class="txt_name">タクマ</strong>
  </div>
  地方のIT企業でシステムエンジニアをしています。
  
  &nbsp;
  
  主にIT企業に就職・転職を検討している方、プログラミング、Webの学習をしている方向けに、情報を発信していきます。
  
  &nbsp;
  
  【使用言語】 HTML、CSS、JavaScript、jQuery、Java、VB.Net
  
  &nbsp;
  
  【取得資格】
  <ul>
    <li>応用情報技術者</li>
    <li>基本情報技術者</li>
  </ul>
</div>

この「テキスト」のいいところは「br」タグを使わなくても、改行してくれるところです。
ただ、改行して空白行を空けるには、以下のように記述する必要がありました。
そうしないと、一旦閉じて再び「テキスト」ウィジェットを開くと、改行が消えるという現象が起きました。
バクなのかどうかは不明です。
(上下行1行開けます)


&nbsp;

 

簡単に説明すると、中央寄せにしたい部分を以下のように記載しました。

<div class="prof_center">
 <img class="alignnone size-full wp-image-67" src="http://bisquesnake74.sakura.ne.jp/wp/wp-content/uploads/2019/10/IMG_0618.png" alt="" width="150" height="150" />
	<strong class="txt_name">タクマ</strong>
</div>

「img」の部分は先程アップロードしたアイコン画像のコードです。
ここは、挿入した画像によって記述が変わります。
画像を挿入した際に「img」のコードが記載されると思いますので、ここはご自身のコードに置き換えてください。

「strong」は”強調”という意味です。
名前は強調したかったので、このタグを付けました。

 

次に、「【取得資格】」のリスト部分についてです。

<ul>
 	<li>応用情報技術者</li>
 	<li>基本情報技術者</li>
</ul>

「ul」でリストの作成、「li」でリストの項目を記載しています。
リストが不要という場合は、この部分は削除しても構いません。

以上、HTMLの簡単な解説でした。

 

 

ただこのままだと、レイアウトが全体的に左によってレイアウトが美しくありません。
そのため、「div」などにクラス名を書いて、後でCSSでレイアウトを美しくできるようにしておきました。

次の項目では、実際に記載したCSSについてご紹介します。

 

「追加CSS」からプロフィールのスタイルを美しくする

「カスタマイズ」画面のトップまで戻り、「追加CSS」をクリックします。

追加CSS

 

ここに自由にCSSを記載できます。
以下のコードを追加しました。

.txt_profile p{
	line-height: 1.5em;
}
.txt_profile ul{
	list-style: inside; 
}
.txt_profile ul li{
	line-height: 1.5em;
}
.prof_center{
	margin: 0 0 4rem;
	text-align: center;
}
.prof_center img{
	margin: 0 0 2rem;
}
.prof_center .txt_name {
	font-size: 2rem;
}

これでプロフィールのアイコンと名前が中央寄せになり、それ以外は左寄せに、リストも頭に「・」が付きました。
枠内の空白や、行間も適度に空けることで、可読性を上げるように考慮しました。

HTML/CSSがよくわからないという方は、上記をコピーして使用すれば、僕のプロフィールのような見た目になりますので、ご活用ください。

 

まとめ:ザ・トールでプロフィールを作成するときはHTML/CSSでカスタマイズする

いかがでしたか?

今回はい以下についてご紹介しました。

 

1.ザ・トールには標準でプロフィールを編集する画面はない

2.プロフィールはウィジェトでオリジナルプロフィールを作成できる

 

HTML/CSSはあまり詳しくないという方は、僕のコードを参考にしていただければ、簡単なプロフィールは作成できるかと思いますので、もしよろしければお試しください。

 



プロフィールを配置する
最新情報をチェックしよう!