アメブロカスタマイズ目次

ブログを始めてしばらくすると、テンプレートのままのデザインでは退屈してしまい、段々オリジナルな形にカスタムしたくなってきます。

自分が気に入ったデザインの方がブログを続けるモチベーションも続くのではないでしょうか。ましてや、少しぐらいはビジネスに活かそうというような下心があれば尚更。

そこで独学ながら様々な方のブログやサイトを見つつ、自分なりに弄くってみました。


アメブロスキンのカスタムについて

アメブロは少し特殊な仕様の為、
カスタマイズするにはCSSを編集する必要があります。

昔は全ての種類のスキンでCSSの編集が可能だったようですが、2011年現在では【カスタム可能】と表記されているスキンでなければ編集することが出来なくなっています。


CSSを編集する方法

「ブログを書く」→「デザインの変更」→「CSSの編集」へと進むと、その先にCSSの編集画面があります。

基本的には編集ページにある「現在使用中のブログデザインCSS」欄の一番下へどんどん「追記」→「保存」していくだけ。
ただし、CSSの編集は少し間違えるとブログのデザインが大きく壊れてしまう事もある為、必ず編集前のバックアップを取ってから行うようにしましょう。



以下に当ブログで行ったカスタマイズ（失敗込み）を覚え書きとして記録しておきます。
暫定的な目次となりますので、更に変更や修正をした場合には随時書き加えていきたいと思います。

※旧カスタム可能デザインに対応したカスタマイズになっています。新しいCSS編集用デザインで使えるものもありますが、確認はしていません。

アメブロカスタマイズ暫定目次

・アメブロプロフィール画像を中央配置
・「このブログの読者になる（チェック）」を少し変更
・ブログパーツの整理で表示スピードアップ
・アメブロのブログ説明文を改行
・アメブロにzenbackを導入して記事下に表示させる方法
・アメブロ記事内のリンクを下線・青色・強調①
・アメブロ記事内のリンクが下線・青色・強調②
・アメブロ記事内の外部リンクに画像を自動表示
・アメブロ記事内の外部リンクに画像を自動表示の修正
・アメブロ記事内の画像に自動的に枠を付ける方法
・アメブロ右カラム落ちの対処法
・HeartRails Badgeでアメブロにプロフィールバッジ設置
・アメブロ記事内に枠線・囲み枠を表示する方法
・アメブロでページの上へ戻るボタンを固定表示
・記事タイトルのフォントサイズを変更
・アメブロの記事下【フッター】に記事編集ボタン設置
・個別記事にのみZenbackを表示する方法
・preタグとcssで本文中にソースコードをきれいに表示
・ブログ内検索を見た目はそのままでグーグル検索へ変更
・ブログ内の引用文をCSSで装飾
・cssで記事内にシンプルな囲み枠を設置