カテゴリ:マイスキン( 4 )

エキサイトブログでも背景を大きく使ったスキンが増えてきましたね。
今回はエキサイトブログスキン「Photo Style」を使って背景画像を自分の好きなものに変えてみましょう。

a0342241_11445901.png

マイスキンを編集する

今まで適用してから編集していたのですが、編集してから保存もできたのでまずは編集からいきましょう。

a0342241_11514646.png

CSSのタブを開いて、下記のタグを探しましょう。

#main-area
a0342241_11514065.png

background: urlの中に反映したい画像のアドレスを入れましょう。
既存の画像の幅は1280pxですが、高さに合わせて拡大縮小されるので小さい画像を入れても大丈夫でした。
ただし、背景画像いっぱいに表示されるので、画像によってはいい位置にできない、などあると思います。
その場合はbackground-attachmentを消してみましょう。

background-attachment: fixed;

表示したい位置が明確に決まっている場合はbackground-positionを変更してみましょう。

右、下を表示したい場合

background-position: right bottom;
a0342241_12062610.png

写真を変えるだけでガラッと違うイメージになるので、ぜひ好きな写真に変えてみてくださいね。


[PR]
by exblog-tips | 2016-01-21 12:07 | マイスキン | Comments(0)

ブログの背景を自分の好きな背景に変えたいことってありますよね。
エキサイトブログのスキン「colorful」、このスキンをベースに、背景画像をオリジナルのものに変えてみたいと思います。

背景にしたい画像を用意する

背景を変更するにはお好きな背景が必要です。
今回は、継ぎ目のないシームレスパターンを使って背景を設定します。
もちろんゼロベースから画像を作成してもいいのですが、面倒くさいですよね。
手っ取り早く背景画像をゲットしたいならとりあえず検索しましょう。
【photoshop パターン】とかでググると大量に出て来ますね。

Photoshopを使う際にデザインの幅が広がる無料のパターン素材80選
【Photoshop パターン】シームレスでフリーなパターン素材まとめ

今回はこの方眼用紙系のパータンに変更してみたいと思います。

a0342241_11420769.png

画像をアップロード

画像が用意できたら、エキサイトブログの左メニュー「画像管理」から画像をアップロードしましょう。
添付でもドロップでもお好きな方で。

a0342241_11441404.png

画像のアドレスをコピーする

アップロードができたら、該当の画像の上で右クリック。
「リンクアドレスをコピー」で画像のアドレスをコピーします。

a0342241_11474880.png

ブログスキンを「colorful」に設定

「設定」→「デザインスキン」でスキンを「colorful」に設定します。

a0342241_11363720.png

CSSを変更する

「colorful」のブログスキンの「編集」→「CSS」から、「/* excite blog skin css */」という箇所を見つけましょう。
一番上にbodyタグの記載があると思います。
このタグの上から9個目、下記のタグを先ほどコピーしたアドレスにしてみましょう。

background: url("http://pds.exblog.jp/pds/1/201601/15/41/a0342241_11420769.png") repeat scroll;
a0342241_11543715.png

保存して完了!

保存すれば完了です。いろいろなパターンを使ってお気に入りのブログを作りましょう!

a0342241_12000122.png

[PR]
by exblog-tips | 2016-01-15 12:00 | マイスキン | Comments(0)

エキサイトブログの基本的な構造

さて、マイスキンの下準備ができたら早速HTMLを入れていきましょう。
エキサイトブログのマイスキンは4つに分かれています。それぞれに絶対必要な独自タグがあり、それを必ず入れなければなりません。

  1. 全体
  2. 本文
  3. 右メニュー
  4. CSS

全体

<$adminmenu$>
<$post$>
<$prepage$>
<$nextpage$>
<$banner$>
<$xml$>
<$menuright$>

本文

<$postsubject$>
<$postadmin$>
<$postcont$>
<$posttail$>
<$cmtjs$>

メニュー

<$mntitle$>
<$mnbody$>

詳細の意味などはこちらで確認してください。基本的にはこの独自タグさえ入っていればどんなレイアウトにしようが問題なしです。
とりあえず今回はすでにあるカスタマイズ用のHTMLとCSSを使います。

a0342241_15150234.png

「デザインスキン」→「スキン選択:カスタマイズ」
おすすめは、カスタマイズの中のテキストカスタマイズをベースとして使うといいでしょう。
シンプルなので追加は容易いです。
編集ボタンを押したら、[HTML&CSS編集]の「全体」「本文」「右メニュー」「CSS」を全部コピペしてマイスキンに登録しましょう。
ついでに[基本設定]のサイズ(本文・ロゴ・メモ帳)も同じにしておきましょう。
実はこのスキンを適用してから「編集ボタン」→「作成」を押してもマイスキンに登録されます。ただスキンイメージ・レイアウトは変えられません。

ここまで準備が整ったら続いてCSSを直接追加!


[PR]
by exblog-tips | 2015-12-24 14:46 | マイスキン | Comments(0)

早速マイスキンを作成してみましょう。

a0342241_17341802.png

管理画面の左のメニューから「デザインスキン」→「マイスキンを作成」を押す。
すると下記の画面になります。

a0342241_17365965.png

ここで新たにスキンを登録するわけですが、上から順に名前入れて画像入れてってやるとレイアウトで選び直したときにすべて消えます。。。。完全に罠です。
なので先に[レイアウト]から選びましょう。
こういう地味なところから改善してほしいんですが…。
[レイアウト]を選んだら次にやっとスキン名を入力しましょう。なんでもいいです。

そしてその次[スキンイメージ]なのですが、これ、必須です。
毎回作らないといけないんかいとすごく面倒なのですが…75x75のgifのデータが必要です。
凝り性の方は毎回作ってもいいのですが、今回はテストなのでダミー画像をサイトからDLしましょう。http://placehold.it/75x75.gif

a0342241_17484785.png

そして最後に[サイズ]ここはとりあえずデフォルトで構いません。後から変更します。
これなんで入れるかっていうと、ここに入っている数字に合わせて画像が自動縮小されるらしいです。
本文を500pxにすると500px以上の幅のサイズでもぴったり500pxになってくれるというわけ。
ロゴとメモ帳ってやつも同じで画像とか入れたときにうまいことやってくれます。
ここまで出来たら[HTML&CSS編集]はそのままで[登録]ボタンを押しましょう。

a0342241_17502556.png

こんな感じでできているはず!とりあえず登録まで終わったので次の記事で中身を登録していきましょう!


[PR]
by exblog-tips | 2015-12-22 17:52 | マイスキン | Comments(0)

エキサイトブログをとことん使い倒すブログです。こんなことできないかな?をゆるっと募集中!


by エキブ