アメブロの文字の大きさとリンクを読みやすく、わかりやすくする

内藤です。

文字が読みやすく、リンクがわかりやすい

これって読者目線ではとても大事です。

マニュアルでも最初に書いていることです。

文字は大き目
リンクは目立つように青

新しいカスタム可能デザインの「CSS編集用デザイン」では CSSに

.articleText,.skinMessageBoard{
font-size: 15px; /*文字サイズ*/
line-height:1.5; /*行間*/
}
.articleText a,.skinMessageBoard a{
font-size:15px; /*文字サイズ*/
font-weight:bold; /*文字の太さ*/
color:#0000ff; /*文字色*/
text-decoration:underline; /*文字装飾*/
}

を追加してみてください

旧デザインの「ベーシック」の場合は

div.subContents{
font-size: 14px; /*文字サイズ*/
line-height:1.5; /*行間*/
}

div.subContents a{
font-size:15px; /*文字サイズ*/
font-weight:bold; /*文字の太さ*/
color:#0000ff; /*文字色*/
text-decoration:underline; /*文字装飾*/
}

を追加してみてください

これで、記事とメッセージボードの文字とリンクが変わります。

アメブロの背景に色や画像を入れる

アメブロの背景に色を入れる

新カスタム可能デザインの「CSS編集用デザイン」で背景に色をいれるやり方です
(旧カスタム可能デザインのベーシックではありません)

CSS編集デザインのCSSの編集で

.skinBody{
background-color:#CCCCCC; /*背景色*/
}

を追加します

#CCCCCC; の部分のカラーコードを変えて色を変えます。

カラーコードはこちらから

ただ、このままですと



このようになります。

記事やサイドバーの部分は白くするためには

.skinHeaderArea,.skinContentsArea{
background-color:#ffffff; /*背景色*/
}

も追加してみてください

背景に画像を入れる場合

色ではなく、画像を入れる場合は

.skinBody{
background:url(画像URL) no-repeat;
}

をCSSに追加します

※ページ背景にしたい画像のURLを括弧内に入れます。

ユーザー環境によって、パソコンの画面の大きさは異なります。

background:url(画像URL) no-repeat;

このno-repeatを削除すると、それぞれの画面に応じて背景画像が画面の大きさ分繰り返して表示されます。

背景画像を繰り返して表示させない場合は、 no-repeat
背景画像を縦に繰り返したい場合は repeat-y
背景画像を横に繰り返したい場合は repeat-x

にします

YouTubeの動画をアメブロに埋め込む

YouTubeの動画をブログに埋め込む方法です。

アメブロならば、メッセージボードに設置すると見てもらいやすいですね。

YouTubeの動画をブログに埋め込む

1.YouTubeで動画を開く

YouTubeで埋め込みたい動画を開きます。

2.共有ボタン

動画の下にある「共有ボタン」をクリック


すると「埋め込みコード」「メール」のボタンと一緒に、facebook等のアイコンが表示されます。

アイコン類の下の「その他」をクリックするとアメブロのアイコンも出てきます


アメブロのアイコンをクリックすると、アメブロの投稿画面に埋め込み用のタグが挿入されます
(アメブロにログインしている場合)

※ただし、アメブロのレイアウトを3カラムにしている場合は、大きさが合いません。

3.大きさを変える場合は、埋め込みコードから

アメブロを3カラムにしている場合は、アメブロのアイコンからではなく、「埋め込みコード」のボタンをクリックします。


「以前の埋め込みコードを使用する」にチェックをいれ、カスタムの幅を変更します。

アメブロが3カラムなら400pxほどで。

4.埋め込みコードをコピーし、アメブロで貼り付け

あとは、埋め込みコードをコピーし、アメブロに貼り付けます。


コピーしたものは、アメブロでタグ編集エディタか、HTML表示にして貼り付けます。
メッセージボードに貼り付ける場合もHTML表示にして貼り付けます。


i2iアクセスランキングの設置

ブログで良く見かける i2iアクセスランキング
i2iアクセスランキングは、アクセス元のランキングです。

つまり、どのサイトからのアクセスが多いかわかるものです。

i2iアクセスランキングの設置

i2iに登録

まずは、こちらからi2iに新規ID登録します。


メールアドレス、希望ユーザーID、パスワードを入力します。
規約事項を良く読み、『規約に同意して登録』をクリックします。

登録したメールアドレスに、確認URLが記載されたメールが届きますので、確認URLをクリックし、登録を完了。

