アメーバブログ

アメーバブログでの「お問い合わせフォーム」の作り方




レビュー : ★★★★☆

Time   : 46分59秒

形式    : 講義

作成者  : マツダタケヒロ さん
 


《 ここがオススメ 》



「フォームメーラー」を使った、「お問い合わせフォーム」の作り方を
分かりやすく解説した動画です。
一応、アメブロに「フォームメーラー」を載せる方法について
説明されていますが、設置方法は「HTMLタグ」を使用するので、
アメブロ以外の他の無料ブログや、ワードプレスでも設置可能です。




《 この動画の要約 or 詳細 》


まず、「フォームメーラー」に新規登録を行います。

出来上がった「フォームメーラー」のURLリンクを
「お気に入り」に入れて、ブックマークしておきます。

アメブロの「記事を書く」ページで、
「タグ編集エディタ」の場合は、アンカーテキストの文章を書いて、
その部分を反転させて、「リンク」ボタンをクリックします。


URLのところに、先ほどのブックマークした「フォームメーラー」の
URLをペーストして、「お問い合わせ」のページは、
外部のページですから、「リンク先の表示方法」を
「新しいウインドウ」に設定します。


「リンク」ボタンで、編集エリアにHTMLタグが作成されます。


「標準エディター」を使用されている場合も、
アンカーテキストの文字列を編集エリアに記述後、
文字列を反転させて、「リンク」ボタンで
URLを入力し、「リンク先の表示方法」を
「新しいウインドウ」とします。


出来上がりましたら、
自分で、フォームに入力してみて、動作確認を行なってください。




《 一言 》


アメブロには、「メールフォーム機能」が付いていませんので、
この「フォームメーラー」を使った方法は、たいへん便利です。

そして、「フォームメーラー」には、無料版にも関わらず、
「自動返信機能」がありますので、重宝すると思います。

この動画を参考にして、ぜひ「お問い合わせ」フォームを作ってみましょう!

【アメブロ】CSSで記事に蛍光ペンのマーカーを入れる方法

 

レビュー :    ★★★★☆

Time    :  02分50秒

形式     :  講義

作成者  :  パーフェクトマスター アメブロカスタマイズ講座 さん





《 ここがオススメ 》


アメブロの記事の一部分を、蛍光ペンのマーカーを引いたように
表示する方法を分かりやすく解説した動画です。
動画の時間も、わずか2分50秒しかないので、閲覧しやすいです。




《 この動画の要約 or 詳細 》


アメブロの管理画面で、左上の「アメブロ」をクリックして、
左サイドメニューの「デザインの変更」をクリックします。


「適用中のデザイン」、「CSS編集用デザイン」の下の、
「CSSの編集」のリンクをクリックし、
「現在使用中のブログデザインCSS」という編集画面の
一番下にスクロールします。


「その他、拡張があれば記述」という部分の下に
改行を行なって、新しいCSSを追加していきます。


span.marker{
background:#ffff57;
}


※ 今回は、 ” #ffff57 ”  という背景色にしました。


入力したら、保存して記事を確認してみます。



記事に内容を記述するタグは、

< span class=”marker”> テスト記事 テスト記事 </apan>

・・というように記述します。





《 一言 》


こちらの設定方法は、難しくなく簡単ですし、
マーカーの色彩を取り入れることによって、ブログの読者に、
内容がより伝わりやすい記事となりますので、
ぜひ、この「記事にマーカーを引く方法」を取り入れてみたいですね。


アメーバブログのカスタマイズ方法【ヘッダーの差し替え】

 

レビュー  :  ★★★★☆

Time  : 08分33秒

形式   : 講義

作成者 :  サンテグ爺ペリ さん
 



《 ここがオススメ 》


アメーバブログで、自分で書いた絵をヘッダー画像として
アップロードする方法を解説した動画です。



 

《 この動画の要約 or 詳細 》


スタートボタンを押して、「すべてのブログラム」から
アクセサリーを開き、「ペイント」を起動します。

