stinger5 ヘッダーカスタマイズ　タイトルの前にロゴ画像を挿入

ブログにアクセスした時、少しでも長く滞在してもらえるようにブログタ
イトルの前にロゴ画像を設置してみました。

以下記事はワードプレス(WP)や、テーマのstinger５をカスタマイズ
したやり方等を忘れないために書き留めた備忘録です。
記事内にソースコードを表記してる箇所は、ダブルクリックすると
ソースコードが全選択されるので、コピーして使えます。

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

バックアップは忘れずに！！！

GIFアニメでロゴ画像の作成
1. まずは複数の画像を用意します。
2. GIFアニメの作成
ブログタイトルの前にロゴ画像を挿入
ワードプレスのスタイルシートをカスタマイズ

GIFアニメでロゴ画像の作成

まずは複数の画像を用意します。

サイズは高さおよび幅とも100px～200pxがよいと思います。

画像のファイル形式はjpgまたはjepgで保存してください。
（他のpngでもいいと思いますが、やった事がありません）

GIFアニメの作成

GIFアニメ(アニメーション)作成 – バナー工房を開きます。

表示されている１枚目の「ファイルを選択」をクリックして、先ほど用意
した画像を１番目に表示したい画像を選択します。

次に２枚目の「ファイルを選択」をクリックして、先ほど用意した画像を
１番目に表示したい画像を選択します。

必要な画像枚数分を繰り返します。

終わりましたら次に

点滅間隔を選択します。

推奨は１秒だけど、あとは好みです。

次に「ループする」を選択します。
ここも好みだけど１回だけでもいいです。

「GIFアニメを作成する」ボタンをクリックします。

次に表示される「ダウンロード」ボタンをクリックします。

指定されたフォルダーに、GIF形式で保存されます。

保存された画像ファイルを開いてアニメ化なっている事を確認します。

あとは適当にファイル名を変更しても良いですし、そのままでも良いです。

案外かんたんに出来ると思います。

ブログタイトルの前にロゴ画像を挿入

それではいよいよブログにアニメーションロゴ画像を挿入するやり方を解
説します。

先ほど作成したGIFアニメのファイル名を「logo」に変更します。

例えば「test.gif」と言うファイル名だったら、「logo.gif」に変更しま
す。

次にFFFTPソフト等でサーバーにアクセスします。

あなたのテーマが入っているフォルダーを開きます。

契約しているサーバーのファイルマネージャーからでも良いと思います。

「wp-content」→「themes」→「使用しているテーマ」→「images」

「使用しているテーマ」は私の場合は、「使用している子テーマ」

を開きます。

次に先ほどファイル名を変更したGIFアニメファイルをアップロードしま
す。

ワードプレスのスタイルシートをカスタマイズ

【追記するコード】

[css]
/*—————————–
ヘッダーのカスタマイズ
——————————*/

header .sitename {
font-size: 28px;
color: #0ff;
line-height: 1.2;
margin: -30px auto 0;
padding: 0;
text-align: left;
width: 980px;
}
header .sitename a {

font-family: optima,hiragino maru gothic pron;
color: #0ff;
letter-spacing: 4px;
line-height: 2.7;
padding: 0 15px;
text-decoration: inherit;
text-shadow: -1px 3px 9px #000000;
}
header .sitename a:hover {
-moz-opacity: 0.8;
opacity: 0.8;
}

header .sitename a:before {
background: url("images/logo.gif") repeat scroll 0px 0px #EEEEEE;
border-radius: 120px;
box-shadow: 2px 10px 20px -3px #000;
content: "";
display: inline-block;
font-family: optima;
height: 200px;
line-height: 1;
text-align: center;
vertical-align: middle;
width: 200px;
}
header .sitename a:hover {
opacity: 0.5;
}
#gazou #headimg {
margin-bottom: 0;
}
.smanone {
border-bottom: 0 solid #FFFFFF;
margin: 0;
}

/*—————————–
ヘッダー説明文のカスタマイズ
——————————*/
header .descr {
font-size: 12px;
text-align: right;
color: #666;
font-weight: normal;
margin-bottom: -5px;
line-height: 15px;
padding-bottom: 0;
}
[/css]

これはＰＣ表示用なので

上記コードをスタイルシート（style.css）の

[css]
/*media Queries PCサイズ
—————————————————-*/
@media only screen and (min-width: 780px) {
.smanone {
display: block;
}
.pcnone {
display: none;
}
#wrapper {
padding: 0 40px;
}

中略　中略・・・

.pagination span, .pagination a {
display: block;
float: left;
margin: 2px 2px 2px 0;
padding: 6px 9px 5px 9px;
text-decoration: none;
width: auto;
color: #fff;
background-color: #999;
}
.pagination a:hover {
color: #fff;
background-color: #666666;
}
.pagination .current {
padding: 6px 9px 5px 9px;
color: #fff;
background-color: #CCCCCC;
}
/*– ここまで –*/
}

[/css]

の「/*– ここまで –*/」の下にコードを追記します。

追記後のコードは以下のようになります。

中略　中略・・・

header .sitename {
font-size: 28px;
color: #0ff;
line-height: 1.2;
margin: -30px auto 0;
padding: 0;
text-align: left;
width: 980px;
}
header .sitename a {

[/css]

私の場合は子テーマに追記した。

ブログおよび説明文の長さによって、margin・paddingおよびfontの大き
さを変更する必要があります。

尚、テキストおよびロゴ画像にシャドウを施しています。
いらない場合は削除してください。

stinger5 ヘッダーカスタマイズ タイトルの前にロゴ画像を挿入