新テーマのCSS

アメブロの外観テンプレートである新デザインのCSS（カスタム可能）は、旧テンプレから少し簡素化されたような感じです。

特徴としてはクラス名にハイフンがよく入るようになったことでしょうか。

気を付けなければならない事があります。まず、正しいCSSが利いているか確認しなけらばなりません。

それというのも、テンプレートを変えたのに、前のCSSが残っていたりする。古いテンプレートのCSSとは殆どクラス名id名が異なる。新しいCSSはどこにあるんだ！ひょっとすると、いつものように反映が遅いだけかも知れないが、変な現象が起こるのがアメブロ。

新デザインのCSSの目次です。

【CSS編集 目次】
(1)基本のスタイル
1-1テキスト全体
1-2基本背景
1-3基本境界線
(2)ヘッダーエリアのスタイル
2-1背景
2-2タイトル説明文
(3)メインエリアのスタイル (記事のエリア）
3-1メイン背景、内側外側
3-2メインタイトル
3-3ブログナビ上部　(トップ・画像一覧などのリンク部分）　下部（記事下の同様の部分）
(4)サイドエリアのスタイル
4-1サイドテキスト全体　
4-2境界線
4-3モジュール　カレンダ　アーカイブナビ　プロフィール
(5)ボタン設定
5-1ボタン全体
5-2次へ前へ
5-3目次ナビ
5-4サイド
5-5記事一覧
(6)その他、拡張
6-1記事一覧
6-2メッセージ

設置

全体の背景 div.skin-page　もし利かなければ、ヘッダーと記事部分に分けて設定する。

カスタマイズ用CSSにある「/* コンテンツ背景、ヘッダー以下の背景色 */.skin-blogBody, .skin-blogBodyInner」はヘッダー類を除く下部コンテンツの背景。

ヘッダー画像の背景/* ヘッダー背景 */.skin-bgHeaderで設定（幅全体の設定ができるが、下の「記事一覧」などがあるヘッダーナビにはかからない。ヘッダーナビと両方に背景をかけるためには全体の背景を使用するほかはなさそうだ。）
または、 .skin-headerImage（元CSSに該当項目なし） に設定。ここだと上のdivの設定で1120px中央ぞろえになる。要高さ指定

サイドバーのウィジェットいやモジュール

.skin-widgetのなかに.skin-widgetInnerボックスがあり、タイトル部分が.skin-widgetHeadでここはh3タグで指定されている。中身は.skin-widgetBodyであり、モジュールの種類によって異なる中身となっている。
多くの広告が幅300pxなので、それに合わせてデザインするのもいいでしょう。

さてフリースペースもサイドバーと同じデザインになってしまうので、それが困る場合は

#freespace .skin-widgetBody{　に設定する。

記事部分をメインエリアと呼ぶようだが、いくつか基本的なカスタマイズ項目のみ用意されている。

スクリプト

アメブロってjavascript書くところがないじゃないか。

「フリープラグイン」にはスクリプトタグがはいるのに、

フリースペースにonClickなどのスクリプト用語を入れると、

「スペースに禁止タグが入力されています」
と表示される。

フリースペースに禁止タグが入らないようなスクリプトを選ぶことになるが、例えば左サイドバーの上の鹿をマウスでいじると字が現れます。

作成の注意点とか

アメブロにはレスポンシブがありません。スマホでは一般人のブログも芸能人のブログも同じような表示になります。まあVIP？はヘッダー画像が表示されるというのは大きいですが。また、タブレットではパソコン同様の表示です。

アメブロ（無料版）デザインに使える画像は５種類だけです。ただし、投稿記事の画像も使えるので、強力な制限とは言えない。5種類のありがたい点は何か？リンクやファイル名が短いとか。投稿記事の画像を使う場合、古い記事の画像をトップに使って重くならないか、ということや、画像を整理しにくい心配はあるかも。検証した人はいないかな？とりあえずよく使う画像を5種類にして使いまわしにしますかね。少しお金を払えば画像をたくさん使えます。もっとお金を払えば広告がなくなります。

画像がボケる！画像をリンクからコピーする時に注意。htmlタグを表示させて画像のリンクを抜き出そうと使いますが、この時生成されるのが２つのリンクで、a href云々タグの中にimg src云々が出てきます。後者のimgタグの方がファイル名が長いしこちらを使おうとする人が多いと思いますが、後者を使うとボケます。前者の短いaタグに書いてる方がボケない方。クリックして拡大画像というやつですな。

デザインのテンプレートを変えるときはとくにご注意を。CSSやフリースペースその他のバックアップを取っていないと、そのままなくなります。三段組を二段にするとかの変更でも、白紙に戻ります。バックアップをやってくれるシステムがあるわけではなく、自分でファイルを作ってコピペするという、昔懐かし手動の方式になります。ワードプレスなど「テーマ」を戻すと前の状態に復帰してくれますが、そんな親切な装置設計になってないのでご注意を。

記事や画像のバックアップも取れません。方法はあるみたいですが、難度が高いです。この点は、あらかじめご承知おきお願いします。ご自分で記録をお残しください。アメブロは突然ペナルティーの閉鎖措置があるみたいですから。

メニューなどを記述できるフリースペース

アメブロでホームページデザインのための、一般的なHTMLは記述できません。しかし、サイドバー用として準備されている「フリースペース」にHTMLを記述できます。

そこにHTMLで記述し、CSSで位置情報などをを加えれば、普通にHTMLを記述したのと同じように、サイド以外にも配置できます。もちろん、記事には文字の大小など一般のHTMLは使えます。しかし、これにクラスやidをつけて設定できるかといえば、難しいんじゃないかな。

つまり、ナビメニューはフリースペースに書く。

また、サイドバー上部のバナースペースもここに記入しています。

これを応用すれば、ヘッダーと本文の間あたりに、アメブロの定型とは異なるページを作ることができそうです。

改行をするBRタグというのがありますよね。

あれが、勝手に入ってきます。

だから、htmlを書く際に工夫が必要です。

ただでさえ狭いところに改行なしでコメントもタグも色々書き込んで使うので何がどこにあるのか探すのに一苦労。

用意されているCSSの目次、大まかな順番

アメブロ　CSSの順番

多くの制作者はブラウザのデベロッパーツールを見ながら、CSSを書き加えていくと思います。アメブロのCSS編集ツールは、せっかく親切にもクラス名を注釈とコメント付きで用意してくれていますので、それを見ながらデザインすると早い。

CSSの記入欄が狭いので目次を作ってみます。

用意されているCSSの順番

1. 文字スタイル　全体　タイトル　記事
2. ボタン
3. エリア　背景　ヘッダー　コンテンツ　メイン　記事　サイド
4. 拡張　位置合わせなど

3

画像の追加です。

二番目記事

こんにちは。ですね。さむい。いやあつい。

１

おためし