アメブロのヘッダー画像のサイズは、
「水平方向」を 980 ピクセルにし、
「縦横比を維持する」のチェックマークを外し、
「垂直方向」を今回は例として、200 ピクセルとします。


好きな画像を書いて、左上のボタンから「保存」します。
アメーバブログの「マイページ」から、
左上の「アメブロ」ボタンをクリックすると、
「ブログ管理」画面になります。


左サイドメニューの「デザインの変更」ボタンをクリックして、
「適用中のデザイン」が、「CSS編集用デザイン」になっている場合は、
「CSSの編集」のリンクをクリックします。


すでに、他のデザインに変更している場合は、
画面の一番下のほうに「カスタム可能」というタブがあるので、
そちらをクリックします。


「カスタム可能」デザインの中に、
「CSS編集用デザイン」という小さな画面になったリンクが
ありますので、そこにカーソルを当てると「表示を確認する」という
文字列がでますので、その部分をクリックします。


画面が変わり、「ブログデザインの表示確認・レイアウト変更」という
表示が出ますので、今回は「2カラム・メニュー右」を選びます。
「適用する」ボタンをクリックすると、「適用中のデザイン」が、
「CSS編集用デザイン」に切り替わります。


「CSSの編集」のリンクをクリックすると、
「ブログデザインのCSSの編集」という画面に変わります。
「ファイルの選択」を押し、先ほど描いた画像を選択し、アップロードします。


下に「アップロードされた画像」ということで、
「この画像のパス」という、「HTMLタグ」が出てきます。
この部分を右クリックして、コピーしておきます。


編集用画面を下にスクロールして、
「ブログヘッダー 980px エリア」という部分を探します。
「ブログヘッダーに背景画像を敷きたいとき」という注釈文の
中括弧の中に、カーソルを持って行き、エンターキーを2回押します。
2行空白ができたら、その部分に、「 backround-image:url(); 」と
入力して、その括弧の中に先ほどコピーしておいた「HTMLタグ」を
ペーストして貼り付けます。


表示を確認してみます。
画像の縦が入りきらない場合は、貼り付けた「HTMLタグ」の直ぐ後に、
セミコロンを入れ、改行後、「 height:200px;」と入れてみます。

これで、画像が表示されます。

 



《 一言 》


この動画の作成者、「 サンテグ爺ペリ 」さんのキャラクターが、
ゆるくて面白い味が出ていて、良い感じの動画に仕上がっています。
なんだか、ファンになりそうですね!


※ おまけ ※
こちらで、サン=テグ爺ペリ さんの演奏が聴けます♪ (^^)

      ↓  ↓  ↓

( ・Θ・)ゞピヨッ!! サン=テグ爺ペリの オカリナ名演奏 『ソレイユ』

アメブロに「ウェブマスターツール」を設置する方法





レビュー  :   ★★★☆☆

Time     : 03分32秒

形式      : 講義

作成者    : Webコンサルタント  武藤正隆  さん

 

《 ここがオススメ 》


ウェブの状況を把握するための便利なツールである
「ウェブマスターツール」をアメブロに
設置する方法を分かりやすく解説した動画です。




《 この動画の要約 or 詳細 》


まず、「ウェブマスターツール」に登録を事前に行なっておきます。


アメブロの管理画面にログインして、
「設定・管理」のページで、「外部サービス連携」のリンクから、
「SNS連携」の横の「ウェブマスターツールの設定」をクリックします。


画面が変わり、「Google ウェブマスターツール設定」で、

『google-site-verificationタグ内の、「content=”英数字”」の
 英数字部分を入力してください。』という指示があります。


そこで、「ウェブマスターツール」のページで、
「別の方法」というタブを選択後、「HTML タグ」を選び、
英数字をコピーして、アメブロの「外部サービス連携設定」の
「Google ウェブマスターツール設定」のフォームへ、ペーストします。


「ウエブマスターツール」のページヘ戻り、
「確認」ボタンをクリックすると、
所有権が確認されましたというメッセージが出れば、
「Google ウェブマスターツール」の設置は、完了です。




