tak@北海道のブログ一覧

さて、ヘッダに書かれていた内容の補足など。

padding:20px 0px 20px 20px;
これは、ヘッダ内の余白を上下左右の順番に指定しています。
何に影響するかと言うと、ブログタイトルの位置。
特に指定が無ければ、ブログタイトルは左上になりますので、
この指定ですと、上20ピクセル、左20ピクセルの位置に
ブログタイトルが表示されます。つまり
これが、
こうなります。

margin-top: 5px;
これは、ヘッダ上の余白を指定しています。つまり
これが、
こうなります。
微妙に下に移動しているのがわかるでしょうか？

background-repeat: no-repeat;
これは、background-imageで指定した背景画像の並べ方を指定しています。
repeat（敷き詰める）※規定値なので、何も指定していない時はこれになります。
repeat-x（横方向のみ並べる））
repeat-y（縦方向のみ並べる））
no-repeat（ひとつだけ表示する））
が指定できます。

他には、背景画像の開始位置を指定できる
background-position:横位置 縦位置;
があります。
横位置が、left(左端) center(中央) right(右端) または%による割合を指定できます。
縦位置が、top(上端) center(中央) bottom(下端) または%による割合を指定できます。
上記のbackground-repeatと組み合わせることにより表現に幅が出ます。

例)右端に縦方向のみ並べる
background-repeat: repeat-y;
background-position: right top;
例)中央に一つだけ表示する
background-repeat: no-repeat;
background-position: center center;

まずは画像の準備から。
カスタマイズ [ 上級者用 ]を見ると、
スタイル編集 ボタンの横に スタイルシート用画像 というリンクがあります。
これをクリックすると、画像の保存画面になります。
操作感はフォトギャラリーの登録と同じだと思います。
登録すると、画像の横にURLが表示されますので、
これをメモ帳などにコピーしておくといいでしょう。
注)あまり大きい画像を用意すると見た目にあまりよろしくないです。

では、スタイルシートを編集してみます。
編集画面を開き
#Header
と書かれている箇所を探してください。
#Header a
ではありませんので注意。

仕組みを説明すると、ブログを表示しようとする時、
ヘッダに関しては#Headerと書かれている部分をを探し出して
そのカッコ {　} 内部に書かれた命令を読んで表示させているのです。
以下はブルーを読み込んだ場合の内容です。
この部分がヘッダ表示に使われる事になります。
ここで、ヘッダ(画面上部)の画像を変更できます。
下線の部分を保存したヘッダ用のURLに置き換えてください。

ただ、このままではプレビューしてみるとわかりますが、
大きめの画像だと上の極一部分しか表示されません。なので、
このように高さを指定すると良いと思います。
数値は、画像に合わせて調整してください。

フッタについても同様です。
#footer
と書かれている箇所を探してカッコ {　} 内部を書き換えてください。

少々説明が雑になってしまったかも・・・。
質問等あればコメント下さいm(__)m

スタイルシートを変更したいけど、やり方がわからない！という人のために、
不定期ですが、できるだけわかりやすく説明してみたいと思います。

というわけで、今回は前準備編。

みんカラのメニューから、スタイルシートを選択すると、現状では
シンプル
デザイン
クルマ
から好きなスタイルを選択することで変更することができます。

自分でスタイルを編集するには、そのさらに下にある
カスタマイズ [ 上級者用 ]
を使用します。
とりあえず、○カスタマイズ1にチェックを付けて
スタイル編集をクリックします。

スタイルシートの編集画面が表示されますが、
おそらく空白になっているはずです。
とりあえず、編集画面の直上にあるコンボボックスから
ベースにしたいデザインを選択して読み込みをクリックしましょう。
ちなみにコンボボックス内の一覧は、
上で説明しているシンプルとデザインに対応しています。

この操作で、編集画面にずらずらっと文字が入ってきます。
とりあえずこの状態でプレビューをしてみましょう。
スタイルが変更されて表示されていると思います。
また、今使っているスタイルと同じものを読み込んでいる場合は
もちろん変わっていないはずですね。

確認ができたら、保存をクリックして保存。
これでスタイルシートをいじる前準備が完了です。
次回は、ヘッダ(画面最上部)とフッタ(画面最下部)の
画像変更についてやる予定です。

昨日はオフがあったようなのですが、天気もとても良くて暑いし、
今夏は行く機会も無くって今日が最後かもしれない！
ということで海に行ってきちゃいましたヽ(´ー`)ノ

今回は相方のファンカーゴを運転していきました。
着替えとか考慮するとやっぱり大きい車だよねぇ(´∀`)
のーんびりと運転して、1時間ほどで無事到着！

実は海は見に行くことはあっても入るのなんて十数年ぶりｗｗｗ
海の中って、暖かい場所と冷たい場所があったんだねぇ。
そんな事すら忘れてたよｗ

1時間ほど堪能してたら、気付けば太陽は雲に遮られ
体も冷えて寒くなってきたので砂浜に移動。

水着のおにゃのこ3人組が、浜辺でせくすぃーなポーズして写真撮ったりしてたｗｗｗ

でまぁ、体も乾いて来たし帰ろうかーってことで
車まで戻ったのですが、

売店の人(おじいちゃん)が2人、なんだか大声で怒鳴りあって
ケンカしながらお片付けをしてましたヽ(;´Д`)ノ
そのまま怒鳴りあいながら自転車に荷物を載せて帰っていきましたｗ

なんだか気分が台無しになった気がしなくも無いですがｗ
車の中で着替えて帰ってきましたとさヽ(´ー`)ノ