1. /
  2. /
  3. ブログをプチリニューアルしてテンション上がり、プロダクト愛を感じる。

ブログをプチリニューアルしてテンション上がり、プロダクト愛を感じる。

  •  

今日は、このブログをプチリニューアルしました！

見栄えが変わるとテンション上がるー！（2018年6月頃の話）

もちろん、僕のテンションを上げる為じゃなくて、

読んでくれる人が使い易いようにと、改善しましたよw

普段、仕事でプロダクトマネージャーをしているにも関わらず、

個人で運営している唯一のプロダクトが疎かになってしまっていたので、

一念発起して取り組みました！

そのプチリニューアルの内容は、

  • ブログ名変更
  • デザインテーマ変更
  • ナビゲーションメニュー導入
  • トップページの一覧化

です。

 ブログ名変更について

ブログを象徴であるブログ名を変更しました！

旧ブログ名：若手プロマネ（PMP）のつぶやき

新ブログ名：若手PMのつぶやき

なぜ変更したかをご説明します。

まずは、仕事での役割がプロジェクトマネージャーからプロダクトマネージャーに変わり、

僕自身のキャリアビジョンとしても、プロジェクトマネージャーとしてのキャリアよりも、

プロダクトマネージャーとしてのキャリアを歩んでいきたいと言う思いが強くなったことから、

プロマネ（PMP）を全面に押し出したブログ名では、投稿する記事内容とそぐわなくなってきたからです。

その上で、2015年にPMPの資格を取得（2018年に資格更新）した際に身に付けた知識や、今までプロジェクトマネージャーとして働く中での経験やスキル、ノウハウなどを捨てる必要はなく、

プロジェクトマネージャーもプロダクトマネージャーもPMと略されることから、

「若手PMのつぶやき」というブログ名とすることにしました。

その為、このブログでは、プロジェクトマネジメントも、プロダクトマネジメントも扱っていきたいと思います。

デザインテーマ変更について

今まで、

Afternoon – テーマ ストア

というテーマを使用しておりましたが、

ブログ名の変更に伴ってデザインも一新したいと思い、テーマを変更しました！

変更後のテーマは、

Minimalism – テーマ ストア

です。

テーマストアに置いて、現在1位（2018/6/17現在）であり、

多くの方が利用しているテーマです。

選んだ基準は、

  • 雰囲気
  • レスポンシブ対応
  • ナビゲーションメニューを簡単に導入できる
  • 1位の安心感

です。

今までは、PC（パソコン）とSP（スマートフォン）サイトを別にしておりましたが、

無料版で使用している僕は、SPサイトのカスタマイズはほとんどできませんでした。

今回、レスポンシブ対応を行ったことで、PCサイトと共通の設定が反映されるようになり、

まとめて設定が反映されることが大きなメリットとなっています。

また、見栄えもシンプルで良い感じになったかと思います。

ナビゲーションメニュー導入について

今まで、ナビゲーションメニューを設置したいなーと思いつつも、

設定方法を調べることすらせずに、放置しておりました・・・

しかし、テーマ変更に伴って、簡単に設置できることが分かり、

以下の手順に従って、ナビゲーションメニューを設置しました！

ナビゲーションメニューを設置する

f:id:codomisu:20170618150620p:plain

このテーマには、

【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 で紹介したスライドメニューと同様のものが標準で用意されています。
デザイン→PC→ヘッダ→タイトル下に以下のコードを追加し、アイコンやURL等の任意の部分を書き換えてください。

<nav id=“gnav“>
<div class=“gnav-inner“ id=“menu-scroll“>
<div class=“menu“><a href=“URL“><i class=“fa fa-home“ aria-hidden=“true“></i> HOME</a></div>
<div class=“menu“><a href=“URL“><i class=“fa fa-info-circle“ aria-hidden=“true“></i> ABOUT</a></div>
<div class=“menu“><a href=“URL“><i class=“fa fa-bolt“ aria-hidden=“true“></i> TIPS</a></div>
<div class=“menu“><a href=“URL“><i class=“fa fa-graduation-cap“ aria-hidden=“true“></i> STUDY</a></div>
<div class=“menu“><a href=“URL“><i class=“fa fa-wrench“ aria-hidden=“true“></i> DESIGN</a></div>
<div class=“menu“><a href=“URL“><i class=“fa fa-envelope-o“ aria-hidden=“true“></i> CONTACT</a></div>
</div>
</nav>

アイコンにはFontAwesomeを使います。FontAwesomeの使い方が分からない方はこのサイトを参考にしてみてください。

引用：https://hitsuzi.hatenablog.com/entry/minimalism

今まで、カテゴリー毎の記事一覧への導線がかなり少なく、

記事ページ内のカテゴリタグやパンくず、

サイドバーのカテゴリーリンクからしか遷移できませんでしたが、

ナビゲーションメニューがあることで、読んでくれる人が迷いにくくなりました。

aboutページ（僕の自己紹介ページ）やcontactとしてtwitterのマイページへのリンクも設置することができて、

たまたま記事をを読んでくれた人とのコミュニケーションが発生する可能性を作ることができました。

