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コードはまた今度アップしますね。