オフィス・アキ

飲み会出席率4.5%の "不良社員" が、組織に縛られずに自由に働く為のちょっとしたコツをお届けします。

【はてなブログ】スマホ画面のプロフィールをカスタマイズする方法まとめ

はてなブログのカスタマイズって、けっこう大変ですよね。

残業しないリーマン、アキです(@RrsNZnXNK2TUGhj)。

 

先日、スマホ画面のプロフィールをカスタマイズ致しました。

けっこう良い出来栄えになったので、カスタマイズの方法をまとめてみたいと思います。

 

▼目次

 

① スマホ版のプロフィールをカスタマイズ

はてなブログって、初期のプロフィールがけっこうショボいんですよね (笑)

イメージとしては、この様な感じ。

f:id:aki20180217:20180718225409j:plain

 

画像は小さいし、改行も不可。

もちろんURLも貼れません。

 

もっとイカしたプロフィールにしたい!!!

 

ということで、ガッツリいじってみました

f:id:aki20180217:20180825084425j:plain

 

いかがでしょうか。

けっこうイメージ、変わりますよね!

 

知らない方も多いと思いますので、カスタマイズの手順を共有いたします。

 

② 既存のプロフィールを削除する為のCSS

まずは、既存のプロフィールを削除しましょう。

CSSコードはこちら。

 <style type="text/css">
/*デフォルトプロフィール非表示*/
.hatena-module.profile {display: none;}
</style>

 

上記のコードを丸々コピー。

デスクトップ画面にて「ダッシュボード」⇨「デザイン」⇨「スマートフォン」⇨「フッタ」⇨「ページャ下」まで進んで頂き、そのまま張り付けて下さい。

 

② 新しいプロフィールのCSS

① CSSコード

新しいプロフィール作成に必要なコードはこちら。

<!-- プロフィール -->
<div class="hatena-module hatena-module-profile">
  <div class="hatena-module-title">タイトル</div>
  <div class="hatena-module-body">
  <div style="text-align: 画像寄せ;">
    <a href="ブログURL/about" class="profile-icon-link">
      <img src="画像URL"画像サイズ />
    </a></div>
      <span class="id">
      <a href="ブログURL/about" class="hatena-id-link"><span data-load-nickname="1" data-user-name="はてなID">id:はてなID</span></a>
<!-- はてなPROのバッジ この部分は外してしまっても問題なし -->
      <a href="http://blog.hatena.ne.jp/guide/pro" title="はてなブログPro"><i class="blog-sprite-pro" /></i></a>
<!-- はてなPROのバッジ この部分は外してしまっても問題なし -->
    </span>
<!-- プロフィール文 -->
    <div class="profile-description">
      プロフィール本文
<!-- 読者登録ボタン -->  
      <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>
<!-- ツイッターフォローボタン 使ってなければ削除してOK -->    
    <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>
<!-- ツイッターフォローボタン 使ってなければ削除してOK -->
  </div>
</div>

 

張り付け場所は先ほどと同様に「ページャ下」。

色付きで記載した箇所は、皆さまご自身で加筆して下さい。

 

② タイトル

ご自身の好きなタイトルをつけて下さい。

僕はシンプルに、プロフィールとしました。

 

③ ブログURL他

ブログのURLはてなIDツイッターIDを各々記載下さい。

 

④ 画像

① 画像URL

プロフィール用の画像は、URLを取得する必要があります。

「記事を書く」より写真を取り込んで頂き、デスクトップ画面の「編集オプション」⇨「アイキャッチ画像」より取得下さい。

f:id:aki20180217:20180825084450j:plain

 

② 画像サイズ

画像サイズのコードは、幅がwidth=サイズ、高さがheight=サイズ

僕の場合は、幅のみを指定。width=150と記載しました。

 

③ 画像寄せ

左寄せであればleft、中央寄せであればcenter、右寄せであればrightで指定。

 

⑤ プロフィール本文

内容については、皆さまご自身で記載下さい。

 

文字の大きさは、<span style="font-size: ◯◯◯%;">本文</span>で指定。

 改行タグは<p>本文</p>、若しくは</br>、ハイパーリンクは<a href=" URL"> URL</a>となります。

 

下記の様に表示する為には、

f:id:aki20180217:20180723111852j:plain

 

この様に記述して下さい。

<span style="font-size: 120%;"><p>都内勤務の、30代営業マン。</br>
嫌いな言葉は残業で、得意なことは上司からのお誘いを断ること。</p>
<p>組織のしがらみにとらわれずに、自由に働くためのちょっとしたコツをお届けします。</p>
<p>▼詳細情報</br><a href="http://www.aki20180217.com/entry/2018/02/17/112446">http://www.aki20180217.com/entry/2018/02/17/112446 </p></span>

 

③ (まとめ)コードを張るだけで見栄えが変わる

いかがでしたか。

本日は、スマホ画面のプロフィールカスタマイズ方法をご紹介致しました。

 

スマホ画面のプロフィール欄は、ブログにアクセスしてきた多くの人が目にする場所。

上記でご紹介したコードを然るべき場所に張り付けるだけで、見栄えがガラッと変わりますよ

 

まだまだイジれていない人が多いと思いますので、ぜひ一度試してみて下さい。

 

2018年7月19日追記。

ID横のはてなPROバッジのみ、上手く表示出来てないですね。

対処方法わかり次第追記致します。