オークニズム

はてなブログでのカスタマイズやブログ運営ノウハウをメインに、オークニが気になったモノ、コトをシェアするブログ。

オークニズム

オークニのイズム満載ブログカスタマイズ

【コピペOK】プロフィールをSANGOみたいに今風にするカスタマイズ

【コピペOK】プロフィールをSANGOみたいに今風にするカスタマイズ アイキャッチ

やりました。

もしかしたら、現状のはてなブログ界隈で一番オシャレかもしれないプロフィール欄

このカスタマイズをパクれば、みなさんのブログも一気にトレンディになっちゃうアルよ。

個人個人でちょっと調整が必要なところもアルけど、実装自体はHTMLとCSSのコピペだけなんで簡単に出来ちゃうアルよ。

それでは、さっそく本題へ。

SANGO風プロフィールの完成イメージ

SANGO風プロフィールの完成イメージ図

控えめに言ってもオシャレですね!笑

まさかこれがあの、ダサくて有名なはてなブログのプロフィールだなんて…!そんな声が今にも聞こえてきそうです(耳をすませば…)

PCでご覧の方は、すでにサイドバーに全く同じデザインで置いてあるのでスグに確認できると思います。 

背景画像&アイコン被せが今風

これは、WordPressのテーマ「SANGO」がやっている特徴的なデザインですね。ただ、それだけに限らず「背景画像&丸アイコン」というのは、そもそも今のプロフィールのトレンドですね!

たとえばTwitter

【コピペOK】プロフィールをSANGOみたいに今風にするカスタマイズ 背景画像&アイコン被せが今風 Twitter画像

 ちょっと僕の場合背景画像もアイコンも白で見にくいですがwww

たとえばFacebook

【コピペOK】プロフィールをSANGOみたいに今風にするカスタマイズ 背景画像&アイコン被せが今風 Facebook画像

丸アイコンではありませんが、これも背景画像にアイコン被せですね!

たとえばLINE

【コピペOK】プロフィールをSANGOみたいに今風にするカスタマイズ 背景画像&アイコン被せが今風 LINE画像

これは完全に今回のプロフィールと近いカタチですね! 

その他にも、SNSやアカウントを要するアプリ、たくさんのところでこの背景画像&アイコン被せが今のトレンドとなっているのはみなさんもお気づきかと!

カスタマイズ概要

はてなブログのサイドバーには、元々プロフィールが備わっております。

それはお世辞にもオシャレとは言い難いです。しかも、それをHTMLもろともカスタマイズするのは不可能です。

ですので、ここは伝家の宝刀「自作HTML」でプロフィールを0から構築します。

とは言っても、やることはコピペと微調整だけです。

用意するもの

・背景用の横長画像
(特に縦横比やサイズの指定はなし)
・アイコン用の正方形画像
・「Font Awesome」のアイコン読み込み。(こちらの記事を参考に→【アイコン】はてなブログで「Font Awesome」をサクッと使う方法 - オークニズム

CSSのコピペ

それでは、まずCSSのコピペをしましょう。

場所は

管理画面より、「デザイン」→「カスタマイズ」→「デザインCSS」です。

コードはこちら

ちょっと長いですが、怯えなくて大丈夫ですw
基本はコピペでおkでして、変更点というと…

12行目:ここに背景画像が入るので、既存のURLを消して自分のURLを挿入。

(背景画像のURLを取得する簡単な方法は、いったん記事作成で画像を挿入し、それをHTML編集モードで見ればURLが生成されてます!)

13,18,24行目:ここで、被さるアイコンが上からどれくらい離れるか調整しています。なお、18行目と24行目は、タブレット/スマホの場合の調整です。

※追記※
173行目:display: inline-block;の場合回り込むケースがあるので、display: block;の方が良いと思います!

大事な変更点はこれくらいですかね!

あとは、色とか文字の大きさとか、余白の調整とかとか、ご自身で確認しながらカスタマイズして頂ければ幸いですm(_ _)m

HTMLの挿入

次に、サイドバーへHTMLの挿入です。

場所は

管理画面より、「デザイン」→「カスタマイズ」→「サイドバー」です。

新規に「モジュールを追加」で「HTML」を選択しましょう。

タイトルは未記入でOK。本文に以下をコピペしましょう。

コードはこちら

こちらはCSSと違い、URLなどもあるので、注意して変更してください。変更点は以下の通りです。

9行目:aboutページのURL

10行目:アイコン用画像のURL

13行目:aboutページのURL

15行目:名前

16行目:Proじゃなければ丸ごと削除

20行目:プロフィール説明文

21行目:aboutページのURL/ボタンに表示される誘導文

26行目:読者登録URL

32行目:Twitter URL

38行目:Feedly URL

これら全部、デフォルトで僕の情報が入っておりますので、それらをご自身の情報に変更してください。

また、別途オシャレなaboutページについてや、上記と似た箇所のより詳しい変更説明については以下のページを参考にして頂ければ!

【コピペ歓迎】はてなブログのダサいaboutページを見やすくオシャレにカスタマイズ! - オークニズム

管理画面で実際の表示を見ながら調整

【コピペOK】プロフィールをSANGOみたいに今風にするカスタマイズ 管理画面で実際の表示を見ながら調整

最後に、「変更を保存する」を押すまでは実際に反映されませんので、ここで見栄えを調整してもらえれば宜しいかと!

あ!

あと、新規プロフィールが作れたら、最後の最後は既存のプロフィールを消しておきましょう!w

まとめ

どうでしょう?ちゃんとプロフィールがオシャレになりましたか?!

おそらく、テーマや既存のCSSによって再現性が変わってくるかと思います。というか確実にw

もし、なんか変や〜😭 とかありましたら、Twitterにてご連絡いただければわりと即レスでご対応できるかと!

ついでにフォローもしてくれたら嬉しいかなっ😂 w

それでは!本日はこのへんで!

- 特に人気のカスタマイズ -