アメブロ新CSS編集デザインに挑戦！

新CSSでブログカスタマイズ！

　パソコンからブログを閲覧している方はお気付きになっているかもしれませんが、アメブロの新デザインに対応した新CSSでのブログ（デザイン）カスタマイズに挑戦してみました！

CSS編集用デザインにも今までのスタンダードな表示の他にタイル表示とリスト表示が加わり3種類となっています。

　タイル表示は、Instagramなどど連携させたり料理などたくさんの写真を使う方にはとても良い表示方法だと思います。

　リスト表示はブログのトップページから見るとタイムライン上に表示されていて、ブログでは今までにない表示方法だと思います。

いずれもスマホのような表示方法でパソコンからの見た目も変えた感じですかね。

そのなかでもオレは、いつもの3カラム・右ワイドメニューで新しいリスト表示を選択しました。

CSS編集する前はこのような見た目です。

この状態から変更前のデザインに近い形までいろいろといじってカスタマイズしていきます。

こんな感じに仕上がりました！いつものようにブログ幅も編集で基準幅より増やしているので記事幅も広がりました。もう少し広げたり、いろいろいじれるのですがとりあえず今回はここまでにしておきます。

ブログトップページから見るタイムライン表示はこんな感じです。

これもCSSをいじらないとこのような表示にはなりません。

トップページから見ると、画像がある記事はサムネイルも表示されていて、表示数も多くしているので一日に何度か更新している時には日付も横に大きめに表示しているので見やすくなっていると思います。

もう少し改良したいけどとりあえず基本的な改造だけで今回はやめておきますwww

　記事一覧ページもサムネイル画像付きでの表示になっているので、記事も探しやすいし、見やすくなっています。

囲みで矢印の指しているアール部分は気になるので、あとで時間がある時に修正します。

（この部分はブログ記事の表示と連動されているのでCSS編集には少し手こずりそうですけど…）

このCSS編集はわかりやすいので改造は簡単でしたね。一部アメブロ独自の見慣れないセレクタなどもある感じでわかりにくいところもありますが…

これからも時間があるときは少しずつ改良していきますので、質問などありましたらコチラの記事までコメントなどお寄せください。（アメブロ、Owndどちらでも可）

これからも、よろしくお願いします。