サクラチェッカー
授業の冒頭に、『サクラチェッカー』というサイトを使って遊んでみました。
↓詳しくはこちら
Cocoonスマホ表示のカスタマイズ
今回も前回に引き続き、Wordpressのテーマ『Cocoon（コクーン）』を使って、見栄えを調整してみましょう。
CSSのカスタマイズは難しいので、無理に覚える必要はありません。
手を動かして『体験してみる』感覚でやってみてください。
前回は、『アピールエリア』の四角い部分を『カスタマイズ』→『カスタムCSS』で消しました。
↓詳しくはこちら
ところが、これだけだと、スマホで表示したときに画像部分がつぶれてしまいます。
これを避けるために、CSSのカスタマイズをやってみます。
WordPress上部の『カスタマイズ』
または
管理画面左側の『外観』→『カスタマイズ』
でカスタマイズ画面を表示させ、
左側一番下の『追加CSS』をクリックします。
下の空白に、以下のコードを記入します。
@media screen and (max-width: 834px){
.appeal div.appeal-in {
min-height: 300px;
}
}
すると、スマホでみても画像がつぶれなくなります。
簡単に説明すると
@media screen の部分は、端末（スマホ）の画面サイズを指定しています。
max-width は、最大幅が834px(ピクセル)の時を指定していて、それより幅が小さい場合は｛括弧｝の中の表示をしなさいという意味です。
min-height は最小の高さを300pxに指定しています、これ以下の高さにしないという意味です。
意味がわからなければ、わからなくてOKです！
今は見よう見まねで望み通りの結果ができさえすれば良いです。
：（コロン）；（セミコロン）｛｝（波括弧）などの記号は一つでも間違えると機能しないので、こういったコードはコピペするのが普通です。
ただ、今回は皆さまにコーディング体験・タイピングの練習として手打ちでチャレンジして頂きました。
今回のめあて
このような作業をして、ブログやホームページは成立しています。
タイピングして、望みの結果を得ることで、コーディングの実体験をしていただきたかったのです。
慣れてくると、意味は完璧にわからなくても、ネット上にある様々なコード（CSSなど）をコピペしてご自分の好きな表示にすることが少しずつ可能になってきます。
必要な時が来た時、必要な結果だけできれば十分です。
Cocoonのスキンを変更してみる
勉強会の最後に簡単にご説明しました。次回もやりますのでご心配なく。
Cocoonはスキンを変更することによって簡単に見た目の配色などを変えることができます。
Cocoonのスキン設定はこちらの公式サイトが詳しいです。
当ブログは今は『ブルーカレー』のスキンを利用しています。
まとめ
今回は、サクラチェッカーで少し遊んだ後、CSSカスタマイズでスマホ表示の見た目を調整、Cocoonのスキンも少し変更してみました。
難しい課題が続きましたので、次回はもう少しカンタンに、ブログの文章の書き方にも入って行ければと思います。