So-net無料ブログ作成

タイトル画像のカスタマイズ方法 '2011/11/05

以前書いた「新レイアウトに変更しました」ではタイトル画像の変更だけではなく、タイトル画像がランダムに変更されるよう対応しました。

今回はその手順を書きたいと思います。

※[オリジナルフォトヘッダー1]スタイルを使用している方のみの限定となります。他のスタイルの方ごめんなさい[ふらふら]
※他のスタイルでも応用できるとは思いますが・・・。

まず、手順の流れとしては以下の通りです。
1. デフォルトのタイトル表示用画像を無効化する
2. タイトル表示用画像をアップロードする
3. タイトル表示用画像のアドレスを確認する
4. レイアウト画面からカスタムペインを配置する
5. カスタムペインにタイトル画像切り替え用のキーワードを追記する
6. 動作確認をしてみる

どうですか?簡単そうに見えますよね。見えるだけではなくて本当に簡単なんですよ!

それでは具体的な手順です。

1. デフォルトのタイトル表示用画像を無効化する

まずはデフォルトで表示されているヤシの実みたいな画像を無効化します。
これをしないと画面がチラつくことがあるんですよね。

a. 管理トップ画面から[デザイン]を選択する
説明画像11.jpg

b. [デザイン]のすぐ下に[テンプレート管理]が出てくるので、それを選択する
説明画像12.jpg

c. テンプレート名の横にある[編集]を選択する
説明画像13.jpg

d. 次の文字列があるので、すべて削除する
/* ■■■■■■■■■■■■■■■■↓ 背景画像指定 ↓■■■■■■■■■■■■■■■■ */

background:url(_common/skins/9007/images/yourphoto.jpg) no-repeat;

/* ■■■■■■■■■■■■■■■■↑ 背景画像指定 ↑■■■■■■■■■■■■■■■■ */
説明画像14.jpg

e. [保存]を選択する
説明画像15.jpg

手順1.は以上で完了です。
万が一失敗した場合は[初期値に戻す]を選択してください。


2. タイトル表示用画像をアップロードする

これはわざわざ説明する必要はないと思うのですが、念のため(笑)

a. 管理トップ画面から[新規作成]を選択する
説明画像21.jpg

b. [ファイル]横にある[+]マークを選択し、ファイルアップロード用の機能を表示させる
説明画像22.jpg

c. [ファイルを選択]を選択するとファイルを選択するダイアログが表示されるので、アップロードしたい画像を選択する
説明画像23.jpg

d. [アップロード]を選択する
説明画像24.jpg

手順2.は以上で完了です。
複数の画像を一度にアップロードする場合は、[ファイルを選択]の下にある[別のファイルを追加]を選択してくださいね。
説明画像25.jpg

ワンポイント:タイトル画像のサイズは900×500が丁度よいみたいです


3. タイトル表示用画像のアドレスを確認する

手順2.が完了した状態(続き)で手順3.を行ってくださいね。

a. [ファイル]の画像一覧に手順2.で追加した画像があると思うので、その画像の[編集]を選択する
説明画像31.jpg

b. 表示された画像の右側にある[元のファイルを見る]を選択する
説明画像32.jpg

c. 別のウィンドウ(またはタブ)が開き、アドレス欄にタイトル表示用画像のアドレスが表示されているので、それを控える(/_images~.jpgまで)
説明画像33.jpg

手順3.は以上で完了です。
アップロードした全ての画像に対してa.~c.の手順を実施し、メモ帳にでも控えておきましょう。


4. レイアウト画面からカスタムペインを配置する

a. 管理トップ画面から[デザイン]を選択する
説明画像41.jpg

b. [デザイン]のすぐ下に[レイアウト]が出てくるので、それを選択する
説明画像42.jpg

c. サイドコンテンツの[+]を選択すると[カスタムペイン]というボックスが出るので、それを右側にドラッグ&ドロップする
説明画像43.jpg

手順4.は以上で完了です。
[カスタムペイン]はヘッダー、サイドバー、記事カラムなど、どこに配置しても構いません。


5. カスタムペインにタイトル画像切り替え用のキーワードを追記する

この手順は若干難易度が高いので頑張ってください!

a. 手順4.で追加した[カスタムペイン]を選択する
説明画像51.jpg

b. タイトルに「タイトル画像切り替えscript」を入力する
説明画像52.jpg

c. 自由入力欄に以下の文字列を入力する