《 一言 》


「ウェブマスターツール」をアメブロに設置するということで、
なんだか難しく思えるかもしれませんが、
実際に行ってみると、とても簡単です。

「ウェブマスターツール」は、ご自分のウェブの状況を
適切に知らせてくれますので、とても重宝なツールです。
アメブロを利用している場合は、ぜひ、設置してみましょう。

アメブロのヘッダー画像を変更して表示させる方法

 

レビュー :  ★★★★☆

Time   : 05分35秒

形式    : 講義

作成者  :  パーフェクトマスター アメブロカスタマイズ講座  さん

 

《ここがオススメ》

アメブロのヘッダー画像を変更して、表示させる方法を、
Youtube 動画で解説しています。
初心者の方にも、とても分かりやすい説明です。

 

《この動画の要約 or 詳細》

アメブロにログインして、「マイページ」の上部左にある
「アメブロ」をクリックします。
左メニューの「デザインの変更」をクリックします。

  ↓  ↓  ↓

画面を下にスクロールして、
「他のカテゴリからブログデザインを探す」の中の
「カスタム可能」をクリックします。

  ↓  ↓  ↓

「カスタム可能」デザインの中の、
「CSS編集用デザイン」を選択します。
今回は、例として、画面の上の方に表示される、
「CSS編集用デザイン」の中の
「2カラム・メニュー右」を選択して、
「適用する」をクリックします。

  ↓  ↓  ↓

「ブログデザイン適用完了」、
『「CSS編集用デザイン」を適用しました。』という
表示が出ますので、「ブログを確認する」ボタンを押すと、
タイトルだけのシンプルなブログが出来上がります。

※ こちらのテンプレートにヘッダー画像を付けていきます。

それでは、
「マイページ」の上部左にある、「アメブロ」をクリックします。
左メニューにある、「デザインの変更」に移り、
「CSSの編集」のリンクをクリックします。

「ブログデザインのCSSの編集」画面になります。
「ブログデザインヘッダ・背景用画像の追加」のところで、
「ファイルを選択」ボタンを押して、
アップロードしたい画像を選択し、アップロードを行います、

  ↓  ↓  ↓

「アップロードされた画像」が表示されますので、
その下の「この画像のパス」なかのURLを
すべて選択してコピーしておきます。

  ↓  ↓  ↓

下の方に、「現在使用中のブログデザインCSSの」の部分で、
「ヘッダー」という字句で検索をしてみますが、
上の方に「ブログヘッダーに背景画像を敷きたいとき」という
文字列を発見できると思います。

  ↓  ↓  ↓

.skinHeaderArea{
backgraond:url()  →→→ このように入力します。
}/* 
              

このカッコの中に、先ほどコピーした
URL をペーストします。

  ↓  ↓  ↓

閉じカッコの右に、半画スペースを入れて、

“no-repeat;” を入れ、改行して、

width:  980px;
height:  380px;

と入力してCSSの記述を完了します。

  ↓  ↓  ↓

「保存ボタン」をクリック後、表示を確認すると、
ヘッダー画像が変更されていることが分かります。

・・・

つぎに「ヘッダーのタイトル」を消す作業です。

「マイページ」の上部左にある、「アメブロ」をクリックします。
左メニューにある、「デザインの変更」から、
「CSSの編集」のリンクをクリックします。

  ↓  ↓  ↓

編集画面の一番下にある、
「その他拡張があれば記述」のところに、

header  h1,header  h2{
display:  none;
}

と記述し、「保存ボタン」をクリックします。

これで、タイトルの文字を消すことが出来ます。

 

《一言》

今回の「ヘッダー画像」をアップして変更する方法は、
CSS の記述を少々変更するので、
初めての方は、少し難しく感じるかもしれませんが、
落ち着いて実行すれば、大丈夫です。

この動画の方法で、ヘッダー画像を変更して、
オリジナル色のある、アメブロを作成してみましょう。