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

stinger 5ヘッダーカスタマイズ, ロゴ画像stinger 5, ロゴ画像

stinger5

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

 

 

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

 

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

 

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

 

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

 

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

 

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

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

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

 

GIFアニメの作成

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

 

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

 

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

 

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

 

終わりましたら次に

点滅間隔を選択します。

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

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

 

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

 

 

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

 

stinger5008

 

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

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

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

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

 

test

 

 

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

 

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

 

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

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

 

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

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

 

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

 

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

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

を開きます。

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

 

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

 

【追記するコード】

 

これはPC表示用なので

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

 

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

 

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

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

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

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