ヌルヌルたかおーのブログ一覧

お友達　康さんからのリクエストです。

ブログのタイトル等の横についている四角いアイコンを変更する方法です。

ブラックを読み込んだ状態で解説していきます。
私が使用しているアテンザのアイコンサイズは２０ｐｘ×１７ｐｘですので、違うサイズを使われる場合は適宜調整が必要です。


アイコンを用意して下さい。
ヘッダーや壁紙と同様にアップします。


スタイルシートから
background-image: url('/styles/black/point.gif');
を探してurlを変更します。
ブラックならこのファイル名なのですが、他のスタイルシートだと違うかもしれません。
念のため、Class名も書いておきます。

• #Header


• .Title


• .ProfileTitle


• .CarTitle

の以上４つですが、
変更前にちょっと待ちない！

#Headerとありますが、このみんカラ純正アイコンはヘッダー部にも使われています。
ブラックを読み込んでプレビューするとヘッダーはシマシマでしょ？
なので、ここは変更しないで下さい。
既にヘッダー画像を変更している人には無関係です。

他の色のスタイルシートがどうなっているかはわかりません。
またの機会に調査して追加書き込みします。


さて、アイコンの変更自体はこれで終わりなのですが、このままプレビューするとアイコンの上に文字がカブっていませんか？
ちょっとダサいですよね？

これは、みんカラ純正アイコンサイズが１２ｐ×１２ｐｘだからです。
今回使用しているアイコンサイズは横幅が２０ｐｘなので８ｐｘほどカブっているのです。

なので、今度はカブった文字を右にずらします。
アイコンを変更したClass内に
padding-left: 19px;
という感じで枠内の内側の余白を指定する記述があります。
８ｐｘ右にずらしたいので、ここの数値に８ｐｘ足せばよいのです。
つまり１９ｐｘならば、２７ｐｘと指定します。


これで設定は終了です。
お疲れ様でした。



私が使用しているアイコンは、今は無きアテンザオーナーズサイト”クラブアテンザ”のＢＢＳで使用されていたものです。
サイト閉鎖直前に管理人さんのご好意により公開されたものです。

既にご存知の方も多いと思いますが、標題の件、忍TOOLS様へのリンクが必要です。

詳しくは以下を。
***** 重要報告です ******


リンクがまだの方は、早急に張って下さい。


使用上の注意をよく理解すべきでした。
忍TOOLS様、及び関係者の方々には深くお詫びいたします。

画像の青色のとこの変更方法です。

ブラックを読み込んだ状態です。
以下のセクションを見つけて下さい。
.MenuPlate
{
border-left:1px solid #444;
border-right:1px solid #444;
border-top:0px solid #444;
border-bottom: 1px solid #444;
font-size: 12px;
text-align: left;
line-height: 125%;
padding: 5px;
background: #444444;
word-break: break-all;
margin-left:0;
margin-right:0;
margin-top:0;
margin-bottom:15px
}

この中の
background: #444444;
のカラーコードを変更します。

background-image:url('http://仕事にいかなければ.gif')
を追加すると青色個所に画像を入れる事ができます。

ちなみに
background: transparent;
と書くと背景が透過色になるので、「body」タグで設定した背景が表れます。
つまり壁紙をそのまま表示できるわけですね。


個別の話はまたこんど。

アクセス推移を見てみました。

（23:45現在）

・・・と、、少ない・・・よね？？


車のブログでありながら車の事を書かないせいでしょうか。

でも、今後も書かないでしょう（ぇ




とにかくスタイルシートをなんとかしないと。