こんにちは。管理人のあいづちです。
現在、当ブログもOPENCAGEの「スワロー」というテーマでブログを構築しております。サイト立ち上げの際に、私も参考にした必要となる情報を解説しております。
今回は、サイドバーにプロフィールを設定する方法を解説したいと思います。
有名ブロガーさんのブログを見てもプロフィールは設置してあることが多いです。これはブログを見に来てくれたユーザーさんにより興味を持ってくれるように、自分がどういう人物かを公開するのが目的です。
誰が記事を書いてるのか？そう思った時にプロフィールを見てくれます。ブログのファンであり、サイト管理者のファンを増やすことはサイトの価値を上げることに繋がります。
サイドバーという見やすく貴重な場所を使うわけですから、重要な設定と言えるでしょう。
スワローのプロフィールを利用する
当ブログのプロフィールでも設置していますサイドバーのプロフィールがコチラ。
これは、スワローの記事下にある「ABOUT US-この記事を書いた人」の内容をそのままコピペして少し手直ししたプロフィールです。
せっかくスワローを使っているのなら、プロフィールエリアも統一感があった方が良いと思います。そういった考えからデザインを維持したままサイドバーへ設置をしてみました。
プロフィール部分のソースコードをコピーする
出来上がっているプロフィールをそのままサイドバーへ設置するので、まずプロフィール部分の「ソースコード」をコピーしてきます。
自分のサイトを開いて、記事下のプロフィールのソースコードを探します。ブラウザによって開発者ツールの利用方法が違うと思いますが「Google Chrome」と「Safari」だけ載せておきます。
- Google Chromeだと「右クリック→検証」
- Safariだと「右クリック→要素の詳細を表示」
そこから「div class=”authorbox wow animated fadeIn”data-wow-delay=”0.5s”」を見つけて右クリック
「Edit αs HTML」をクリック
ソースコードが全て表示されるので「全てコピー」して下さい。
これでプロフィールのソースコードは丸々ゲット出来ました。
ウィジェットでプロフィールエリアの設置
ご存知の方も多いと思いますが、Wordpressには「ウィジェット」という機能があります。ダッシュボードにありますね。今回はこの「ウィジェット機能」を使ってプロフィールを作成していきます。
ダッシュボードから「外観」→「ウィジェット」をクリック
利用可能なウィジェットの中から「カスタムHTML」をサイドバー内の配置したい場所へ「ドラッグ＆ドロップ」します。
配置されたカスタムHTMLをクリックすると、設定エリアが表示させます。この場所でプロフィールの編集を行います。これでプロフィールエリアの設置は完了です。
ウィジェットでプロフィールエリアの設定
ここからは実際のプロフィールの中身を作っていきましょう。
カスタムhtmlをクリックすると「タイトル」「内容」の入力スペースが出てきます。
- タイトル → 「プロフィール」「自己紹介」
- 内容 →「写真画像」「イラスト」「文章」「SNSボタン」
内容部分に先ほどコピーしたソースを貼り付けてください。そのまま貼り付けするだけだと下の画像の様に元のcssデザインのままになります。少しだけcssを変更して整えましょう！
htmlとcssでデザインと整える
htmlの設定
先ほど貼り付けた内容欄にあるhtmlを先に修正します。
まず「ABOUT US この記事を書いた人」がいらない場合は<h2 class="h_ttl"><span class="gf">ABOUT US</span></h2>を全て消去。
続いて「画像」と「名前」部分ですが、cssでデザインを変更するのでclass名を変更します。
上の画像で色塗りした<div class="profile_img">を<div class="custom-profile_img">に書き換えます。もう一つ<div class="profile_description">を<div class="custom-profile_description">に書き換えます。
上記の変更が終わりましたら「保存→完了」をクリック
「h2」部分を消去して「class」を書き換えた状態の表示コチラです。丸型の写真が四角になっちゃいました。
この後、cssを編集して「丸型の写真」と「文章の中央揃い」の設定をします。
cssの設定
cssの記述場所について。
子テーマのstyle.cssに記述しても良いですが、カスタマイズの「追加css」に記述した方が細かい調整も出来るので今回はそちらで解説します。
ダッシュボードの「外観」→「カスタマイズ」をクリック。サイドメニューの1番下に「追加css」があるのでクリック。
下のcssをそのままコピペしてください。貼り付ければプレビューサイトのプロフィールデザインも変更になります。
.authorbox .custom-profile_img img { width: 40%; margin: auto; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.12); }
.authorbox .profile_name a, .authorbox .author_sns a { text-decoration: none; color: inherit; }
微妙にですが、デザイン変更しました。
class名：.authorbox .custom-profile_img img
写真の大きさ：「width: 40%」→「width: 50%」
写真の枠：「border: 2px solid #fff;」→「border: 3px solid #264b67;」
写真を少し大きくした。写真枠の太さを「3px」にして色をサイトカラーの「#264b67」へ変更。
class名：.authorbox .profile_name a, .authorbox .author_sns a
コチラのcssを変更すると記事下のプロフィールも変わってしまいますので注意を！
文字の色：「color: inherit;」→「color:#264b67;」
写真枠の色と同じく変更。
これで設置＆設定は完了です。
さいごに
サイドバーへプロフィールを設置するカスタマイズ方法の解説をしました。
スワローのシンプルなデザインを生かしたカスタマイズ方法です。
今回のブログでは「仁科さん運営のEnjy IT Life」というサイトを参考にカスタマイズ＆解説ブログを書かせて頂きました。とでも参考になり是非色々な方に広めたくて私も記事にさせて頂きております。
仁科さんも言っておられましたが、PCサイト表示以外ではサイドバーが下に回り込み「この記事を書いた人」と「プロフィール」が連続して表示されます。サイドバーのプロフィールの配置場所にもよりますが、2つ表示されることは確実です。
そのため、サイドバーにプロフィールを載せた場合は、記事の終わりに掲載されるオリジナルの方は削除した方が良いと私も思います。
表示されても問題はないので下に設定方法は記載します。興味があれば設定してみて下さい。
追加cssにレスポンシブの記載を追加すれば良いのですが。
追加するコード「 @media screen and (max-width:980px){#custom_html-2{ display: none; }} 」
各サイトによって「#custom_html-2」の数字部分が違うと思います。
完成したプロフィールからコードを調べにいきます。
少し見にくいですが非表示にする部分は「タイトル（私の紹介）」と「プロフィール内容」です。
ソースをみると<div id="custom_html-2">全体を非表示にすれば良いですね。何度もいいますが「custom_html-2」の部分は皆さん違いますので自分のサイトで調べて下さいね！
「 @media screen and (max-width:980px){#custom_html-2{ display: none; }} 」ブルーの部分に調べたコードを入力して下さい。レッド部分はPadでも非表示なら980px、スマホだけで良い場合は680pxと入力して下さい。
レスポンシブのブレイクポイントは端末の進化によってオススメのサイズが諸説あるので自分で決めて頂いて構いません。一応この設定でPad端末からは非表示になります。
お疲れさまでした。
最後までお読み頂いてありがとうございました。
