プロフィールをカスタマイズして大きくしました。

 

こんにちは、桃太郎です。

はてなブログに元々あるプロフィール欄でも満足していたのですが、プロフィール画像が大きいのも見やすくていいなぁと思ったので思い切って変更してみました。

こちらの記事を参考にさせていただきました!

panmeeee.hatenablog.com

もうちょっと詳しい解説を…。

変更の仕方

パソコン表示用です。
元々のプロフィール欄はこんな感じでした。

f:id:Momotarous:20170811195815p:plain

うーん、これでも全然いいんだけど、折角頑張って描いたアイコンが小さい…!
変更後のプロフィール欄はこんな感じです!

f:id:Momotarous:20170811200410p:plain

どうですか??
結構いい感じじゃないですか?(自画自賛w)

先ほどご紹介したみっきーさんの記事で、新規記事を作って下書きにしてそこでプロフィール記事を作るとあったので早速作成。

その前に、アイコンは300×300で設定。
みっきーさんは枠を作ってましたが、私はとりあえず枠なしで。

f:id:Momotarous:20170811204800p:plain

普通に記事を書くみたいに、画像入れてプロフィール欄に載せたい言葉を書きました。
ついでにプロフィール文章も変更。

読者ボタン・Twitterフォローボタン

読者になるボタンは、設定→詳細設定→下の方の読者になるボタンに書いてあるHTMLをコピーして貼り付けてください。

f:id:Momotarous:20170811201022p:plain

ツイッターのフォローボタンはTwitterボタンから

f:id:Momotarous:20170811201458p:plain

赤丸部分を画像のように設定します。

ユーザー名は自分のTwitterのIDを入れてくださいね。
HTMLをコピーして、先ほどのプロフィール記事に追加。
追加するときは、見たままではなくHTML編集で追加してくださいね♪

f:id:Momotarous:20170811201832p:plain
ちなみに、わたしのプロフィールの紹介分の青枠の所はこちらを参考に追加しました。

saruwakakun.com

先ほど作成したプロフィールをHTML編集の画面でコピーして、ダッシュボードのデザイン→スパナマーク→サイドバー→モジュールの追加→HTMLに貼り付けます。

f:id:Momotarous:20170811202501p:plain

一応これで完成ですが、青枠の差し込み方も載せておきますね。

f:id:Momotarous:20170811202646p:plain

【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30さんから好みの枠を選びます。

HTMLの方を紹介分の前後に持ってきます。

f:id:Momotarous:20170811203130p:plain

そして、CSSの方を一番下の方に<style></style>タグで囲って追加します。

f:id:Momotarous:20170811203611p:plain

すると、<div class=”box14″>~</div>で囲んだ間の文字の周りに枠が出てきたと思います。

これで完成ですね♪

まとめ

カスタマイズが紹介されてるブログは本当に助かります^^

お陰様でカッコよくなったと思います!

 COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

パソコンでサイトを見る時のスクロールはきちんとクルクルしてますか?(笑)

A8.netで自己アフィリやセルフバックが反映されない。原因と解決法は?

SEO対策にSEOチェキ!競合ブログを解析してみよう。

はてなブログ必見!簡単にh3見出しをh2に変更する方法

PC表示のグローバルメニューのマーク(webフォント)の削除、変更についての解説

エックスサーバー契約しました^^