「だいたいのブログって、書いている人のプロフィールが右端のサイドバーに載ってるなぁ」
「ザ・トールにプロフィールを追加するにはどうすればいいんだろう？」
こんな方のために僕がこのブログにプロフィールを追加した方法についてご紹介します。
ザ・トールではプロフィールに関する項目がない・・・
いきなり出鼻をくじいてしまうようですが、ザ・トールにはプロフィール設定のようなものはありません。
基本的に「ダッシュボード」-「カスタマイズ」からブログの画面の編集を行います。
しかし、この中にプロフィールという項目を見つけることができませんでした。
なので、自分でプロフィールを作成することにしました。
幸いザ・トールにはカスタマイズ画面から直接HTMLを書いて、ウィジェット（ブログに配置するパーツ）を作ることができます。
HTMLを直接書くことのできるウィジェットは「テキスト」と「カスタムHTML」の２つあるのですが、「テキスト」のほうが、簡単に画像を取り込めます。
なので、今回はこの「テキスト」のウィジェットを使ってプロフィールを作成します。
ザ・トールでプロフィールを「テキスト」を使って作成する
「テキスト」ウィジェットを追加する
まずは、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企業でシステムエンジニアをしています。
主にIT企業に就職・転職を検討している方、プログラミング、Webの学習をしている方向けに、情報を発信していきます。
【使用言語】 HTML、CSS、JavaScript、jQuery、Java、VB.Net
【取得資格】
<ul>
<li>応用情報技術者</li>
<li>基本情報技術者</li>
</ul>
</div>
この「テキスト」のいいところは「br」タグを使わなくても、改行してくれるところです。
ただ、改行して空白行を空けるには、以下のように記述する必要がありました。
そうしないと、一旦閉じて再び「テキスト」ウィジェットを開くと、改行が消えるという現象が起きました。
バクなのかどうかは不明です。
（上下行１行開けます）
簡単に説明すると、中央寄せにしたい部分を以下のように記載しました。
<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を記載できます。
以下のコードを追加しました。
.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でカスタマイズする
いかがでしたか？
今回はい以下についてご紹介しました。
１．ザ・トールには標準でプロフィールを編集する画面はない
２．プロフィールはウィジェトでオリジナルプロフィールを作成できる
HTML/CSSはあまり詳しくないという方は、僕のコードを参考にしていただければ、簡単なプロフィールは作成できるかと思いますので、もしよろしければお試しください。