晩婚花嫁 アメリカ生活日記

アラフォーで国際結婚した、アメリカ生活日記

*結構見られてる!?aboutページをカスタマイズ*

なにげなぁく、Googleアナリティクスを見ていたら、aboutページが意外と見られている事が分かりました(゚Д゚;)2、2番目。1番目はTOPページだから、実質1番目( ̄▽ ̄;)

f:id:CandR:20180925044043j:plain

aboutページってなに?

プロフィールのアイコンか、名前/IDをクリックしたら飛ぶページになります。

https://ブログのURL/about がアドレスになります。

f:id:CandR:20180925051332j:plain

私のページは👇

https://www.necobe.com/about

どこで編集するの?

編集ページへ移動

設定   aboutページ aboutページ編集 

f:id:CandR:20180925053539j:plain

aboutページ編集でカスタマイズする

title要素:タブに表示されるaboutページのタイトル。ここはCSSでのみカスタマイズが可能なので、ワタクシには無理です(;´・ω・)

自由記述欄:ここでカスタマイズ☆モードはHTMLで詳細は後ほど。

プロフィール:表示させるものに☑を入れる。ここは『自由記述欄』で編集するので、私はすべて外しました。全て外すと非表示になります。

リンク:必要に応じて入力。入力無しの場合は非表示になります☆

ブログ投稿数ブログ日数継続期間読者:表示させるものに☑を入れる。ここもCSSのみカスタマイズが可能なので、ワタクシには無理です(;´・ω・)

タグ?(゚Д゚;)無理です!!の私がとった方法

aboutページのカスタマイズHTMLを使ってしますが、タグに詳しくない私としては、コードを書いていくなんてできません。そこで思いついたのが、記事を書くページで作って、HTMLタグをまるまる貼り付ける作戦!!

ベース作り

普通に記事を書く要領でベースをまず作りました

記事をかく 大見出し、中見出しを使ってaboutページ、ベースを作成。

フォローを中見出しにするの忘れてました(゚Д゚;)

f:id:CandR:20180926031032j:plain

見出しは既にカスタマイズ済でした参考にしたのは、👇カスタマイズの神、サルカワ様ページ

saruwakakun.com

プロフィール画像を貼り付ける 

元々のプロフィール画像はなんだか小さい。。。それに、出来れば上の方に表示したいので、大見出し、「ブログについて 」のすぐ下に貼り付ける様にしました。

HTMLほぼ無知ですが、中央揃えとか、画像の挿入タグなら知ってます(`・∀・´)エッヘン!!

<div align="center"*1><img src="プロフィール画像のURL" width="150" height="150">*2<br><span><a href="http://profile.hatena.ne.jp/はてなID/">ニックネーム</a>*3<i class="badge-type-pro">はてなブログ*4</i></span></div>

↑これを、『編集見たまま』と『プレビュー』の間にある、『HTML編集』✨で、『<h3>ブログについて</h3>』の下に貼り付け。

プロフィール画像のURLは、プロフィール画像を右クリックして、画像アドレスをコピーで取得できます

ここまでで、こんな感じになりました

f:id:CandR:20180926054115j:plain

ここまでやって、一旦下書き保存。

 

プロマークのコードはこちら👇で知りました。また、これを変更することも出来るらしい✨素晴らしい。

alysantwanet.hatenablog.com

カテゴリーとフォローボタンの設置

カテゴリー欄とフォローボタンは、ちょっとおしゃれな感じにしたいなぁ。。。って事で、👇こちらを参考にさせて頂き、ボタンを設置する事が出来ました

www.ituore.com

やっぱりプログラマー様は違いますねぇ~(゚Д゚;)こんな素敵なボタンを惜しげもなく披露するなんて。。。はてなブログは神様だらけ

CSSは、記事上・記事下用3(背景が上から降りてくる)バージョンを利用させてもらいました

フォローボタンで、FB、Google+Feedlyは必要なかったので、このコードの色と名前を変更しました。(色だけでもいいんだけれども。。w)

.content-inner-follow-buttons .facebook {
    color: #305097;
    border: 1px solid #305097;
    background: #ffffff;
}
.content-inner-follow-buttons .facebook:hover:after {
    top:0;
    background:#305097;
}

はてなブログに11種類から選べるSNSフォローボタンをコピペ+αで実装するカスタマイズ - いつ俺〜いつから俺ができないと錯覚していた?〜

fakebook  diary へ(2箇所)、color:#305097 ➡ #f7984a へ(3箇所)

同じ要領で、Google+ ➡ Hobby、Feedly ➡ San Diego 変更しました。

デザインCSSを変更して閉じ、次はHTML!!

まずは、そのままコピペで利用できる、フォローボタンから

コードをコピーして、フォローの中見出しの下へ貼付け、要らないものを削除。私は、3行目の『フォローする』行、FB、Google+Feedlyの行を削除しました。

アカウント、ブログURLを自分のに変更する事と、ヘッダーにFront Awesomeのコード貼るのを忘れちゃだめですよw

こんな感じになりました 

f:id:CandR:20180926070929j:plain

今度は応用編。カテゴリーボタン

<center>
<div class="content-inner-follow-buttons" >

 

はてなブログに11種類から選べるSNSフォローボタンをコピペ+αで実装するカスタマイズ - いつ俺〜いつから俺ができないと錯覚していた?〜

 最初の2行と、

<a class="instagram" href="URL" target="_blank">
<i class="blogicon-instagram lg"></i>
<span class="inner-text">Instagram</span>
</a>

 

はてなブログに11種類から選べるSNSフォローボタンをコピペ+αで実装するカスタマイズ - いつ俺〜いつから俺ができないと錯覚していた?〜

インスタのコード部分×3回を、中見出し『カテゴリー』の下へ貼り付け。

instagram  diary へ(2箇所)、URL ➡  カテゴリーのURLへ(1箇所)、blogicon-instagram lg ➡  fa fa-book fa-lgへ(1箇所)、

同じ要領で、instagram  Hobby、San Diego 変更しました。

アイコンは Front awsome でコードを調べてください

旧バージョン:Font Awesome, the iconic font and CSS toolkit

現行バージョン:Icons | Font Awesome

</div>
</center>

 

はてなブログに11種類から選べるSNSフォローボタンをコピペ+αで実装するカスタマイズ - いつ俺〜いつから俺ができないと錯覚していた?〜

最後に、締めのコードを継ぎ足して、終了♬ 

何度も言いますが、URLを自分のに変更する事と、ヘッダーにFront Awesomeのコード貼るのを忘れちゃだめですよw

f:id:CandR:20180926070948j:plain

いよいよaboutページの編集(ってかコピペ)

実は簡単、この記事ページのHTML編集ページを丸々コピーして、aboutページ編集の自由記述欄へ貼り付けると完成です

うん、ワタクシ、頑張りました自分を褒めてあげたい!!そして、カスタマイズって楽しい!!←調子に乗るなw

 

*1:<div align="center"></div>中央寄せ

*2:<img src="プロフィール画像のURL" width="150" height="150">画像の挿入。サイズ調整可♬

*3:ニックネームにはてなprofileをリンクさせた 2018.10.7更新

*4:<i class="badge-type-pro">はてなブログ</i>・・・はてなブログPROマーク