Hatena::ブログ(Diary)

春友日記 〜なまらiPhone〜 このページをアンテナに追加 RSSフィード Twitter

北海道弁の"なまら”"超”とか"very"の意味を表します
 

2010-11-18

HTMLもCSSの知識もいらない!新米ブロガーに役立つwebサービス9選+α



(c) .foto Project


ブログを書き始めて早5ヶ月が経過した。早いものだ。

大変喜ばしいことに最近ブログを書き始める人も周りに増えてきた。

そんななか、ふと思ったのが自分がブログを書き始めた頃のこと。

初めはとにもかくにも困っていたからだ。

HTMLやCSSは未だに敷居が高いがwebサービスをうまく使えば効率よく、かつ格好よくブログを書くことができる。

もっかい言うが、ブログを書き始めの頃は、とにもかくにもなんでもかんでもありとあらゆるすべてのことに困っていたからだ。(今もだが…)

なるべく日本語対応なもの、もしくは直感的に操作ができるもの、解説があれば解説の記事も引用するようにしている。

ブログを書き始めの方、ちょっと行き詰まっている方、更にこれからブログを始めてみようと思っている方の一助にでもなれば幸いだ。



《目次》

1. 画像編集編

2. 動画・YouTube

3. 動画・スクリーンキャスト編

4. Twitter

5. テキスト文字編

6. ブログタイトル編

7. お飾り編

8. Zenback編

9. ブログサービス編

α. 神ブックマークレット



1.画像編集


NAVERフォトエディター


画像を載せる前に余裕があるなら画像を綺麗に編集しよう。

トリミングやモザイク、テキストの挿入といったように画像編集は何でもできる。

特筆すべきは日本語での解説&操作

Photoshopなど使ったことのない新米ブロガー(春友)には優しすぎるwebサービスだ。

アカウント登録も不要なwebでの画像編集サービス。

日本語での解説&操作、そしてFlickrからの写真取り込みなど、機能も非常に秀逸だ。


f:id:spring_friends:20101117225831p:image


操作説明はこちらから。


2.映像系


YouTube動画のアップ方法は以下のサイトから。


YouTube Fan|YouTube動画をブログに貼り付けよう
まずは、貼り付けたい動画の再生ページを表示させます。動画再生ウィンドウの下には「埋め込み」というスクリプトが表示されているので、その内容をコピーします。

続いて、動画を貼り付けたいブログの記事内容に、コピーしたスクリプトをペーストします。あとはそのまま記事を投稿すれば、ブログ上にスクリプトを貼り付けた動画のウィンドウが表示されます。

こちらのサイトでYouTube動画をブログへ貼付ける方法からサイズ変更方法まで載っています。



はてなの場合は [URL:movie]で張り付けられる。


f:id:spring_friends:20101117225832p:image


上の写真のURLをはてな記法で貼付けたものが以下の映像。


D


他にYouTubeの一部分を抽出して再生できるサービスもある。


TubeChop


f:id:spring_friends:20101117225833p:image


英語のサイトだがYouTubeのURLをコピペするだけなので直感的かつ簡単に操作できる。

フラッシュでの貼付けになる。


3. もう一歩進んだ映像系:スクリーンキャスト


Screenr


スクリーンキャストとは何か?以下の映像をご覧いただきたい。


D


使用法は下記のサイトをご参照。


Twitterと連動したスクリーンキャスト、screenrがすばらしげ | nevermind
仕事でブログ記事かいてたりすると、結構PC操作を動画にするケースがあります。そんなとき何がめんどいって、やっぱりエンコードしたりアップロードしたり、HTML書いたりとかがかったるいんですが、その辺全部やってくれるScreenrというWebサービスを紹介します。この手のスクリーンキャストものはクライアントアプリもふくめて色々使ってみましたが、手軽さとクオリティは抜群かも。

かなりわかりやすく解説してくれています。ここを読めば操作できると思います。



