Stinger5～7とアフィンガー1～3の記事幅を変える方法を紹介します。バージョンが違っても大体一緒です。
Stinger5~やアフィンガーは、記事幅を何pxとか数字で指定して決めることが出来ません。実際どうかはわかりませんが、少なくとも私は出来ません。
全体の幅(＃wrapper) ー サイドバーの幅(＃side aside) ＝ 記事幅
という感じで決まります。
「記事幅を決める単独の値はない」のです。
なので、全体の幅を広げれば、記事幅を広げることが出来ます。
目次をタップすると見出しに飛びます
記事幅を調節する手順
- 全体の幅(＃wrapper)を決める。
- サイドバーの幅(＃side aside)を決める。
- メイン(main)のmargin-rightの数値を決める。
- 他、微調整
ざっくりこんな感じです。
いや、むしろ一番上の＃wrapperだけでいいです。
他に手出すとめんどくさいからやめた方が良いと思います。逆に読みづらくなったりあっちもこっちもでガチャガチャして終わりです。
ただ単に記事幅を広げるならＷrapperだけいじれば良い
サイドバーの幅はそのままで、記事幅だけを広げたいのなら＃wrapperのwidthの数字を変えるだけで出来ます。
テーマを編集から、CSS(スタイルシート)を選ぶ。
↓
「コントロール ＋ F」で検索窓を開いて「#wrapper」と入力。３つ見つかるはずです。
↓
一番上に出てくる
—————————————————-*/
のすぐ下の#wrapperのmax-widthの数字を変えます。
/*レイアウト スマートフォン
----------------------------------------------------*/
#wrapper {
max-width: 980px; /*⇐この数字をいじる*/
padding: 0 15px;
margin: 0 auto;
background-color: #fff;
}
これで勝手に記事幅が決まります。
もちろんサイドバーの幅も一緒に変えることも出来ますが、基本的にここを細かく変える人はいないと思います。
変えたいときは、#side asideのwidthの数字を変えましょう。そのとき、一緒にmainのmargin-rightも調節しておかないとおかしなことになります。サイドバーがメインの方に押し寄せてきて被ってしまうんです。
記事の余白を調節する方法
mainのpaddingをいじります。
スタイルシート(CSS)の編集を選んで、
タブレットサイズの場合は、
—————————————————-*/
@media only screen and (min-width: 414px) {
のちょっと下にあるmainのpaddingを、
ＰＣサイズの場合は、
—————————————————-*/
@media only screen and (min-width: 781px) {
のちょっと下にあるmainのpaddingの数字を変えます。
main {
background-color: #fff;
border-radius: 4px;
padding: 20px 40px; /* ⇐ここの数字を変える */
margin-bottom:10px;
}
paddingは、箱の中の余白です。
paddingは、leftだのrightだの指定しない場合、次のようになります。
：上下左右；
：上下 左右； ⇐上のコードはこの状態。
：上 左右 下；
：上 右 下 左；
１つだけ書くと、上下左右全部に対応
２つ書くと、１つ目は上下、２つ目は左右の値になる。
３つ書くと、１つ目は上、２つ目は左右、３つ目は下。
４つ書くと、上、右、下、左の順番
という意味です。
スマホ、タブレット、PCのCSSの使い分け
スマホとＰＣで表示を変えたいときがあると思います。文字の大きさとか、見出しの色とか。
StingerのCSSを見ると、上からスマホ、タブレット、ＰＣの順に並んでいます。
全体に適用されるゾーン
/*レイアウト スマートフォン
—————————————————-*/
↑
スマホならではのゾーン
↓
/*media Queries タブレットサイズ
—————————————————-*/
@media only screen and (min-width: 414px) {
↑
タブレットならではのゾーン
↓
/*media Queries PCサイズ
—————————————————-*/
@media only screen and (min-width: 781px) {
↑
ＰＣならではのゾーン
↓
「min-width:◯◯◯px」の下に書かれるものは、「画面の幅が◯◯◯より大きかったらこっちのCSSを適用しますよ。」という意味になります。
CSSは後に書いたやつが優先されるので、小さい方から順に書いていって、幅が大きい方を書いた方が都合が良いですよね（本当は関係ないんだけども）。
見る機械によって変える必要があるものはそれぞれの「ならではゾーン」に、全部に共通しているものは一番上に書いておけば迷わないし楽です。
これだけわかればいいんじゃないでしょうか。
要素の検証を使い倒す
あとはいじりたいところが出てきたら、とにかく「要素の検証」です。
知りたいものにカーソルを合わせて右クリックすると、ウインドウが出てきて一番下に「要素の検証」があるのでそれを選択。
そうすると、そこがどんなCSSで書かれているのかわかります。余白とかも色分けで出てくるので非常にわかりやすいです。
※GoogleChromeじゃなくても似たような機能はついているはずです。
↓こんな感じ。
↓右のスマホ的なマークをクリックすると、スマホやタブレットでどう見えるのかもわかります。
人のブログやサイトを見て、「これいいな」というのがあったらとにかく要素の検証をしまくりです。
あと、コントロール+Fで検索機能を使えば、CSSの膨大なコードの中で自分が探したいものを見つけるのに便利です。
言葉で教えてもらうよりも、自分で画面を見ながら手を動かしてやった方が定着するのも早いんじゃないでしょうか。
まとめ
細かいことはさておき、これで形になるはずです。
結局のところ、
「何にどんな名前がついていて、何が何に囲まれているか」
それだけの話です。素人が使う分には。名前と数字がわかればそれがどんなテーマだろうがレイアウトはいじれます。
エンジニアのためのQ&Aサイト【teratail】
メールアドレスのみで無料登録可能。
teratailではPHP、Ruby、Java、Androidなどのウェブやネイティブアプリに関する質問やSwiftやLaravelといった最新技術に関する質問が投稿されてます。1日に30個程度の質問が投稿されその9割程度に回答がつきます。
独学でプログラミングを勉強したい人におすすめのサービスです。
