はぴらき合理化幻想

海外3年/西成ドヤ2年/沖縄2年/事故物件で寝袋3年目、ミニマリスト10年目でダンボール2箱の持ち物と保存食で大阪に定住中。

不可能を可能に!はてなブログのプロフィールページをカスタムできるJavaScriptプラグインを自作した

はてなブログのプロフィールページをカスタムできるよ。PCとスマホの両方で自分の好きな内容を表示できる。初心者でも使えるようにプラグインにした。「Custom Profile for Hatena Blog」と命名。

概要

Custom Profile for Hatena Blogの特徴や導入/カスタム方法を説明する。はてなに無課金ならPC表示だけ、課金していたらPCとスマホの両方を編集可能。はてなブログの管理画面でコードをコピペするだけ。

そもそもプロフィールページって何?

プロフィールページとは

URLの末尾がaboutになっているページのことだ。

当ブログであれば次のページがプロフィールページ。

このページを説明すると次のとおり。

  • ブログ開設時に自動生成されたページのひとつ。
  • ページタイトルは「このブログについて」。
  • ブログ継続日数や購読者などが記載されている。
  • 課金/無課金かかわらず普通は編集不可。

下図がそのキャプチャー画像だが、タッチで別タブで拡大表示可能。

はてなに問い合わせても編集不可とのこと。

プロフィールページをカスタムする理由

少数ながらも毎日プロフィールページへのアクセスがある。それにもかかわらず、はてなブログが自動生成した内容を表示するだけでは読者のメリットにならない。よって、編集する方が読者に親切だと考えた。

「親切」は驚くほど体にいい!

サイドバーのないスマホ表示でも、全ページ下部にプロフィールページへのリンクがある(下図参照)。

せっかくアクセスしても自動生成されたページでは読者はつまらないだろう。

絶対に選ばれる! 「ビジネス・プロフィール」のつくり方

ビフォー・アフター比較画像

プラグイン導入前後のプロフィールページのキャプチャー画像を載せておく。

ビフォー

デフォルト状態だと、読者にとってメリットになるような情報はない。タッチで別タブで拡大表示可能。

スマホ表示でも同じ。

アフター

初めてブログを訪問した人に対してブログで言及したい点や趣旨を端的に伝えられる。ブログの全ページからプロフィールページへのリンクが通常はあるので、ぜひとも編集しておきたい。

スマホ表示でもプロフィールがきちんとカスタムされているよ。

ランドスケープモードでもOK。

Custom Profile for Hatena Blogの特徴

メリット

  • デフォルトのプロフィールページを編集することで、プロフィール用の記事をわざわざ作成する必要がなくなる。
  • いつでも変更できる。WordPressでいうところの固定ページのような運用が可能。
  • 文字数制限なし。
  • HTMLタグを使用できる。
  • 画像を挿入できる。
  • 著作権部分を残すだけでコードを自由に使用・改ざんできる。
  • 購読者アイコンをまったく読み込まないのでページの読込完了が早くなる。

導入前は次のキャプチャー画像にあるとおり購読者アイコンが表示されている。導入後はアイコンをまったく読み込まない。CSSで非表示にしているのではない。よって、画像読み込みによる遅延を回避できる。

デメリット

あなた次第でございます

  • すべて自己責任。
  • 自分でJavaScriptプラグインを導入する必要がある。
  • 作者(はぴらき)によるフォローはない。
  • はてなブログの構造が変わると想定外の状況になる場合がある。
  • 継続日数や購読者アイコンを残せるようにはしていない。
  • HTMLタグを使えるが任意のJavaScriptコードを入れられない。
  • 改行ごとに「\」(円マーク/バックスラッシュ)を入れる必要がある。詳細を後述する。
  • 外部ファイル化しないとプロフィールページ以外でもHTMLのサイズが大きくなる。対策を後述する。
  • はてなブログ無課金ユーザーはスマホで表示されるプロフィールページをカスタムできない。

導入方法

初めての導入時はサブブログを作成して試すほうがよさそう。

サブちゃんと歌仲間

コードを追加する場所

管理画面でコードを追加する場所は、無課金で2ヶ所あり、課金していれば3ヶ所ある。以下、順次説明する。

ヘッダの一番下に挿入(PC/スマホ共通)

PC表示用にコードを挿入

