テンプレート改造デザイン変更できないスキンの背景を変更する方法

アメブロ デザインテンプレート(スキン)改造アメブロのテンプレート(スキン)を改造するためには、CSS変更のデザインテンプレート(スキン)を使用しないと変更できません。

では、カスタマイズ変更できないスキン
使ったらどうでしょうか?

 

 

 

アメブロのテンプレート(スキン)をちょいとカスタマイズするのって、
とかく難しいといわれているは、HTMLがみえていないからです。

 

テンプレート改造を行うためには、
ちょっとアメブロの構造を知る必要があるんですね。

 

アメブロの構造が解ると、格段にカスタマイズしやすくなります。
それでは、ちょいと見てみましょう。
おおまかなイメージはこんな感じね。

アメブロレイアウト構造

 

 

skinBody ブログ全体のことを指します。
skinFrame アメーバーバーを除くブログ全体の部分です。
skinFrame2 広告下~のブログの全体の部分です。
skinHeaderFrame ヘッダーを含むエリアをさします。
skinHeaderContentsFrame 記事の部分です。(サイドバーも含みます。)

 

このように、フレームごとに分かれているので、
例えば背景色(背景画像など)を変更するには
このフレームごとに背景色や、背景画像を変更することができます。

 

CSSのカスタマイズ可能なデザインスキンを使うと、
CSSが覗けますが、アメブロのブログ全体の構造を把握すると、
他のデザインテンプレート(スキン)でも、カスタマイズしやすくなります。

 

デザイン変更の仕様が変わりアメブロでは、
初心者の方でも、背景画像やヘッダー画像を変更できるスキンが増えてきました。

 

でも、やっぱりデザイン変更できるデザインテンプレート(スキン)が、
少ないです。

 

カスタマイズ不可能なデザインスキンで、背景画像くらい
ちょっとなんとかできないものか?

 

ということで、実際に変更してみました。
どうやるかというと・・・
フリープラグインを使います。

 

プラグインというのは、基本ブログなどの機能を追加できる部分なので、
なんでもというわけにはいきませんが、CSSの変更などもここで可能となります。

 

アメブロでは、フリースペースなども用意されていますが、
フリースペースで、動かないCSSもフリープラグインを使用すると、
出来ちゃうわけです。

 

これ、すごいわーって感じですよ。

 

初心者の方にもできると思いますので、
ちょっと練習としてやってみて!!

 

今回は私が気に入ったデザインテンプレート(スキン)で試してみました。
こんな感じね。

ちえぞうが選んだデザインスキン

 

この犬の後ろ姿いいでしょう♪
しかも、記事タイトルの肉球がたまらん!!

これはこれで、素敵なんですが・・・・・
背景が単色なので、これを変更してみたいです。

 

やってみましょう!!

まず用意するのは、背景となる画像ね。
背景画像やヘッダー画像を作成するサイトは、
以前の記事で書きましたが、たくさんあります。
私のお気に入りのサイトをまとめたページを作成しているので、
参考にしてくださいね。
【フリー(無料)素材おまとめページ】

 

作業手順

まず背景画像を用意します。(お好きなものを・・・)
今回の画像は、横や縦に並べて表示させることにしました。
(大きな画像の場合は、そのまま使ったほうがいいですよ)

 

この画像をアメブロの画像フォルダにアップロードします。
【ブログの管理】 ⇒ 【投稿・編集】より【画像フォルダ】を選んでね。

 

(今回気になる画像があったので、2つアップロードしていますが、
1個でいいですよ。)
こんな感じね。

画像フォルダに背景画像をアップロードする。

 

アップロードした画像の下に【記事に追加】というボタンがあるので、
クリックします。

 

記事に画像が表示された。

そうすると、記事の部分に画像が表示されるかと思います。

 

記事投稿の表示を確認したら、背景画像のアップロード先のURLを、知る必要があります。

 

 

 

ですから【タグの非表示】(新エディタでしたら通常表示)のタブを、
【HTML表示】をクリックして、変更してください。
こんな感じね。

 

画像の保存先URLをコピーする

 

URLが表示されます。
図のハイライトの部分を、コピーしてメモに貼りつけておいてください。
(src= の後ろの部分です)

 

そしたら、下記のソースをいったんメモとかにコピーし、
画像の保存先URLを入れ替えます。

 

<style type="text/css">
.skinBody{
background: url(<span style="background-color: #ffff00;">画像保存先のURLを入れ替えてね。)</span> repeat 0 0;
background-color: transparent;
}
</style>

 

 

背景画像は、ブログ全体に設置させたいので、
skinBody (ブログ全体)の指定をしています。

アップロードした画像は、全体に引きつめたいので、
repeat (ひきつめるという意味) を指定しています。

 

先ほど入れ替えたソースを、全部コピーして、
フリープラグインに追加し、保存します。

ポイント

フリープラグインにソースを書きこんだら(貼ったらば)
【配置設置】で、プラグインをサイドバーに移動
させてください。

そうしないと、設定したソースが動きません。
忘れないでね。

 

保存ができたら、ブログを確認してみて!!

 

ほらね。可愛く背景画像が設置できましたよ!!

背景画像の設置完了!!

 

 

フリープラグインにCSSを設置して、背景画像の変更できることが、
解りましたよね。

 

これを応用すれば、デザインテンプレート(スキン)の他の変更も、
可能になるかも?

 

ただし、デザインテンプレート(スキン)も、
デザイナーさんが、一生懸命考えたものなので、
全部改造するのではなく、ちょっとのカスタマイズで楽しんでくださいね。

 

 

カスタマイズやテンプレートについて、
ご相談やご質問はお気軽にメールしてくださいね♪

 

 
 

コメントを残す

サブコンテンツ

管理人:ちえぞう

chiezou



こんにちは。ちえぞうです。
手作りモノが、大好きで、好きが講じて手芸家になりました。
自分の時間を、もっと大事にするため、アフィリエイトもしています。 夢を叶える為に、日々奮闘中です。

もっと詳しくプロフィール♪

line

お役に立てたら、ぽちっとな ♪



Fc2ランキングへ



お問い合わせ

ペンちゃんをクリック!!

pen

ご質問や、ご相談など、
気軽にメールしてくださいね。

アメブロテンプレート参考本

このページの先頭へ