太陽がまぶしかったから

C'etait a cause du soleil.

トップ > プログラミング > はてなブログのサイドバーにあるプロフィールから詳細プロフィールへの導線を作るプラグイン

はてなブログのサイドバーにあるプロフィールから詳細プロフィールへの導線を作るプラグイン

プログラミング

f:id:bulldra:20141025223142j:plain

詳細プロフィールへのリンクが欲しい

　はてなブログのプロフィールページには文言を追加する事ができないため、詳細プロフィールページを固定URLのエントリーとして作成し、グローバルメニュー等からリンクさせる手法がよく使われています。このブログにも詳細プロフィールページが存在します。

　しかし、詳細プロフィールページを作ったのであれば、サイドバーにあるプロフィールモジュールから表示できるようにするのが自然です。

　もともと最新記事や注目記事モジュールについてはタイトルに一覧ページへのリンクが付与される仕様となっているため、これにあわせてプロフィールモジュールについてもタイトルに詳細プロフィールへのリンクを追加するプラグインを作りました。

https://vine.co/v/OhIHr9M1uWZ

　またサイドバーモジュールのタイトルから詳細ページや一覧を表示できる仕様についての認知度が低く、目立たない状態になっているため、説明文言をタイトルに加えて導線を作るようにします。こちらはスタイルシートで対応します。

f:id:bulldra:20141025175812j:plain

固定ページの作成

　固定ページを作成する場合には編集画面の右側にある歯車のアイコンを選択してカスタムURLを設定します。「自分のブログのURL/entry/カスタムURL」という形式で作成されるので、僕のブログで「about」と指定した場合は「http://bulldra.hatenablog.com/entry/about」となります。

f:id:bulldra:20141025180246j:plain

プラグイン設置

　デザイン画面のフッターに以下のスクリプトを追加します。

f:id:bulldra:20141025180523j:plain

　『はてなブログから簡単にVine動画を埋め込めるプラグインでスマホからのグルメ動画レポートが捗る - 太陽がまぶしかったから』などのために既に「commons.js」をインポートしている場合は「<script type="text/javascript">」以下だけでOK。

<script src="https://www.google.com/jsapi"></script>
<script src="http://bulldra.github.io/commons.js" charset="utf-8"></script>
<script type="text/javascript">
addLinkProfile('詳細プロフィールのURL');
</script>

　デザインCSSに以下の定義を追加し、自分のブログに合わせてカスタマイズします。追加文言については「content」で指定しています。

f:id:bulldra:20141025175942j:plain

.hatena-module-profile .hatena-module-title a:after {
    content: ">>詳細を表示";
    font-size: 90%;
    position: absolute;
    right: 10px;
    color: #fff;
}

.hatena-module-entries-access-ranking .hatena-module-title a:after,
  .hatena-module-recent-entries .hatena-module-title a:after {
    content: ">>一覧を表示";
    font-size: 90%;
    position: absolute;
    right: 10px;
    color: #fff;
}

追記：詳細プロフィールボタンを付ける

　確かにプロフィールモジュールからもリンクを貼るようにした方がより分かりやすいので追加します。リンク先ではコメントのスタイルを使用しているのですが、読者登録ボタンに合わせたCSSを書きました。虫眼鏡アイコンにはフリー素材を利用させてもらっています。

f:id:bulldra:20141025223130j:plain

　プロフィールの「ブログの説明」欄に以下のHTMLを追加。

f:id:bulldra:20141025223059j:plain

<a href="詳細プロフィールのURL" class="hatena-profile-button"> 詳細プロフィールを見る</a>

　CSSに以下の定義を追加。

.hatena-profile-button { 
    clear: both;
    font-size: 10px;
    height: 20px;
    margin: 4px 0px 9px 0;
    padding: 4px 10px 0px 20px;
    display: block; 
    border: 1px solid #bbb !important; 
    border-radius: 3px; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    font-weight: bold; 
    text-decoration: none; 
    color: #555 !important; 
    float: left; 
    background: url('http://cdn-ak.f.st-hatena.com/images/fotolife/b/bulldra/20141025/20141025215841.png') no-repeat 0 0, -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dddddd));
    background-position: 0% 50%;
}

まとめ

　以上の設定を行う事で、はてなブログのプロフィールのタイトルに詳細プロフィールへのリンクを追加する事ができます。色々な考え方があるとは思うのですが、僕自身は詳細プロフィールページへのコンバージョンが重要な指針になると考えています。

　個別のページがバズったり、検索上位にいるだけでは「個人」や「ブログ」が認知されないままなので、詳細プロフィール画面や一覧画面を表示してもらえるような導線作りが必要になります。以下の施策についても同様の観点からです。

　そんなわけで、詳細プロフィールへのリンクや文言変更を行う方法について解説しました。この辺りのデザインについての正解はないのだろうけど、スタイリッシュさとかシンプルさよりも「わかりやすさ」を考えた方がよいのかなーと現在のところは感じてます。なお、設置サポートや表示スタイル／アルゴリズムのカスタマイズ等のご依頼がありましたらサポートライセンスの購入をお願いいたします。

「手帳ブログ」のススメ

「手帳ブログ」のススメ