はてなをPROにしてスマホ版のデザインをカスタマイズしてみた話

収益化もしない代わりにPROにはせずに無料版でのんびりやろうと思っていたこのブログですが、デフォルトで表示される広告が邪魔に感じるよううになったのと、スマホ版のデザインをカスタマイズしたくなったのでPROにしちゃいました(^^)

PROにしちゃいましたよ

はてなブログProに登録しました！ https://t.co/5C4DX7y2Tb #はてなブログ

— でででーさん (@d3_dayo) 2017年4月13日

とりあえず、今回は1ヶ月分を購入したので1,008円ですね。まあ、もしこのままずっとPROでいくつもりなら年単位で契約したほうが安いですからね(^_^;)先々どうしていくかは、これから考えたいと思います。

デフォルトの広告は外れてブログの表示がせっかくスッキリしたので、これからも引き続き、自分による広告も貼らないでスッキリ運営しますよ〜！PRO分のコストは残業でもしてまかないます（冗談です（笑））

さて、スマホ版のカスタマイズが解禁となったので、さっそくちょこちょことデザインを弄ってみました(^^)

この記事では、今回カスタマイズした箇所を手順ごとまとめて紹介したいと思います。

下準備

スマホ版のデザインをカスタマイズするためには、以下のコードをはてなブログのダッシュボード→デザイン→スマートフォン→ヘッダ→タイトル下に追記する必要があります。

<style type="text/css">
ここは後ほどコードを追記するエリア
</style>

上記コードを追記することで、タイトル下の欄をデザインCSSの欄として使用することができます。

「ここは後ほどコードを追記するエリア」の部分にCSSを追記していけば、コードで指定した部分のデザインをカスタマイズすることができます。

タイトル下の説明文を非表示に

タイトルの下に表示される説明文（下にある画像でマークした部分）を非表示にしました。

説明文を非表示にするためには、以下のCSSをはてなブログのダッシュボード→デザイン→スマートフォン→ヘッダ→タイトル下に追記します。

※「style 〜/style」の間に追記します。

/*説明文の非表示*/
#blog-description { display: none; }

これでタイトル下の説明文が非表示になります。

ページ下部のはてな関連リンクを非表示に

スマホ版のデザインだと、ページ下部には必ず「はてなブログをはじめよう！」のリンクや「はてなブログ開発ブログ」などへのリンクが表示されています。

これとか…

これですね！はてなブログにはお世話になっているわけですが、ブログはなるべくスッキリみせたいので、このリンクも以下のコードを追記して非表示にしました。

※「style 〜/style」の間に追記します。

/*はてな関連のリンク非表示*/
.footer-action-wrapper { display: none; }

.touch-item-list { display: none; }

これでページ下部のはてな関連リンクが非表示になって、ページの長さが少し短くなってスッキリします。

フッターメニューの非表示

スマホ版のデザインでは、ページ最下部（フッター部分）にダッシュボードへのリンクやPC版への切り替えができるメニューが表示されていますが、この部分もスッキリさせたかったので以下の非表示にしました。

※「style 〜/style」の間に追記します。

/*フッターメニューの非表示*/
#footer-menu { display: none; }

これでフッターメニューが非表示になります。

投稿日（記事タイトル上）デザイン変更

記事タイトル左上に表示される投稿日のデザインを変更して、角丸の背景に囲まれるデザインに変更しました。

これを…

こうしました！

デザインの変更は、以下のコードを追記します。

※「style 〜/style」の間に追記します。

/*投稿日のデザイン変更*/
.date{
color: white; /*日付の文字色(カラーコードを変更すれば好きな色に設定できます)*/
background: #F474d1;/*日付の背景色(カラーコードを変更すれば好きな色に設定できます)*/
border-radius: 0.2em; /*角の丸み*/
padding: 0px 10px;
}
.entry-title 
{ margin-top:.3em; /*日付と記事タイトルの行間調整*/
}

各色の部分（文字色・背景色）はカラーコードを書き換えるすることで、好みの配色へと変えることができます。

ページ上部はてなメニューの色変更

はてなブログのスマホ版デザインだと（表示する設定にしている場合には）表示されるメニューバーの色をこんな感じで変更しました。

デフォルトの白基調のメニューを…

黒基調のメニューにしてみました。

以下のコードで色を変更することができます。

※「style 〜/style」の間に追記します。

/*フッターメニューの非表示*/
#footer-menu { display: none; }

/*ページ上部はてなメニュー色*/
#globalheader-container
{
color: #fff; /*カラーコードで色変更可能*/
background: #111; /*カラーコードで色変更可能*/
}

