スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ブログのテンプレートをプチ・カスタム

当ブログの読者さんより
「ブログのトップの画像(イメージ)を
自分のオリジナルにしたいけど、
どうしたらカスタマイズできますか?」
というお問い合わせがありました。

今回はそのご質問に返信するかわりに
HTML初心者の私でもできた
簡単な変更方法を書くことにします。

☆以下の写真は、全てクリックで拡大できます。
良く見たい方は拡大も見て下さいね!


1.加工しやすいテンプレートを探す。
kako01.png
↑このようにトップのイメージ(画像)の終わりが
明確なものがベストです。
また、他の部分はあまり変更しないよう
自分の好みの色に近いもの
ブログのカラム(列)の配置のものを選びましょう。

2.テンプレート制作者からの利用条件を確認。

加工してほしくない制作者さんも中にはいますので、
条件を確認してからダウンロードをしましょう。

テンプレートの設定手順は各提供サービスによります。
★FC2の場合はこちら
公式テンプレートの追加 または
共有テンプレートの追加 を参考にして下さい。




続きは折りたたみます。



新テンプレートが自分のテンプレート一覧にダウンロードされた状態。
今回選んだテンプレート名は、「marriage

kakojunbi01.png
失敗したらやりなおせるように、
複製をとってから作業を。

1.テンプレートの構成をみて変更のターゲットを探す。
探すキーワード1 header(ヘッダー)
ヘッダーとは文字どおり「冒頭」の部分って意味。
ブログの「表題」は、ほとんどヘッダーに収まっているのです。

まずは、HTML編集の中身でヘッダーの表記を探します。
kako02.png

探すキーワード2 background(バックグラウンド)
kako01.png
例で扱っているブログはイメージ(画像)の上に文字が入っています。
文字の下地になっているイメージは、バックグラウンド(背面)にあるので
バックグラウンドの表記を探します。

※イメージの上にブログタイトルなどの文字が
入っていないものは img(イメージ)で探してみて。

kako02.png
HTMLの<div id="hedder">から</div>までがヘッダーの指定内容。
だけど今回ここに background の文字はありません。

「じゃあ、どこだろう?」というと・・・
HTML編集の下の
「スタイルシート編集がアヤシイです」ということに。

では、スタイルシート編集を見ましょう。
kako03.png
header という表記のパーツに
background の文字が2つもありました。
重要なのはbackground-imageの方です。
青く塗ったURLがイメージの格納されている場所になります。

2.イメージのみをWEB上で開いてみる。
URLをコピーしてブラウザの新規ページ(新規タブ)の
URL入力枠に貼り付けて、Enterキーを押します。
kako04.png
変更目的のイメージが開かれました!おめでとう!

3.ついでにイメージを保存する。
kako05.png
イメージの適当な場所で右クリック、
名前をつけて保存→名前はそのままで保存する。

4.保存したイメージを確認する。
※ペイントで開いています。↓
kako06.png
【変形】→【キャンバスの色とサイズ】で大きさが見られます。
ちなみにフォトショップは、【イメージ】→【カンバスサイズ】で確認できます。
※このサイズ数字はメモっておいて。
※確認時の単位は「ピクセル」で見て下さい。

kako07.png
必ずしもイコールとは限りませんので、
イメージを確認することをオススメします。

5.イメージを作る。
事前にスクリーンショット(プリントスクリーン)や
写真など、トップイメージに使う素材は用意して
メモしたサイズのイメージを作ります。

※今回の元データはファイル形式がgifですが、
 写真などの場合はファイル形式はjpgの方無難です。

また、どうやってイメージを作るのかは、
作りたいものによります。
勉強しながら頑張って作ってみて。

参考書にどうぞ。
◆ペイント
http://www.geocities.jp/ogino2600x/902.html
◆フォトショップ
http://mag2akiyama.blog134.fc2.com/

いよいよ!イメージを交換です。

1.出来上がったイメージを自分のブログ用にアップロード。
FC2のアップロード手順

2.アップロード完了後、URLをコピーします。
kako10.png
FC2の場合アップロード完了後に赤文字で表示されます。
※現在は仕様が変わっています。
アップロードされたファイルの欄のファイル情報に
ファイル名、画像のサイズ、作成日などとともに記載されています。
upfiledeta.png
この文章のhttp以下をコピーしてテンプレート設定へ戻りましょう。

3.スタイルシート編集のターゲットURLをマルッと選択して
コピーされたURLを貼り付け。
kako03.png
青の部分だけですよ~!

貼り付けたら更新ボタンを押して、
編集画面の一番上、【テンプレート一覧】の
編集したテンプレート名をクリック!
kako11.png
ついにイメージ入れ替え成功です。

