メッセージボードにyoutubeの動画を表示させる【アメブロカスタマイズ】

どうも、北海大家です。

今回は、「メッセージボードにyoutubeの動画を表示させる」を説明します。

まず、「youtube」でブログに表示させたい動画を探します。

動画が見つかったら、図のように

「共有」ボタンを押す
　　　↓
「埋め込みコード」を表示させる
　　　↓
コードをコピーする

※この時、コピーする前に表示サイズを自分のブログに合わせてカスタムします。
（アメブロで表示するには大きすぎるので）





コピーした「埋め込みコード」をメッセージボードに貼り付けます。

※この時、「HTMLタグ」に切り替えて貼り付けます。




貼り付けて、必要な文字の入力等をしたら、保存（公開）を押してください。

※一度、HTMLタグから通常のタグの戻すと「メッセージボードに禁止タグが入力されています。」と表示され、保存できません。保存する場合は、HTMLタグから直接保存してください。
（編集も同じ要領）


以上で、「メッセージボードにyoutubeの動画を表示させる」の説明を終わります。

北海大家でした。

少しでもタメになった方、興味を示してくれた方は、ぜひメルマガに登録しておいてくださいね
(^^♪

メッセージボードに目次風のリンクを貼る【アメブロカスタマイズ】

どうも、北海大家です。

今回は、超簡単に「メッセージボードに目次風のリンクを貼る」方法を説明します。




超簡単に目次風というのかミソです。

基本的には、

「メッセージボードに目次を作って、飛ばしたいページへリンクさせる」

のですが、不思議なことに最初からリンクされた文字をコピペするだけで、この作業ができてしまいます。

きちんとした目次を作りたい方は、参考程度に見てくださいね。


まず、２つページを開きます。

１、一つ目は「メッセージボード」を開きます。

各種設定
　　↓
メッセージボード




２、２つ目は「最近の記事一覧」を表示させます。




上の図のように、最近の記事一覧から、
メッセージボードからリンクさせたい記事をコピーします。

次に、先に開いていたメッセージボードのページを開き、空白に貼り付けます。
（使っているブラウザによって貼り付けた時の感じが違います）



あとは文字を編集したり、好きな色と大きさに変更したら、保存（公開）します。

保存したら、ブログトップページを開き、確認してみてください。
下の図のようにメッセージボードが目次風になっていると思います。




どうですか？
超簡単ですよね(^O^)

要領は一緒ですので、工夫次第でいろいろなところにいろいろなリンクを貼ることができます。
ぜひ、試してみてください。

北海大家でした。

少しでもタメになった方、興味を示してくれた方は、ぜひメルマガに登録しておいてくださいね
(^^♪

タイトルと説明文を消してヘッダー画像をトップページへのリンクにする【アメブロカスタマイズ】

どうも、北海大家です。

今回は、

「タイトルと説明文を消してヘッダー画像をトップページへのリンクにする」

です。

前回までに、

ブログタイトルとブログ説明文を消す方法

ヘッダー画像をブログトップへのリンクにする

それぞれを別々に説明しました。

今回は、まとめて

「タイトルと説明文を消してヘッダー画像をトップページへのリンクにする」方法です。

ヘッタ―画像の設定はこちら

アメブロのトップページにヘッダー画像を設定する

まず、いつものようにCSSの編集を行います。

デザインの変更
　　　↓
CSSの編集




『CSSの編集』ページになったら、『現在使用中のデザインCSS』の文字入力欄を一番下までスクロールし、




以下の『CSS貼り付けコード』を一番最後に追加する要領で貼り付けて(コピペして)ください。


--ここから


/* タイトル・説明文消し＆ヘッダーリンク設定用CSS貼り付けコード */
.skinHeaderArea2{
padding:0;
}
.skinBlogHeadingGroupArea{
padding:0;
}
.skinDescriptionArea{
display:none;
}
.skinTitleArea{
padding:0;
text-indent:-9999px;
}
.skinTitle{
display:block;
height:300px;
}

--ここまで


この部分

height:300px;

赤文字部分には、通常はヘッダー画像の高さを設定します。

貼りつけが終わりましたら、保存して更新してください。


以上で、「タイトルと説明文を消してヘッダー画像をトップページへのリンクにする」を終わります。

北海大家でした。


少しでもタメになった方、興味を示してくれた方は、ぜひメルマガに登録しておいてくださいね
(^^♪

ヘッダー画像をブログトップへのリンクにする【アメブロカスタマイズ】

どうも、北海大家です。

今回は、「ヘッダー画像をブログトップへのリンクにする」方法です。


前回までのおさらいはこちら

アメブロのヘッダー画像の作り方

アメブロカスタマイズ【ヘッダー画像用の画像をアップロードする】

アメブロのトップページにヘッダー画像を設定する

ブログタイトルとブログ説明文を消す方法

まず、いつものようにCSSの編集を行います。

デザインの変更
　　　↓
CSSの編集




『CSSの編集』ページになったら、『現在使用中のデザインCSS』の文字入力欄を一番下までスクロールし、




以下の『CSS貼り付けコード』を一番最後に追加する要領で貼り付けて(コピペして)ください。


--ここから

/* ヘッダー画像をブログトップへのリンクにする */
.skinHeaderArea2,.skinBlogHeadingGroupArea{
padding:0;
}
.skinTitleArea{
display:block;
padding:0;
text-indent:-9999px;
}
.skinTitle{
display:block;
height:300px;
}

--ここまで


この部分

height:300px;

赤文字部分には、通常はヘッダー画像の高さを設定します。


貼りつけが終わりましたら、保存して更新してください。


以上で、「ヘッダー画像をブログトップへのリンクにする」を終わります。


北海大家でした。


少しでもタメになった方、興味を示してくれた方は、ぜひメルマガに登録しておいてくださいね
(^^♪

ブログタイトルとブログ説明文を消す方法【アメブロカスタマイズ】

どうも、北海大家です。

今回は『ブログタイトルとブログ説明文を消す方法』です。
ヘッダー画像を設置した場合、不要になったブログタイトルとブログの説明文を消すことができます。


ヘッダー画像の設置はこちら

アメブロのトップページにヘッダー画像を設定する

まず、いつものようにCSSの編集を行います。

デザインの変更
　　　↓
CSSの編集




『CSSの編集』ページになったら、『現在使用中のデザインCSS』の文字入力欄を一番下までスクロールし、




以下の『CSS貼り付けコード』を一番最後に追加する要領で貼り付けて(コピペして)ください。


--ここから

/* ブログタイトルとブログ説明文を消す */
.skinTitleArea{ /* ブログタイトルを消す */
display:none;
}
.skinDescriptionArea{ /* ブログ説明文を消す */
display:none;
}

--ここまで


もし、ブログタイトルか、ブログの説明文のどちらか一方だけを消したい場合は、片方の設定を削除してください。

これで、ヘッダー画像と重なってしまって邪魔になるブログタイトルとブログ説明文を見えなくすることができます。

以上になります。ぜひ試してください。

北海大家でした。


少しでもタメになった方、興味を示してくれた方は、ぜひメルマガに登録しておいてくださいね
(^^♪