ブログ管理画面で「デザイン」を開く。

  1. 「スパナアイコン」をクリック。
  2. 「ヘッダ」をクリック。
  3. 「タイトル下」にあるテキストエリア内に下記コードを貼り付ける。既にコードが入っていた場合、一番下に貼り付けよう。

<style>.hatena-module-html:first-child{display:none;}</style>
<script>;
/*
 * Custom Profile for Hatena Blog v1.0.0
 * Date: 2015-01-26
 * Copyright (c) 2015 http://hapilaki.hateblo.jp/
 * Released under the MIT license:
 * http://opensource.org/licenses/mit-license.php
 */
var customProfile='\
■■■ここにプロフィールを書く■■■\
';
if(location.href=='http://'+document.domain+'/about'){
  document.write('<scri'+'pt src="https://dl.dropboxusercontent.com/s/zja6dilqkton6zn/change-profile.js"></scri'+'pt>');
}
</script>

スマホ表示でもPC表示用コードを使う

課金ユーザーのみ設定可能。PC表示とスマホ表示で同じコードを使える。よって、スマホ表示で次の設定をしておくと便利。

  1. 「スマホアイコン」をクリック。
  2. 「ヘッダ」をクリック。
  3. 「タイトル下」で「PCと同じHTMLを表示する」を選択する。

サイドバーの一番上にモジュールを追加(PC表示用)

モジュールの追加

「スパナアイコン」に切り替える。

  1. 「サイドバー」をクリック。
  2. 「+モジュールを追加」をクリック。

出てきたウィンドウで次のとおり設定する。

  1. スクロールバーを下げる。
  2. 「HTML」をクリック。
  3. 下記コードをそれぞれ貼り付ける。
  4. 「適用」をクリック。

プロフィールページ用
<!-- プロフィールページ用 -->
<script>;changeProfile();</script>

モジュールを一番上に移動

作成した「プロフィールページ用」はサイドバーの一番下にあるが、ドラッグして一番上に移動させる。

フッタの一番上(スマホ表示用)

課金ユーザーのみ設定可能。

  1. 「スマホアイコン」をクリック。
  2. 「フッタ」をクリック。
  3. 「スマートフォン用にHTMLを設定する」をクリック。
  4. テキストエリアをクリックすると・・
  5. 新たにテキストエリアが開くので下記コードを貼り付ける。既にコードが入っていた場合、一番上に貼り付けよう。

<!-- プロフィールページ用 -->
<script>;changeProfile();</script>

ちなみに、上記コードはサイドバーのモジュールに追加したコードと同じだよ。

設定を保存

「設定を保存する」をクリックして設定を保存しよう。

この段階でプロフィールページを開くと下図のようになっている。そうでなければ設定に不適切な部分があると思われる。もしくは既存のカスタムと競合しているのかもしれない。

うまく設定できないとしても筆者に解決方法を聞かないでね。原因を調べるのに時間がかかる上に、必ずしも解決できるとは限らないからな。くれぐれも筆者に聞かないでね、ストレスになるんで。

カンベンしてちょ!

カスタム方法

カスタム方法を初心者向けと上級者向けの2つ紹介する。

初心者向けの簡単カスタム方法

カスタム具体例

カスタムする場所はヘッダに追加したコードの次の部分。ここを好きなように差し替える。

■■■ここにプロフィールを書く■■■\

上記部分を差し替えた具体例は次のとおり。HTMLタグを利用する方がいい。少なくともパラグラフごとにpタグを使う方がいいね。

<p>ようこそ、はぴらき合理化幻想へ。</p>\
<p>このブログを一言で言えば、筆者(はぴらき)が好きなように生活している様子をつづっているだけだね。</p>\
<h2>これまでの当ブログの歩み</h2>\
<p>2014年1月1日から2015年1月26日までは毎日ブログを更新し続けている。PV(アクセス数)の推移は次のとおり。</p>\
<ul>\
<li>1ヶ月目は月197PV</li>\
<li>2ヶ月目は月3,564PV</li>\
<li>3ヶ月目は月31,036PV</li>\
<li>4ヶ月目で月10万PV突破</li>\
<li>9ヶ月目で月20万PVと累計100万PV突破</li>\
<li>12ヶ月目で累計200万PV突破</li>\
<li>13ヶ月目で月30万PV突破確定</li>\
</ul>\
<p>2014年の月ごとのPV推移を次のページで確認できる。</p>\
<p><a style="overflow:hidden;display:inline-block;" href="http://hapilaki.hateblo.jp/entry/201412" target="_blank">\
<img style="float:left;margin-right:.5em;" src="http://cdn-ak.f.st-hatena.com/images/fotolife/h/hapilaki/20150101/20150101025416.png" alt="" width="120" height="120" />\
<span style="display:block;overflow:hidden;">ブログ毎日投稿を1年継続時のアクセス数推移、月26万PVで累計PVはダブルミリオンに! - はぴらき合理化幻想</span>\
</a></p>\

