読者です 読者をやめる 読者になる 読者になる

スポンサーリンク

【初心者も必見Part2】はてなブログを簡単にカスタム。この記事を参考にすればちょっとだけブログが変身(スマホ編)

THINKs THINKs-ブログのこと

ダサいスマホブログを大変身

f:id:wabisukenouta:20160128212043j:plain

 はてなブログのスマホ表示をカスタムします。もちろん今回も難しい知識は必要ありません。コピペだけで大丈夫です。

 

 一つだけ注意が必要なのは、わたくしのはてなブログのテーマはレスポンシブ対応ですが、スマホ表示にはレスポンシブ対応にチェックをしていない状態です。

 

 ですので今回のスマホ表示カスタムはあくまでもレスポンシブ非対応でのカスタムということをお断りしておきます。レスポンシブ対応にしていてもカスタムされるのかもしれませんが、確認していないので確かのことは言えません。

 

 ではあらためて。

 前回ははてなブログのPC表示をカスタムしました。

wabisuke.hatenablog.jp

 

 実際にカスタムした人は、本当にコピペだけであそこまで変わるとわかっていただけたと思います。自由にコードやCSSを使ってコピペOK!! と記事を掲載していただいている人には本当に感謝です。

 

 ではさっそくカスタムしていきましょう。

 今回は2つのカスタムをおこないます。

  1. はてなブログで特徴的なヘッダー部分をカスタム
  2. 記事一覧にメリハリをつける

 以上の内容になります。

 

はてなブログで特徴的なヘッダー部分をカスタム

 はてなブログのスマホ表示で気になるのは、あの丸く表示される部分ですよね。

f:id:wabisukenouta:20160128212634p:plain

 

 こちらは多少変更を加えたあとなのですが、どうですか。判断しずらいと思いますが『侘』の部分が丸いのがわかりませんか。これを変更していきます。さらに幅をとっているヘッダー部分もカスタムしていきます。

 

 参考にさせていただいた記事はこちら。管理人の狭間さん。ありがとうございます!

www.junpeihazama.com

 

 早速コピペしてカスタムしました。記事の指示通りに進んでいけば、素人の人でも問題なくできあがります。

 わたくしにだってほら! このとおり!

f:id:wabisukenouta:20160128220544p:plain

 

 どうでしょう。全然雰囲気がちがいますよね。書かれている内容は別ブログの画面で実験したので無視してください。カスタムは表示の通りの形になります。

 本当にこれがあのダサいスマホの画面か、と疑いたくなります。

 

 このようなスタイリッシュなスマホ表示もコピペで一発です。専門的な知識もなにも必要ありません。

 狭間さん。あらためてありがとうございます。

 

記事一覧にメリハリをつける

 さらに見栄えをよくしていきましょう。

 

 記事一覧の日付に背景色をつけてアクセント。

 アイキャッチの画像に枠線を付け加えます。

 

 このカスタムはわたくしの大好きなブロガー「CatNose」さんの記事を参考にさせていただきました。

tsukuruiroiro.hatenablog.com

 

 本当におしゃれになります。

 さっそく実践。こちらもコピペでOKなので記事に書かれている指示通りに作業をおこなっていきます。

f:id:wabisukenouta:20160128222451p:plain

 

 おー。まさにグッドデザイン! 日付部分には背景色がついて見やすく。

 そしてアイキャッチ画像が枠線で囲まれることによって引き締まった印象があります。これでスマホ画面が見やすくなりました。

 CatNoseさん、ありがとうございました。

 

マンネリ化したブログもデザイン一新で新たな気持ちに!

 ブログは長く続けていると途中であきてしまうことがあります。

 

 毎日更新していると次第に書くこともなくなり、しかし懸命に毎日更新していても、一つの記事を時間をかけて書くことができないので内容が薄いものになります。

 

 そういったマンネリ化したブログや、自分自身の気持ちを変えるためにもブログ自体のデザインを変えたり、今回のようにカスタムしてみたりすると、気分も新たにブログを書くことができるのでオススメです。

スポンサーリンク