【Mac】Chromeでソースコードを表示してブログデザインを確認する方法

ブログデザイン

どうも、taigaです!

今日はサイトのソースコードの確認方法についてです。

好きなブロガーさんのブログデザインを参考にしたいけど、ブログを見ただけじゃ分からない!

そんな方々の一助になればと思います。

今回はChromeで尚且つMacbookを使ってやるので、同ユーザーの方は分かりやすいかと思いますが、コードの見方とかにも言及するのでその他の方も良かったら参考にしてください。

コードの確認。

コードの確認画面を表示する。

まず、参考にしたいサイトに行きます。

今回はとりあえず当サイトにします。

 

適当な場所でトラックパッドの右側を2本指クリックします。

クリックすると下画像のようなウィンドウが表示されると思いますので、一番下の「検証」をクリックします。

 

クリックすると、右側からウィンドウが迫り出してきます。

表示内容については、とりあえず読めなくても大丈夫です。

taiga
taiga

ちなみに僕も大半が分かってないです…。

  

次に、新しく出てきたウィンドウの左上の「矢印のアイコン」をクリックします。

 

その状態でサイトに矢印を這わせると、矢印が合った部分が選択されたように表示されます。

これで準備が完了です。

taiga
taiga

矢印を合わせた位置によって範囲が変わってくるので、カーソル振り回してるだけでも結構楽しいよ!

 

コード確認のやり方。

続いて、実際にどうやって見るのかについてです。

たとえば、デザインの代名詞である色について調べたいとします。

 

これは簡単で、調べたい場所にカーソルを合わせると、サブウィンドウが表示されます

ここに文字と背景のカラーコードが表示されてます。

「Color」というのが文字のカラーコードで、「Background」が背景色のカラーコードです。

なので、このサイドバーの配色を真似るときは背景色を「#FFFFFF」、文字色を「#333333」とすれば真似ができます。

 

コードのお試し編集。

先ほどのは人のサイトの確認方法でしたが、逆に自分のサイトでデザインのお試し編集がしたい時とかありませんか?

この部分の色を変えたいけどどうなるか分からないから弄れない…

そういう時も、先ほどの画面で対応ができます。

 

編集したい部分で一回クリックすると、右側のウィンドウの表示内容が変わります。

今回はサイドバーに合わせてたので、表示内容がsidebarになります。

折角なので、先ほどの流れでこのままサイドバーの背景色を弄っていきます。

 

まず、背景色の表示を探します。

背景色は先ほど「background」と表示されていましたが、探して見ると「background-color」という項目が見つかりました。

taiga
taiga

さっきのサブウィンドウでは省略して表示されてたようです。

先ほどのカラーコードは「ffffff」に対して、ここでは「fff」となっていますが、同一のカラーを指します。

 

「さっきも確認できた内容ならわざわざやる意味はないのでは?」という意見もあるかもしれませんが、このウィンドウ内だとコードを書き換えられちゃいます。

なお、ここで書き換えても本体のコードは変わらないので、好き勝手弄って大丈夫です。

taiga
taiga

怖ければこのページで試してみてください〜。

 

サイドバーの背景が白だと味気ないので、とりあえず今回は試しにベージュにしてみます。

カラーコードを調べるのがめんどくさいので、そのまま英語でbeigeと入力してみます。

taiga
taiga

シンプルな色なら、英語入力でも対応してくれます。

こんな感じに、ベージュになったバージョンが見れました。

試しにやってみたのですが、ベージュ意外といい感じですね。

今度変えてみようかな…。

 

終わりに。

ということで、今回はブログデザインの確認方法についてでした。

今回は記事のボリューム的に、色のみを対象にやっていきましたが、やろうと思えばサイドバーの形やフォント、サイズなども弄れるので、次回以降で時間があったら記事にしていこうと思います。

また、あくまで自己責任ですが、「検証」で試してみて良い感じだったらコードを直接いじるのも手です。

コードが崩れる可能性があるので、少しでも不安だったらやめた方がいいと思います。

いっときのテンションに身を委ねるタイプな僕は、いつかやっちゃいそうで怖い…。

 

以上!

コメント

タイトルとURLをコピーしました