stinger3 子テーマ「かしわもち」最初に行ったカスタマイズ
１．ブログタイトル文字の大きさを変更
２．ロゴ画像の挿入
３．ヘッダー画像をGIFアニメ
４．スマホ用子テーマのCSSの適用
以下記事はワードプレス(WP)や、テーマのstinger3をカスタマイズ
したやり方等を忘れないために書き留めた備忘録です
記事内にソースコードを表記してる箇所は、ダブルクリックすると
ソースコードが全選択されるので、コピーして使えます。
尚、修正したソースコードは、必ずＦＴＰソフトを使ってサーバー
にアップ。または各サーバーのオプション（ファイルマネージ
ャー）等（例はさくらサーバーです）で編集してください。
バックアップは忘れずに！！！
子テーマ「かしわもち」は、このままでもご使用出来るが、自分流
にカスタマイズして行こうと思い備忘録として書き留めてます。
１．ブログタイトル文字の大きさを変更
テーマ「かしわもち」を有効化した直後、ブログを開くとタイトル
が大き過ぎる。
なので
子テーマ「かしわもち」の下記コード内の「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]
変更したら「ファイルの更新」をクリック。
２．ロゴ画像の挿入
子テーマ「かしわもち」は、ロゴ画像を挿入できるようになってい
るので、読者様を惹きつけるためについでにGIFアニメにした。
尚、画像のサイズは、高さよよび幅を２００ｐｘにした。
サーバーにアップロードした子テーマ「かしわもち」のホルダーの
中に、「image」ホルダーがあるので、その中に別途作成したアニ
メ化したGIFファイルをアップロードする。
（１）GIFアニメ作成
私がGIFアニメを作成したサイトは
↓
もちろん無料です。やり方も簡単です。
① “ファイルを選択”をクリックして、アニメーションにしたい
gifファイルを複数選択します。
② 点滅間隔を指定する。
③ “画像を加工する”をクリックする。
④ ダウンロードされます。
⑤ ダウンロードされたファイルの名前を「logo」に変更します。
⑥ logoに変更したアニメgifファイルを、子テーマ「かしわも
ち」のフォルダー内にある「images」と言うフォルダー内に移
動させる。
（２）拡張子を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]
変更したら「ファイルの更新」をクリック。
３．ヘッダー画像をGIFアニメ
ヘッダーの画像は、デフォルトの「stinger」の画像を利用してGIF
アニメにした。GIFアニメ化は上記サイトを参照すべし。
次にワードプレス→外観→ヘッダー内にある「画像を選択」から選
んで、「変更を保存」
４．スマホ用子テーマの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が適用されます。
お疲れ様です。
コメント