アメブロのCSSカスタマイズをしてデザインを変更したりアクセシビリティのテストをしてみました

 

アメブロのCSSカスタマイズをしてみました。

 

アメブロのブログページで、どこまでシンプルしていくことができるのか、中途半端感を残してしまいましたが、実際に、筆者のこのAmebaブログはCSSカスタマイズ済みです。

 

アメブロのCSSカスタマイズは難しくない

CSSカスタマイズと聞くと、難しいと感じてしまうことがあるかもしれませんが、一度、調整の方法を覚えてしまえば、アメブロに限らず、『CSSカスタマイズが可能』なプラットフォームであれば、自分の好みにサイトデザインを寄せていくことが可能になります。
 
アメブロで提供されているCSSカスタマイズは、とても分かりやすいように解説されているので、ブログサービスを提供するプラットフォームでWebサイトの運用をするときに役にたつスキルを身につけることが可能になると考えています。
 

アメブロのCSSカスタマイズをした事例

アメブロでカスタマイズをする方法はすごく簡単です。
※テーマ変更を行うので、現状利用しているテーマデザイン全体が変更されますので注意してください。
 
  1. 「ブログ管理」をクリック
  2. 「デザインの変更」をクリック
  3. ブログデザインテンプレートから「カスタム可能」なテーマを選ぶ
まずは、これでCSSのカスタマイズをする環境が整います。
 
そして次に
 
  1. 「ブログ管理」をクリック
  2. 「デザインの変更」をクリック
  3. 「CSSの編集」をクリック
していきながら、CSSカスタマイズの画面に遷移します。
 
一見、テキストベースの難しい言葉が並んでいますが、AmebaブログのCSSがどの部分に影響するのか、コメントで書かれているので、値の変更をするとどうなるのか、イメージがしやすいようになっています。
 
また、CSSカスタマイズを初期状態に戻せるボタンも下部にありますし、変更した時のプレビューを確認することが可能です。
 

CSSのカスタマイズを行うときは時間を多めに確保

筆者のアメブロも、今回のブログポストをするためにCSSカスタマイズを行なって、ブログページのデザインやリンク色などを変更しましたが、本当は、もっと、1つ1つのテキスト要素をきちんと設定したかったのですが、ちょっと別のことをやらないとという感じになってしまったので、CSSカスタマイズをするときは、十分な時間を確保することをオススメします。
 

アメブロでサイトデザインのオリジナル感を出していくならCSSカスタマイズは必須

そもそも、アメブロには多くのブログデザインテーマがあります。
 
けれど、利用者も多いのでオリジナル感を高めていくならやはりCSSカスタマイズを覚えて、サイトデザインを整えていくのが良いのかなと考えます。
 
筆者の場合はシンプルなサイトデザインが好きなので、ちょいちょい残りの要素部分を調整していきながら、アメブロ版のブログサイトデザインを整えていきたいと考えています。