pray

WordPress用テーマ『Stinger3』の最新版Stinger3ver20131217が公開されたので、子テーマを作成して久しぶりにカスタマイズをしてみたのですがどうでしょうかね?笑

出来るだけシンプルにしてみたんですが…見やすくなったでしょうか??(;´∀`)

ここ数日、スマホ用のレイアウトも少し変更しようとsmart.cssもいじりアップしたのですが、”反映されない”という壁にぶち当たっていました。

前回カスタマイズした時にはちゃんと反映されたのに何がおかしいのか全然分からなかったのですが、やっと思い出したので備忘録として残しておきます。

Photo:Time to Pray (Cambodia 9 of 16) By Ray (rayphua)

smart.cssを反映させるためのおまじないとは?

Stinger3をカスタマイズするのに子テーマを作成する方法はもうご存知だと思いますが、その際にsmart.cssを反映するのにはちょっとしたおまじないが必要です。

もし作成した子テーマディレクトリの中にheader.phpを入れてない場合は、親テーマからコピーしてブチ込んであげて下さい。

簡単に言うと、header.phpの一部を書き換えてあげます。その箇所とは、

<!---css切り替え--->
<?php if(is_mobile()) { ?>
<link rel="apple-touch-icon-precomposed" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon-precomposed.png" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/smart.css" type="text/css" media="all" />
<?php } else { ?>
<meta name="viewport" content="width=1024, maximum-scale=1, user-scalable=yes">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
<?php } ?>
<?php wp_head(); ?>
</head>

6行目の<?php echo get_template_directory_uri(); ?>という箇所です。これを”stylesheet”と変更してあげます。

 

<!---css切り替え--->
<?php if(is_mobile()) { ?>
<link rel="apple-touch-icon-precomposed" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon-precomposed.png" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/smart.css" type="text/css" media="all" />
<?php } else { ?>
<meta name="viewport" content="width=1024, maximum-scale=1, user-scalable=yes">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
<?php } ?>
<?php wp_head(); ?>
</head>

上記のようになります。こうしてあげるコトでsmart.cssも子テーマの方から読み込んでくれるようになるので、同じように悩んでいる方がいましたら書き換えて見て下さいね♪

さて、コレでスマホ表示もレイアウト変更出来るようになったので頑張りまーす!皆さんもStinger3で楽しんで下さいね~♪

Stinger3のダウンロードページ

この記事が役に立ったらいいね!しよう

最新情報をお届けします

Twitterでアクロマニアをフォローしよう!