WordPress オリジナルテーマ

WordPress オリジナルテーマ

皆さんこんにちは!こんばんは!!ロト君です。
先日、WordBench宮崎でWoprdPressのオリジナルテーマの勉強をしてきました!!

その甲斐ありまして、新たに本サイトの3rdテーマを作成した次第です。

前回の2ndテーマと大幅にシステムの方を改正して、デスクトップ・ノート・スマフォの3種にレスポンシブ化させました!

各画面の大きさをCSSで取得後、画面の大きさにあったCSSを再度読ましている感じで、レスポンシブ化させています。
基本のCSSを最初に記載し、判別を一番最後にしています。

CSSの性質上。上書きが可能ですのでレスポンシブしたい場所は上書きで読ましていますね。
具体的な、CSSのレスポンス化は下記のものです。

/* レスポンシブ *//* レスポンシブ */
/*==================================================*/
/* nav表示切替 */
/*==================================================*/
/* iPhone 縦 */
@media screen and (min-width:0px) and (max-width: 480px) {

}/* for iPad */
@media screen and (min-width:481px) and ( max-width:768px) {

}/* for iPad */
@media screen and (min-width:769px) and ( max-width:1024px) {

}/* for PC */
@media screen and (min-width:1024px) {

}

上記の各メディアの中にその対応する大きさのCSSを記載します。
非常に簡単ですね!!

functions.phpの方も少しオリジナル化してプロフィールの画像も変えれたり、ヘッダー画像も変えたり出来るようにしました!
fanctions.php内の記述はまだ勉強中なので、今後頑張っていきたいと思います!

では、今回はここまで(>ω・)ノシ

WordPressカテゴリの最新記事