ブラウザで開発者モードっていうのがあるのをご存じですか？
キーボードのF12を押すと表示される画面のことですが、うまく使いこなすと、サイトの構成を修正したりするのが簡単になります。
とはいえ、はじめから「うわ、めっちゃ簡単！」と思うかっていうと、そんな事はありません(;^_^A
ものごとにはなんでも”慣れ”が必要だと思います。でもって、慣れると簡単に感じる。そういう事です。
さて、引き続きwordpressネタではありますが、自分のサイトでここを修正したい！という箇所があったとしましょう。
たとえば、前回の記事で書いた「画面幅を広げたい」といった状況を例に説明していきます。
ここではGoogle chromeを使った例で説明します。
確認したいサイトを表示して、キーボードの「F12」を押します。
青色部分がソース（HTML）
黄色部分がCSS（見栄え）
赤色部分がコンソール（JavaScriptとかでコンソール出力されるところ、ここではテーマ外なので、無視してかまいません）
さて、この図の左上に矢印があるかと思います。
ここをくりっくして、どこかサイズを見たいところをへマウスをもっていってみましょう。
すると、画面が何やらカラフルになりましたね？
この色の意味は、ブラウザさん(今回はgooglechromeさん^^)が解釈した、”HTMLのグループ分け”を意味しています。
wrapperという名前の緑色のおおきなグループの中にmainという名前の青色グループがいて、sideという名前のオレンジ色のグループがいて、全体を表示しているんだな。
さらに、画面が小さいスマホが、PCでもウィンドウサイズを小さくしていくと、このオレンジのグループは狭くて表示できないので、青色グループの下の方に”回り込んで”表示されるんだな。
ふむふむ…
ブラウザさんはこんなことを考えているんですね！！
ちなにみ、先ほど”回り込んで”といいましたが、ウィンドウのサイズを変えたり、スマホで表示されたりと、我々ユーザはいろんな条件下でサイトを表示しています。
このように、ユーザの動作に応じて画面構成を変えたり、ボタン色を変えたり、何か悪い事を仕込んだりするためのプログラムがjavascriptです。
詳しく書かれたサイトがたくさんあるので、javascriptについてはこのサイトでは扱いませんが…
さて、本題に戻りますが、
青色部分が今回、広げたいと思っている部分なので、ここを広げるにはまず青色になっている部分をクリックします。
そうすると、図の右側に対応した部分のサイズが表示されました（580×1099.780）と書かれていますね。
つまり、青い部分の幅は５８０ｐｘしかないって事がわかります。
これでは、パッと見が小さく感じるうえ、すぐに改行がきてしまい見づらいです（主観ですが）
では、どうするか？
図の右側には”style.css:1154″と書かれてあり、
main {
・・・・・・・・・・
}
と何か記述がされています。
これは、style.cssっていうcssファイルの1154行目にこの青い部分は定義されていますよ。
という意味なのです。
ほほーそれじゃ見に行こうか！
みかた
外観 - テーマの編集 をクリック
すると、スタイルシートのソースを編集する画面が出てきます。
その他にも、画面右側にはテーマヘッダーに関するソースとか、検索結果とか、役割ごとにソースがわかれているのが見て取れます。
これがstingerの構成なんですねー
わかりやすい^^
さて、先ほどのソースコードの行番までこのままたどってみましょう。
#wrapper {
/* max-width: 980px;*/
max-width: 1100px;
padding: 0 10px;
margin: 0 auto;
}
ありました。
max-width っていうのが、最大幅を意味しているようです。
ためしにこいつをお好きな数字に変更してみてください。
良い感じに修正できると思います。
レイアウトをいじって個性あふれるサイトを作ろう！
stingerはデフォルトでも十分オシャレなのですが、さすがにそのまま使っていては同じstinger使いに、
お、stingerじゃん^^
ですぐバレてしまいます(笑)
別にばれてもいいよというなら今回の記事は何の役にもたたないわけですが、最後までお読みいただいてる方であれば多少なりとも興味があってここまで読んでいるはず。。。
是非、自分色に染めてあげてみてはいかがでしょうか^^