OKだと思ったら、テンプレート名の前、
チェックボタンをポチっと押して
を立てれば設定完了です。

お疲れさまでした。

さて、ひとつ加工すると、
もっともっとカスタムしたいというのが人情ですが、
テンプレートに関して
私が教えられるのはここまで。

もっと深くカスタムしたい方は、各サービスのヘルプなどで
カスタムの研究をしてみて下さいね。

Comment

2011.07.24 Sun 17:53  |  管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
  • #
  • Edit

2011.07.24 Sun 22:06  |  管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
  • #
  • Edit

2011.07.28 Thu 00:33  |  Re: 内緒コメントさんへ

こんばんは!
お役に立てたようで良かったです。
ブログ、頑張って続けて下さいね~!
ではでは!v-422
  • #-
  • ポー
  • URL
  • Edit

2013.10.16 Wed 10:32  |  管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
  • #
  • Edit

2013.10.16 Wed 10:35  |  管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
  • #
  • Edit

2013.10.17 Thu 20:49  |  Re: 内緒コメントさんへ

こんばんは~!
ブログをはじめられたということで、おめでとうございます。
ブログは書いている人が楽しんでいれば、自然にそれが伝わると思います。
気負わず楽しんで続けていってください~!
  • #-
  • ポー
  • URL
  • Edit

2013.10.17 Thu 20:51  |  Re: 内緒コメントさんへ

何度コメントをされても、まったく無問題(モウマンタイ)ですよ~!
むしろコメントの多いブログっぽくなっていいです。(笑)
気にしないでくださいね!
  • #-
  • ポー
  • URL
  • Edit






(編集・削除用)


管理者にだけ表示を許可

Trackback

http://komonozuki.blog.fc2.com/tb.php/1547-71fd4bb1

この記事にトラックバック(FC2Blog User)

プロフィール

ポー

Author:ポー

ようこそ!当ブログへ!

パペガで分かった事を記事にしてきました。

パペガを知らない人は↓クリック
パペットガーディアンって?

『パペットガーディアンの歩き方』や『各塔の内容』『武器について』『用語集』として分類しています。パペガ初心者さんの参考になれば幸いです。ご利用は『サイト内検索』で『もくじ』を検索してください。読みやすいように各項目の『もくじ』から各ページへリンクしてあります。



最近の記事

カテゴリー


歩き方、各塔の内容、用語、武器、それぞれ「もくじ」ページがあるので、サイト内検索で「もくじ」を検索でもOK!


妖しの部屋は、パペガ・マジカ以外で管理人の好きなもの話。
読みたい方だけ折りたたみ記事をお読み下さい。

<PR>



人気コミックを1冊100円~
お手軽レンタル、漫画を
楽しむなら電子貸本Renta!

最近のコメント

Twtter♪

更新はあまりしていませんが、こちらもどうぞ。


ランキング参加中


ポチッと押してください
m(_ _)m



にほんブログ村 ゲームブログへ
にほんブログ村

リンク

FC2無料サービス

登録料無料のFC2の便利なサービスを紹介。


ブログ
このブログは▲FC2ブログ
自分流ブログに最適!

カウンター
簡単カワイイ▲カウンター
色々なブログに貼れるよ♪

FC2ブログランキング
ブログを宣伝▲ランキング
FC2ブログ以外もOK!

QRコード

QR

By FC2ブログ

サイト内検索

オススメ本

ブログの世界で遊ぼう!



▼ ▼ ▼ ▼
▼パペガ攻略&アイテム▼
Puppet Guardian @ Wiki
アイテム帳 @ Wiki
※マジカのアイテムも一部掲載

▼マジカロス攻略▼
Magicaloss @ Wiki

▼アヴァロン攻略▼
魔法学校アヴァロン Wiki

▼パペガ&マジカ開発ブログ▼
http://blog.artifact.jp/

おこづかい貯めよう!

▼クリックするだけでポイントが!


オンラインゲーム課金に
すでに30億円換金実績

げん玉

ポイントのため方は下記ブログへ
(フレのサイトです)
特にげん玉利用法を参考にどうぞ!

FC2カウンター

マジカロスの部屋


★1の部屋★
100926myroom01

★2の部屋★
100926myroom02


※どちらもクリックで拡大♪

写真・イラスト探すなら

絵を描くのが好きでちょこっと出品中。

カラメル♪


北海道の白樺を蒸留した
白樺ウォーターから生まれた
手作り石鹸

 
 

 
 

新しい贈り物の形

メールアドレスで荷物を送ろう!
メルアド便なら住所氏名知られず
安心配送!

Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。