【マナブログコピーWordPress】プロフィールの設定

基本デザイン設定

こんにちは、ごま吉(@Lv1gomakichi)です。

この記事では、Manablog Copyのプロフィール設定の方法を学ぶことができます。

注意念のため必ずコードのBackupを取っておいてください。(テキストファイルなどにコピペでもOK)

当ブログについて

マナブログさんに参考マニュアルとして掲載して頂きました😆
本家認定のマニュアルです。

Mnablog Copy プロフィールの設定

プロフィール画像の設定

まずは管理画面にアクセスしてプロフィール画像の設定をしましょう。
管理画面メディア新規追加ファイルを選択をクリックして、画像を選択しましょう。


プロフィール画像が登録できたら、画像のURLをコピーします。
管理画面メディアにアクセスして、使いたい画像を選択します。


ファイルのURLをコピーして控えておきましょう。

サイドバーのプロフィール部分のコードを編集

次にサイドバーのコードを編集します。
管理画面外観テーマエディターsidebar.phpにアクセスします。

コードの以下の部分を編集します。(7行目〜13行目あたりです。他はノータッチでOK)

  • ①プロフィール画像→プロフィール画像のURLを記述します
  • ②筆者名→自分の名前を記載します
  • ③プロフィール文章→プロフィールを簡潔に紹介しましょう
  • <!--及び-->→このコードが入っているとプレビューに反映されませんのでカットしましょう
  • ⑤プロフィール詳細へのリンクURL
  • ⑥(リンク文面)プロフィール詳細
  • ⑦(リンク文面)お問い合わせ

私は、④のリンク文面「このブログについて」としています。
リンク先のページは固定ページ機能で作ったURLへリンクを貼っています。

固定ページのリンクURLは、blogですからここで入力するアドレスは/blog/とします。

「このブログについて」のページ制作手順は【WordPressマナブログコピー】「このブログについて」のページ制作で紹介しています。

また上記と同じ手順で、プライバシーポリシーページお問合せページのリンクをプロフィール部分の下に動線を作っています。

プライバシーポリシーページ、お問合せページの作り方は下記を参考ください。

私が該当部分に使っているプロフィール部分のコードは以下になります。

<img src="https://sarugamamani.org/wp-content/uploads/2019/11/goma-gr.png" class="img-responsive img-circle" />
<h4><span itemprop="name">ごま吉</span></h4>
<hr>
<p>
アフィリエイト歴15年の広告代理店営業マン。元グラフィックデザイナー兼webデザイナーから転職しました。	</p>
<a href="<?php echo home_url(); ?>/blog/" class="pull-right">このブログについて <i class="fa fa-angle-right"></i></a>
<br />
<a href="<?php echo home_url(); ?>/privacypolicy/" class="pull-right">プライバシーポリシー <i class="fa fa-angle-right"></i></a>
<br />
<a href="<?php echo home_url(); ?>/contact/" class="pull-right">お問い合わせ <i class="fa fa-angle-right"></i></a>
</div>

プロフィール紹介の文字サイズを若干大きくする

プロフィール紹介の文字が若干小さいので、大きくします。


カスタマイザー追加CSSに下記のコードを追記します。


追加するCSSコード▼

.author p {
font-size: 14px;
}
若干大きくなりました。

画像提供:Freepik – jp.freepik.com によって作成された business ベクトル