注意点

改行する際は行の最後に「\」を入れる必要がある。これがないとエラーになる。「\」はWindows用のキーボードであれば右奥の方にある。筆者のPCであればbackspaceの左側にある。

パソコンキーボードの円マーク/バックスラッシュの場所

円マーク マネークリップ

コピペで使えるコード

中身がないコードを置いておくので、必要に応じてコピペしてプロフィールのベースに使うと便利かも。不要な部分は行ごと削除し、もっと必要な部分は行ごとコピペして増やす。

<p></p>\
<h2></h2>\
<p></p>\
<p></p>\
<p></p>\
<p></p>\

パーマンバッジ メモ帳

上級者向けカスタム方法

JavaScriptを少し使える人向けの内容。よって、説明は最低限に留める。

カスタム後のvar customProfileを含めた外部ファイルを用意してそれを読み込むとよい。筆者はDropboxを利用してこの方法を採用している。当ブログのソースを見れば参考になるかも。

差し替え部分が長くなったとしても外部ファイル化していれば、プロフィールページ以外ではプロフィール部分を読み込まないのでHTMLが大きくなるのを防げる。

「太らない体」のつくり方

他には、Markdown記法で書いてHTML化する方法もあるね。次のページではそのHTMLを一行にできるので、そうすれば最後に「\」を入れる必要がなくなる。

マークダウン記法をHTMLに変換するブラウザエディタに全選択と改行削除機能を付けた - はぴらき合理化幻想

補足

デフォルトのプロフィールページを確認したい場合

プロフィールページURLの最後に「?」を追加してアクセスするだけ。当ブログでは次のとおり。

はてなブログなので最後にはてなを追加、と覚えるといいね。

ハテナブロック

コピーライトについて

当プラグインを利用すると当ページへのリンクが記載される。非表示にしたり、文字を極端に小さく薄くしたりしない限りはデザインに合わせてカスタムできる。

CSSでクラスcustom-profile-copyright101を編集する。編集する際は、どのように編集されるのかを見てみたいので任意でコメントにて連絡いただけるとありがたい。

追記:信じられないことに、文字を小さくしたり薄くしたりするどころか、まったく見えないようにしていた無節操なやつがいた。そいつに対してわざわざ警告したが無視し続けている。よって、こちら側で対策を講じた。再犯を確認したらまた対策を講じる。

免責

使用に関して筆者は一切の責任を負わない。無課金での表示を確認していないので、想定外の状況になるかもしれない。

人生はあきらめるとうまくいく

特別企画!あなたのプロフィールページを紹介!

(追記:この企画はすでに終了。)

最後まできちんと読んでくれてありがとう!きちんと読んでくれているあなたへの特別企画だ。

日本時間で2015年1月29日23:59までにこのページをブックマークした人で、1月31日23:59までにプロフィールページのカスタムを完了した人は2015年2月中に当ブログで紹介するよ。筆者が勝手に巡回するよ。

以前にも同じように紹介したことがあるし、本当に紹介するよ。ほんの少しだけど、アクセスアップを期待できるかも。ちなみに、当ブログは今月はすでに30万PVを超えてるね。

まずはブログ毎日更新の習慣化を目指し、見てるだけじゃなく行動を起こした17人を紹介するぜ - はぴらき合理化幻想

当ページの説明でわかりにくい部分があれば、あなたのはてなブログで当ブログへリンクして補足説明してくれると助かる。そのページへリンクするよ。よろしくね(゚∀゚)人(゚∀゚)

チャンス―成功者がくれた運命の鍵

まとめおよび所感

  • 毎日少しだがプロフィールページへのアクセスがある。
  • プラグインで自由に編集できる。
  • それならブログについて詳述する方が読む人に親切。
  • 特別企画の期限前に導入完了なら当ブログで紹介される
  • よって、プロフィールページを編集しない手はない

ブログの全ページからリンクされているプロフィールページをデフォルト状態で放置しておくのはもったいない。読む人がブログの趣旨などをすぐに掴めるようにしておくと親切だね。

てすとてすと