けっこうブログのカスタマイズに関する記事は久しぶりに書くかもしれないでででーさん(@d3_dayo)です！
最近、本当、たまぁにという感じですが、自分のブログのスマホ版レイアウトも微細なところをカスタマイズする時があります。やったことを備忘録的に残していく意味でも、本当はもっとカスタマイズした箇所や手順も記事にしていきたいのですが、なかなか構想に対して作業が追っついてないというのが現状だったりします(^_^;)
とはいっても、そうやって追っつかないままにしておくと、ますます遅れをとってしまうので、ここいらでちょっとカスタマイズ記事も放出しておきたいと思いました！
今回紹介する手順は「はてなブログのスマホ版レイアウトで表示されるデフォルトのプロフィールを非表示にしてより細かいプロフィールを新たに設置する」カスタマイズです。
さいしょに
はてなブログのスマホ版レイアウトにデフォルトで表示されているプロフィールって…このようにとても簡素なものですよね。
今回はこのプロフィール表示をチョロっと弄って、こんな感じのプロフィールがスマホ版でも表示されるようにするためのカスタマイズ手順を紹介していきます！
デフォルトのプロフィールを非表示にする
今回のカスタマイズ手順、その流れは「まずデフォルトのプロフィールを非表示にする」→「新たにプロフィールを設置する」という流れです。なので、まずはデフォルトのプロフィールを非表示にする作業から紹介していきます。
はてなブログの管理画面を開き「デザイン設定」→「スマートフォン」→「ヘッダ」→「タイトル下」に以下のコードを挿入します。
<style type="text/css"> /*デフォルトプロフィール非表示*/ .hatena-module.profile { display: none; } </style>
冒頭と末尾の「style～/style」の部分は既にスマホレイアウトをカスタマイズしている場合には挿入していると思うので記述不要です。
コードを挿入して設定を適用すればデフォルトで「検索」の上に表示されていた「プロフィール」欄そのものが非表示になります。
詳細なプロフィールを新たに設置する
デフォルトのプロフィールを非表示にしたら、続いて新たにデフォルトのものよりも細かいプロフィールを設置します。今回は私が設置している記事・記事一覧エリアのすぐ下に設置する前提で手順を紹介します。
はてなブログの管理画面を開き「デザイン設定」→「スマートフォン」→「フッタ」→「ページャ下」に以下のコードを挿入します。
<!-- プロフィール --> <div class="hatena-module hatena-module-profile"> <div class="hatena-module-title"> プロフィール(ここは他の表記にしてもOK) </div> <div class="hatena-module-body"> <a href="自分のブログURL/about" class="profile-icon-link"> <img src="プロフィール用にアップした画像のURLをここに貼る" /> </a> <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"> <p>ここにプロフィール文を記載する</p></Div><br /> </div> <!-- 読者登録ボタン --> <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/ツイッターアカウント名" class="twitter-follow-button" data-show-count="false" data-lang="ja"> @ツイッターアカウント名をフォロー </a> </div> <!-- ツイッターフォローボタン 使ってなければ削除してOK --> </div> </div> <!-- プロフィール終わり -->
コードを挿入する際の注意点
そのままコピペでは使えません！
コード内、自分のURLやIDに書き換えなければいけない箇所がいくつかあるので、上記のサンプルコード内の「自分のブログURL」や「自分のはてなid」そして「ツイッターアカウント名」となっている部分はそれぞれ自分のものへと書き換えて頂くことで正しく表示されるようになります！
プロフィール欄に表示する画像の設定
デフォルトのプロフィールではブログに設定したアイコンがgifの状態で表示されるので、なんだか小さく…そして粗く表示されてしまいます。
現在、私は上記のコードをPC・スマホ共にプロフィールとして設定していて(PCではデフォルトのサイドバープロフィールを消してHTMLのモジュールを追加し、その中に上記コードを挿入しています)
プロフィール画像は以下の300×150のものを記事に挿入して、その画像URLを上記コードに書き込んで表示させています。
設定方法は、まずは管理画面から「記事を書く」を選択して記事の作成画面を表示します。そして記事に挿入する画像と同様に、今回プロフィール画像として使いたい画像を記事の中に挿入します。
画像を挿入したら右側のメニューから「編集オプション」を選択して、プロフィール画像用に挿入した画像のURLをコピーします。
あとは、そのコピーしたコードを上記コードのこの部分…
<a href="自分のブログURL/about" class="profile-icon-link"> <img src="プロフィール用にアップした画像のURLをここに貼る" /> </a>
「プロフィール用にアップした画像のURLをここに貼る」をコピーした画像のURLに書き換えれば設定完了です。
これで、このようにデフォルトよりも大きな画像がプロフィール画像として表示されるようになります。
おわりに
以上がはてなブログのスマホ版レイアウトでデフォルト表示されているプロフィールを非表示にして、より詳細なプロフィールを設置する方法になります。
記事の中でもザックリふれましたが、今回紹介したコードはスマホ版だけではなく、もちろんPC版でも使うことができるので、私はPC版だとデフォルトのサイドバープロフィールは非表示にして、モジュールから「HTML」を追加して、そこに今回紹介した上記コードを挿入しています。そうすれば、デフォルトよりも大きく、そして粗くないプロフィール画像が表示されるプロフィール欄を作成することができます。
引き続き、他にも細々と弄っている部分があるので、カスタマイズの手順は記事として放出していこうと思っています！
はてなブログのカスタマイズに関する記事はこんなのもあります！
d3dayo.hateblo.jpでででーさん
d3dayo.hateblo.jp