はてなブログ

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

投稿日: 更新日: 2017年10月23日

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

 

スポンサーリンク

PROにしちゃいましたよ

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

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

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

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

 

下準備

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

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

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

 

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

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

f:id:d3dayo:20170413183404p:plain

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

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

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

 

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

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

f:id:d3dayo:20170413184851p:plain

これとか…

f:id:d3dayo:20170413184908p:plain

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

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

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

 

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

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

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

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

 

投稿日(記事タイトル上)デザイン変更

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

f:id:d3dayo:20170413193032p:plain

これを…

f:id:d3dayo:20170413193046p:plain

こうしました!

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

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

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

 

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

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

f:id:d3dayo:20170413194210p:plain

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

f:id:d3dayo:20170413194237p:plain

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

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

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

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

 

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

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

f:id:d3dayo:20170413200107p:plain

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

 

headに要素を追加する

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

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

要素の追加は以上です。

 

フッターにコードを追加

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

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

 

タイトル下へCSSを追加

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

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

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

 

目次のデザイン変更

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

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

f:id:d3dayo:20170413202337p:plain

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

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

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

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

 

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

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

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

 

おわりに

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

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

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

こんなカスタマイズもあります

でででーさん

2017年2月21日はてなブログでカキタクナッタラ開設。2017年10月22日にWordPressへ移行しました。基本的に毎日更新。ウェブ・スマホなどIT関連のネタをメインにラーメンのことや雑談記事など幅広く書きます。たまに変なイラストを描いたりウェブ制作をすることもあります。

あなたにオススメ