貴方はどのレベル？アメブロスキン作成のスキルを（勝手に）レベル化してみました

アメブロを使い始めて1年ほど経ちました。

ということで、アメブロのスキン作成のスキルを（勝手に）レベル化してみました。

※ 100％私の主観によるレベル化なのでそこんとこヨロシク

レベル0

使っているスキンは、「アメブロ公式スキン」もしくはデフォルトの「ベーシックもどき」スキン。ブログパーツの配置や基本設定もデフォルトのまま・・・

ついでにブログ設定の「ブログの説明」も

「ここにブログの説明が入ります」

のままになっている方。

レベル1

「アメブロの基本設定」や「サイドバーの設定」など基本的なアメブロの使い方は解っているが、「カスタマイズ可能」なスキンは変更の仕方が解らないので公式スキンから気に入ったスキンを選んで使っている方。

使っているブラウザは「Internet Exploere」。

レベル2

「カスタマイズ可能」なスキンも使ってみたいけど、「簡単カスタマイズ」でヘッダー画像を変更したら画像が繰り返しで表示されちゃったり、ボケボケになっちゃったんであえなく挫折・・・

渋々公式スキンを使っている方。

サイドメニューにプラグインのブログパーツやフリースペース使ってテキストを表示させたりできるようになりました・・・

レベル3

「フリープラグイン」、「フリースペース」、「メッセージエリア」の違いが解っている方。

アメブロのカスタマイズブログで紹介されたTipsをコピペで適用できるがイマイチCSSやhtmlタグのことは解ってません。
（CSSのことを「タグ」、ヘッダー画像のことを「スキン」って思わずいっちゃいます）

レベル4

htmlタグは一応書けるのでフリーエリアはけっこう凝ったことができるレベル。

でも、記事編集は自動でbrタグが挿入されちゃうので未だにIEでテキストべた打ちしてます。

レベル5

CSSの基本的なことは解っているがアメブロのdiv厨かっていうhtmlの構造は解らないのでCSSはTipsブログのCSSを基にカスタマイズしてます。

このレベルになるとヘッダー画像をオリジナルにしてクリックするとTOPページに戻るというような芸能人ブログのようなカスタマイズができるようになります。

レベル6

いろいろ不具合があるIEからブラウザをFFかChromeに変えようかと思っているがFireBugの使い方までは解らないレベル。

完全オリジナルなCSSはちょっとムリだが、Tipsブログを基に自分なりのカスタマイズが施せる方。

レベル7

メインブラウザはFFまたはChrome。

FireBugやデベロッパーツールを使ってアメブロのhtmlを解析して完全オリジナルのデザインを作成できるレベル。

レベル8

CSSのスキルに加えて今流行の「JQuery」を駆使してアメブロのhtmlをいじれちゃうレベル。

レベル9

CSS3、HTML5を使って信じられないほどのアメブロのスキンデザインを施せる方。

レベル10

レベル9に加えてどの環境（OS、ブラウザ）でも見た目がまったく同じ。いわゆる「クロスブラウザ対策」が完璧にできる方。

ここまでくると「ネ申」レベル。

CSSのスキルが無くても、画像処理がプロレベルだったりJavascriptのスキルが物凄い方もいるので一概には括れませんが・・・

ちなみに私は「レベル8」くらいかなあ？

貴方のレベルはどのへんですか？

MODIFHI SMARTで始まるシンプルコミュニケーション generated by MetaGateway

スマホと携帯での記事の見易さを考え中です

「テストです。」って記事・・・

おそらく大抵の方が「？」だと思います。

が、しかし。

ウチのブログ・・・

記事の見栄えには自分なりに相当こだわっていてリストやらテーブルやらいろいろCSSで定義しています。

でも、スマホや携帯では一切反映されてません（悲しい）。

私はAndroidのスマホ使っているんですけどウチのブログを表示させると行間・文字間がギチギチで読み難いったらありゃしない・・・

で、どうにかして携帯でも読みやすい表示ができないものかと考えていたところ・・・

これはウチのブログのアメンバー限定記事の表示画面。

以前使っていたスキンに合わせてCSSを書いているのでブログタイトルが「アメーバブログの歩き方」になっちゃってます（笑）

このアメ限記事をスマホで閲覧するといい具合にCSSが効いていてけっこう読みやすい。

これって使えるんじゃないかと思って現在試行錯誤中です。

スマホでのブログ表示のスクリーンショットを撮りたかったんですがスゲー面倒なので止めました。スマホでウチのアメ限記事を読みたいって方はアメンバー申請して見てください（否承認にはしませんよ）。

やり方は思ったより簡単で（とにかくメンドクセーっすが・・）、記事中にインラインでスタイルを入れ込むだけです。

