アメブロ新CSS編集用デザイン対応スキン「aColor」

簡単な説明から

アメブロ新CSS編集用デザイン対応スキン「aColor」です。

アメブロの新CSS編集用デザインの2カラムレイアウトのみ対応しています。

旧タイプのCSS編集用デザインには対応していませんのでご注意下さい。

サイドバーの位置は左・右どちらにも対応しています。

トップページは「標準」「タイムライン」「タイル」全てのタイプに対応しています。

ジェネレーター(CSS生成ツール)

アメブロ新CSS編集用デザイン対応スキン「aColor」は、以下のジェネレーターでCSSを作成してご利用下さい。

基本設定

まずは、プレビューを参考にしながらお好みの「タイプ」と「基本色」を選択して下さい。「aColor」スキンにはヘッダー周りのレイアウトの異なる6つのタイプがあります。また、「aColor」スキンでは基本色を一つ選択しその色を元に各部の色が自動的に決まります。

タイプ:
基本色:

※タイプ0000~0003は通常の方法でヘッダー画像を表示できます。
※プレビューの表示は正確なものではありませんので目安程度にお考え下さい。
※明るすぎる基本色は一部の文字見えなくなる可能性がありますのでお勧めしません。

その他の設定

お好みに応じて、以下の設定を変更して下さい(こちらはプレビューに反映されません)。

リンク色(強):記事本文・メッセージボード・フリースペース・フリープラグイン内のリンク文字色
ホバー時(強):リンク色(強)のオンマウス時の文字色
リンク色(弱):サイドバーの各リンクなど
ホバー時(弱):リンク色(弱)のオンマウス時の文字色
基本色+少し明るめ:サイドバー左右境界線・メッセージボード外枠線など
基本色+明るめ:記事タイトル背景・グローバルナビ全体背景など
基本色+かなり明るめ:サイドバー背景・グローバルナビボタンオンマウス時背景など
アクセント色:リストマーカーなど
 

CSS

以下のコードをコピーして、アメブロのブログデザインCSSに貼り付け(元の内容を削除して貼り付け)て下さい。

※生成するCSSにはアメブロの新CSS編集用デザインの内容が含まれています。
※生成するCSSには外部のWebフォントを利用するためのコードが含まれています。
※元のCSSの内容はもとに戻せるよう削除前にバックアップしておくことをお勧めします。
必ず「表示を確認する」で問題なく表示できることを確認してから保存して下さい

グローバルメニュー用のHTML

グローバルメニューを表示するために、以下のリンク先の記事を参考に、フリースペースまたはフリープラグインにHTMLタグを追加して下さい。

アメブロにグローバルメニュー(メニューバー)を設置するカスタマイズ方法

※すでにある場合は本ステップは不要。
※HTMLタグのみです。リンク先記事のCSSは不要。

ご意見・ご要望・サポートご依頼

ご意見・ご要望・不具合のご報告などは、管理人のブログのお問い合わせフォームからお願いします。

サポートのご依頼は

「アメブロを自分でカスタマイズしたいけれど、なぜかうまく行かない」という方には、有償にてサポートを提供しております。

料金は、税込3,000円/件です。

1件はメール3往復程度まで、または電話30分までとさせて頂きますが、件単位で延長可能です。

有償サポートのご依頼も、管理人のブログのお問い合わせフォームからご連絡下さい。

ご注意事項

  • 当ページで作成したCSSはご自身のアメブロのCSSにコピーして無料でお使いいただけます。また改変も自由に行っていただけます。ただし再配布はご遠慮ください
  • 当サイトの機能および情報を利用した結果いかなる損害を被った場合も当サイトの制作者・管理者は一切保証できません。完全に自己責任の元ご利用下さい。

スマホ用CSS(おまけ)

以下のコードをレンタルサーバー等にCSSファイルとして保存し、アメブロの記事内で読み込むと、見出しや引用などの表示をパソコン版と同様にすることが可能です。

【表示イメージ】

読み込み方は、以下のようなHTMLタグを各記事の本文内(記事末尾など)に記述します(「https://????.css」を保存したCSSファイルのURLに変更してください。https必須です)。

なお、お試し用に、以下HTMLタグを記事に記述すると「aColor」標準の色設定のスマホ用CSSをでの表示をご確認いただけますので、よろしければどうぞ(あくまでもお試しで)。

※運営の方針によっては、今後、外部からCSSを読み込めなくなる可能性も考えられます。
※記事内に直接CSSを記述することも可能ですが、スマホのHTMLは頻繁に変わることが予想されますので、外部に保存しておきHTMLが変わった際に一括で反映されるようにしておくことをお勧めします。