自分のポートフォリオページをはてなブログで作ってみた

自分のポートフォリオページが数年前からぶっ壊れていてそのままにしていたのだけど、今週、ふとそのあたりをちゃんとするか、という気持ちになった。今までいろんな方法でそれを作ってみては放置して、を繰り返してきてしまっていたのだけど、今回はそれをはてなブログで作ってみたところ、ぱっと見でブログっぽくはない、それっぽいページを作ることができた気がしている。

about.a-know.me

以下に、また似たようなことをやりたくなったときのための備忘も兼ねて、手を入れたポイントをまとめておく。

テーマ

以下のテーマを使わせていただいた。

blog.hatena.ne.jp

はてなブログのテーマストアに登録されているもののうちのひとつなんだけど、テーマストアは見てるだけで楽しいというか謎のインスピレーションが湧いてくるので、自分は不定期的にチェックするようにしている。オススメです。（ストア、といいつつ、有料のものはない？気がする？）

blog.hatena.ne.jp

本文

ポートフォリオページに表示する内容・本文を、ひとつのブログ記事として書き、公開しておく。

このとき、カスタムURLを指定しておく。じゃないと /entry/2024/01/23/xxxxxxx みたいなURLが自動的に振られてしまうので。

そして、[設定] > [詳細設定] にある「トップページの表示形式」と「トップページの記事数」をそれぞれ「全文形式」「1」にしておく。

さらに、このままだとこの記事に対して「投稿日」や「投稿者」の情報が表示されてしまうので、[デザイン] > [カスタマイズ] > [高度な設定] > [デザインCSS] に以下の内容を記述して非表示にしておく。力技。

.entry-date {
    display: none;
}

.entry-footer-section {
    display: none;
}

ブログ的な機能をオフにする

[設定] > [基本設定]
- 「コメント許可」を「なし」に
[設定] > [詳細設定]
- [はてなブログタグのリンク] > [記事本文にはてなブログタグのリンクを付与しない] にチェックを入れる
- [ヘッダとフッタ] > [ブログにヘッダを表示しない] [ブログにフッタを表示しない] それぞれにチェックを入れる
- [はてなブックマーク] > [すべて表示しない] をオンに
[設定] > [公開設定]
- [引用設定] > [読者が記事本文の一部を選択したとき、引用ツールを表示する] のチェックを外す
[デザイン] > [カスタマイズ] > [サイドバー]
- 不要なモジュールを削除する
- 逆に、表示させたい情報がある場合には対応するモジュールを追加する
[デザイン] > [カスタマイズ] > [記事ページ] > [記事]
- 「ソーシャルパーツ」「記事下のみに表示できるソーシャルパーツ」「関連記事」「パンくずリスト」「最終更新日」のチェックを全部オフに。

独自ドメインの設定

help.hatenablog.com

aboutページの有効活用

はてなブログには「aboutページ」という便利機能がある。例えば自分のポートフォリオページだと https://about.a-know.me/about というURLで固定の内容を見せることができる。なので、なんなら他サイトのプロフィールに乗せるURLにもこれを指定してもいいかもしれない。

今回自分の場合はサブドメインで about を使ってしまっているので、この about ページは積極的に使わなくてもいいなと思いつつ、万一アクセスされても変な感じにならないように、「本文」で書いたものと同じ内容を貼り付けておくことにした。

同時に、「ブログ投稿数」「投稿日数」「読者数」といった、ブログならではの各種表示についてもチェックを外してオフにしておく。

モバイル対応

[デザイン] > [スマートフォン] > [高度な設定] > [詳細設定] で、「レスポンシブデザイン」のチェックをオンにする。これをしないと、いくらあれこれカスタマイズしても、モバイルで見たときに思いっきりはてなブログであることがわかってしまう。笑

おまけ

固定ページ

今回僕はこの機能はまだ活用できていないんだけど、ポートフォリオページとしてもう少しリッチにしたい、といったときには「固定ページ」機能は有効活用できそうな予感。

help.hatenablog.com

サイトのPVを Pixela で計測・表示する

この↓部分。

Pixela のユーザー登録の方法は以下。

help.pixe.la

続いて、以下のようなかんじでグラフを作成する。 selfSufficient に increment を指定することで、このグラフが表示されるごとに（HTTP GET リクエストを受けるごとに）その日の数値をインクリメントしてくれるようになる。その他のオプションについてはAPIドキュメントを見てください。

curl -X POST https://pixe.la/v1/users/a-know/graphs -H 'X-USER-TOKEN:hogefugapiyo' -d '{"id":"pvs-portfolio","name":"Portfolio PVs","unit":"PVs","type":"int","color":"shibafu","timezone":"Asia/Tokyo","selfSufficient":"increment"}'

そして、このグラフを表示させたいところを決める。今回僕は「（はてなブログ的には）サイドバーのいちモジュール内」に表示させたかったので、以下のようにした。

<div id="svg-load-area"></div> という一行を書いているだけで、これだけだと謎だと思うんだけど、これに加えて [デザイン] > [カスタマイズ] > [フッタ] のところに、

以下のようなスクリプトを指定。

<script src="https://cdn.jsdelivr.net/npm/tippy.js@3"></script>
<script>
document.addEventListener('DOMContentLoaded', function(){
    $('#svg-load-area').load('https://pixe.la/v1/users/XXXXXX/graphs/XXXXXX?mode=short', function(){
        tippy('.each-day', {
            arrow: true,
            content: function(reference) {
                const contentDate = reference.getAttribute('data-date')
                const contentUnit = reference.getAttribute('data-unit')
                const contentCount = reference.getAttribute('data-count')
                const contentOptional = reference.getAttribute('data-optional')
                const container = document.createElement('div')
                const quantityNode = document.createTextNode(contentCount + " " + contentUnit + " on " + contentDate);
                container.appendChild(quantityNode);
                return container
            }
        });
    });
});
</script>

URLとかは適宜ご自身のものに置き換えてください。

おしまい

やったこととしては多分これくらい。

裏側はブログサービスで動いているので、内容の更新がしやすいこともさることながら、画像のアップロードやその利用もお手軽だし、仮に自分でこういったサイトをホストすることを考えるとついて回る運用・維持管理（メンテナンス）、ライブラリ類のアップデート......といった諸々のお悩み事から開放されることも嬉しい。

ここで挙げたいくつかの設定や独自ドメインを与える、といったことははてなブログProでしかできないことだけど、Proだと10個までブログを開設することができるので、もしすでにはてなブログProにしていて10個のブログ枠を持て余してる、って方は、ポートフォリオページではないにしても、いろいろと遊んでみると楽しいかもしれないです。

えいのうにっき

a-knowの日記です