the thorのプロフィール設定方法その①
著作者情報機能を使用するパターン
the thorに元から備わっている機能を使ってプロフィールを設定する方法を解説します。下記の画像が完成イメージです。
下記の4点を誰でも自由にカスタマイズできます。
- 自己紹介（タイトル）
- プロフィールアイコン（画像）
- kyo（ユーザー名）
- その下の詳細説明部分（説明文章）
手順① 外観→カスタマイズ→ウィジェット→サイドバーエリア→著作者情報の順番に移動
次に、ウィジェットを配置する場所を選びます。今回はサイドバーエリアに設置していますが、どこに設置しても問題ありません。
ただ色んなサイトを見ていると、サイドバーエリアにプロフィールを設置していることがおおく、ここに設置するほうが見やすいかなとは思います。
「タイトル」の下の空白には好きな文字を入れて下さい。今回はわかりやすく「自己紹介」という単語を入れています。
また、「記事一覧ボタン」「フォローアイコン」は今回は説明を省きますが、興味あればクリックして変化を楽しんで下さい。
次に、「kyo」と記載している部分とその下の詳細説明部分の設定方法を解説します。
手順② ダッシュボード→ユーザー→あなたのプロフィールへ移動
下にスクロールしていくと、「プロフィール情報」があります。個々に記載した内容が、「著作者情報」の詳細説明部分に反映されます。
ただ、この著作者情報機能を使って、改行や文字の装飾、リンクをキレイに貼ることはできません。
次に、もっとキレイにおしゃれにプロフィールを作る方法を解説します。
the thorのプロフィール設定方法その②
カスタムHTMLを使うパターン
the thorの「著作者情報機能」を使って、プロフィールを設定しても、なんだか味気ないですよね。
そこで、次にカスタムHTMLを使ってプロフィールを設定する方法を解説します。
完成イメージはこんな感じです。
改行もできますし、文字の装飾も出来ます。
また、よくブログで見るような、「プロフィール詳細はこちら」みたいなボタンを設置することも出来ます。
この「PROFILE」ボタンをクリックすると動きをつけることも出来ます。
このページの下部に、コードを記載しておくので、よければコピペしてお使い下さい。
手順① 外観→カスタマイズ→ウィジェット→サイドバーエリア→カスタムHTMLの順番に移動
ウィジェットの配置箇所は、好きに決めてくださいね。
カスタムHTMLをクリックすると下記のように、「タイトル」を記入するところと、「内容」を記入するところがあります。
「タイトル」は何でも好きな単語を入力して下さい。
手順② カスタムHTMLの編集方法について
まず、下記のコードをコピペして、「内容」に貼り付けてください。
ちなみにこちらのコードですが、下記のサイトから引用しています。
他にも魅力的なボタンがたくさんあったので、気に入るものがあればそちらをコピペして使ってもいいかと思います。
変更箇所は大きく2箇所あります。
１つ目は、プロフィール説明部分。もう一つはボタンをクリックした際のリンク先の部分です。
- 父親はヤクザで刑務所に。母親は心労で職場自殺。新卒入社した会社が倒産。<br>
- <br>
- その後とあるプログラミングスクール運営会社に転職して、いろいろうまく回りだしました。<br>
- <br>
- その過程で、得たこと/やってよかったこと/やればよかったことをアウトプットしてます。時々奥さんも書いてくれる予定。<br>
- <br>
- <div class=”wrap”>
- ?<button class=”button”><a href=”https://kyo-log.com/profile/”>Profile</a></button>
- </div>
- <style>
- html、 body {
- height: 100%;
- }
- .wrap {
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .button {
- width: 100px;
- height: 40px;
- font-family: ‘Roboto’、 sans-serif;
- font-size: 11px;
- text-transform: uppercase;
- letter-spacing: 2.5px;
- font-weight: 500;
- color: #000;
- background-color: #fff;
- border: none;
- border-radius: 45px;
- box-shadow: 0px 8px 15px rgba(0、 0、 0、 0.1);
- transition: all 0.3s ease 0s;
- cursor: pointer;
- outline: none;
- }
- .button:hover {
- background-color: #2EE59D;
- box-shadow: 0px 15px 20px rgba(46、 229、 157、 0.4);
- color: #fff;
- transform: translateY(-7px);
- }
- </style>
変更箇所１つ目-プロフィール説明部分の編集-
6行目までは、プロフィーの詳細部分に当たります。ここは自分自身のプロフィール説明文を記入して下さい。
<br>というタグは改行タグなので、必要に応じて増減してくださいね。
変更箇所2つ目-ボタンのリンク先
7行目以下は、「PROFILE」ボタンのカスタマイズを行っています。
ここで絶対に変更する必要があるのが、9行目のリンク先です。
<button class=”button”><a href=”ここに自分のプロフィール詳細のURLを記入“>Profile</a></button>
該当箇所に自分自身のプロフィール詳細のURLを記入すれば完成です。
その他のカスタマイズ箇所について
23行目から39行目では、ボタンの装飾を行っています。
41行目から46行目でボタンに動きをつけています。
余裕があればググってカスタマイズしてみて下さい。