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

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

stinger3

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

 

 

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

 

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

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

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

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

 

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

 

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

なので

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

 

 

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

 

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”に書き換える。

 

変更前


		

 

変更後


		

 

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

 

 

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

 

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

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

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

 

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

 

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

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

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

親テーマのheader.php内の

 

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


		

要は、

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

 

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

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

お疲れ様です。