好きなところにプロフィールを設置したいけど、デフォルトでは、できない。
今回は私たちのサイドカラムに置いてある、プロフィール欄をどのように設置しているかご紹介します。
「THE THOR」を使っている方々は、かなりHTMLやCSS、プログラミング言語、サイトの作りを熟知していると思います。
ただ、私たちと同様に何かかっこいいから買ってみて勉強はこれからという方も中にはいらっしゃると思うので、そんな方向けに今回はご紹介します。
私たちは本当にHTMLって何？という状態から今にいたります。
ここまで来るまで半年頑張ったたこみそが本当によくわからない方々に向けて私たちのカスタマイズをどんどんご紹介していこうと思っています。
そもそも「THE THOR」の魅力がよくわかっていない方は上の記事からご覧ください。
目次
THE THORプロフィール作成方法！コピペOKです。実際に使用中のものを解説。
本記事では、私たちも愛用しているこのWordPressの有料テーマ「THE THOR」のプロフィール作成方法をご案内しようと思います。
中々自分たちでは言いづらいですが、おしゃれですよね。。
私たちのブログ。これをどうカスタマイズしてこうなっているのかをどんどん公開しています。
ぜひ、合わせてご覧ください。（他記事は本記事の下にリンクをのせています。）
このように「THEHTOR」のカスタマイズをたくさんご紹介しているので、ぜひサイドカラムの検索項目から「THETHOR」と入力してご覧ください。
今までご紹介した記事がたくさん出てきます。悩みがある方は他の記事も参考にしてみてください。
実際にカスタマイズしてみよう
それでは、実際にカスタマイズしていきましょう。
今回は、サイドカラムエリアのプロフィール欄をカスタマイズしていきましょう。
カスタマイズ方法は至って簡単です。この手順で行えばわからないことはないです。
わからないことがあればお気軽に聞いてください。
そもそもサイドカラムがわからない方は、たこみそのホームページの右側にあるプロフィール欄などをイメージして頂ければわかりやすいです。
1.外観→カスタマイズ
2.ウィジェット→サイドカラムエリア
3.ウィジェットを追加で作成したい項目を選択して入力(今回はプロフィールを選択)
たこみそのプロフィールの作りはこれです
そのままコピーして中にある文章を書き換えてください。
雛形を作って、それをご自身でカスタマイズしてください。というスタイルだと、え？結局どこの部分がどこにあてはまるか混乱してしまいます。
私たちもそうでした。
なので、現在私たちが上のプロフィールというところに貼っている呪文をそのままこちらでシェアします。
それをみながらご自身で文字だけ入れ替えてみてください。
これで完璧ですね。
基本的には、コードはテキストエディタにコピーしてください。また、使用している環境はMacですが、Windows環境だと、ダブルコーテーションが(“)が全角に変換されるということもあるため、中々表示されない方は、全角のダブルクォーテーション「”」を半角「”」に変換するようにしてください。
- たこみそのプロフィールはこちらです。
- <div class=”widgetProfile”>
<div class=”widgetProfile__img”>
<img width=”120″ height=”120″ alt=”【名前】” src=”https://20s-self-investment.com/wp-content/uploads/2019/07/IMG_0482-1.jpeg”>
</div>
<h3 class=”widgetProfile__name”>たこみそ</h3>
<iframe src=”https://blog.hatena.ne.jp/takomisofantasy/takomisofantasy.hatenablog.com/subscribe/iframe” allowtransparency=”true” frameborder=”0″ scrolling=”no” width=”150″ height=”28″></iframe><p class=”widgetProfile__text”>
2人の生活費のためにブログを始める(今年2月)<br>→バズって1日1000pvを超えるように<br>→2人分の食費を稼げるように(今ココ)<br>ブログ毎日投稿170日目/カップル歴3年目/ Googleでカップルブロガーと検索したら1番にでてきます<br>彼氏tako(23)彼女miso (26)で運営中。<br>
</p><div class=”widgetProfile__sns”>
<h4 class=”widgetProfile__snsTitle”>【Follow me！】</h4>
<ul class=”widgetProfile__snsList”><li class=”widgetProfile__snsItem”>
<a class=”widgetProfile__snsLink icon-twitter” href=”https://twitter.com/takomisofantasy”></a>
</li><li class=”widgetProfile__snsItem”>
<a class=”widgetProfile__snsLink icon-instagram” href=”https://www.instagram.com/takomisofantasy”></a>
</li><li class=”widgetProfile__snsItem”>
<a class=”widgetProfile__snsLink icon-user” href=”https://www.takomisofantasy.work/blog/”></a>
</li><li class=”widgetProfile__snsItem”>
<a class=”widgetProfile__snsLink icon-mail5″ href=”https://www.takomisofantasy.work/blog/%E3%81%8A%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B/”></a>
</li>
</ul>
</div>
</div>
まとめ：THE THORプロフィール作成方法！コピペOKです。実際に使用中のものを解説。
いかがでしたか？
プロフィール欄はたくさんの人の信頼を得ることができる大事なポイントの１つなので、絶対に手を抜いて投稿することは許されません。
本気でカスタマイズしてください。
今回の記事のように「THETHOR」についてわからないことをどんどん解決していくのがたこみそのブログです。
カスタマイズでまず何をしていけばいいか悩んでいる方向けに、初心者から「THETHOR」を使いこなせるようになったたこみそが、サイドカラムのカスタマイズ方法をご紹介した記事が下の記事なので、合わせてご覧ください。
そんなに大したカスタマイズはしていませんが、少しでもわからない方を減らせるように、なるべる難しい言葉は省いてご紹介しました。
私たちのカスタマイズをそのまま公開すると同時に、他にもおすすめの機能がありましたら、どんどんこれからもご紹介していこうと思っています。
また、わからないことがあればこちらの記事の一番下にコメント欄を用意しているので、そちらでご質問いただければご回答させて頂きます。
