やっと新スタイルに！

みなさん どうも♪ぶら坊です。

早くやらなくては！と思っていた新しいスタイルシートにやっと変更しました。

実は新スタイルシートが施行され始めた時に試みたのですが、ヘッダー画像が上手くいかなくて放置してました(^^;)

しかし、このまま旧スタイルのままだと来月になった時に自動的に既成のスタイルに変更されるみたいなので、重い腰を上げて変更に着手したのでした。


ヘッダーは色々試行錯誤してようやく既定の枠内に収まりました。
こういうのに慣れてる方だとパッパッと簡単にされるのでしょうが、不慣れな私は上手く画像が収まるのに時間が掛かってしまいました(汗)
ちなみにヘッダー画像のサイズは1024×276ピクセルです。

タイトルは前と同じフォントと同じカラーにしたのですが、今回はスクロールさせてみました(笑)

次にカレンダーですが、前のように上側に画像、下側にカレンダーという感じにしたかったのですが、色々やってみても上手くいかないので諦めてカレンダーの背景に画像を入れました。
ちなみに画像は京商1/18 Ferrari 365 GTB4 competizioneです。

そして今回新しく試みたのが背景色。
B2リミテッドのトワイライトブルーマイカになるべく似ている色にしたつもりですが、あの微妙な色合いはやっぱり難しいです…。
違うなぁと思うのですが妥協しました(苦笑)

もう１つ新しく試みたのが↑のブログトップにある小さい横長の画像。
Roadsterのエンブレムの画像を入れてみたのですが、ちょっとうるさい感じかな？と思うので、もしかしたら元に戻すかもしれないです。


それにしても新しいスタイルシートはヘッダー画像のサイズに規制があったりして、旧スタイルに比べてやり辛いですね～。

フッダー画像も入れられなくなって…
と思っていたのですが…

しか～し一番下までスクロールして下さい。
旧スタイルより小さくなったものの、

ちゃんとフッダーが入ってるでしょ！
画像はちょっとした遊び心(笑)でラーメンにしてみましたが、他の画像に変更する予定です。
ちなみにこの画像は先日、北九州市で食べた「男龍」のラーメンです(^^)
「今度は醤油ラーメンに？」とかそんな突っ込みは受け付けておりませんので悪しからず(笑)

新スタイルでは無理なのかなぁと思ったのですが、調べてみるとあの範囲内(私のブログで言う黒い部分)でしたら大丈夫です。
旧スタイルのようなフッダーは無理みたいですが、少し小さめのフッダー(もどき？)は入れられます！

で、気になるそのやり方をお教えします。
と偉そうに言っても私もみんカラを徘徊して覚えただけですが(^^;)

---

まずスタイルシート→スタイルシート画像の準にクリックして頂いて、挿入したい画像をアップロードします。
※アップロードする画像の幅は必ず620pxにして下さい。
アップロードした画像のURLをコピーします(ヘッダーを入れてる方はご存知だと思いますが)

続いて詳細編集→コンテンツ共通をクリック。
コンテンツ共通のページを下に少しスクロールして頂くと、
コンテンツ表示下部という文字があります。
その右に文字の羅列があります。
コレ↓です
margin:0 0px 0 0px;
padding:0px;
background:url(http://○△□…) no-repeat top center;　　
　　　　　　　　↑の( )内に画像のURLを入れます
height:100px;
　　↑は縦幅のサイズです。

上をご覧になると判ると思いますが、background:urlの後の( )内に元々ある文字を消して、( )内に先程コピーした画像のURLを貼り付けます。
height:の右の数値は画像の縦幅のサイズを変更する数値です。
仮に100pxとしてますが、これは画像によって自由に決めてください。
ちなみに私のラーメンの画像は290pxです。

ヘッダーを入れられてる方は操作する場所さえ分かれば大丈夫ですよね(^^)
ちなみにブログトップのRoadsterのエンブレム画像を入れている場所は
コンテンツ表示上部です。
要領は↑と一緒ですがそのままだと画像は１つしか表示されませんのでコンテンツ表示上部内のno-repeatを消して画像が続くようにしてあります。


もしヘッダーに画像を入れてない方でやってみたい方は↑と同じ要領です。
まず詳細編集をクリック→基本ページを下へスクロールして頂いて、
ヘッダー領域の中のbackground-image:url(http://○△□…)の(　)内の文字をスタイルシート画像でアップロードした画像URLに置き換えればOKです。

皆さんチャレンジしてみましょう！(^ー^)/


※↓追記。

お友達の方にカレンダーの背景に画像挿入について質問がありましたので追記します。

まずスタイルシート用画像でカレンダーに挿入したい画像を↑と同じようにアップロードして画像URLをコピーします。

アップロードする画像はカレンダー用なのであまり大きなサイズだと確実に画像の１部分しか見えなくなると思います。
ですので私は314×235ピクセルに縮小していますが、このサイズでも5ミリぐらい端が写ってないのでホントはもう少し縮小した方がいいと思います。

次に詳細編集→サイドメニューをクリック。
下へスクロールして頂いてブログカレンダーの書式の中のbackground:url(http://○△□…) の( )内を↑の要領でアップロードした画像URLに置き換えるだけです。
私のカレンダーはheight:235px;にしていますが、あとはご自身で調整されてください。
heightは縦幅の数値で数値を増やせば縦幅が広がります。

これで画像挿入はOKだと思いますが、そのままですと今日の日付の場所の背景だけオレンジになっていると思います。
私は少しでも画像が見えなくなるのがイヤだったので今日の日付の場所を枠で囲うようにしてあります。
やり方はブログカレンダーのすぐ下のブログカレンダー当日に、
border:3px solid #001940;
と書き換えます。
↑これは私の現在の書式です。
border:3pxの3は枠の太さですので数値を上げればより太くなりますし数値を1にするとかなり細い枠になります。
#001940は枠の色なので、これを換えれば色も変わります。
カラーコードはコチラをご覧ください。

あともう一つ、私はブログを書いている日を緑にしています。
このやり方は、先程のブログカレンダー当日よりも少し下のブログカレンダー記事ありリンクに、
color:#00c040;
と書き入れます。
色はカラーコードで好きな色にされてください。


説明がヘタなので分かり辛いかと思いますがご容赦ください。