<style>html {font-size:100% !important;}body#mainindex {background:#fafafa url(http://stat.ameba.jp/user_images/20110315/12/jcn9001/4f/db/p/o0042002211108740022.png) repeat-y 0 0;}ul#amebabar {display:none;}div#usernaviarea {display:none;}h1 {display:none;}#mainindex h2{text-indent:-9999px;}#mainindex h2 a {display:block;width:294px;height:83px;background:url(http://stat.ameba.jp/user_images/20110315/01/jcn9001/3d/96/p/o0294008311108475531.png) no-repeat top left;margin:0 0 20px 10px;}#overheader{width:960px;margin:0;padding-top:20px;padding-left:50px;}#frame{width:960px;margin:0;padding-left:70px;}#profile {width:230px;}#main {float: left;width: 690px;margin-bottom: 50px;}div#footerarea {position: relative;background:#fafafa url(http://stat.ameba.jp/user_images/20110315/12/jcn9001/4f/db/p/o0042002211108740022.png) repeat-y 0 0 !important;border-top: none !important;margin-top: 0;}/*■ページ送り*/.page{margin:10px auto 14px;padding:4px 0 4px 0;text-align:center;/* CSS3 Box Shadow */-moz-box-shadow:0 0 3px #cccccc;-webkit-box-shadow:0 0 3px #cccccc;box-shadow:0 0 3px #cccccc;/* CSS3 Rounded Corners */-moz-border-radius-bottomleft:4px;-webkit-border-bottom-left-radius:4px;border-bottom-left-radius:4px;-moz-border-radius-bottomright:4px;-webkit-border-bottom-right-radius:4px;border-bottom-right-radius:4px;border:1px solid #eeeeee;color:#666666;width:600px;}.page a{color:#666666;}.page a:active{color:#000000;}.page a:hover{text-decoration:none;color:#000000;}#comment_show {border:solid 1px #cccccc;background:url(http://stat.ameba.jp/user_images/20110313/11/jcn9001/00/8c/p/o0010020011106338071.png) bottom left repeat-x;padding:5px;}#comment_show h4 {color:#444444;background:none;padding:0;}#comment_show p {color:#666666;}#comment_show input#commentbutton {border-top: 1px solid #ccc; border-right: 1px solid #999; border-bottom: 1px solid #999; border-left: 1px solid #ccc; padding: 5px 0; font-weight: bold; text-align:center;cursor: pointer; color: #666; -webkit-border-radius: 3px; -moz-border-radius: 3px; text-shadow: 0 -1px 1px #fff, -1px 0 1px #fff, 1px 0 1px #aaa; -webkit-box-shadow: 1px 1px 2px #e7e7e7; -moz-box-shadow: 1px 1px 2px #e7e7e7; width:150px;height:30px;background: -moz-linear-gradient(top, #fff, #f1f1f1 1%, #f1f1f1 50%, #dfdfdf 99%, #ccc); background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.01, #f1f1f1), color-stop(0.5, #f1f1f1), color-stop(0.99, #dfdfdf), to(#ccc)); }#comment_show input#commentbutton:hover {background: #ccc;}.contents h4 {font-size:1em;background:url(http://stat.ameba.jp/user_images/20110305/15/jcn9001/a1/88/g/o0015001511091287168.gif) no-repeat 0 .3em;padding:0 0 0 20px;margin:0.5em 0 !important;}.contents h5 {font-size:1em;background:url(http://stat.ameba.jp/user_images/20110305/15/jcn9001/a1/88/g/o0015001511091287168.gif) no-repeat 0 .3em;padding:0 0 0 20px;margin:0.5em 0 0.5em 20px!important;}.contents p {letter-spacing:1px;padding:5px 0;line-height:1.7;}.contents p br {letter-spacing:0;}.contents ul {margin:10px 0 0;padding:0;}.contents li {margin:0;padding:0 0 5px 17px;background:url(http://stat.ameba.jp/user_images/20110228/21/jcn9001/b6/60/g/o0013001311081378539.gif) no-repeat 1px .2em;list-style:none!important;line-height:130%;}.contents table {border:none;margin:10px 20px;}.contents th {border:none;border-bottom:solid 1px #ccc;border-right:solid 1px #ccc;padding:6px;text-align:center;}.contents td {border:none;border-bottom:solid 1px #ccc;border-right:solid 1px #ccc;padding:6px;text-align:left;}blockquote{margin:10px 30px;padding:10px;border:1px solid #cccccc;font-size:12px !important;}</style>

こんな具合に投稿記事の一番最後に「<style>~</style>」でスタイル定義を入れ込んでいるだけです。

スマホや携帯用のデベロッパーツールがあればいろいろ解析できるんですが、これまたメンドクセーんでまだやってません。

携帯ブラウザだとauやソフトバンクはCSSをある程度読み取ってくれるらしいんで（Docomoはダメっぽいです）イケそうだし、スマホはhtmlを解析できるアプリとかあるかもしれないので誰か教えてください。