2.アクセスランキングの設定

登録したユーザーID、パスワードを入力し管理画面へログインし『新規パーツ』をクリックします


新規パーツ作成画面になりますので、『アクセスランキング』をクリック。


パーツ名を入力し、『実行』をクリック。


パーツの作成ができたら、『管理画面へ移動』をクリック


サイトの情報を入力します。
『サイトのタイプ』は、PCサイト、ケータイサイト、ブログサイト、すべてにチェックを入れて、次に進みます。


サイトのジャンルは、ブログに書いているテーマに合わせて選びます


サイト名と、サイトURLにブログタイトル、ブログURLを入力します。

次をクリックすると、確認画面になりますので、確かめてサイト情報の編集を終了し、『設定状況概要』に進みます。

3.詳細設定

『詳細設定』から設定を行います。


各項目、文字サイズ、色、ランキング表示件数など変更します。

変更後は、右側の『プレビュー更新』をクリックし、『設定内容を適用』をクリックして設定を決定します。

4.タグの発行

i2iの管理画面の左下にある管理メニューの『タグ発行』をクリックします。


i2iアクセスランキングを設置した際に画面に表示されるFlashバナーの種類を選び、『タグタイプ決定/変更』をクリック。

そして、『アクセスランキングタグ』をコピーし、アメブロの『フリープラグイン』に貼り付けます。

URL変更

管理画面の『便利機能設定』で、『URL⇒タイトル変更』をクリックします。
『タイトル変更していないアクセスのランキング表示』を『しない』に、『主要検索エンジンの表示・非表示』を『非表示』にします。
※『タイトル変更していないアクセスランキング表示』を『する』にすると、URLがそのまま表示されてしまい、効果的ではありません。

表示変更

アクセスがあっても、表示変更をしていないアドレスは『未設定』となっています。そのアドレスを表示させたい場合は、右横にある『表示変更』をクリックします。


『変更後に表示する情報』のタイトルに、表示させたいURLのサイトタイトル(ブログタイトル)を入力します。

『タイトル変更設定の確定』をクリックして変更完了です。


タイトル変更されました。

統計期間

アクセスが少ないうちは、統計期間を長くしておきます。

管理画面の『便利機能設定』の『期間設定』でタイプAの過去7日分累計になっているところを、30日などにします。

アメブロ ヘッダー画像を入れてみる

ブログデザインヘッダ・背景用画像の追加からアップロードします

アメブロのカスタマイズで、ヘッダー画像を入れるやり方です。

カスタマイズは、CSS編集用デザインを利用してくださいね。
デザインの選択方法はこちら

ヘッダー画像をアップロード

今のアメブロは、ブログ幅が980pxですので、ヘッダーも980pxのものを用意します。
カスタマイズで幅を変えている場合は、ヘッダーもその幅に合わせます

管理画面のクイックリンクから、スキンCSSの編集で、CSS編集画面に移動します。

『ブログデザインヘッダ・背景用画像の追加』から、パソコン内のヘッダー画像をアップロードします

ヘッダー画像のアップロード

ブログデザインヘッダ・背景用画像の追加からアップロードします

アップロード後表示される、『この画像のパス』がヘッダー画像のURLになります。

ヘッダー画像URLの取得

この画像のパスがヘッダー画像URLになります

ヘッダー画像を入れるCSSを追加

CSSの編集ページで、紹介するCSSコードを一番下に追加します。
※直接追加するのではなく、パソコン上のメモ帳などに移して編集した方が安全です。

タイトル、説明文を残す場合

アメブロの基本設定で入力する、ブログタイトル、説明文をそのままテキスト表示させる場合は次を追加します。

.skinHeaderArea {
 background:url(画像URL) left top no-repeat;
 height: 300px!important;/*高さ*/
}

画像URLの部分を、上でアップロードしたヘッダー画像のURLに変更。
高さの数値を、ヘッダー画像の高さに調整します。

タイトル、説明文をヘッダーに画像として埋め込んだ場合

ヘッダー画像に、タイトルや説明文などを画像として埋め込んだ場合、上記のCSSだけではテキストのタイトル、説明文も表示されてしまいます。

タイトル、説明文を画像として埋め込んだ場合は、テキストのタイトル、説明文は表示されないように次のCSSを追加します。