色はカラーコードを書き換えれば、好みの色へと変更することができます。

ページトップに戻るボタンの実装

iPhoneだとブラウザ上部の帯をダブルタップすれば、一瞬でヌルっとページトップまで戻ってくれますが、アンドロイドだとそうはいかないので…自分自身の利便性を考えてページ右下にスクロールアップボタンを実装しました。

このページトップへ戻るボタンを設置するためには、CSSへのコード追記だけではなく、合計3ステップを踏む必要があります。

headに要素を追加する

このボタンにはFont Awesomeというサービスのウェブフォントが使われているので、自ブログでそのフォントを読み込むために、まずはheadにフォントを読み込むための要素を追加する必要があります。

はてなブログのダッシュボード→設定→詳細設定→headに要素を追加へ、以下のコードを追記します。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

要素の追加は以上です。

フッターにコードを追加

次にはてなブログのダッシュボード→デザイン→スマートフォン→フッタに以下のコードを追記します。

<div id="page-top">
 <a id="move-page-top"><i class="fa fa-chevron-circle-up fa-5x"></i></a>
</div>
<script>
 $(window).scroll(function(){
 var now = $(window).scrollTop();
 if(now > 500){
 $("#page-top").fadeIn("slow"); }else{
 $("#page-top").fadeOut("slow"); 
} 
}); 
$("#move-page-top").click(function(){
 $("html,body").animate({scrollTop:0},"slow");
 });
</script>

フッターへのコード追記は以上です。

タイトル下へCSSを追加

最後のステップです。これまでに紹介してきたカスタマイズの手順通り、はてなブログのダッシュボード→デザイン→スマートフォン→ヘッダ→タイトル下に以下のCSSを追記します。

※「style 〜/style」の間に追記します。

/*上に戻るボタン*/
#page-top { 
display:none; position:fixed; right:10px; bottom:20px; margin: 0; padding: 0; text-align:center;
}
#move-page-top
{ 
color:rgba(0,0,0,0.4); text-decoration:none; display:block; cursor:pointer;
}
#move-page-top:hover
{ 
color:rgba(0,0,0,0.6);
}
@media only screen and (min-width: 400px)
{ 
#page-top
{ right:50%; margin-right: -450px; }} 
/*上に戻るボタンサイズ*/
.fa-5x 
{ 
font-size: 3em; /*数値を変更すればボタンの大きさを変えられます*/
}

これで記事を下にスクロールしていくと、自動でページ右下にスクロールアップボタンが表示されるようになります。

目次のデザイン変更

はてなブログでは目次記法を使うことで、簡単に見出しの構成から生成された目次を記事に挿入することができます。

staff.hatenablog.com

しかし、挿入される目次そのままだと、デザインはこんな感じでかなりシンプルなものになります。

できればもう少し…目次は目次としてメリハリをつけたかったので、以下のCSSを追加してデザインを装飾しました。

※「style 〜/style」の間に追記します。

/*目次のCSS*/
.table-of-contents:before
{
content: "目次";font-size: 120%;}.table-of-contents
{ 
padding: 20px 10px 20px 40px !important; border-radius: 5px; background: #f0f0f0;/*背景色はここから変更*/
}
.table-of-contents ul
{ 
font-size: 90%;
}
.table-of-contents ul
{ 
margin-left: 0;

上記のコードを追加すると、テーブルの中に自動で「目次」という文字が追加されるようになります。

また、テーブルのカラーコードを書き換えれば背景色は自由に変更することができます。

カスタマイズの参考にさせて頂いた記事

今回のカスタマイズにあたっては、以下に紹介している記事も参考にさせて頂きました！

素敵な記事をありがとうございますm(_ _)m

www.mukaikaze.net

www.yukihy.com

www.mataro1.com

おわりに

ここまでで、けっこうカスタマイズが楽しめましたし、今後もいろいろな箇所をちょこちょこ弄りたくなると思うので、もうこれだけでも気持ち的にはPROにした分の元はとれそうな気がしてきました（笑）

それにしても、何が今回一番大変だったかというと…この記事で紹介したカスタマイズは全てスマホからダッシュボード弄ってやったので、とにかく細かい操作が言うことききません^^;（コピペとかが特にきつい）

PCからだったら、コピペも簡単だし、掲載しているコードのコピペで基本的にはカスタマイズできてしまうので、ぜひ興味のある方は試してみてくださいまし♪

こんなカスタマイズもあります
d3dayo.hateblo.jp

でででーさん
d3dayo.hateblo.jp

Follow @d3_dayo