なおき@事務課の穴 課長のブログ一覧

思いつきと言っては何ですが。。。。
少しずつスタイルシートをいじっています。
以前、私がカスタマイズした時よりも分かりやすくなっている気もするようなしないような(^^ゞ

何はともあれ。。。。
少しずつですけど気がつくと変わっているかもです。
たまに隠れキャラ的に一瞬だけ全く違うものになるかもですが、そこに出会えたらラッキーということで（笑）

まぱスタイルシートいじっても携帯やスマートフォンじゃ反映されないんですけどね(^^ゞ

昨晩、電力使用率をブログに組み込む？というブログで、ページのタイトルのところにYahoo提供の電力使用率の画像を張り付けていつでも見れるようにしたと書きましたが、何名かの方が方法を知りたいということで、その方法を簡単にご説明。

その方法は。。。
ということで画像のサンプルケースで説明です。


１．カスタムスタイルシートを準備する
　※すでにカスタムスタイルシートをご利用の方は次の『２．画像を投入する』へどうぞ。

①マイページをまず開き、管理→スタイルシートを選択しスタイルシートの編集ページを表示。
②タブの中から　簡易編集を選択し編集ページにする。
③ベーススタイルの読み込み項目で基本となるスタイルシートを選択する。
　　※普段お使いのスタイルシートのイメージにしたい時はそのスタイルを選択するとよい。

④ページの一番下のほうにある保存ボタンを押すと準備完了


２．画像を投入する
①スタイルシート編集ページのタブの中から詳細編集を選択。
②スタイルシート詳細編集のタブの中から、ページ基本を選択。
③ページの下の方にあるヘッダータイトルという項目の入力ボックスに次の呪文をコピペ。

　background:url('http://setsuden.yahoo.co.jp/images/meter/meter_setsuden.gif') no-repeat top;

④ページの一番下のほうにある保存ボタンを押すと完了
　※変更を確認したい時は変更を押さずにプレビューを押すと確認できます。


３．さらにカスタマイズ？
スタイルシートの使い方を知らない場合はちょっと高度になりますが。。。
呪文を変えたり追加するといろいろと楽しめます。

紹介した呪文は
　background:url('http://setsuden.yahoo.co.jp/images/meter/meter_setsuden.gif') no-repeat top;
で中心の上に表示ですが。。。

　background:url('http://setsuden.yahoo.co.jp/images/meter/meter_setsuden.gif') no-repeat top left;
とすると左上に表示。

　background:url('http://setsuden.yahoo.co.jp/images/meter/meter_setsuden.gif') no-repeat top right;
とすると右上に表示。（画像が一部途切れる場合があるみたい）

　background:url('http://setsuden.yahoo.co.jp/images/meter/meter_setsuden.gif') no-repeat bottom;
とすると中心の下に表示。（設定により、ブログのタイトル文字と重なって見えにくいです。）


　background:url('http://setsuden.yahoo.co.jp/images/meter/meter_setsuden.gif') no-repeat bottom left;
とすると左下に表示。（設定により、ブログのタイトル文字と重なって見えにくいです。）

　background:url('http://setsuden.yahoo.co.jp/images/meter/meter_setsuden.gif') no-repeat bottom right;
とすると右下に表示。（設定により、ブログのタイトル文字と重なって見えにくいです。）

などなど呪文に追加で書き足すと微妙に位置が変化していきます。

さらに。。。
　background-position:80% 100%;
などと加えると左から○％、上から○%と細かく位置を変更できたりも。

さらにさらに呪文を追加したボックス内にheight:○○○;という項目が書かれていなければ追加すると
表示される上下方向の位置が広がります。
　例　height:270px;
ただ今回のサンプルの例ですとすでにheight:はありますしここを変更するとブログのタイトルの表示位置も変わってしまうので注意が必要です。


全てを複合すると。。。
例題
　background:url('http://setsuden.yahoo.co.jp/images/meter/meter_setsuden.gif') no-repeat top;
　background-position:80% 100%;
　height:270px;

こんな感じでしょうか、これをボックス内に追加してあげればＯＫです。

また表示できる場所は様々です。
詳細編集の各項目を色々と探してみるとあらゆるところに表示が可能になります。
その辺は難しいので説明はしませんけどね（笑）



注意事項
・Yahooにある画像をリンクして表示してありますので、こんな使い方が許されるかは不明です。
　ご自分の判断でお願いします。
・スタイルシートの編集が失敗する可能性も十分にありますので落ち着いて！



と非常に簡単に書いてみましたが、これでもわからないという場合は。。。
分からないところをメッセージでご連絡ください。
基本のスタイルシートがみんカラで用意されている場合で画像のみを表示したい場合には、スタイルシートを教えていただければサポートしたいと思います。
すでにカスタムされている場合は。。。。とりあえずご相談を（笑）

またこれを参考に表示に成功された方はご連絡を頂けると嬉しいです！

ではみんなで節電しましょ！


頑張れ東北！
頑張れ日本！