ブログプロフィールを記事下に!Fancier Author Boxが見栄え良くてオススメ! 
  • ピックアップおすすめ記事

ブログプロフィールを記事下に!Fancier Author Boxが見栄え良くてオススメ! 

やあ、カスタマイズ初心者諸君。

この間ブログで失敗したばかりなのにまたかい?
いじっては直し、いじっては直し。

君のプロフィールなんて0.3秒で閉じられてるから安心しなよ。

しかも自分で作らずプラグインに頼る?
そんなスタンスだから読者が少ないんだよ。 いい加減気づくといいのに。


こんちは、WordPress初心者のシゲ(@piece_hairworks)です。 Twitterで見かけたひろまさん(@hiroma20)の記事で非常に興味深いものがありました。

なるほど、プロフィールか…。

確かにアイコンがいたるところにあることで、ブログの人の事を覚えてもらえる。ブログ名ははっきりと覚えてないけど「あー!あのアイコンの人のブログ!」なんてよくあるし。

そのためにはまずこのアイコンを印象づけなければ。

かといってイカしたプロフィールを作るほどの、カスタマイズテクニックはないし。今のプロフィールなんてGoogle+のバッジだしね。(これはこれで気に入ってる) なんかいい感じのプロフィールないかなぁなんて、いろんな人のブログを見てたんです。

いろいろな人のブログを見ていると、皆さん個性的なデザインをしています。

ブログはデザインよりもコンテンツ!とはわかってはいるものの、ついつい素敵なブログを見ると真似したくなります。

そうはいってもスタイルシートをいじったり、CSSがなんちゃらかんちゃらなんて…。初心者にはかなりハードルの高いもの。 できれば簡単にカスタマイズできると嬉しいところですよね。 そしたら見つけちゃったんですよ…。

いい感じのやつ!


「死ぬこと以外、かすり傷」で見つけた、いい感じのプロフィール

スクリーンショット 2015-05-27 22.59.53

最近とんでもないシュールな記事で賑わってる、せいやさん(@se1248)のブログ「死ぬこと以外、かすり傷。」を見てて思った。 ▼シュールな記事。これ面白かった( ^ω^ )


その文末にイカしたやつ見つけた。 ▼これ。 スクリーンショット 2015-05-27 22.20.28  なにやらタブで最新の記事なんかも観れるようになってるし、SNSにもリンクがある!見た目もきれいに収まってて手作り感もない!ちゃんとアイコンも表示されてるし。

これ使えばアイコンを覚えてもらえるだろう、たぶん。 これ、どうやってつくるんだろう?恥ずかしくてせいやさんには聞けなかったが、調べてみるとなんとか見つかったのでご紹介。

その名もFancier Author Boxというプラグイン

と言っても読めないので正式名称わからないですが、FABです、FAB。 ▼設定方法はこちらの記事を参考にさせていただきました。


本来は複数のライターがいる場合に使うプラグインのようですが、個人で使うブログのプロフィールでも使えそうなのでこれを採用して導入してみます。

Fancier Author Boxの設定の手順

それではまいりましょー。

まずはインストール

まずはWordPressの【プラグイン】→【新規追加】からFancier Author Boxを検索、インストールして有効化します。 スクリーンショット 2015-05-27 23.06.11  ここは他のプラグインと同様ですね。問題なければ次へ。

次に配置とボックスの配色の設定

有効化した後はWordPressのダッシュボードから【設定】→【Fancier Author Box

スクリーンショット 2015-05-28 13.53.42

▼するとこんな感じのが開きます。

スクリーンショット 2015-05-27 23.01.59

僕の設定だとこんな感じです。それぞれの設定は以下の通りです。

  • 投稿画面で表示する・・・投稿画面で表示する場所及び非表示を選択できます。
  • 固定ページで表示する・・・固定ページで表示する場所及び非表示を選択できます。
  • 最新の記事・・・タブで表示される新着記事の表示数を選べます。
  • 色の設定・・・それぞれの配色を選ぶことができます。ボーダーってのは囲んでる線のことみたいです。タブ内の色は読みにくくなるので、個人的に白が一番しっくりきました。お好みでどうぞ。▼以下の画像を参考にしてください。

スクリーンショット 2015-05-27 21.55.42

プロフィールの細かい設定も決めましょう

プロフィールの説明やウェブサイトへのリンクは、ダッシュボードから【ユーザー】→【あなたのプロフィール】から設定します。

スクリーンショット 2015-05-27 23.57.13

▼プロフィールの説明欄は【あなたについて】のプロフィール情報の内容が反映されます。

スクリーンショット 2015-05-28 11.55.40

▼そこからずっと下に進むと、Fancier Author BoxのSNSの設定もできます。

スクリーンショット 2015-05-28 11.56.26

アバターはGravatarで登録

アイコンはGravatarから登録しました。

無料だし、他のブログにコメントした際にアイコンが出るようになるので便利です。英語なんでややこしかったりするんですが、そこまで気にしないでどんどん進んでいったらアップロードの画面がありました。 無料のものを選べば問題ありませんでした。ただ、進めとしか言えなくてすいません。

あとがき!

僕はアピールするために記事上・下と両方設置しています。

ちょっとウザいなあという人は記事下だけでもいいかも。 このプラグインを使うと簡単にいい感じのプロフィールが、CSSとかのややこしい知識がなくても作れます。

勉強するのが苦手な僕には嬉しいプラグインです。うまく説明できてなかったらスンマセン。

追記:記事上はスマホ表示の時にウザい

上下に設定していたんですけど、やっぱり記事上はやめたほうがいいかも…?パソコン上は問題なかったんですけど、スマホでの閲覧の際にスマホ以上にうざいっすw やっぱり記事下のみがスマートでいいですよ(^-^)

追記2:TOCプラグインでのhタグ構成の崩れ

このFancier Author Boxを入れると、TOCプラグインの目次に崩れ(記事下のボックスがh4タグに出力される)がでます。ぼくは「あとがき!」をh2タグにしてるので、そのあとのFancier Author Boxがh4タグだと構造上おかしいそうです。

▼こちらもあわせてどうぞ。
Fancier Author Boxのh4出力を止める方法を教えてもらいました。TOCプラグインとの問題も解消!

追記3:デザイン崩れがある人はこちらのプラグインもオススメ!

紺さん(@kon_guutara)はどうやらプラグインとの相性が悪く、デザイン崩れが起きたようです。同じような症状があるようであれば、こちらのプラグインもシンプルでオススメですよ。

▼Fancier Author Boxよりもシンプルでいいかも!

よく考えたら僕はもう使ってないプラグインだった〜((((;゚Д゚)))))))

ははは。じゃあねー!( ´ ▽ ` )ノ

この記事が気に入ったら
『いいね!』してね

Twitter でシゲを

Sponsored Link

コメント & トラックバック

  • Comments ( 0 )
  • Trackbacks ( 5 )

No commented yet.

  1. […] 参考ブログプロフィールを記事下に!Fancier Author Boxが見栄え良くてオススメ! […]

  2. […] t;「あなたのプロフィール」より設定します。ここで「SNS」等の設定をしますので必ず編集してください。 参考 ブログプロフィールを記事下に!Fancier Author Boxが見栄え良くてオススメ! […]

コメントをどうぞ!

*
*
* (公開されません)

Facebookからコメントする