個人的にはこのサービスは大ブレイクしそうな気がする。(もうしてるのか?私が知らないだけか?)

webゲームでの攻略法プレゼンに使用したり、企業でもちょっとしたPC内のプレゼン、簡単な資料閲覧、等々うまく使えば相当便利に使用できそうだ。

考えれば考えるほど用途は広がりそうな気がする。

もちろんブログに貼り付けてのプレゼンも映像があればわかりやすい。

新米(いろんな分野)でもハッタリのきいたプレゼンが作れるのではないだろうか。

(フラッシュをブログに植え込む知識が必要だが私にはまだ無い)

Screenrに関して言えば、TwitterIDがあれば使用できるのも簡単でいい。

他にもスクリーンキャストのサービスはあるので興味がある方は自分の気になるサービスで作成してみるといいだろう。


Flashでの貼付け方法が未熟でわからないのだが、このサービスはYouTubeにもアップできる。

アップするのに多少の時間はかかるが、フラッシュの貼付け方法がわからなくてもYouTubeなら貼付けることができる。


D


4. Twitter


Blackbird Pie


ブログを書いているとTwitter上のセリフを引用したくなることが多々ある。(私だけか?)

そんな時にこのサービスを使うとリンクが生きたままツイートを引用できる。

Twilogというサービスを併用すればTwitterIDのわかる全ての人のツイートを探して引用できる。

使い方は以下のスクショで。


まずはTwitterのホーム画面(Twilogでもいい)から自分のツイートのURLをコピーする。

ツイートのリンクは実は時間のところに隠されている

ダブルタップ(右クリック)してリンクを保存しよう。


f:id:spring_friends:20101118001159p:image


f:id:spring_friends:20101118001200p:image


ツイートのリンクがコピーされた状態で以下に貼付け。

そうするとブログへ貼付けるHTMLが作成される。


f:id:spring_friends:20101118001201p:image


f:id:spring_friends:20101118001203p:image


HTMLを貼付けて作成されたものが以下、試しにリンクをクリックしてみてもらえればリンクが生きているのが解るはずだ。


おぉ!ついにキター! RT @tomos2006 Posterous 始めまーした。 - gadget or gimmick: - B! http://bit.ly/bsnM51less than a minute ago via Echofon


5. テキスト文字編


TEXTANIM(日本語可能)


f:id:spring_friends:20101118001204p:image


f:id:spring_friends:20101118001205p:image


f:id:spring_friends:20101118001206p:image


できた文字がこちら。



文字をデコレーションさせて表示してみると変化が出て面白い。

日本語に対応しているサービスが少ないのが残念だがなかなか面白そうだ。ちなみに私は本日初めて使用してみた。


日本語不可だが以下のサイトは相当に凄い文字が作成できる。


GRSite.com(日本語不可)


こちらもフラッシュでのブログへの植え込みとなる。


6. ブログタイトル編


ホッテントリメーカー


f:id:spring_friends:20101118001207p:image


ブログのタイトルがどうしても決められない場合はこのサービスで決めてもらってもいいかもしれない。

ちなみにこの記事のタイトルを付けてもらおうと思い、キーワードを『新米ブロガーに役立つwebサービス』にしてみた。

作成されたものが以下のタイトル。


f:id:spring_friends:20101118030913p:image


新米ブロガーに役立つwebサービスで彼氏ができました


f:id:spring_friends:20101118030914p:image


なぜ新米ブロガーに役立つwebサービスがモテるのか


彼女ができたり、モテたりするのならタイトルを委ねてみてもいいのかもしれない……


7. 飾り編


LinkStyLe


pdphoto


フリーで使用できる綺麗な写真サイトは知っていて損はないはずだ。

冒頭の『稲(新米をイメージ)』の写真は下記のサイトから引用させていただいた。


blog.foto


Google先生の画像検索も相当使えるが、著作権には注意したい。


8. Zenback編


Zenback


Zenbackというサービスがある。

