[THE THOR(ザ・トール)]初心者OKプロフィール欄を設定する方法

「Cocoon」ではウィジェットとして簡単に設置できた「プロフィール」。「THE THOR(ザ・トール)」には無いのかなぁ……と、思っていたのですが、カスタマイズから簡単に設定できました。

もちろん、ウィジェットとして設置することもできます。……ということで、設置の仕方2種類と、ついでにサイドバーに設置するプロフィールエリアの設定方法。

「THE THOR(ザ・トール)」の記事下にプロフィール「この記事を書いた人」を設定する方法2つ

まず、「プロフィール」の内容自体はWordpressのユーザープロフィールをそのまま反映させるので、文章はそこで作りこんでください。

←左メニューの「ユーザー」→「あなたのプロフィール」の「プロフィール情報」に自己PR文を記入。SNSボタンもここに記入したものが表示されるので表示させたいものは余さず記載してください。プロフィール画像もここに取り込んだものが表示されます。
ブログのblog

日記のブログとアフィリエイトのサイトは分けたいからと、いくつかドメインを取得している方は少なくないと思 […]…

普通にザ・トールの機能を使う方法

1.「外観」→「カスタマイズ」→「投稿ページ設定[THE]」を開きます。

2.「プロフィールの設定」を開きます。

3.「プロフィールを表示するか選択」→defaultでは「表示しない」になっているので、ここを「表示する」に変えて「公開」するだけ。

これだけで、まず、「あなたのプロフィール」に記入した通りの「この記事を書いた人」を設定することができます。プロフィール画像も表示されます。

[THE THOR(ザ・トール)]プロフィール欄カスタマイズ

枠を付けてみる

正直、とても地味な仕上がりなので、せめて枠くらい付けてみよう。

1.「外観」→「カスタマイズ」→一番下の「追加css」を開きます。

[THE THOR(ザ・トール)]プロフィール欄カスタマイズ

 

2.以下のコードで枠が付きます。

.profile {border-color: #ffab65; }

↑だと枠の太さが自分的には太すぎるので、少し細くします。

.profile {border:1px solid #ffab65;}

 

枠の角を丸くしたい時は、

.profile {border:1px solid #ffab65;border-radius:15px;}
[THE THOR(ザ・トール)]プロフィール欄カスタマイズ

HTMLで作成してウィジェットで記事下に入れる方法

「THE THOR(ザ・トール)」以外のテーマでも使える方法です。

1.「外観」→「ウィジェット」を開く。

ウィジットを使う場合は、当然、何も反映されないので、文章も全て記述します。好きなように文字色を変えたり、改行したり、画像を入れたり、面倒ですが自由度は高いです。

2.「[THE]タブコンテンツ」を使います。

「カスタムHTML」を使うと、カラムやショートコードが反映されないのです。「[THE]タブコンテンツ」を使えば投稿ページと同じく、カラムを使うことができます。
[THE THOR(ザ・トール)]プロフィール欄カスタマイズ

 

3.下書きは投稿ページでビジュアル編集した方が楽ですよね。

[THE THOR(ザ・トール)]プロフィール欄カスタマイズ

 

「2カラム3:7」で作成すると、パソコンでは上手く表示されても、スマホから見た時に右側がこんなに狭苦しい感じになってしまいます。

[THE THOR(ザ・トール)]プロフィール欄カスタマイズ

 

なので、「2カラム3:7(PC)」で記述します。

[THE THOR(ザ・トール)]プロフィール欄カスタマイズ
<div style="border: 1px solid #F90; padding: 10px;"><div class="column column-2pc37"><div class="column__item"><img class="alignnone size-full wp-image-2180" src="プロフィール画像" alt="profile" width="234" height="234" /></div><div class="column__item">プロフィール文を書く。</strong></div></div></div>

 

これで、スマホからも見やすくなります。

[THE THOR(ザ・トール)]プロフィール欄カスタマイズ

 

4.「[THE]タブコンテンツ」に記述して、「投稿ページ下部エリア」に設置すれば完成。

サイドバーのプロフィールエリアにプロフィールを設置する方法

「THE THOR(ザ・トール)」、分かりにくいですが、これはウィジェットで簡単に付けられます。「[THE]著作者情報」というのが、プロフィール(笑)

[THE THOR(ザ・トール)]プロフィール欄カスタマイズ

「[THE]著作者情報」をサイドバーに設置するだけ

[THE THOR(ザ・トール)]プロフィール欄カスタマイズ

枠をつけたい場合は

「カスタマイズ」の「追加css」に

.widgetProfile{border:1px solid #ffab65; border-radius:15px; }

記事下とサイドバー

両方入れるとしつこい気がするので、当方はサイドバーを外します。そこはお好みで。

サポートよろしくお願いします

 

いつもありがとうございます。この記事を気に入って下さった方、「寄付してあげてもいいよ」という方がいらっしゃったらサポートしていただけると嬉しいです。


Amazonギフト券- Eメールタイプ – Amazonベーシック


金額は空白欄に適当に(15円から)書きこんで下さい。(あらかじめ入っている金額はAmazonの設定なので気になさらないでください)。

メールのあて先は 「ageru15@gmail.com」です。

※上記のアドレスは投げ銭受け取り専用です。他のメールは受け取れない設定にしてあるのでご注意ください。

 

 

 

よろしくお願いいたします。

なお、この投げ銭システムに関する記事はこちら→『ブログに「投げ銭」システムをつける方法を考えてみたまとめ』