自分のブログについている「RSS」「RSS2.0」ってボタン。
実はとっても便利な機能「RSS(アールエスエス)フィード」へのリンクなのです。
「RSS」を活用すると、いろいろなブログの新着がわかったり、自分のブログの新着を色々な人に伝えたり、ブログにあげた音声をiTuneなどで聞く「ポッドキャスティング」もできたりします。
3回目は、ブログでネットラジオやDJになれる?「ポッドキャスティング」をお教えいたします。
「ポッドキャスティング」ってなあに? |
「ポッドキャスティング」とは、インターネットを通じてRSSで配信されている 音楽・音声・動画をiPodやその他ポッドキャスト用ソフトで楽しむことをいいます。
RSSで配信されているを使ったポッドキャスティングでは、そのコンテンツの最新情報が自動的に更新されるようになっているので、一度登録すれば何もしなくてもそのコンテンツ最新の音楽・音声・動画が楽しめます。
役に立つニュースから、楽しいラジオ、無名のアーティストが作った音楽や、 人のつぶやきのようなものまで、本当にいろいろなコンテンツがポッドキャスティング 用に配信されています。
元々は音楽プレイヤー「iPod(アイポッド)」と、"放送"を意味する「broadcasting(ブロードキャスティング)」を組み合わせた造語ですが、もちろんiPodを持っていなく ても、無料の「iTunes」「FLO:Q」などのソフトウェアを使って簡単にポッドキャスティングをすることができます。
もちろん、So-net blogを使えば、自分で音楽・音声・動画をポッドキャストする ことも可能です。
どうすれは使えるの?(設定方法) |
自分のブログに音声ファイルを公開すれば、RSSにファイルの情報が書かれます。 自分のブログ記事のプレイヤーから聞くこともできます。
どうやって音楽や音声を聞けばいいの? |
アップルのiTunes(無料)や、ソニーのFLO:Q(無料)をお使いいただくと 簡単にポッドキャスティングをすることができます。
■アップル「iTunes」ソニーの多機能ブログパーツ「FLO:Q」を使えば、自分のブログからポッドキャスト されている音を流すことができます。
「FLO:Q」について詳しくは、以下のブログ教室記事をご覧ください。
初心者から上級者まで楽しめる!多機能型ブログパーツ「FLO:Q(フローク)」
自分のブログについている「RSS」「RSS2.0」ってボタン。
実はとっても便利な機能「RSS(アールエスエス)フィード」へのリンクなのです。
「RSS」を活用すると、いろいろなブログの新着がわかったり、自分のブログの新着を色々な人に伝えたり、ブログにあげた音声をiTuneなどで聞く「ポッドキャスティング」もできたりします。
2回目は、So-net blogの便利な機能「読んでいるブログ(RSS)」の活用方法をお伝えします。
「読んでいるブログ(RSS)」ってどんな機能? |
自分のブログ上で、複数のブログの更新状況をお知らせしてくれる機能が 「読んでいるブログ(RSS)」です。
気になるブログのRSSを登録しておくと、そのブログの更新状況がわかります。
So-net blogのRSSはもちろん、それ以外のブログやサイトが提供しているRSSも設定することができます。
登録したブログは更新日時の新しい順に以下の箇所に表示されます。
※表示/非表示を切り替えることができます。
どうすれは使えるの?(設定方法) |
自分の「読んでいるブログ(RSS)」へ新しいブログを登録するには、 ふたつの方法があります。
他の人はどう使っているの?活用方法あれこれ! |
●気になるブログの更新を、自分のブログ更新と一緒にチェック!
「読んでいるブログ」に入っているブログの更新は、ブログのマイページで確認できるから、自分のブログの状況をチェックするときにまとめて
気になるブログの更新もチェック。
自分のブログサイドバーに表示しておけば、さらに簡単にチェック可能です。
●自分の趣味をアピール!
本棚をみればその人の趣味趣向がわかるみたいに
「読んでいるブログ」をみている人も多いようです。
そんな人はサイドバーの設定で「読んでいるブログ」の表示数を増やしたり、
ブログクルーザーの「マイプロフィール」に「読んでいるブログ」を表示
すると、ますますアピール効果UP。
自分のブログについている「RSS」「RSS2.0」ってボタン。
実はとっても便利な機能「RSS(アールエスエス)フィード」へのリンクなのです。
「RSS」を活用すると、いろいろなブログの新着がわかったり、自分のブログの新着を色々な人に伝えたり、ブログにあげた音声をiTuneなどで聞く「ポッドキャスティング」もできたりします。
1回目の今回は、「RSSの基礎の基礎」をお教えいたします。
RSSってなあに? |
RSSとは、Webサイトの内容を要約したデータです。RSSをRSSを読み取ることのできる アプリケーションで使うことにより、以下のようなことができるようになります。
さらに詳しく解説すると、RSSは「rich site summary」または「really simple syndication」の略といわれており、XMLの仕様のひとつになります。
RSSはそれ単体を閲覧することはほとんどなく、RSSを読み取ることのできる
仕組みと一緒に使います。
このRSSを利用して上記のような、いろいろな便利なことができます。
So-net blogでのRSS活用事例 |
So-net blogでは以下のような箇所にRSSが利用されています。
So-netでのRSS活用事例 |
So-net blogでは以下のような箇所にRSSが利用されています。
●So-net Clip!
So-netで提供するRSSリーダーです。気になるブログやニュースサイトの
RSSフィードをこのリーダーで一括管理&閲覧することができます。
●So-net Photo
登録した写真をみんなで楽しむフォトシェアリングサービスです。
「犬」「桜」などの各タグ情報の新着や、フォトのあらゆる箇所に
新着を知らせるRSSフィードが配信されています。
●テレビ王国
iEPGに対応したテレビ番組表などあらゆるテレビ情報満載のサイトです。
ゲストの番組表やキーワード検索結果のRSSフィードが配信されています。
次回はSo-net blogの「読んでいるブログ(RSS)」を徹底的に紹介します。
]]>
ソニーが提供する多機能型デザイナーズ・ブログパーツ「FLO:Q(フローク)」。
フォト、ポッドキャスト、アフィリエイト、ソーシャルブックマーク、ムービー、RSSリーダー
、オリジナルFLASHコンテンツ、プレイログリストの機能がすべて無料!
なおかつデザインもカッコイイ。
今回はそんなスペシャルブログパーツ「FLO:Q」をご紹介いたします。
ブログに「FLO:Q(フローク)」オススメの理由 | |
多機能パーツ「MULTI-1」を使ってみる | |
アフィリエイトパーツ「SELECT SHOP」を使ってみる | |
So-netブロガー必見「フォト機能」「ポッドキャスト機能」紹介 | |
ブログにはるだけ!種類豊富!FLO:Qの「コンテンツパック」 |
ブログに「FLO:Q(フローク)」オススメの理由 |
機能 | 対応しているFLO:Qパーツ | 対応サービス |
アフィリエイト | MULTI-1,MULTI-2,SELECT SHOP | Amazon, bidders,アクセストレード,A8.net,楽天アフィリエイト |
Music(プレイリスト) | MULTI-1,MULTI-2,AUDIO/VISUAL(音ログのみ) | Amazon,音ログ |
Book | MULTI-1,MULTI-2 | Amazon |
ムービー | FlipClip,モビゾー | MULTI-1,MULTI-2 |
フォト | MULTI-1,MULTI-2 | So-net Photo,Flickr,はてなフォトライフ,LivedoorPICS |
ソーシャルブックマーク | MULTI-1,MULTI-2 | はてなブックマーク,del.Icio.us |
ポットキャスト | MULTI-1,MULTI-2,AUDIO/VISUAL | 自分で追加,リストから追加,検索して追加 (PODCASTnavi), |
RSSリーダー | MULTI-1,MULTI-2 | 自分で追加,検索して追加 (RSSナビ) |
フラッシュコンテンツ | MULTI-1,MULTI-2,CASSETTE | FLO:Qが用意したFlashを追加 |
多機能パーツ「MULTI-1」を使ってみる |
FLO:Qパーツの代表選手、多機能パーツ「MULTI-1」を設定してみます。
「新規登録(無料)」から、FLO:Qに登録して、プロフィール設定をします。
※プロフィールの必須項目を設定しないと、パーツ選択画面に入ることができません。
※アフィリエイト機能を利用する場合でご自分のアフィリエイトIDをお持ちの場合は、このプロフィールに設定します。もちろん、後でも設定可能です。
新規登録
アフィリエイトパーツ「SELECT SHOP」を使ってみる |
あなただけのセレクトショップをブログに開店!、アフィリエイトパーツ「SELECT SHOP」を設定してみます。
「新規登録(無料)」から、FLO:Qに登録して、プロフィール設定をします。
※プロフィールの必須項目を設定しないと、パーツ選択画面に入ることができません。
※アフィリエイト機能を利用する場合でご自分のアフィリエイトIDをお持ちの場合は、このプロフィールに設定します。もちろん、後でも設定可能です。
新規登録
So-netブロガー必見「フォト機能」「ポッドキャスト機能」紹介 |
So-netのツールと連携できる機能も豊富なFLO:Q。その中でもとっておきの機能「フォト機能」「ポッドキャスト機能」をご紹介します。
So-net Photoなどの写真共有サービスにアップしてある写真をFLO:Qに表示できる機能です。FLO:Qをブログに貼り付けて、あなただけのフォトギャラリーを作ってみませんか?
例えば・・・ネット上に配信されているお気に入りのポットキャストを集めて聞くことはもちろん、 自分のブログにアップした音声ファイルをFLO:Q上で流すこともできます。
例えば・・・
登録・設定なしですぐに使えるFLO:Qの「コンテンツパック」。あらかじめいくつかのコンテンツや機能をパッケージしてあるFLO:QのScript(スクリプト)をコピーして、ブログに貼り付けるだけでOK!
パックの内容も『不思議がいっぱい「マリン」パック』『ブログ話題、ニュースネタパック』『全国選りすぐり「お取り寄せ」パック』など、超バラエティに富んでいます。
コンテンツパック
新機能「カスタムスキン」を使うと、自分の好きなデザインのブログが
作れます。
ただ、「CSS」ってよくわからない・・・。どうすれば自分の好きにできるの??
そんな皆さまからの声にお答えして、数回に分けて「So-net blog スキンカスタマイズ」
を連載いたします。
今回は初級編最終回。長く険しかったCSS編集の旅もいよいよ最後の仕上げです。
自分で作ったデザインだからこそ細部にまでこだわりたいものです。「→」画像やカレンダーの色までカラーコーディネイトすることで、きっと一目置かれるブログデザインになりますよ。
今回も、前回の続きから、カスタムスキンテンプレート「スタンダード1」を書き換えていきます。
ヘッダーリンクの「→」を変える |
「→」は画像を使用しているので、「→」を変更するためには代わりの画像を用意します。
自分で作るのが面倒くさいという方は、以下に「→」画像のカラーバリエーションを用意しましたのでこちらをお使いください。
使いたい画像の上で右クリックして「名前をつけて画像を保存」を選択します。
パソコンに「→」画像を保存したら、それを自分のブログの画像フォルダにアッ
プロードします。これで準備はOK。
カレンダーのリンク色を変える |
自分の好きな色を選んでください。
カラーチャート
細かなところを整える |
最後にサイドバーの「読者になる(RSS登録)」の色と、サイドバーの各項目の中にあるリスト(例えば最新記事の一覧の最初の部分)の変更をしてみます。
ここでも、自分の好きな色を選んでください。
カラーチャート
これでひととおりの変更ができあがりました!
■ブログ教室でカスタマイズしているブログ
皆さまの質問にお答えしました!
前回の記事にいただきましたご質問にお返事させていただきます。ぜひ皆さま
ステキなオリジナルブログを作ってくださいね。
Q:(前略)ヘッダー部分の文字フォントを固定する方法はありませんか?
A:Internet Explorerの場合、ピクセル(px)で指定すると固定されます。
例)
#header {
font-size:11px;
}
ただし、Firefoxなどその他のブラウザでは固定することはできません。
Q:記事タイトルバーやサイドバーに画像を入れることは可能でしょうか?普通
のスキンに入ってるようなものなのですが、タイトル左にある画像です。
それと、記事タイトルバーやサイドバーを画像で作って置き換えたいのですが可
能でしょうか?
A:タイトル左にある画像もタイトルの背景画像も同じ指定方法で実現できます。
●記事タイトルバー
.articles-title {
background:url(画像パス) no-repeat; ←ココに背景画像を追加
}
●サイドタイトルバー
.sidebar-title {
background:url(画像パス) no-repeat; ←ココに背景画像を追加
}
小さな画像を上記の場所に指定すると、タイトル左に小さな画像が表示されます。
大きな画像を上記の場所に指定すると、タイトルバーの背景全体に画像が表示さ
れます。
画像を表示させる位置については、前回の記事のおまけコーナーを参照ください。
Q:文字のcenter形式をどこに混入すれば宜しいでしょうか?
A:上の回答と同じ場所で大丈夫です。
●記事タイトルバー
.articles-title {
text-align:center;
}
●サイドタイトルバー
.sidebar-title {
text-align:center;
}
Q:文字を例:「最新記事一覧」⇒「NEW」などに変えたりは出来ないでしょ
うか。
A:テキストを変更することはできませんが、画像で置き換えることはできます。
ただ、これは少々難易度が高いです。
まず、文字入りの画像を作成します。
例えば、「PROFILE」というテキストを画像でつくる
次に、サイドバーの「プロフィール」を例に説明すると、下記のようにプロ
フィールを指定するセレクタ(#profile)とサイドバータイトルのセレクタ
(.sidebar-title)を半角スペースで並べて記述します。
※各セレクタについては使い方を参照してください。
そこにテキスト入り画像の指定と元あったテキストを非表示にします。
#profile .sidebar-title {
background:url(画像パス) no-repeat; ←ココに背景画像を追加
text-indent:-3000em; ←元あったテキストを非表示にする記述
}
Q:レイアウト3にしてるのですが、どうしても記事の初めの方(文頭)の空白
が狭く見づらくなってしまってます。どうすれば直るでしょうか?
A:下記の記述で記事本文の左右に余白を入れることができます。
.articles-body {
padding:0 20px; ←記事本文の左右に20px余白を入れる記述
}
Q:「私にメール」みたいなのを付けたいんですが・・・どうすればいいのか分か
りません。良かったら、教えてください。
A:本文、またはサイドバーのカスタムペインに下記の記述を追加してみてはいか
がでしょうか?リンクをクリックすると、メールソフトが立ち上がります。
<a href="mailto:ここに送信先メールアドレス">私にメール</a>
※メールアドレスの公開はお客さまのご判断でしていただけますようお願いいたします。公開をすると迷惑メールが増える可能性もあります。
新機能「カスタムスキン」を使うと、自分の好きなデザインのブログが
作れます。
ただ、「CSS」ってよくわからない・・・。どうすれば自分の好きにできるの??
そんな皆さまからの声にお答えして、数回に分けて「So-net blog スキンカスタマイズ」
を連載いたします。
前回のブログヘッダーに続き、3回目の今回は「記事タイトル/枠線/背景色/リンク色をオリジナルにする」をお教えいたします。このカスタマイズで、随分とブログの印象が変わりますので、ぜひ皆さまチャレンジを!
今回は、前回の続きから、カスタムスキンテンプレート「スタンダード1」を書き換えていきます。
記事タイトルと枠線を変える |
まず、自分の好きな色を選んでください。
カラーチャート
ここでは明るい青(#037FE9)を使います。
ブログ背景色を変える |
ここでも、自分の好きな色を選んでください。
カラーチャート
ここでは黄色(#FFD900)を使います。
リンク色を変える |
次に、意外とデザインを左右するリンク色を変更します。
ここでも、自分の好きな色を選んでください。
カラーチャート
カスタマイズ例(コピーしてご利用ください) |
今回の方法を使ったカスタマイズ例を以下に記述します。これをコピーして、手順をみながら修正すると便利です。 ぜひ、カスタマイズにチャレンジしてみてくださいね。
■画像ヘッダーをカスタマイズしたブログ
【デフォルトの記述】
.articles {
width:558px;
margin-bottom:10px;
background:#ffffff;
border-left:1px solid #003366;
border-right:1px solid #003366;
border-bottom:1px solid #003366;
overflow:hidden;
}
.articles-title {
margin:0 0 15px 0;
padding:3px 10px;
background:#003366;
font-size:small;
color:#ffffff;
}
.sidebar-title {
margin:0;
padding:3px 5px;
margin-bottom:5px;
background:#003366;
font-size:x-small;
color:#ffffff;
}
#container {
width :770px;
margin:0 auto;
line-height:1.4;
text-align:left;
color:#333333;
}
a:link { text-decoration:none; color:#414d7b; }
a:visited { text-decoration:none; color:#414d7b; }
a:active { text-decoration:none; color:#414d7b; }
a:hover { text-decoration:underline; color:#414d7b; }
【カスタマイズの記述】
.articles {
width:558px;
margin-bottom:10px;
background:#ffffff;
border-left:1px solid #037FE9;
border-right:1px solid #037FE9;
border-bottom:1px solid #037FE9;
overflow:hidden;
}
.articles-title {
margin:0 0 15px 0;
padding:3px 10px;
background:#037FE9;
font-size:small;
color:#ffffff;
}
.sidebar-title {
margin:0;
padding:3px 5px;
margin-bottom:5px;
background:#037FE9;
font-size:x-small;
color:#ffffff;
#container {
background:#ffffff;
padding:0 15px;
width :770px;
margin:0 auto;
line-height:1.4;
text-align:left;
color:#333333;
}
a:link { text-decoration:none; color:#037FE9; }
a:visited { text-decoration:none; color:#037FE9; }
a:active { text-decoration:none; color:#037FE9; }
a:hover { text-decoration:underline; color:#ffd900; }
今回はここまでです。どうでしたか?
次回は「→」画像やカレンダーなどの細部を整えてデザインを完成させます。
デザインは細部まで手が行き届いているかどうかで差がでてくるので、次回も
必ずチェックしてください(^o^)丿
また、今回も皆さまからのご質問をお受けいたします。この記事へコメント、またはトラックバックでご質問ください。3/14までにいただきましたご質問には、次の記事でお返事させていただきます。
皆さまの質問にお答えしました!
前回の記事にいただきましたご質問にお返事させていただきます。ぜひ皆さま
ステキなオリジナルブログを作ってくださいね。
Q:現在使用しているスキンで、ヘッダーだけ、オリジナルにすることは、可能で すか。
A:現在、開発検討中です。
今回の記事を参考にぜひヘッダー以外のカスタマイズにも挑戦してみてください。
Q:ヘッダ部分(#header)に画像を入れる方法も紹介して下さい。
画像分割しないで#containerに入れているのですが、問題ないでしょうか?
Q:設置したオリジナル画像の上に、『管理ページ』『新規作成』『自分のブロ
グ』・・・などのページ最上部のリンクを画像範囲内に表示させるにはどのよう
にしたら、良いのでしょうか?
A:問題どころか正しい方法です。
#containerに画像を入れて、高さは#bannerで調整するといいでしょう。
Q:オリジナルの画像(770px以外で作成した画像)で左右に余白をつくるには
どうしたらいいのでしょう??
A:2つの方法があるので目的に合わせて使い分けてください。
●相対的に指定する方法
background:url(画像パス) no-repeat 横位置 縦位置;
例)
左/上寄せ:background:url(画像パス) no-repeat left top;
中/上寄せ:background:url(画像パス) no-repeat center top;
右/上寄せ:background:url(画像パス) no-repeat right top;
左/中寄せ:background:url(画像パス) no-repeat left center;
中/中寄せ:background:url(画像パス) no-repeat center center;
右/中寄せ:background:url(画像パス) no-repeat right center;
左/下寄せ:background:url(画像パス) no-repeat left bottom;
中/下寄せ:background:url(画像パス) no-repeat center bottom;
右/下寄せ:background:url(画像パス) no-repeat right bottom;
●ピクセルで指定する方法
background:url(画像パス) no-repeat 左からの距離 上からの距離;
例)
左から20px、上から10pxの位置に画像左上を合わせる:
background:url(画像パス) no-repeat 20px 10px;
新機能「カスタムスキン」を使うと、自分の好きなデザインのブログが
作れます。
ただ、「CSS」ってよくわからない・・・。どうすれば自分の好きにできるの??
そんな皆さまからの声にお答えして、数回に分けて「So-net blog スキンカスタマイズ」
を連載いたします。
2回目の今回は、ブログの一番目立つ部分「ヘッダーにオリジナル画像をいれる」をお教えいたします。ブログのヘッダー画像を変えるだけでも、自分の個性をアピールできますよ。 今回は、カスタムスキンテンプレート「スタンダード1」を書き換えていきます。
画像をオリジナルにする/ブログタイトル縦位置を調整する |
ヘッダー用に、横幅770ピクセル(縦の高さは任意)の画像を用意します。
※ブログタイトルと紹介文がはいりますので、それを考慮して作成することをお勧めします。
ブログタイトルを見やすく調整 |
カスタマイズ例(コピーしてご利用ください) |
今回の方法を使ったカスタマイズ例を以下に記述します。これをコピーして、1と2をみながら修正すると便利です。ぜひ、カスタマイズにチャレンジしてみてくださいね。
■画像ヘッダーをカスタマイズしたブログ
http://blog.so-net.ne.jp/blog-class-test/
【デフォルトの記述】
#banner {
height:80px;
margin-bottom:10px;
clear:both;
}
#banner h1{
margin:0;
padding:15px 0 5px 0;
font-size:x-large;
}
#banner h1 a{
}
#lead{
margin:0;
}
【カスタマイズの記述】
#banner {
background:url(/blog/_images/blog/ファイル名) no-repeat;
height:130px;
padding-top:70px;
margin-bottom:10px;
clear:both;
}
#banner h1{
background:#037FE9;
width:280px;
margin:0;
padding:10px 0 5px 20px;
font-size:x-large;
}
#banner h1 a{
color:#ffffff;
}
#lead{
color:#ffffff;
background:#037FE9;
width:280px;
padding:0 0 10px 20px;
margin:0;
}
1/24に追加された機能「カスタムスキン」を使うと、自分の好きなデザインのブログが
作れます。
ただ、「CSS」ってよくわからない・・・。どうすれば自分の好きにできるの??
そんな皆さまからの声にお答えして、数回に分けて「So-net blog スキンカスタマイズ(初級編)」
を連載いたします。
1回目の今回は、CSSを編集するためにコレだけは必要な「CSSの基礎の基礎」をお教えいたします。
CSSってなあに? |
CSSとはWebページの「見栄え」部分を指定できる仕組みのひとつです。
CSSにより、HTMLだけでは難しかったデザインもできるようになったり、
複数のWebページデザインを一括で指定できるようになります。
さらに詳しく解説すると、CSSは「Cascading Style Sheets(カスケーディング・スタイル・シート)」の略になり、スタイルシートの仕様のひとつになります。
CSSはそれ単体で使うのではなく、HTMLと共に使われます。HTMLがレイアウトや
記事本文など「基本構成」を、CSSがフォントデザインや行間、背景色/画像指定
など「見栄え」の部分を担当します。
また、CSSを別ファイルとして設定することもできるので、以下のように
複数のWebページに同じデザインを反映するときなどにとても便利です。
ブログスキンの仕組み:HTMLとCSS |
So-net blogのスキンは「HTML」と「CSS」で構成されています。前段で
お話したように、HTMLは「基本構成」、CSSは「見栄え」を担当しています。
このふたつは別ファイルとなっており、CSSを編集すると一括で
ブログ内すべてのページの「見栄え」を変更することが可能になります。
※So-net blogでは「CSS」のみ編集可能です。
ブログスキンの仕組み:HTMLとCSS |
So-net blogのスキン設定には「カスタムスキン」があります。この「カスタムスキン」
のCSSを編集して保存すると、オリジナルデザインのスキンができます。
詳しい使い方は以下の「使い方」ページをご覧ください。
So-net blog 使い方:カスタムスキン編集 ブログトップ
このふたつは別ファイルとなっており、CSSを編集すると一括でブログ内すべてのページの「見栄え」を変更することが可能になります。
来週は皆さまお待ちかねの「ヘッダーにオリジナル画像をいれる」をお教えいたします。ご期待ください。
]]>
写真をつけて記事を楽しくしたいけれど、写真加工って面倒&難しい・・・。
そんな皆さまのために、今回はカンタンに画像を加工できるSo-net blogの
新機能「マジカルメーカー」をご紹介いたします。
マジカルメーカーってなあに?どういう風に使うと 楽しい? |
マジカルメーカーは、ホームページやブログに載せる写真をラクガキや
アイテムで飾り付けることができるカンタン画像加工ツールです。
ここ一番のとっておきの写真を飾りつけるのに適しているのはもちろん、
毎日の日記に添える写真にちょっとだけラクガキコメントをいれたり、
アイテムを加えたりしても、みる人を楽しませることができます。
基本の使い方:写真にラクガキ、アイテムペタペタ! |
(1)So-net blogにログインし、新規記事作成画面を開きます。 左メニューにある「マジカルメーカー」ボタンをクリックすると マジカルメーカーが開きます。
(2)「写真登録」ボタンをクリックすると写真をアップロードする画面が表示されますので、パソコン上にある写真をマジカルメーカーにアップロードします。
(3)アップロードした写真をマウスでドラッグし、編集画面に持っていきます。 ツール下にあるアイテムをドラッグして写真に持ってきて飾ったり、右の ラクガキやコロコロを使ってみてください。
(4)右下の「イメージを保存」をクリックすると、作った画像がマジカル メーカーに保存されます。保存されるときに、So-net blogの記事の編集 画面にマジカルメーカーを記事に表示するためのタグが挿入されます。
(5)記事を保存して、公開すれば完了です。
もっと楽しむ:アイテムの増やし方、かおプッチの作り方 |
初期設定にないアイテムもどんどん追加が可能です。ぜひお気に入りの
アイテムを使って写真を飾ってみてください。
そして、自分の顔をくりぬいて着ぐるみパーツが作れる「かおプッチ」も
楽しい機能。ぜひチャレンジしてみてください。
ブログを書くとき、ちょっとしたHTMLタグを知っているととっても便利。
そんな皆さまからの声にお答えして、3回に分けて「ブログのための簡単HTML講座」
を連載しております。
HTMLタグは実はとっても簡単。ちょっとだけ知っていれば簡単なレイアウトは
すぐにできます。他にもHTMLタグを使えば、文字の色を変えたり、リンクを張ったり
することもできます。
3回目の今回は、リスト表示をしたり、区切り線をつけたり、表をつくる方法を
お教えします。
リスト表示をする |
文字にリストをつけて表示するには、<ul><li>というタグを使います。 また、番号付きのリストにしたい場合には<ol><li>というタグを使います。
区切り線をつける |
区切り線(横の線)をつけるには、<hr>というタグを使います。この タグは閉じる必要はなく単体で使います。色や長さを指定することもできます。
表をつくる |
表(テーブル組み)をつくるには、<table>というタグを使います。<table> から</table>の間に、 行を示す<tr>とセルを示す<td>とを組み合わせて使うと 表になります。<tr>から</tr>の間が1つの行となり、
1行目1列 | 1行目2列 | 1行目3列 |
2行目1列 | 2行目2列 | 2行目3列 |
3行目1列 | 3行目2列 | 3行目3列 |
1行目1列 | 1行目2列 | 1行目3列 |
2行目1列 | 2行目2列 | 2行目3列 |
ブログを書くとき、ちょっとしたHTMLタグを知っているととっても便利。
そんな皆さまからの声にお答えして、3回に分けて「ブログのための簡単HTML講座」
を連載しております。
HTMLタグは実はとっても簡単。ちょっとだけ知っていれば簡単なレイアウトは
すぐにできます。他にもHTMLタグを使えば、文字の色を変えたり、リンクを張ったり
することもできます。
2回目の今回は、レイアウトを変える方法やリンクをつける方法をお教えします。
中央に表示する |
文字や画像を記事の中央に表示するには、<center>というタグを使います。
左寄せ・右寄せに表示する |
文字や画像を左寄せ・右寄せで表示するには、<div align>というタグを使います。 タグの中で位置をを指定することにより、左寄せや右寄せになります。
リンクをつける |
文字や画像にリンクをつけるには、<a href>というタグを使います。 この時、aとhrefの間には半角スペースを入れて記述します。
次回は「中央に表示する」「リンクをつける」「リストをつける」を予定しています。 お楽しみに(^o^)丿
]]>
ブログを書くとき、ちょっとしたHTMLタグを知っているととっても便利。
そんな皆さまからの声にお答えして、3回に分けて「ブログのための簡単HTML講座」
を連載いたします。
HTMLタグは実はとっても簡単。ちょっとだけ知っていれば簡単なレイアウトは
すぐにできます。他にもHTMLタグを使えば、文字の色を変えたり、リンクを張ったり
することもできます。
今回は「文字の色や大きさを変えるタグ」をお教えします。
タグを書くときの注意点 |
HTMLの基礎の基礎とSo-net blogで記述する際の注意点です。
■注意■ タグは半角文字で書きます
タグはすべて半角文字で書いてください。全角文字で書くと、ブラウザでは それがタグだとわからず、そのままの文字が表示されてしまいます。■注意■ 終わりのタグには「/(スラッシュ)」が入ります。
タグでくくった部分の文字が変更されますが、始めのタグと終わりの タグは少し形式が異なります。始めのタグはカッコでくくられている だけですが、終わりのタグには「/(スラッシュ)」が入ります。■注意■ 設定を「シンプルな入力」にしてください。
So-net blogの「記事の設定」が「URL自動リンクと改行だけのシンプルな入力」 になっている必要があります。文字の色を変える |
文字の色を変えるには、<font color>というタグを使います。 変えたい色を指定すれば、色々な色を表示することができます。
○文字の色を変えたい場合
<font color="色の名前">色を変えたい文字</font>
色の名前は「red」「blue」「green」など基本の色の名前ならば、文字を記述
することで色が変更できます。
その他の色については、「#FF0000」などの色コードを記述する必要があります。 色と色コードの一覧は以下のページに用意してあるので参考になさってください。
文字の大きさを変える |
文字の大きさを変えるには、<font size>というタグを使います。
sizeの後に数字で大きさを指定することで文字の大きさを変更します。
○文字の大きさを変えたい場合
<font size="文字の大きさ">大きさを変えたい文字</font>
サイズには 1~7 の値を指定できます。
太字にする/斜体文字にする |
文字を太くするには<b>、斜体文字にするには<i>というタグを記述します。
■ポイント■ タグは組み合わせることができます。
色々な効果のタグがありますが、重ねて記述することができます。次回は「中央に表示する」「リンクをつける」「リストをつける」を予定しています。 お楽しみに(^o^)丿
]]>
「できれば毎日ブログを書きたいけれど、記事にできることってそんなにないかも」
「ブログを書くと少しでもお小遣いがはいるとうれしいんだけど」
そんなふうに思うことありませんか?
今回は、ブログの記事ネタを提供してくれて、しかもブログを書くと掲載料がもらえちゃう
サービス「プレスブログ」をご紹介いたします。
1.プレスブログってなあに? |
プレスブログは、最新の商品やイベント情報など、プレスブログで配信している情報を、自分のブログで紹介するだけで、掲載料(謝礼)が支払われるサービスです。
2.どうやって使うの? |
So-net blogから使う場合は、記事の編集画面にある「ブログネタを探す」ボタンをクリックすると その時に記事にできる情報が探せます。掲載料をもらう場合は、まずサービス登録が必要です。
1) まず、以下のページからプレスブログ(無料)に登録をおこなってください。
プレスブログへの会員登録(無料)
2) 登録が完了したら記事の新規作成画面にログイン。
3) 「ブログネタを探す」をクリック。
4) 現在配信中の情報がでてくるので、その中から記事を書きたい情報を探す。気に入った情報があったら、以下をチェック。
5) 記事が書けたらブログに投稿!
6) プレスブログに「掲載報告」。
これを忘れると、せっかく書いたのに掲載料がもらえなくなるので注意!
情報が掲載されているページに「掲載報告」のリンクがあるのでクリック。
あとはフォームにしたがって情報を入力→掲載申請。これで完了です!
3.わたしにあった使いかたって?お勧め事例紹介 |
■タイプA■ 楽しいブログを毎日かきたい!
ブログを書きたくてもみんなに読んでもらえるネタがない・・・。■タイプB■ やっぱりお金!
一生懸命に書くんだから掲載料だっていっぱいもらいたい!■タイプC■ ちょっと変わった面白ブログにしたい!
プレスブログで配信している情報の中には、第2回ブログ教室で紹介した 「YouTube」の面白動画など、普通では手にはいりにくい素材もいっぱい。
せっかくつくった記事は、みんなにみてもらいたいですよね?
他の回でご紹介した「nice!」「トラックバック」の他にも、上手に使うとブログ読者を増やせる
方法があるのです。それが「更新通知」。
記事の投稿の時に「更新通知」を送ることによって、So-net blog以外のサービスに
あなたのブログの更新を知らせることができます。
お知らせができる主なサービスは「Googleブログ検索」「gooブログ検索」「Yahooブログ検索」など大きなサイトもいっぱい。
更新通知を送って、もっとたくさんの人にブログをみてもらいましょう!
「更新通知」ってなあに? |
「更新通知」は、自分のブログ記事を更新した時、更新通知を受け取る
サービスに自動的に連絡する機能のことです。
更新通知を受け取ったサービスは、あなたのブログをそのサービスにあった
形で公開してくれます。
「更新通知」の使い方を教えて! |
記事の編集画面の「更新通知」にあるお好きなサービスにチェックを入れて 記事を保存すると、更新通知が送られます。
また一覧にないサービスも「Pingサーバー」というサーバーを用意している
サービスであれば、更新通知を送ることができます。
その場合には「Pingサーバー」のURLを「更新通知」の空欄に改行区切りで
入力していただき記事を保存すれば、そのサービスに更新通知が送られます。
また、これらの値は「設定」>「基本設定」で記事作成の際のデフォルト設定と することもできます。そうすると毎回入力しなくてすむのでとても便利です。
「更新通知」を受け取ってくれる主なサービス紹介 |
更新通知を受け取ってくれる主なサービスは以下になります。ご自分の
興味があるブログを見つけることにも役立ちますので、ぜひ覗いてみて
くださいね。
○gooブログ検索 ※So-net blogもこの検索を利用しています
http://so-net.blog.goo.ne.jp/search/so-net_search.php
○Googleブログ検索
http://blogsearch.google.co.jp/
○Yahoo!ブログ検索
http://blog-search.yahoo.co.jp/
○Technorati (テクノラティ) ブログ検索
http://www.technorati.jp/
○Ask.jp
http://ask.jp/blghome.asp
「トラックバック」はブログならではの便利な機能。
今回は上手に使えば、アクセスアップとブログコミュニケーション両方に効く「トラックバック」についてお教えいたします。
「トラックバック」ってなあに? |
トラックバック機能の基本は「あなたの記事に関連ある内容の記事を私も
書きました!」ということを相手のブログ作者にお知らせすることです。
普通にリンクをはっていても、そのリンク先のブログの作者や読者はあなたの
ブログ記事を知ることができませんよね?
「トラックバック」を使えば、相手のブログ記事の「トラックバック」欄に
あなたのブログ記事のタイトルと要約がでるようになります。それを見た相手の
ブログ作者は「ああ、この記事に関心がある人がいたのだな」ということを
知ることができます。
また、そのブログ記事から他の人が自分のブログを見にきてくれることに
より、自分のブログのアクセス数がアップする効果もあります。
○トラックバックを送ったブログ作者に自分の記事をみてもらえる!
○自分が書いた記事に関心がある人を知ることができる!
○自分のブログ記事に関心があるブログ記事の一覧ができる!
「トラックバック」の方法を教えて! |
記事を保存する時に、相手のブログ記事の「トラックバックURL」を一緒に保存するだけで、トラックバックを送ることができます。
相手のブログ記事の「トラックバックURL」はだいたいその記事の下の方についていますので、確認してみてくださいね。
So-net blogでの詳しい操作方法は、以下の「使い方」をご確認ください。
http://blog.so-net.ne.jp/blog-help/trackback
自分も相手もSo-net blogを使っている場合には、「簡単トラックバック」機能を使うともっと簡単にトラックバックができます。ぜひご利用ください!
http://blog.so-net.ne.jp/blog-help/trackback2
また、初めてのトラックバックの前に「So-net blog みんなの広場」などを
使ってトラックバックの練習をしてみることをお勧めします。
ここならいくら間違えても大丈夫ですよ!
○So-net blog みんなの広場
http://blog.so-net.ne.jp/trackback/
「トラックバック」にルールってあるの? |
前段でもお話したように、トラックバックの基本は「あなたの記事に関連ある内容の記事を私も書きました!」ということを相手のブログ作者にお知らせすることです。
それをふまえて、以下のようなことを心がけましょう。
○相手のブログ記事へのリンクを自分の記事にいれましょう。
「記事が関連さえあればリンクはいらない」というブロガーさんも
いらっしゃいますが、トラックバックの基本をふまえ、なるべく
相手の記事にリンクをしましょう。
○自分の記事に関係のないブログにトラックバックを送ることは絶対にやめましょう。
「トラックバック」よくある質問 |
トラックバックってよくわからない・・・そんな皆様からお聞きした質問
への回答を少しご紹介いたします。お使いになるときの参考になさってくださいね。
Q1:間違ってトラックバックを送ってしまいました。取り消すことはできませんか?
A1:残念ながら一回送ってしまったトラックバックを自分で消すことはできません。
そのブログ記事のコメント欄にお詫びと削除してほしい旨を書き込みすることを
お勧めいたします。
Q2:記事に関係のないトラックバックがつくのですが・・・
A2:迷惑メールのように迷惑なトラックバックを送ってくるユーザーも中にはいます。
迷惑なトラックバックはSo-net blogにログインして記事管理ページから削除
できます。明らかに必要のないトラックバックは削除をお願いいたします。
また、So-net blogの機能を利用して迷惑なトラックバックを予防することも
できます。詳しくは、以下のページをご確認ください。
迷惑なコメント、トラックバックを拒否する機能はありますか?
http://blog.so-net.ne.jp/faq/603
ブログは記事を書くだけではなく、記事を通じたコミュニケーションが楽しいツール。
今回はブログコミュニケーションのはじめの一歩としてお勧めの「nice!」についてご紹介いたします。
自分のブログとステキなブログとで、どんどんコミュニケーションの輪を広げていきましょう。
So-net blog独自機能「nice!」ってなあに? |
気に入ったブログや記事を見つけても、なかなか急にコメントを書くのは勇気がいるもの。
そんな時は、nice!機能を使ってみてください。
nice!の付け方はとても簡単です。
1) nice!を付けたい記事を見つけたら、まずログイン。
2) そうすると記事の下に「nice!」というボタンが表示されるので これをポチリ。
3) これで完了です。
知らない人からもらうnice!はとてもうれしいものです。また、nice!を付けることによって、こんな利点もあります。
○nice!を辿っていろんな人がブログにやってきてくれてアクセス数がアップ!
○nice!と合わせてコメントを付けることで、他のブロガーさんとお友達に!
nice!やコメントの数だけどんどんブログを書くことが楽しくなってくるので、たくさんnice!やコメントをつけて楽しんでみてくださいね。
「nice!」にルールってあるの? |
So-netで定めているルールは特にありません。マナーを守って使うぶんには、どんな使い方をしても大丈夫です。もちろん、nice!だけでコメントをつけなくてもよいですし、コメントだけでnice!をつけなくてもだいじょうぶです。
でも、nice!だけではなく、どこかnice!だったのかのコメントがあった方がやっぱりうれしいはず。
コメントもがんばって付けてみるといろいろなブロガーさんとお友達になれるのでお勧めです!
けれど、嫌がらせに使ったり、アフィリエイトの宣伝目的で不特定多数の人にnice!をつけたりすることは絶対にやめてくださいね。
こんな使い方も☆事例紹介☆ |
So-netの公式サイトDirection「デジmonoレビュー&プレゼント」では、nice!やコメントをつけてくれた人の
中から抽選でプレゼントがあたる企画をおこなっています。
ぜひみなさんも参加してみてください。
デジmonoレビュー&プレゼント
また、Directionのような企画を自分でやってみたり、仲良くなったブロガーさんと同じお題で記事を書いてnice!の数を競ってみるのも楽しいかもしれませんね。
]]>
ブログの本文エリア横についているメニュー欄「サイドバー」。
このサイドバーはブログのどの記事を読むときにも見える貴重なスペース。自分の好きな画像やブログパーツを貼り付けたり、
順番を変えたり、思い切っていらないものを見えなくしたりして、サイドバーをカスタマイズ&整理整頓してみましょう。
自分の好きな画像やパーツを表示!カスタムの方法 |
1) So-net blogにログインして、
管理ページ>設定>サイドバーに進む。
「カスタムペイン」の右隣の「編集」ボタンをクリック。
2) お好きな内容を入力して「保存」をクリック。
サイドバーの設定画面に戻るので、表示したいカスタムペインの右隣の「表示」ボタンをクリック。
3) できあがり
※カスタムペインにブログパーツを設置するためのJavaScriptやHTMLタグを設定される際は、「URL自動リンクと改行だけのシンプルな入力」で行う必要があります。 入力方法の変更は、下記Webページをご確認ください。
■:So-net blogの使い方:本文編集機能の切り替え順番も重要!並び替えの方法 |
1) So-net blogにログインして、管理ページ>設定>サイドバーに進み、サイドバー設定画面を表示します。
2)「↑」「↓」ボタンをクリックすると、ひとつずつ表示の順番が入れ替わります。
こんなブログはこんなサイドバー☆お勧め事例紹介 |
サイドバーを工夫すると、見やすくかつ個性的な見ていて楽しいブログとなります。 ここではタイプ別事例をご紹介いたします。
So-netにも個性的なブログパーツがたくさんあります。So-netのキャラクターのブログパーツもちろん、
ウルトラマンのブログパーツも!ぜひあなたのブログにつけてみてください。
ブログの機能「カテゴリー」は、記事をジャンルごとに分類できる仕組み。
これを使うと、ブログ読者が目的の記事をを探しやすくなります。記事を作成する時にはカテゴリーを設定することをオススメいたします。
「カテゴリー」ってなあに? |
「カテゴリー」とは、ブログの記事を分類して表示するための仕組みです。So-net blogではひとつの記事にひとつのカテゴリを設定することができます。
カテゴリーを設定しておくと、サイドバーのカテゴリー欄に表示されます。表示されたカテゴリーをクリックすると、そのカテゴリを設定した記事だけを読むことができるので、ブログ読者は目的の記事を探しやすくなります。
どうやって設定するの? |
記事の編集画面の「マイカテゴリー」欄で設定したいカテゴリーを選択して記事を保存することで、記事にカテゴリーを設定できます。
カテゴリーを新しく追加するには、ふたつ方法があります。
※サイドバーの「カテゴリー」の位置を変更することもできます。管理ページ>設定>サイドバーに進み、「↑」「↓」ボタンで順番を入れ替えてください。
カテゴリータイトル、こんな工夫あんな工夫 |
カテゴリータイトルをちょっと工夫すると、さらに詳細な分類も可能です。記事をたくさん書く方はぜひお試しください。
自分のブログをたくさんの人にみてほしい!
アクセス数をアップする方法にはポイントがいくつかありますが、そんなポイントのうちでも大切なのが「記事の読みやすさ」。
パソコンの画面上の文章って思った以上に読みにくいもの。いつもの読者も、通りすがりの人も思わず立ち止まっちゃうブログになるためには、「記事の読みやすさ」がとても重要です。
今回はそんな読みやすい記事を作るための工夫をお教えいたします。
記事タイトルはわかりやすく |
ブログを読む人はタイトルを見て「読む、読まない」を決めるもの。タイトルはその記事の内容がわかり、簡潔なものに。思わずクリックさせるインパクトがあればなおよし。
適切な改行で読みやすく |
パソコンの画面上の文章は思った以上に読みにくいもの。いつも以上に適切な改行、段落分けを意識することが重要。また句読点のつけ方もできるだけわかりやすくを心がけたほうが、より多くの人が読みやすい記事に。
太字や色付文字、絵文字で気持ちをこめる |
「テキストだけで考えや気持ち、人柄を伝えるのは本当に難しいもの。そこで便利なのが文字装飾。文章内の重要なキーワードなど、読者の目に留めたい/伝えたい部分を太字にしたり、色をつけたり。自分の気持ちを伝えたいときには絵文字を入れたりも効果的。
※ やりすぎると、記事がうるさくなって読みにくく。多用注意です。
「表示結果を確認しながら編集する入力」が便利
文字装飾やリンクをつけるときには、「表示結果を確認しながら編集する入力」を使うとラクラクです。絵文字入力ツール付きです。不十分な点が多いですが、今後もっと楽しい便利な機能をどんどん追加していきたいと思っていますので、楽しみにしてください!
So-net blogの使い方:表示結果を確認しながら編集する入力
http://blog.so-net.ne.jp/blog-help/editor2
※Internet Explorer5.5以上で利用できます。
※「Shift」+「Enter」で1行分改行できます。普通に「Enter」だと1行空行が空きます。
So-net blogのプロフィール機能が大リニューアル!ブロガーのための「読者を増やす機能」、ブログ読者のための「ブログの海をみんなでクルージング機能」が使える『ブログクルーザー』の楽しみ方をご案内します。
ブログクルーザーのメリットは? |
ずばり、ブログ読者とブログ友達が増えます。
「ブログクルーザー(以下:ブロクル)」は、オープンなSNS(mixiなど招待制のコミュニティサービス)のような使い方ができるプロフィールツールです。
ブログを書いているユーザーであれば、充実したプロフィールを公開することでいままで以上に読者の共感を得やすくなり、購読者アップにつなげられます。また、友達申請や関心あるキーワードの利用により、自分のページへのリンクがどんどん増えます。
ブログを読んでいるユーザーであれば、よりブログ筆者の人となりがわかり、ブログを楽しく読むことができるようになります。また、またブログを書くまでにはいたらないけれど、インターネット上のコミュニケーションを楽しみたいとお考えの方も、気軽にはじめられます。
名刺をはって、自分をアピール |
まずは「ブロクル使ってるよ」というアピールに、ブログに名刺を作ってはります。
(1)「プロフィール登録・編集」で、公開したいプロフィールを登録します。
(1) マイプロフィールの「設定」→「名刺設定」をクリック
(2) 「表示内容の設定」で表示する項目を選択/入力
(3)
「スキンを選択する」ボタンをクリックし、お好きなスキンを選択
※スキンを変更すると「マイプロフィール」のデザインも変わります
4)「設定」ボタンをクリックすると、設定が反映。 「名刺貼り付け用ソース」の内容をコピーします。
(5)So-net blogの管理ページ「設定→サイドバー」を開き、カスタムペインのひとつにコピーした内容を貼り付けして保存。そのカスタムペインの「表示」ボタンをクリックするとブログに表示されます。
※編集方法設定を「URL自動リンクと改行だけのシンプルな入力」にしておく必要があります。
※該当のカスタムペインが既にブログへ表示されている場合は「表示」ボタンはでていません。
「関心あるキーワード」で趣味のあうブログを見つける |
「関心あるキーワード」を設定すると、趣味のあうブログを見つけやすくなります。
(1)マイプロフィールの「設定」→「プロフィール編集」をクリック
(2)「関心あるキーワード」を登録し、「確認」ボタンをクリックして設定を保存
※表示されているキーワードをクリックすると、自動的に入力欄にキーワードが入ります。
※完全一致したキーワードでつながるので、なるべく一般的な表記を登録してみてください
(1)以下に表示されている「関心あるキーワード」で気になるキーワードをクリック
(2)該当のキーワードを「関心あるキーワード」に登録しているユーザーの一覧が表示されます。それ以外にも左にある「関連するブログ記事を表示する」をクリックすると、そのキーワードが含まれるブログが検索できます。
友達申請でコミュニケーション広がる |
「友達申請」を上手に使うと、ブログコミュニケーションをもっと楽しむことができます。
(1) 気になるブログの「マイプロフィール」を表示し、右側の「友達申請中」ボタンをクリック。
(2) 友達になりたい旨を記載し、メッセージを送信。
(3) 申請結果はメッセージで送られてきます。「マイプロフィール」の「メッセージがあります」または「メッセージBOX」をクリックして確認。
※メッセージがきたら通知を受け取る設定にしていると、メールでもメッセージ到着お知らせがきます。
(4)友達になると、お互いの友達リストにアイコンが表示され、リンクがされます。ここから、各ブログ筆者のページを訪問することもできるようになります。
※ 「友達申請」を「公開」に登録していると、同じ手順であなたのことが気になった方から友達申請のメッセージがくる場合があります。ぜひ積極的に公開にしてみることをオススメします。
※ブロクルβ版では、一度友達申請を「拒否」されると、その人とは二度と友達になれなくなりますのでご注意ください。
※ブログ教室でも友達申請を受け付けていますが、友達になっても個別のメッセージにはお返事できません。ご了承の上、友達になってくださる方大歓迎です。
ブログクルーザー担当者よりメッセージ
1人でネットサーフィンする時代は終わり。これからは、共感できる仲間とブログの海をクルージングしていく時代だと思います。
これからのブログライフ、書き手も読み手も必携の”ネット上の名刺”として、多くの皆さんに活用してもらいたいと思っています。
まだβ版ですので機能が不十分な点が多いですが、今後もっと楽しい便利な機能をどんどん追加していきたいと思っていますので、楽しみにしてください!