No Life No Hana

No Life No Hana

カニンヘンダックス 花との日々

【無料版でも簡単に】aboutページをカスタマイズしてみました

 

この頃ブログをカスタマイズすることに、すっかりハマってしまった私。

実はデザイン的なことが、けっこう好きだったりします。(大したことはできないのですが。。)

なので毎日どこかしら、ちょこちょこといじってます。

そんな中、aboutページを意外と簡単にカスタマイズできたので、今回はその方法をご紹介しようと思います。

もちろん、私には何の知識もないので、スペシャリストさまの力をお借りしました。

 

 

aboutページとは

プロフィール、ですね。

基本的に記事の下やサイドバーにあり、アイコンやIDをクリックすると、ブログ投稿数や読者数などが見られるページです。

 

 

カスタマイズしたわけ

面白い記事を読むと、どんな人が書いてるんだろう、と気になりませんか?

私は気になります。

いろいろなブロガーさんのaboutページを見させていただきましたが、皆さま、とても凝ってらっしゃる。。

どんな方が、どういうことを書いているのかが一目瞭然なので、さらに興味が湧いてきます。

なので、aboutページはブログを読んでいただくにあたり、けっこう大事なところなんじゃないかと思ったのです。

 

 

プロフィールの簡単な作り方

まずプロフィールを作ってみました。

このブログの場合、愛娘、花のブログなので、花のプロフィールを写真と見出しを使って書いてみました。

HTMLなんてちんぷんかんぷん、と思っている私のような方も、簡単に作れちゃいます。

f:id:HANA1005:20181106125252j:image

もうおわかりかと思いますが「記事を書く」を使います。

コツは、必ずPCで作ること

  1. 「記事を書く」→「見たままモード」で、画像、見出しなどを使ってプロフィールを書く。
  2. 左上のタブを「HTML編集」に切り替え、まるっとコピー。
  3. 「設定」→「基本設定」→「aboutページ編集」に貼り付ける。

これだけです。

このHTML変換方法を思いついた時は「私スゴイ!」と感動したのですが、検索してみたら、けっこう皆さんやっていました。。(そりゃそうだ。笑)

アプリからだと「HTML編集」に切り替えられないので、お気をつけください。

 

 

「ブログ投稿数」「読者数」などの部分をどうにかしたい

とてもシンプルな表示のこの部分。

無料版でも、簡単にカッコよくできたりするんだろうか、と検索して見つけた記事がこちらです。

www.okuni.me

aboutページの大切さがわかりやすく書かれていて、何よりそのデザインがとてもステキ。

記事の最初に載っているCSS(ブログ投稿数や読者数の部分)のコードを、さっそくコピペさせていただきました。

 

出来上がったものがこちら。

f:id:HANA1005:20181106132847j:image

以前から、読者さまのアイコンが小さいなぁと思っていたのですが(特にスマホ版)、大きくすることができました。

これで読者さまがどんなアイコンを使っているか、ハッキリわかるようになりました!

ただ少しだけ、お手本より小さくしました。

85と86行目の height: 45px; と width: 45px; の数字を30にしました。

 

以下、お手本から変更した点です。

 

☆「プロフィール」「ブログ投稿数」などの字の大きさを、少し小さくしました。

10行目の font-size: 1.3em; を font-size: 1.0em; にしてみました。

 

☆色を変えました。color: #676F74; を color: #ffa3a3; にしました。

こちらのサイトで好きな色を探せます。

www.colordic.org 

☆フォローボタンはデザインテーマのものを使いました。

Haruni / フォローボタンの設置方法

ご参考までに。

 

一見いい感じに見えるのですが、「プロフィール」などの文字と吹き出しの間に、線が残ってしまってます。

知識のない私はどうすることもできず。。

まあ、そこに目をつぶれば、とても良い感じ。(自己満足w)

読者さまのアイコンにカーソルを乗せると、フワッとして、なんだかWEBサイト感が増した気がします。

 

 

さいごに

実際のabout ページはこちらです。

No Life No Hana / about

よかったら、見てやってくださいませ。

 

無料版の方も、ブログ初心者の方も、簡単にカスタマイズできると思います。

皆さま、ぜひステキなaboutページを作ってみてください!

 

 

ちなみに、今日の花さん。