上のリンクから申し込んでサービスを受けられるようになったら是非導入してみよう。

HTMLやCSSの知識がなくても関連記事や関連エントリー、Twitteでのツイートまでもをブログ内に表示してくれる。

Kiphonenさんのこちらの記事で、ブログのどこに貼付ければよいかというところまで説明してくれている。

この記事のおかげで導入することができた。


自動で関連記事を表示し、精度も高いzenbackを導入してみた - iPhoneとiMacと自分と…
これまでは手動で関連記事を貼りつけていたんですが、zenbackは設定も簡単で精度も高いような印象を持ちました。もちろん関連記事だけでなく、Twitterはてブとの連携をブログに設定したいユーザーにもピッタリのサービスだと思います。

ただ関連記事がコメント・トラックバック欄の下に表示されたり、iPhoneからの閲覧時にはzenbackが表示されないので、しばらくの間は手動との併用でやってみようと思います。

[追記]

導入後、何日か試しましたが結局外すことにしました。

今は使われてはいないのですね。でもこの記事のおかげで導入できました、大変感謝しています。



スマートフォンでも自動で表示していただけると非常にありがたい


9. ブログサービス編


Posterous


登録方法などはよければ私の過去記事を参考にしていただけると登録がしやすいかもしれない。



Jimdo(日本語で作成できる)


Jimdoについては使用していないのでよくわかってはいないがなんとなく良さげな雰囲気。


そして最後に……実は最重要!!


α. @hiro45jpさんの神ブックマークレット


アプリ紹介とBlog紹介の自動HTML生成 – 派生まとめ | 普通のサラリーマンのiPhone日記
以下、Bookmarkletを紹介していきます。「そのまんま登録版」は、お気に入りにドラッグするだけ。「iPhone登録版」は、リンクをブックマークしてから中身を編集。アドレスの「javascript:〜」よりも前(http://iphone-diary.com/?まで)を削除して下さい。

PC登録用もiPhone登録用もあり、まさに神ブックマークレット。PC用の使いやすさも相当なものがあります。このブックマークレットがなければ正直何も書けてません。



圧倒的大多数のブロガーに利用され、日々このブックマークレットを使用したサイト紹介及びアプリ紹介記事を目にしないことは無いという神ブックマークレット

タイトルにあるHTMLやCSSを知らなくてブログを書けるのはこの記事のおかげだ。

webサービスではなくブックマークレットだが、先日は中国のサイトでも紹介されていた。

日本語であるにも拘らず、だ。

このブックマークレットは特に私のような新米ブロガーにとって超絶役に立つ。

もっかい言うが、役に立つというレベルではない。必須だ。

ブログ記事を紹介したり、アプリを紹介したりすることを超絶便利にしてくれた。

活用しない手は無い。



以上9個のwebサービスと最重要なブックマークレットを紹介させていただいた。

私がよく使うものと、いろいろ調べていたら面白そうだなと思ったwebサービス。

そして、動画系で思った通りの表示をしようと思ったらHTMLの知識が必須だということもわかった。

現状まだまだ新米なわけだが少しずつ良くなってゆけば良いかと思っている。

読んでくださる皆様、”なまら” 感謝。



↑ この記事をTweet していただけると嬉しいですw


[このブログを購読]

もし『春友日記〜なまらiPhone〜』に興味を持っていただけましたらRSS購読をお願いいたします。



はてなブックマークに追加はてブしていただけると非常に喜びますw

KiphonenKiphonen 2010/11/18 20:47 紹介なまらありがとです!

zenbackユーザー増えてますねぇ。
WP流行ってるみたいですが、はてダでも結構カスタマイズできるので、いじるのも楽しいですよね。

spring_friendsspring_friends 2010/11/18 20:57 Kiphonenさんご無沙汰しております。
いつもなまら参考にさせていただいております。
ほんとありがとうございます(^-^)/
今後ともどうぞよろしくお願いいたしますm(_ _)m

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証