トップページの一覧化について

これまたずっとやりたいとは思ってはいたが、調べることもしていなかったことです。

ようやく、トップページの一覧化を行いました！

有料のPro版では、クリック一つで設定できるようになったようですが、

無料アカウントでもそんなに難しくなかったです。

こんな感じです。

トップページにアクセスした時に、/archiveという記事一覧ページへ自動で遷移させる設定をしているんですね。

設定→詳細設定→headに要素を追加に以下を記載

<script type=”text/javascript“>
if( location.href == ‘https://tetocoin.hatenablog.com/‘){
location.href=’https://tetocoin.hatenablog.com/archive’;
}
</script>
<noscript>
<p><a href=”https://tetocoin.hatenablog.com/archive”>僕のビットコイン通帳</a></p>
</noscript>

<meta name=”viewport” content=”width=device-width, maximum-scale=1.0, minimum-scale=0.5,user-scalable=yes,initial-scale=1.0″ />

*1

 htmlは全然勉強していないのですが、わかる範囲を解説をします。

if( location.href == ‘https://tetocoin.hatenablog.com/‘)

 ▲ここのページを表示したら

{
location.href=’https://tetocoin.hatenablog.com/archive’;
}

 ▲このURLを表示する

つまり、トップページに行けばアーカイブに行き一覧形式で見れるということです。

そのため、上のURLを自分のブログに変える必要があります。

引用：https://iteto.hatenablog.com/entry/2017/08/07/113609

今まで、トップページに最新の記事の全文と大きな写真が表示され、見づらかった状態でしたが、サムネイル画像と記事タイトルに整理され、非常に見易くなりました！

しかし、最新の記事が30件表示されるので、非常にページが長くなってしまいました。

トップページにそんなに表示される必要はないでしょ。

ということで、合わせて、以下の設定もしました。

SPサイトのトップページにおいて、指定の件数のみを表示し、「もっと見る」ボタンで追加表示できるように変更しました。

世の中には、凄い人がいるもんですね！

フッタにスクリプトを貼り付ける

最後にアーカイブページをアーカイブします。

はてなブログの管理ページから「デザイン」→「カスタマイズ」→「フッタ」と進み、HTML欄に以下のスクリプトを貼り付けます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
$('#main-inner').ready(function(){
"use strict";
var pc_width = 600;
var device = window.screen.width < pc_width ? 'sp' : 'pc';
device = (device == 'pc' && $(window).width() > pc_width) ? 'pc' : 'sp';
var view_sec_num = 5; <!-- ここに1回あたりの表示記事数を設定 -->
var sections = $('#main-inner > div.archive-entries > section');
if((sections.length > view_sec_num) && device == 'sp') {
var page_index = 0;
var $entries_archive = null;
var archive_num = 0;
$entries_archive = $('<div id="entries-archive-' + archive_num + '"></div>');
$entries_archive.insertBefore(sections[0]);
for(var i=0; i < view_sec_num; i++) {
$(sections[i]).appendTo($entries_archive);
page_index += 1;
}
archive_num += 1;
for(var i=view_sec_num; i < sections.length; i++) {
if(page_index==view_sec_num) {
var $read_more_link = $('<p style="text-align:center;background:#ddd"><a href="javascript:void(0)" style="line-height:3;font-size:80%:">もっと表示する</a></p>');
$read_more_link.on('click',{archive_num: archive_num},function(e){
$(e.target).hide();
$('#entries-archive-' + e.data.archive_num).fadeIn("slow");
});
var $before_archive = $('#entries-archive-' + (archive_num-1));
$before_archive.append($read_more_link);
$entries_archive = $('<div id="entries-archive-' + archive_num + '"></div>');
$entries_archive.hide();
$entries_archive.insertAfter($before_archive);
page_index = 0;
archive_num += 1;
}
$(sections[i]).appendTo($entries_archive);
page_index += 1;
}
$entries_archive.hide();
}
});
</script>

※コメントで指摘いただきスクリプトを一部修正しました。（最終行の「</script>」が抜けていた）

f:id:WorldWorldWorld:20161223180440p:plain

なお「」の部分の数字を任意の値にすることで、一度に表示する記事数を変更することができます。

これだと最初に5記事分を一覧表示。

var view_sec_num = 5; <!-- ここに1回あたりの表示記事数を設定 -->

これだと最初に7記事分を一覧表示。

var view_sec_num = 7; <!-- ここに1回あたりの表示記事数を設定 -->

以上です！

引用：https://blog.wackwack.net/entry/2016/12/22/235712

最後に

今回のプチリニューアルを行ったことで、少しは読んでくれる方にとって使いやすいブログになったのではないかと思います。

また、（あえてプロダクトと呼びますが、）プロダクトに対しての愛着が強くなりました。

魂は細部に宿ると言いますが、作り込んでいくほどにプロダクトへの愛着が湧き、そのプロダクトをより良いものにしたいと本気で思えるようになるのではないでしょうか。

ブログ以外で、そのように愛せるプロダクトをつくりたいと思う、今日この頃です。

以上です。