いんて@白ハリのブログ一覧

先日紹介したスタイルシートですがＩＥでも無事表示できるようになりました！
ヽ(´ー｀)ノﾊﾞﾝｻﾞｰｲ

では、もう一度・・・（笑）

貧乏暇無し

またまた、スタイルシートに新しい機能が追加されましたねー(^^)
一番上の行のように、ブログ内で文字の装飾が出来ちゃいます。
しかも５つ迄まで、登録できちゃいます！(◎皿◎)ﾅﾝﾃﾞｽﾄ!!

一番最初の赤い文字だとこんな感じです。

まず最初に、スタイルシート－詳細編集－ブログ－ユーザーコンテンツ(ブログ内ユーザー定義)を編集します。

ユーザーコンテンツ(ブログ内ユーザー定義)で、まずセレクタ名を決めます。　適当に覚え易い文字が便利です。
私の場合「.bre」としました。（頭のピリオドを忘れないように！）

次にスタイルを設定します。
いろんなコマンドが使えるので、今回は私が使ったヤツを・・・

color:#ffffff;　　　　←フォントの色です。（これは白）
font-size:150px;　　　　←フォントの大きさです。
background-color:red;　　　　←フォントの背景色です。（これは赤）
width:auto;　　　　　　　　　←背景の高さです。（これは自動）
height:auto;　　　　　　　　　←背景の巾です。（これは自動）
font-family:"ＭＳ 明朝",serif;　　　←フォントの種類です。（これは明朝）
font-weight:700;　　　←フォントの太さです。（400が標準くらい）
border:solid 1px #ffffff;　　　←枠の指示です。（これは、１本枠で太さは1px、色は白）

これで保存すれば、設定完了です。

最後は使い方です。

使い方は簡単で装飾したい文字をさっきのセレクタではさむだけです。

<span class="bre">鰤</span>　　とすれば（ここではピリオドは必要ありません。必ずタグは半角で、/は閉じる意味なので忘れないように・・・）

鰤

と表示されます。(^^)v

間違いを放置できないので、先日のブログは削除しておきます！（;´Д｀）

この記事は、おすすめスポット・スタイルシート機能追加のお知らせ について書いています。

↑本当ならこんな感じなんですが・・・

昨日紹介した「ブログ内の文字を指定」ですが、どうもＩＥ系は全滅のようですね・・・（;´Д｀）
Ｖｅｒ.６～８まで確認しましたが∩(・∀・)∩　ﾓｳ ｵﾃｱｹﾞ

しかし、そのコマンドが使えないのか、それとも文法上の事なのか良く判りません。
FirefoxやSafari、ネスケなど、ＩＥ以外のコンポーネンツを使っていれば、大丈夫なのですが何が悪いのか良く判りません？？
まだ、みんカラのサポートブログにも情報は上がって無いし、少しづつコマンドを試していくしか無いのかな・・・( ﾟДﾟ)ﾏﾝﾄﾞｸｾｰ・・・

地道な作業になりそうなので、気長に待っててね（爆）

さて、このブログは本文とコメントの部分が透けて背景が見えるようになってますよね。

透けてると、なんとなくカッコよくないですか？
自己満足？（爆）

ちょっと面倒ですが、透けるテーブルをやってみましょう。

まず必要な物に、透けた背景の画像が必要です。
通常、透明GIFやPNGファイルが必要になります。
しかし、つくるのは面倒だと思いますのでサンプルでウチの背景に使ってる画像をいくつが置いておきます。(^^)

　黒い透過背景

　青い透過背景

　オレンジの透過背景

　白い透過背景

お好みの色の画像を適当な場所にダウンロードします。
次にみんカラのスタイルシート画像にアップロードします。

※アップロードする時は自動変換にチェックを入れてはいけません。

詳細編集
　↓
コンテンツ共通
　↓
コンテンツ表示上部　←ココを編集します。
コンテンツ表示　　　←ココを編集します。
コンテンツ表示下部　←ココを編集します。

基本的に３カ所とも同じです。

元々、背景は色だけが指定されていますので、他の部分は必要ですので、
background～の行だけ削除します。

ここで、プレビューしてみましょう。
ページの一番下に、プレビューボタンがある筈です。

プレビューで背景に直接文字だけが残っていれば成功です！(^^)

次に、先ほどアップロードした透過背景画像を指定します。

background:url(https://cdn.snsimg.carview.co.jp/carlife/storage/*****/style/********.png) repeat;

さっき消した、"background～"の部分に上記の行を挿入します。
スタイルシート用の画像のURLはみなさんがアップロード画像の横にありますので、それを記入してください。

もう一度、プレビューしてみましょう。
コメントの背景が半透明になれば成功です！(^^)

あとは、忘れず保存しましょう（笑）

サイドバーやプロフィールも同じ要領で半透明に出来ます。

やはり不満が多かったのか、それとも私が書いた文句が効いたのか（ってそれはありえないだろうなｗｗｗ）画像のサイズと容量の規制が緩和されました。

900×900(200KB)→1280×1820(300KB)
となったので、背景画像の置き場所をZORGからみんカラに変えました。

これで、タイムラグが若干解消されたかな(^^)

カウンターの設置です。

カウンターはNINJATOOLSなどを無料で使ってる場合が多いですよね。
ウチはHitGraphを使っていますが、ヘッダーの背景や全体の背景に画像を登録している場合は置き場所に困るのではないかと思います。

では、何処に置くか？って事になるのですが、"background"で指示できる場所なら置こうと思えば何処でも置けるのです。
でもあんまり変な所にも置けないので、私はブログ表示切替部分に置きました。
このブログ画面の左上ね(^^)

で、スタイルシートを弄る部分はココです。

詳細編集
　↓
ブログ
　↓
ブログ表示切替　←ココを編集します。

例
font-size:12px;
text-align:right;
clear:both;
margin:0 0 5px 0;
background-image:url('http://***.～');　　　　　カウンターのURLを指定します。
background-repeat:no-repeat;　　カウンター（背景）を繰り返さない指示です。
background-position:left top;　　表示範囲の左上に表示する指示です。
height:50px;　　　　　　　　　　表示範囲の高さを指示します。（カウンターの高さに合わせてください）

白い文字の部分は最初からあった物です。
赤い文字の部分を追加します。

これでカウンターの設置完了です。(^^)