ワードプレス

WordPressテーマ「JIN」|プロフィールページを作る方法【ウィジェット】

プロフィールページアイキャッチ画像

ブログサイトでサイドバーにウィジェットに「プロフィール」を追加して画像を貼り付けて、実際のブログサイトでその画像をクリックした際に、ランダムで投稿ページに飛んでしまう。

ウィジェット「プロフィール」の画像に対してURL設定がないため自身のプロフィールページを作る方法がわからない

WordPressテーマ「JIN」のプロフィールページの作り方について解説します。

プル

追加で「プロフィールボタン」も補足で付けたいと思います。

・プロフィールページイメージ画像↓

プロフィールページ
プロフィールページ

ウィジェットにプロフィール追加

まずは、プロフィールのウィジェットをサイドバーに追加します。

プロフィールイメージ
プロフィールイメージ

WordPress管理画面外観ウィジェットを選択。

ウィジェット
ウィジェット

プロフィールサイドバーに追加します。

プロフィール名、肩書、説明を入力して、画像を選択して完了を選択。

サイドバーウィジェット
サイドバーウィジェット

サイトに戻って確認すると設定したものが反映されています。

サイドバーイメージ
サイドバーイメージ

プロフィールページを作る(固定ページ)

プロフィールページは「投稿」ではなく「固定ページ」で作ります。

WordPress管理画面新規追加を選択。

固定ページ
固定ページ

プロフィールページと認識させる必要があるので、パーマリンクのURLスラッグをprofileと入力します。

後は、自身のプロフィール内容を入力して公開をします。

ブログトップページと記事内のサイドバーの画像をクリックして、固定のプロフィールページに移動できれば完了です。

URLスラッグ
URLスラッグ

プロフィールボタン

クリックする箇所と知ってもらうための「プロフィールボタン」追加についても解説します。

プロフィールボタン
プロフィールボタン

説明の項目にHTMLの記述をします。

説明文
説明文
<div id="profile_link">
<a href="プロフィールのURL入力">プロフィール</a>
</div>

HTMLの記述をし終わった後は、「完了」をクリックして、外観カスタマイズに移動します。

追加CSSに下記のCSSを追加します。

/* サイドバープロフィールボタン */
#profile_link a {
    display: block;
    text-align: center;
    padding: 0.7em 1em;
    background: #3b5d82;
    width: 50%;
    margin: 0 auto;
    margin-top: 20px;
    border-radius: 20px;
    border: 3px double #fff;
    font-size: .75rem;
    color: #fff;
}

#profile_link a:hover {
    opacity: 0.7;
    color: #fff;
}

これで、プロフィールボタンの完成です。

更にJINテーマを使いやすくする方法

追加でテーマをカスタマイズしたい方向けに記事を書きましたので合わせてカスタムしてみてください。

▪jinテーマ追加cssで自由にカスタマイズ【カテゴリーリスト】⇩

jinテーマ自由にカスタマイズしよう
jinテーマ追加cssで自由にカスタマイズ【カテゴリーリスト】有料テーマはHTMLやCSSなどの知識がなくても、カスタマイズが自由に出来るように設計されていますが、自身のサイトに「オリジナリティを出したい」「もっと細かくデザインしたい」時は、多少の マークアップ言語の知識が必要になってきます。今回はトップページの色の変更、カスタマイズなど、有料テーマのカスタマイズ機能だけでは出来ない変更方法を紹介します。追加CSSに記述するコードですので間違ってもテーマ自体のコードは触らないのでサイト自体が壊れる心配はありません。...

▪JINテーマでページネーションにアニメーションを追加する方法(フワッと順番に表示させる)【jQuery】⇩

JINアニメーション
JINテーマでページネーションにアニメーションを追加する方法(フワッと順番に表示させる)【jQuery】 JINテーマを独自にカスタマイズした中で今回はページネーションにアニメーションを追加しましたので紹介します。 アニメーション動作...

今回のプロフィールのカスタマイズはコピーペーストで実装できますが、自分なりにいろいろカスタマイズしてみたい場合は、HTMLとCSS基礎知識が必要になってきます

↓下記本は自分が読んでとても為になった本を記載しておきますので参考になさってください。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座
1冊ですべて身につくHTML & CSSとWebデザイン入門講座

▪1冊ですべて身につくHTML & CSSとWebデザイン入門講座
HTMLとCSSとWebデザインを一気にまるごと学べる!1つのサイトを実際に作りながら学んでいくやさしい作りになっている本です。「これからWebサイトを作り始める初心者」「HTMLとCSSを基本から学びたい人」「美しいデザインのWebサイトを作りたい人」「Webの最新技術を学びたい人」この1冊で必要なことがすべて学べます。

book
created by Rinker
¥2,486 (2022/10/04 17:48:05時点 楽天市場調べ-詳細)

↓さらに、一歩進んだWebサイト制作の知識を学びたい方はこちらもお勧めです。

ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座
ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座

▪ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座
Web界隈やデザイナーに大人気で、Web関連の情報やデザインについて記事が学べる『Webクリエイターボックス』の管理人、Manaさんによる渾身のHTML&CSSとWebデザインの実践知識が一気に学べる本です。

book
created by Rinker
¥2,728 (2022/10/04 16:49:50時点 楽天市場調べ-詳細)

↓また、さらに初心者から抜け出すために必要な知識を学びたい方ようです。

▪プロの「引き出し」を増やす HTML+CSSコーディングの強化書
HTML・CSSの基本をマスターして初心者を脱して、コーダー/マークアップエンジニアとして制作現場でバリバリ活躍する力をつけたい。そんな方に向けた本です。

プロの「引き出し」を増やす HTML+CSSコーディングの強化書
プロの「引き出し」を増やす HTML+CSSコーディングの強化書
book
created by Rinker
¥3,190 (2022/10/04 22:06:53時点 楽天市場調べ-詳細)

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA