So-net無料ブログ作成
検索選択

オリジナルバナースキンを載せよう! [ブログをカスタマイズ!]

みんなダラダラしてっかー

第一弾でバナースキンを作って、次は早速ブログにある既存のバナースキンからオリジナルに変更する!
この手のネタは何処かしらでしっかりやっているところがあるので、ここでは細かいところは理解をすっ飛ばして、『ここにコピペ』のような手軽さで伝授しよう。
といいつつ深かったらごめん。性格だ許せ…





自分のブログをまだ持っていないという人もいるだろうか?
まぁ万が一今から登録してという奇特な人が居たら、So-netで登録してもらえたら、伝わるのも早いです。

始める前に、覚えておくと便利な手順。

Ctrl+○

まぁ○ってのは色々帰ることによって属性が変わるんだけど、+は押しながらという風に理解してください。

Ctrl+z 一つ前の手順戻る
Ctrl+x 反転した部分を切り取る (反転とは、テキストで構成されている文章などをドラッグしてなぞると青くなる。あれ。)
Ctrl+c コピー (この作業もコピーしたい箇所を反転して行う。)
Ctrl+v 貼り付け

まぁ今はこれで十分だけど、他にもCtrl+a(全て選択)、Ctrl+f(検索)などがある。もっとあるが切が無い。
作業性をアップさせるために多用するショートカット(今説明したコンボ・キー)は色々なソフトでも多用するので覚えておくと◎










さて、本題。

多少説明が前後してしまうから、混乱の無いように。対象が若葉ブロガーだったことを途中から思い出してしまった。

1.gif










ブログのデザインから、テンプレート一覧をクリック。テンプレートが沢山ある。まぁわかり易いし、色々カスタマイズしやすいからベーシックの白を選択。

2.gif









矢印の指しているのが今回選んだテンプレート。(名前はわかり易いようにカスタムバナーを作る。に変更済み)下にある白というのは自分のブログ用テンプレなので無いものとしてOK
3.gif























これ見て嫌になった者!気持ちはわかる。だが、だいじょうびb
まずは「カスタムバナーを作る」のリンクを押して↑を開く。
こいつらは、大まかにカテゴリ分けされているのよ。970pxって指しているカテゴリは/*-----Common-----*/という場所ね。
ゆっくり見ればすぐ見つかる。
レイアウトは3カラム両/記事:ワイド/サイドバー:ワイドを選んでます。970pxが最大となっているけど、ここを1024pxにすればバナースキン最大幅を挿入できる。作ったバナースキンが970pxで十分なのでここはいじらずに進める。

4.gif

























見たとおりやっていけば、必ず旨くいくb
まぁ見間違えというのはいつでも起こりうるので、その辺だけ注意してね。

5.gif






















画像を挿入する位置というのは、このカーソル位置が重要になってくるので、必ず↑の通りやってくれ。



そうそう、これを初めにやっておくべきだった。
7.gif














バナースキン画像がアップロードされていなかったね。これも一応手順を番号どおりにやってくれ。
先日作ったバナースキン画像の保存先はあなただけが知っている。何処にしまったか忘れたというのは却下。
まずは①で保存先を開く。②バナースキン画像を選択しアップロード。③アップロードされた画像が表示される。とここまで。
この作業で先に進むけど、一応注意が必要なことがある。④サムネイルというのは、記事幅より大きい画像の場合、実寸だと切れてしまう。これを回避するためにクリックすると別ページにて実寸表示するように出来る。④にチェックが入っていると、小さいサイズでまずは表示されるようになるのだ。とりあえず、今回バナースキンを挿入する際は、必ずチェックを外してくれ!
⑤はもう読んだとおり。サムネイルを今のページで開くか、新しいページで開くかの指示。





①押して、バナースキンを選び、開く。

6.gif

















8.gif






















ここ!重要!!
140pxから200pxに変更した行の直ぐ下に改行を作る。そこにカーソルを点滅させ置く。
それから、アップロードした画像をクリックして、情報を入れる。



情報が↓のように入ればOK。赤アンダーラインがバナースキン画像の情報。

9.gif













さて、めんどくさい?設定はこれで全部だ。待ちに待った確認。

10.gif



















11.gif









↑現在の設定のプレビュー。しっかり入ったねb
これでお仕舞い。なんだが……よく見ると見出しの文字が画像に同化してしまい、読み取りにくい。
気にしないって奴はこのままプレビューを消して、保存ボタンを押して終了。
まぁ文字を調整する人も、ここまでを良しとして保存をやっておいてくれ。








見出しの文字色を変える。

12.gif


















まぁまたこれなんだけど。バナースキンを挿入した場所よりちょっと下に、#banner h1{という行をまず探す。
アンダーラインを引いた箇所が変更点。


赤ライン
padding: 40px 0 8px 0; (上、右、下、左)を変更
     ・40pxを変えるとタイトルの上からの位置が変わる
     ・8pxを変えるとタイトルとサブタイトルの間が広がる
     ・0を変えるとタイトルの左からの位置が変わる
まぁ特に無ければここはいじらずすっ飛ばしてOK。

緑ライン
font-family: Helvetica,Arial,sans-serif;
 Helvetica,Arial,sans-serif;を切り取り気に入ったfont名を書き込めば、fontが変わるぜ。
ちなみにおいらのブログはあずきfontだ。その場合はあずきフォントと入れればOK。もちろんインストールされているフォントに限るのは言うまでも無いよな。

オレンジライン
フォントのサイズ変更。
現在はlargeで、ここをxx-small x-small small medium large x-large xx-largeと書き換えれば、文字の大きさが変わるよ。こいつをコピペすればすぐ変更が出来るから試してみて。

水色ライン
ここが問題の文字色変更箇所だ。
444444が今現在の色番号ね。ここを例えばFFFBFBに変更する。

13.gif
















なぜかサブタイトルの文字色が書いてないのだ。これは良くわからん。
まぁ無きゃ無いで書き足せばいいので、とりあえず簡単に間違えの無いように、ブログタイトルの文字色部を全てコピーして所定の位置に貼り付けをしてくれ。


14.gif


















こうなる。まぁこのままだと、ブログタイトルもサブタイトルもあのグレーだったかな、暗い色のままなので、444444を変更だ。
FFFBFBに変更してみる。


15.gif





















うむ。これでいいね。
出来たら保存の前にプレビューしてみよう。まぁ保存してからでもOK。



16.gif








どうだい。白に変わったね。
……しかしバナースキン画像のアングルの悪さが影響して、白でもかぶってしまっている…
まぁいいか^^;
ぶっちゃケ一通りのことをまず覚えることが第一優先だったし。
これで解ったよね?ってこれみて誰か挑戦する人いるのだろうか…



まぁ質問があれば受けます。

って結構この作業も疲れるな。お時間と体の許す時にやったらいいよ。



じゃ今日はこの辺で^^ノツ

nice!(0)  コメント(0) 

nice! 0

コメント 0

コメントを書く

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

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

×

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