炭酸せんべい

気になったことを適当に。 MacやiPhoneのこと多め、DIYも。

MENU

はてなブログ プロフィール欄 いじれるみたいなのでいじってみる

 

f:id:ypmemo:20170516122718j:plain

 

ノンノ持ってへん、どうもナカニシ(@tssb26)です。

とりあえず、サイドバーのプロフィール欄をちらっとご覧下さい

なんのメッセージ性やねん(岡崎体育)、いうくらいデカすぎた

ま、世の中これくらい意識高い系の炭も一つくらいあってええんやないかと

ナイスカーボン!(やかましわ)

てことで、プロフィール欄をちょこっといじってみました

 

 

 

ぼちぼち自己紹介をきっちりと

あまりいじってなかったプロフィール欄(aboutページ)ですが
こちらの記事をみて、あー、ちゃんとせな、思って

www.omg-ox.org

 

どこまでいじれるのか

自分は何者かということをきちんと書かないかんと思いながらも
どこをどう間違ったのか”画像もっとでかくできひんかなぁ”っていう違う方向へ

調べてみたら、デフォルトのプロフィール欄って簡単に作成できる代わりに
HTML書けないとか、設定項目も決まってて、あんまり自由度ない感じ

んなこんな言うてたところ、こちらの記事に遭遇

panmeeee.hatenablog.com

 

そっか、自前で作ったらいいんやと

 

プロフィール画像の用意

サイズは横300pxくらいが丁度いいらしいです
ブログテーマによって変わるかもですので確認してくだいさい

ちなみに、私が作ったのは縦横200pxです、参考までに

 

f:id:ypmemo:20170516101053j:plain

 

最初は300pxで作ったのですが、ブログ開いたときの右上の炭があまりにもやかましかったのでサイズ落としたんです
(これでもまだやかましい)

 

普段のブログを書く要領

画像を大きくする方法はこれくらいにして本題へ

公開はしませんが、出来上がった画像を使って普通にブログ書く感じでプロフィール記事を書いて下さい

f:id:ypmemo:20170516123046j:plain

 

書き終わったら「HTML編集」モードに切り替えて、内容をすべてコピー

f:id:ypmemo:20170516123226j:plain

 

できた記事は、このまま「下書き保存」しておくといいですよ、後で手を加えれますし

 

新プロフィール欄の作成

コピーが終わったら貼り付けますので、ダッシュボードから

デザイン」→「カスタマイズ」→「サイドバー」→「モジュールの追加」へ

f:id:ypmemo:20170516123300j:plain

 

モジュールを追加」で「</>HTML」を選んで矢印の場所へペースト

タイトルは「プロフィール」とか「中の人」とか「書いてる人」とか適当に

f:id:ypmemo:20170516123311j:plain

最後に「適用」ボタンを押して完了です

 

微調整

微調整、つまり微細な調整ですが、結構大事なことも書いてます

 

旧「プロフィール」は削除してください

プロフィール欄が複数できてますので、デフォルトの旧プロフィール欄を削除して下さい
削除しても、いつでも復活できます

 

「読者になる」ボタンをつける

下記のコードを貼り付けたい場所にコピペしてください

 

<div class="hatena-follow-button-box btn-subscribe js-hatena-follow-button-box">
<a href="#" class="hatena-follow-button js-hatena-follow-button">
<span class="subscribing">
<span class="foreground">読者です</span>
<span class="background">読者をやめる</span>
</span>
<span class="unsubscribing" data-track-name="profile-widget-subscribe-button" data-track-once>
<span class="foreground">読者になる</span>
<span class="background">読者になる</span>
</span>
</a>
<div class="subscription-count-box js-subscription-count-box">
<i></i>
<u></u>
<span class="subscription-count js-subscription-count"></span>
</div>
</div>

 

「Twitter」フォローボタンを付ける

下記のコードをコピペして[あなたのID]のところを
あなたのTwitterアカウントに書き換えてください

あと「data-show-count="false"」の「false」を「true」に変えると、フォロワー数が表示されます

 


<div class="hatena-follow-button-box btn-twitter">
<a href="https://twitter.com/[あなたのID]" class="twitter-follow-button" data-show-count="false" data-lang="ja">
[あなたのID]をフォロー
</a>
</div>

 

最後に

まずは、どんな人間か書いてしまって、親近感もってもらうのがいいですね

趣味があう、住んでる場所、年齢が近い、同じくらいの子供がいる

なにかしらの共通点や、共感を持てる部分があれば
そこからブロガー同士のつながりも広がりやすいかなぁと思います

 

てことで、私のプロフィールページがこちらになります