<script type="text/javascript">
<!--
//タイトル画像ランダム変更スクリプト
var titleImage = new Array();
titleImage[titleImage.length] = 'url(画像ファイルアドレス1) no-repeat center top';
titleImage[titleImage.length] = 'url(画像ファイルアドレス2) no-repeat center top';
titleImage[titleImage.length] = 'url(画像ファイルアドレス3) no-repeat center top';

document.getElementById('container').style.background = titleImage[Math.floor(Math.random() * titleImage.length)];

//-->
</script>

説明画像53.jpg

d. 画像ファイルアドレス1,2,3を手順3.で控えた画像のアドレスで置換する

※上は3つのタイトル画像を切り替えたい場合の例です。4つ、5つと増やしたい場合は、
titleImage[titleImage.length] = で始まる行を追加してください。
説明画像54.jpg

e. [カスタムペイン]の設定を保存する
説明画像55.jpg

f. [レイアウト]の設定を保存する
説明画像56.jpg

手順5.は以上で完了です。


6. 動作確認をしてみる

a. 自分のブログを表示させ、F5を何度か押してリロードしてみる
説明画像61.jpg説明画像62.jpg

これでタイトル画像が切り替われば成功です!お疲れ様でした。
nice!(9)  コメント(12)  トラックバック(0) 
共通テーマ:blog

nice! 9

コメント 12

kumakichi

ヘッダー画像がランダムに変わるブログにしてる人は
少ないから珍しいなと思ってました。
同様にカスタマイズしたい方もいるのでしょうから、
この記事はとても参考になりますね。(´▽`)
by kumakichi (2011-11-05 09:58) 

よーへー

kumakichiさん

ランダムに画像切り替えるのは珍しいんですね。知り合いのso-netブロガーさんがランダム切り替えを組み込んでいたので、結構みなさんそのようにされているのかと思いました。

あ、kumakichiさんのサイトでは役に立たない情報でしたね^^;
ごめんなさいm(__)m
by よーへー (2011-11-05 11:01) 

ナツパパ

あ、これは勉強になります。
こうやってやれば、ランダムに変わるんですね。
by ナツパパ (2011-11-05 11:28) 

よーへー

ナツパパさん

ナツパパさんのサイトではもしかしたら応用できるかもしれませんね。
もしお役にたてれば幸いです!
by よーへー (2011-11-06 22:37) 

ショコラ・パパ

さすが、エンジニア!
分かりやすい。
by ショコラ・パパ (2011-11-13 11:27) 

よーへー

ショコラ・パパさん

大先輩に褒めていただき誠に光栄でございますm(__)m
by よーへー (2011-11-13 12:06) 

エアマックス 95

今日は よろしくお願いしますね^^すごいですね^^
by エアマックス 95 (2013-07-26 08:24) 

エアマックス 95

カッコいい!興味をそそりますね(^m^)
by エアマックス 95 (2013-07-26 08:24) 

ナイキ ランニング

Hi! This is kind of off topic but I need some help from an established blog. Is it very difficult to set up your own blog? I'm not very techincal but I can figure things out pretty fast. I'm thinking about making my own but I'm not sure where to start. Do you have any ideas or suggestions? Thanks [url=http://www.kutugekiyasujp.com/ナイキ-japan-111.html]ナイキ ランニング[/url] <a href="http://www.kutugekiyasujp.com/ナイキ-japan-111.html" title="ナイキ ランニング">ナイキ ランニング</a>
by ナイキ ランニング (2013-08-03 06:09) 

[モンクレール ダウン]

ルブタン シューズ [モンクレール ダウン] http://www.forshoppingbadjp.biz/
by [モンクレール ダウン] (2013-08-08 16:38) 

モンクレール moncler

クリスチャンルブタン 店舗 [url=http://www.forshoppingbalancejp.biz/]モンクレール moncler[/url] <a href="http://www.forshoppingbalancejp.biz/" title="モンクレール moncler">モンクレール moncler</a>
by モンクレール moncler (2013-08-08 16:39) 

グッチ 財布

レクサスは、モデルの下で、<a href="http://folowd7j4.re-l.com" title="グッチ ショルダーバック">グッチ ショルダーバック</a>RAV4、RXのための共通プラットフォームを立ち上げることにしました。 昨日、スーパーボウルに関する記事を掲載した<a href="http://13sv08u28w.re-l.com" title="GUCCI iphone">GUCCI iphone</a>ページは、平常時に比べて99.7%多く「いいね! グッチ 財布 http://q9xd1bt40p.re-l.com
by グッチ 財布 (2013-08-30 06:57) 

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 0

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。