amebloのスマフォ版スキンのカスタマイズ

スマフォ版のページのスタイルについて紹介したいと思います。

サブヘッダー

上はサブヘッダーのテストです。


スマートフォンで見れば、全体的に青っぽいスキンになっていることがわかると思います。

下のQRコードからアクセスできます。




スマフォ版のスタイルの編集は記事にそのままCSSを書けば良いのです。

しかし、編集がめんどくさいので外部ファイルを読み込む形に私はしています。

それで今回のコードは、（これは以前に公開していたものなので、今表示されているスキンではありません）

@charset "utf-8";

html:not([lang]) body,
footer p.skinCopyrightColor{
	background: #4EAAFF;
}

.skinBody,
.skinBody2{
	background-color:transparent;
}

html:not([lang]) #profileNavigation ul li:nth-child(2),
#archiveNav .newPhoto{
	display:none;
}

html:not([lang]) #info{
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #3D97EB),color-stop(1, #2581D6));
    border: 1px solid #2275C4;
}

html:not([lang]) #cmntArea{
    border-top: 1px solid #96CCFF !important;
    border-left: 1px solid #96CCFF !important;
    border-right: 1px solid #96CCFF !important;
}

html:not([lang]) #petaPocketArea{
    border: 1px solid #96CCFF !important;
}

html:not([lang]) #petaBtn{
    border-right: 1px solid #96CCFF;
}

html:not([lang]) #modCategoryAlliance .inner a {
    border: 1px solid #68B6FF;
}

html:not([lang]) #modCategoryAlliance h1 {
    background-color: #CAE6FF;
}

こんな感じです。

書き方が雑でスミマセン...

私はコレをcssとしてdropboxのpublicフォルダに入れて、ブログの記事の先頭で読み込みを行っています。

こんな感じです。

まだ画像は緑なので今度また改良しようと思います。

今回はこの辺で。