myブログ
  • 関崎から
    佐渡島の関崎から撮った携帯写真を主に置いています。

テンプレートを少し改造するとオリジナル度がアップします。ヘッダーのイメージをオリジナル写真に変えるだけでもかな雰囲気が変わります。

今回は、クラシック・アナログ時計をFC2ブログのヘッダーに配置する方法を書いていきます。
他のブログでも基本は同じなので応用してください。

ただし、テンプレートの編集は自己責任です。
失敗したら元に戻せるので気楽に行きましょう。

時計を配置できるのは、ヘッダー部に時計が入るスペースがあることが前提です。文字だけのヘッダーで高さが狭いようなテンプレートでは、時計が隠れたり、他の部分に重なったりします。
また、以下の説明と一致しないテンプレートがあるかもしれません。そんなときはあきらめてください。

説明には超人気のテンプレート dhw_blueHouse を使います。こんな感じに配置します。

img1267

大まかな手順は以下の通りです。

  1. 今使っているテーマを複写する
  2. 複写したテーマを編集する
  3. 複写したテーマを使用する

2番目が危険ですが、複写した方を編集するので、だめならオリジナルの方に戻せはいいだけです。

1.今使っているテーマを複写する

・【管理画面】>【環境設定】>【テンプレートの設定】 と進んでください。
・今使っているテンプレートには赤い旗が付いてるので、【複製】を押します。
・複製されたテーマの【編集】を押します。
・以下のように複製されたテンプレートの名前が出ていればOKです。
img1268

2.複写したテーマを編集する

まずHTMLを変更します。
<div id=“header”> と書かれているところを探してください。

img1260

その下に、以下のソースを貼り付けてください。

<div style="top : 0px;left : 0px;position : absolute;z-index : 100;">
	<div style="width:150;height:150;overflow:hidden;">
		<script type="text/javascript" src="http://mog.sado-is.com/analog_classic3/analog_classic3.php"></script>
		<script type="text/javascript" src="http://mog.sado-is.com/analog_classic3/analog_classic3.js"></script>
		<script type="text/javascript">swfshow(0,0,0);</script>
		<div style="font-size:40%;position : relative;top : 0px;left : 999px;">
			<a href="http://sado-is.com/ " target="_blank" title="佐渡島の次平">佐渡島の次平</a>
		</div>
	</div>
</div>

以下のようになればOK.

img1261

ここでプレビューしてみましょう。以下のようになればOK。

img1265

このままではブラウザの幅を広げても左上に固定されたままになります。これでいい場合はこれで終了です。

ヘッダーのイメージの上に配置するには、スタイルシートを編集します。 #header を探してください

img1263

overflow: hidden;  の次の行に position : relative; を挿入します。

img1264

ここでプレビューしてみましょう。以下のようになればOK。

img1266

ブラウザの幅を変えても、ヘッダーのイメージに重なっているはずです。

ここからが位置決めです。
テンプレートに挿入したソースの1行目を以下のように変えます。

<div style=”top : 170px;left : 730px;position : absolute;z-index : 100;”>

img1259

プレビューしてみましょう。以下のようになればOK。

img1267

これでテンプレートの編集は終わりです。

更新した後に、テンプレートを適用してください。

top:上からの位置left:左からの位置 を適当に調整してすきな位置に配置してください。

コメント / トラックバック 5 件 クラシック・アナログ時計(どこでも配置用) があります

  • こんにちは。
    プレビューでは、表示できたのに適用したら元に戻ってしまった。
    どうしてだろう?
    30分かけてやったのに悲しい。
    また、夜に挑戦しにきます。

  • 次平 says:

    こなみるくさん、残念です。

    テンプレートを編集するときは、こまめに保存した方がいいかも。編集画面から移動するとアウトだった気がする。

    プレビューが別画面ならいいんですが、同じ画面のときもあるみたい。同じ画面だと、戻ったときに元通り! 何度かやられました・・・プラグインを直してるときだったかな?

    がんばってください。

  • こんばんは。

    プレビュー、同じ画面でした。
    2回失敗して気がついたのですが、時間がなくて。。。
    でも、他にも原因があるかもと思ったのでお聞きしました。
    これからまた、やってみますね。ありがとうございます。

    おやすみなさい。

  • できました!!

    うれしいです(*^∇^*)

  • 次平 says:

    こなみるくさん、お疲れ様でした。

    いい感じになってますね。

コメントをどうぞ

2017年3月
« 2月    
 1234
567891011
12131415161718
19202122232425
262728293031