Kanamii

伝えたい想いを自分らしく・・・

kanamii-1127-1

スポンサーリンク

STINGERカスタマイズ

【WordPress】サイドバーのサムネイル付きプロフィール欄を「STINGER PLUS+」と同じスタイルで作成する方法

2016/09/26

前回の更新では、人気記事ランキングを表示できるWordPressプラグイン「WordPress Popular Posts」のインストールと設定方法、人気記事を無料WordPressテーマ「STINGER PLUS+」の新着記事と同じスタイルで表示する方法をご紹介しました。

プラグイン【WordPress Popular Posts】の設定方法と人気記事を「STINGER PLUS+」と同じスタイル(順位付き)で表示する方法

ここでは、その応用編として、下記のようにサイドバーのサムネイル付きプロフィール欄を、同じくSTINGER PLUS+ の新着記事と同じスタイルで作成する方法をご紹介します。

kanamii-1200-1

そして、なんだか私のこのプロフィール欄だけではショボイ感じなので・・(笑)
プロフィールのすぐ下に表示させているTwitterウィジェット(埋め込みタイムライン)の導入方法と背景を透明にするカスタマイズ方法も一緒にご紹介していきたいと思います。

スポンサーリンク

サイドバーにプロフィール欄を作るための事前準備

プロフィール画像を準備&アップロード

プロフィール画像は、「100px以上の大きすぎない正方形の画像」が適しています。
正方形でなくても正常に表示されることもありますが、サムネイルを角丸に指定している場合、画像によっては楕円になってしまうこともありました。

準備したプロフィール画像は、WordPressダッシュボード→メディア→「新規追加」でアップロード。
アップロードした画像をクリックして表示される「画像URL」をメモ帳にコピーしておいてください。

プロフィールページの作成

こちらは任意となりますが、私自身は、「このブログはどんな人が書いているんだろう?」とご来訪者様に興味を持ってもらえることはとてもプラスだと考えています。

でも、自分のプロフィールページ作成って難しいですね。
・・難しかったです。
▶profile-Kanamii

私の場合は、ホームネームとサイト名の由来、これからのことなど、思い浮かぶことをそのまま文章にした微妙なページとなりましたが・・(笑)、ここは是非ご自身の直感とセンスで。趣味や特技、過去の略歴など、「知ってもらいたいこと」を書き綴ってみてください。

プロフィールページを作成する場合は固定ページで作成し、「プロフィールページURL」をメモ帳にコピーしておいてください。
▶固定ページについて

ウィジェットにプロフィール欄のコードを追加

WordPressダッシュボード→外観→ウィジェット→右側の「サイドバーウィジェット」内に、左側の「テキスト」をドラッグ&ドロップします。

タイトルを入力後、コードを追加します。

「画像URL」と「プロフィールページURL」の文字を削除して、あらかじめ準備しておいたhttp://で始まる各URLを張り付けてください。
「HN入力」の文字を削除して、ご自身のホームネームを入力、「メッセージを入力」の部分と「プロフィールページへ」の部分はお好きなテキストに。途中、改行を入れたい場合は、<br>を入力してください。

※サムネイルを角丸に指定していない場合は、<div class="kanren kadomaru">を、下記のコードに書き換えます。

ここまでで、サイドバーのプロフィール欄の作成は完了です。
お疲れさまでした。

Twitterウィジェット(埋め込みタイムライン)の導入とカスタマイズ方法

【2016年9月26日追記】
記事を更新後、Twitterの埋め込みタイムラインウィジェットの作成方法は新たに変更されました。
現在の作成方法とカスタマイズ方法は下記ページをご参照ください。

サイドバーへのTwitter埋め込みタイムラインウィジェットとフォローボタンの設置方法(変更後)- ゼロからのWordPress入門【20】

導入方法

Twitterにログイン→右上の小さなプロフィール画像→設定→画面左端の「ウィジェット」→「新規作成」をクリック

設定項目を入力し、下記赤枠のコードをコピーしてWordPressのウィジェットに貼り付けます。

kanamii-1200-2

埋め込みタイムラインの背景を透明にする方法

上記で取得したコードの中のdata-widget-idというコードを見つけてください。
そのコードの直前に、下記コードを追加するだけで、埋め込みタイムラインの背景が透明になります。

参考サイト
▶埋め込みタイムライン|Twitter Developers

参考サイト内には、この他に、「ヘッダーを非表示」「フッターとツイートコンポーザーのリンクを非表示」「境界線やツイートの区切り線の非表示」「スクロールバーを非表示」のカスタマイズ方法が掲載されています。

最後に余白を調整

当ブログのように、プロフィール欄のすぐ下にTwitterの埋め込みタイムラインを表示させると間に余白が空いてしまうので、CSSで余白を調整します。

全てのテーマファイルの編集は「子テーマ」で行うことをおすすめします。
親テーマを編集される際には必ずバックアップをとり、テーマの取り扱いには十分ご注意ください。
▶子テーマについて

WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」に、下記コードを追加。

※px数はお好みに応じて変更してください。

子テーマのstyle.cssに追加したコードが反映されない場合は、追加場所を先に入力しているコードの前に変更して再度お試しください。

以上、サイドバーのプロフィール欄を「STINGER PLUS+」の新着記事と同じスタイルで作成する方法とTwitterウィジェット(埋め込みタイムライン)の導入とカスタマイズ方法のご紹介でした。

最後までお付き合い下さりありがとうございます。

▶STINGER PLUS+ カスタマイズ全記事一覧へ

この記事が気に入ったら
いいね!しよう

Twitter で

Facebook・Twitterへ最新記事をお届けします

-STINGERカスタマイズ