.skinHeaderArea {
background:url(画像URL) left top no-repeat;
height: 300px!important;/*高さ*/
}
h1.skinTitleArea,h2.skinDescriptionArea{
margin:0;
padding:0;
}
h1.skinTitleArea a{
width:980px;/*画像の横幅*/
height:300px;/*画像の高さ*/
display:block;
position:absolute;
text-indent:-9999px;
}
h2.skinDescriptionArea{
display:none;
}

こちらも同様に、画像URLの部分をヘッダー画像のURLにします。
高さの数値も調整します。今回は2ヶ所あります。

アメブロの基本設定で入力したタイトル、説明文を非表示にして、ヘッダー画像全体にトップページへのリンクがはられた状態になります。

また、タイトルや説明文を画像として埋め込んだ場合でも、基本設定で入力するタイトル、説明文は『.』などと省略せずに、正しく書きましょう。
検索ロボットは画像に埋め込まれた文字を認識できませんし、他のアメブロの『お気に入り』などでリンク表示される場合も、基本設定のものになります。

アメブロのカスタマイズ手順 デザイン変更から

カスタム可能を選択します

アメブロでカスタマイズをするには、まずはカスタマイズが可能なデザインを選ぶ必要があります。

昔は”デザイン”ではなく、”スキン”と呼ばれていましたが、いつの間にか”デザイン”に変わっています。
管理画面のところどころでは”スキン”の表記が残っていたりしますが。

今CSSを編集してカスタマイズが出来るのは、『CSS編集用デザイン』だけになっています。
以前は、『ベーシック』や『ピーチ』『ブルー』など数種類ありましたが、1つだけになってしまいました。

アメブロでは2011年の7月末に、デザインの大幅な切り替えがありました。
7月以前のデザインを使っている場合、今デザインの変更をしてしまうと7月以前のデザインに戻すことができなくなります。

では、デザインの変更の手順です。

(旧管理画面)
管理画面のマイページ上にあるクリックリンクを開きます
マイページ上のクリックリンクが便利です

[クリックリンク] ⇒ [スキンCSSの編集]をクリック
クリックリンクからスキンCSSの編集をクリックします

カスタム可能を選択
カスタム可能を選択します

(追記)
管理画面右上の三本線から、 ブログデザイン ⇒ デザインの変更


画面の下部にある カスタム可能を選択


CSS編集用デザインを選択
CSS編集用デザインを選択します

これで、[スキンCSSの編集] からCSSを編集してカスタマイズすることができます。

今あるデザインで[スキンCSSの編集]ページが表示されるのはこの『CSS編集用デザイン』だけとなっています。

最初は、何のデザインも入っていない状態で殺風景ですが、読みやすい、利用されやすいアメブロを作るならば、CSS編集用デザインでカスタマイズしていく必要があります。

カスタマイズのCSSコードはまた今度アップしますね。

アメブロ (旧)背景に色を付けたり、画像を入れたい

内藤です。

ブログの背景に色を付けたり、画像を入れたいという方は結構いると思います。

デザイン(スキン)でベーシックを選ばれている場合

CSSの前半に

/*5)ページ背景に画像を入れる*/
body{
background-image:url();
}

というところがあります。

この url()の括弧の中に、画像URLを入れればOKです。

背景画像を縦に繰り返したい場合は 最後の } の前に

background-repeat:repeat-y; を追加します

/*5)ページ背景に画像を入れる*/
body{
background-image:url();
background-repeat:repeat-y;
}

のような感じです。

背景画像を横方向に繰り返したい場合は
background-repeat:repeat-x; を

繰り返したくない場合には
background-repeat:no-repeat;

とします。

画像ではなく色を付けたい場合は

/*5)ページ背景に画像を入れる*/
body{
background-color:#F2F2F2;
}

のように変更します。

#F2F2F2というのが色を表すカラーコードになっています

カラーコードはこちらでお好みのものを選んでみてくださいね

アメブロ (旧)文字の大きさとリンクを読みやすく、わかりやすくする

内藤です。

文字が読みやすく、リンクがわかりやすい
これって読者目線ではとても大事です。

文字は大き目
リンクは目立つように青

旧デザインのベーシックでは、CSSに

div.subContents{
font-size: 15px; /*文字サイズ*/
line-height:1.5; /*行間*/
}
 
div.subContents a{
font-size:15px; /*文字サイズ*/
font-weight:bold; /*文字の太さ*/
color:#0000ff; /*文字色*/
text-decoration:underline; /*文字装飾*/
}

を追加してみてください

これで、記事とメッセージボードの文字とリンクが変わります。