カキタクナッタラ

出力することを忘れないように何かを書きます

はてなスマホ版のレイアウトをカスタマイズしたい時に編集したい箇所のCSSをChromeで調べる方法

f:id:d3dayo:20170618155300j:plain

今やっていることが落ち着いたら自分のはてなスマホ版レイアウトもまた少し弄ってみようかなと思うでででーさん(@d3_dayo)です!

このブログの記事をよく読みにきてくれる皆様は、ブログのCSSを編集してデザインをカスタマイズする時はどうしているでしょうか?

カスタマイズしたい内容をグーグル先生に聞いてみるというのも非常に効率が良いですよね。先人たちがカスタマイズの手順を細かく記してくれていますから、やりたいカスタマイズの手順がドンピシャであれば、基本的にはコピペで作業が完了します。


では、ドンピシャでやりたいことの情報が見つけられなかった時はどうしていますか?

私は普段からGoogle Chrome使いなので、そういう時はキーボードの[F12]キーを押してChromeのデベロッパーツールを使っています!

デベロッパーツールの使い方

Chromeではデベロッパーツールという機能を使って、ウェブサイトの各所に適用されているCSSを簡単に調べたり、記述を書き換えたり追記してデザインの変更をシミュレーションすることができます。

手順はウェブサイトのCSSを調べたい箇所で右クリックし表示されるメニューから「検証」を選択します。(もしくは、キーボードの[F12]キーを押すことでもOK)

f:id:d3dayo:20170618132836p:plain


そうすると、このようにChromeデベロッパーツールが立ち上がってきます。そして赤枠で囲った部分に、選択した箇所に適用されているCSSが表示されます。

f:id:d3dayo:20170618133611p:plain


この赤枠で囲った部分ですが、仮想でCSSを追記したり、既に適用されているCSSのカラーコードや数値を変えてみたり、いろいろとシミュレーションすることができます。しかも、書き換えたり追記したCSSは実際に画面上で反映されます(あくまでもシミュレーションなのでページリロードしたら戻ります)

f:id:d3dayo:20170618134422p:plain


このようにして、CSSを弄ってデザインをカスタマイズしたい箇所をデベロッパーツールを使ってゴニョゴニョし、出来上がったコードはデベロッパーツール上でコピー可能なので、コピーして自分のブログエディターに貼り付ければ、実際にそのデザインが反映されるわけですが…今回はこのデベロッパーツールを使ってはてなのスマホ版レイアウトのCSSを確認する際の便利なやり方を紹介したいと思います!


デベロッパーツールを使ってPCでスマホ版レイアウトを表示する

さて、はてなのスマホ版レイアウトをカスタマイズしたい時ですが、通常ではPCのブラウザからはてなブログを表示してもスマホ版レイアウトでは表示されないですよね?なので、先ほど紹介したデベロッパーツールで検証するというやり方でCSSを調べることができないわけなんですが…

そういえば、はてなブログの管理画面からデザイン設定を開いて「スマートフォン」の編集を選択すると、スマホ版レイアウトの「トップページ」なら擬似的に確認することができます。

f:id:d3dayo:20170618145046p:plain


が、しかし、記事を開こうとするとその先が表示されないため、記事単位で表示される固有のメニュー(例えば記事下に表示される「新しい記事」や「過去の記事」といったメニュー)に適用されているCSSを確認することができません。


そこで!


先ほど紹介したChromeのデベロッパーツールを、今度は少し設定を変えて使うことで、PCのChromeでもはてなのスマホ版レイアウトを表示させて、そして弄りたい箇所のCSSを確認するといったことができるのです!

Chromeでブログを表示しデベロッパーツールを起動する

まずはChromeでブログを表示して、キーボードの[F12]キーを押し(もしくは、右クリックでメニューから「検証」)デベロッパーツールを起動します。

f:id:d3dayo:20170618151853p:plain


デベロッパーツールが起動したら、画像の赤枠で囲っている部分をクリックします。

f:id:d3dayo:20170618152337p:plain

ページをリロードする

上の画像にて赤枠で囲った部分をクリックすると、ブログの画面幅がスマホのディスプレイ大に修正され表示されたかと思います。ただ、このままでは幅だけがスマホの状態でレイアウトはPC版のレスポンシブな状態のままなので、キーボードの[F5]キーを押すなどしてページをリロードします。

f:id:d3dayo:20170618153444p:plain

リロードすると…どうでしょう?スマホではスマホ版で表示するように設定しているブログであれば、はてなのスマホ版レイアウトが出てきたと思います。


この状態になれば、あとはデベロッパーツールでデザインを変更したい箇所のセレクタや現在適用されているCSSの状況を確認したり、ゴニョゴニョ弄って新たなデザインを試行錯誤したりすることができます。

f:id:d3dayo:20170618154059p:plain


おわりに

今回は、本当にザックリではありますがChromeデベロッパーツールの使い方と、そしてはてなのスマホ版レイアウトを編集する際に、自分が弄りたい箇所のセレクタやCSSの状態を調べる方法について紹介させていただきました!

私個人の好みとしては、はてなブログの場合はスマホで表示する際に、レスポンシブのテーマを使うよりもスマホ版レイアウトで表示したほうが小綺麗にまとまって表示されているように見えるので、いま抱えているWordPress案件がスッキリしたら、私もスマホ版レイアウトをいろいろとイジイジしてみようかなって思ってます!


はてなのカスタマイズに関する記事はこんなのもあります!

d3dayo.hateblo.jp



でででーさん
d3dayo.hateblo.jp


ページTOPへ