stinger3 子テーマ「かしわもち」最初に行ったカスタマイズ

stinger3 備忘録スマホ用子テーマ, ヘッダー画像stinger3 備忘録, ヘッダー画像

stinger3

stinger3 子テーマ「かしわもち」最初に行ったカスタマイズ

 

 

1.ブログタイトル文字の大きさを変更
2.ロゴ画像の挿入
3.ヘッダー画像をGIFアニメ
4.スマホ用子テーマのCSSの適用

 

以下記事はワードプレス(WP)や、テーマのstinger3をカスタマイズ
したやり方等を忘れないために書き留めた備忘録です

記事内にソースコードを表記してる箇所は、ダブルクリックすると
ソースコードが全選択されるので、コピーして使えます。

尚、修正したソースコードは、必ずFTPソフトを使ってサーバー
にアップ。または各サーバーのオプション(ファイルマネージ
ャー)等(例はさくらサーバーです)で編集してください。

バックアップは忘れずに!!!
子テーマ「かしわもち」は、このままでもご使用出来るが、自分流
にカスタマイズして行こうと思い備忘録として書き留めてます。

 

1.ブログタイトル文字の大きさを変更

 

テーマ「かしわもち」を有効化した直後、ブログを開くとタイトル
が大き過ぎる。

なので

子テーマ「かしわもち」の下記コード内の「font-size ; 72px」を
36pxに変更した。

 

[css]
#container #header #header-in #h-l .sitename {
font-size: 36px;/*–72pxから36pxに変更した–*/
line-height: 1.2;
margin: 15px auto 0;
padding: 0;
text-align: left;
width: 986px;
}
[/css]

 

変更したら「ファイルの更新」をクリック。

 

2.ロゴ画像の挿入

 

子テーマ「かしわもち」は、ロゴ画像を挿入できるようになってい
るので、読者様を惹きつけるためについでにGIFアニメにした。

尚、画像のサイズは、高さよよび幅を200pxにした。

 

サーバーにアップロードした子テーマ「かしわもち」のホルダーの
中に、「image」ホルダーがあるので、その中に別途作成したアニ
メ化したGIFファイルをアップロードする。

 

(1)GIFアニメ作成

 

私がGIFアニメを作成したサイトは

GIFアニメ・アニメーション作成サイト

もちろん無料です。やり方も簡単です。
① “ファイルを選択”をクリックして、アニメーションにしたい
gifファイルを複数選択します。

 

② 点滅間隔を指定する。

 

③ “画像を加工する”をクリックする。

 

④ ダウンロードされます。

 

⑤ ダウンロードされたファイルの名前を「logo」に変更します。

 

⑥ logoに変更したアニメgifファイルを、子テーマ「かしわも
ち」のフォルダー内にある「images」と言うフォルダー内に移
動させる。

 

(2)拡張子をjpgからgifに変更する

 

次に子テーマ「かしわもち」の下記コード内の
「background: url(“images/logo.jpg”) repeat scroll 0px 0px #
EEEEEE;」の

「url(“images/logo.jpg“)」を“jpg”から“gif”に書き換える。

 

変更前

[css]
#container #header #header-in #h-l .sitename a:before {
background: url("images/logo.jpg") repeat scroll 0px 0px #EEEEEE;
border-radius: 120px;
box-shadow: 2px 4px 10px -3px #555555;
content: "";
display: inline-block;
font-family: optima;
height: 200px;
line-height: 1;
margin-left: 0;
margin-right: -245px;
text-align: center;
vertical-align: middle;
width: 200px;
}
[/css]

 

変更後

[css]
#container #header #header-in #h-l .sitename a:before {
background: url("images/logo.gif") repeat scroll 0px 0px #EEEEEE;
border-radius: 120px;
box-shadow: 2px 4px 10px -3px #555555;
content: "";
display: inline-block;
font-family: optima;
height: 200px;
line-height: 1;
margin-left: 0;
margin-right: -245px;
text-align: center;
vertical-align: middle;
width: 200px;
}
[/css]

 

変更したら「ファイルの更新」をクリック。

 

 

3.ヘッダー画像をGIFアニメ

 

ヘッダーの画像は、デフォルトの「stinger」の画像を利用してGIF
アニメにした。

GIFアニメ化は上記サイトを参照すべし。

次にワードプレス→外観→ヘッダー内にある「画像を選択」から選
んで、「変更を保存」

 

4.スマホ用子テーマのCSSの適用

 

子テーマ内にあるスマホ用のCSS(smart.css)を適用させるために、
親テーマのSTINGERのソースを一部修正します。

これをしないとスマホで観た場合、PC表示になっています。
修正する場所は

親テーマ「header.php」を一行修正します。

親テーマのheader.php内の

[php]
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/smart.css" type="text/css" media="all" />
[/php]

 

を以下のコードに変更する。

[php]
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/smart.css" type="text/css" media="all" />
[/php]

要は、

“template”を“stylesheet”に書き換える。

 

親テーマ「header.php」を開くと、似たようなコードがあるので間
違わないように変更して下さい。

以上でスマホ用子テーマのCSSが適用されます。

お疲れ様です。