2015年 7月 の投稿一覧

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




レビュー : ★★★★☆

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;」と入れてみます。

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

 



《 一言 》


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


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

      ↓  ↓  ↓

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

bitly(短縮URLツール)でクリック解析を行う方法





レビュー : ★★★★☆

Time   : 08分48秒

形式    : 講義

作成者  : 渚ひろし@自由ライター さん
 


《 ここがオススメ 》

短縮URL サービスの「bitly」の使い方について、
分かりやすく解説された動画です。
 


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

1.短縮URLとは?


サイトのURLや、それぞれの記事のURLを短く書き換えるサービスです。
長いURLから、文字数を少なく、シンプルなURLを作り出すものです。


2.なぜ短縮URLを使う必要があるのか?


文字数の制限があるメディアでの情報発信で使用します。
例としては、ツイッターでの文字数の節約のために使います。
さらに、短縮URLサービスには、「クリック分析機能」があり、
反応を確かめることができます。


3.短縮URLサービス「 bitly 」(ビットリー)の使い方


bitly は、海外のサービスなので、サイトの表記は英語ですが、
使い方やクリック分析結果の表示も、とてもシンプルです。

bitly のトップページで、上の方に
「 paste a kink to shorten it 」という入力欄があり、
その右に「 shorten 」というボタンで、短縮されたURLに変換出来ます。


その入力欄に元の長いURLを入れて、「 shorten 」のボタンを
クリックすると、ページが変わり、短縮されたURLが表示されます。
これで、短縮の作業は完了です。


短縮されたURLをコピーして、ブログやツイッターなどの
各種媒体に貼り付けて使うことが出来ます。


《 一言 》

bitly の短縮URLというのは、文字数を少なくするだけでなく、
「クリック解析」の機能が付いていますので、ブログやツイッターなどの
解析などに効果を発揮できますから、ぜひ使いたいサービスですね。
利用方法も簡単なので、とても便利です。

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





レビュー  :   ★★★☆☆

Time     : 03分32秒

形式      : 講義

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

 

《 ここがオススメ 》


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




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


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


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


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

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


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


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




《 一言 》


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

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