私がブログ記事で「埋め込み」に使っているブックマークレットなど(備忘録)(追記あり)

友人がサイト&ブログを開設したいというので、便利な機能やブックマークレットを紹介します。
(つまり、この記事は主に友人に紹介するための備忘録ww)
超初心者向けです。でも私も初心者を抜け出せない・・・

写真の貼り付け

友人がサイト作成するのは「Jimdo」というサービス。

ホームページ作成 – 簡単ホームページ作成サービス – Jimdo

無料でなかなかかっこいいサイトを作れるのでおすすめしました。
Wordpress.comもいいけれど、超初心者にはちょっと敷居が高いと思って。
Jimdoは無料だけあって、サイトの容量が500MB。写真をバカスカ入れるとあっという間に容量リミットに達しそうなので、ちょっととっつきにくいけれど、Flickrに写真をアップロードして使うことに。

手順

Flickrアップロードはなんとか勉強してもらうことにして・・・
サイトへの埋め込み方。

Flickrにログイン。

Welcome to Flickr – Photo Sharing

「You」をクリック
スクリーンショット 2014 11 10 16 15 06
(クリックで拡大)

写真右下の矢印をクリック
スクリーンショット 2014 11 10 16 15 55
(クリックで拡大)

「HTML」をクリック、サイズを選び(緑矢印)、下の窓の文字(赤矢印)を選択、コピー&ペースト
スクリーンショット 2014 11 10 16 16 42
(クリックで拡大)

出来上がり!
iPhone

今回は正方形の写真だったのでこうなりました。縦長、横長の写真はサイズ指定のときちゃんと反映されています。

なぜか日本語化してくれないけれど、なんとなくわかるかと(^_^;)

 

動画の貼り付け

Youtubeに動画をアップロードしておきます。
(やり方はいろいろな方が書いていますので、省略します)

アップロードした動画ページを開きます。
動画の下の方に、 ↓ のような部分があります。

スクリーンショット 2014 11 10 18 17 14
(クリックで拡大)

赤い四角で囲った「共有」をクリック。

スクリーンショット 2014 11 10 18 21 01
(クリックで拡大)

「埋め込みコード」をクリックすると、下にHTMLコードが現れます。コピー&ペーストでサイトに貼ります。

生成されるHTMLコードでは、幅が560という大型のものになります。
小さくしたいときはwidthとheightを比率がおなじになるように計算して修正します。
今回は560、315だったので、480、270に変更しました。
 

他サイトへのリンク

簡単な方法

私はWEBブラウザにChromeを使っているので、その機能拡張「Create Link」というのを入れています。

Create Link – Chrome ウェブストア

↑ このリンクもCreate Linkで作りました。

設定はこんな ↓ 感じです。

スクリーンショット 2014 11 10 16 47 39
(クリックで拡大)

見づらいですね・・・ 下の方にある「Variables」(予約変数)を読めばだいたいわかるかな。
使い方は、リンクしたいページを開いて「Create Link」をクリックするだけ。勝手にコピーされるので入れたいところにペースト。

ブックマークレット

少しかっこよくリンクを貼りたいなら、「ShareHTML」がおすすめ。

ShareHtmlメーカーページにアクセスして、

スクリーンショット 2014 11 10 16 52 30
(クリックで拡大)

適当に項目に記入。基本的にはそのままで大丈夫です。
「書式テンプレート」はいろいろ試して自分好みのやつを選んでください。

そして、「Bookmarkletを生成する」ボタンを押すと、下に「個人向けBookmarklet」が生成されます。
パソコンなら「デモおよびPC登録用:そのまま実行もしくは登録」の下の「ShareHTML」リンクをブックマークバーまでドラッグ。
iPhoneでは「iPhone登録用:登録後 ?以前を削除」の下のリンクをタップ、出てきたページをブックマーク登録、そのブックマークの?から左を削除します。

使い方は、リンクしたいページを開いてブックマークレットを起動、ダイアログが出ますが気にせず「OK」ボタン。
ページ最丈夫にHTMLコードが出るので、全選択してコピー&ペースト、です。
こんな感じ ↓ にできます。

こてつは内臓ではない2 | ハラミ、おかわり!

 

アプリの紹介

iPhone、iPadのApp紹介については

AppHtml正式版をリニューアルしました♪ | 普通のサラリーマンのiPhone日記

を読んでください。
WEBでリンクを作成したり、ブックマークレットを生成したりできます。アフィリエイトを組み込むこともできます。

READMEのリンクを読むと、おおよそのことがつかめると思います。

こんな感じ ↓ です。

My Railway JR東日本 編
カテゴリ: エンターテインメント, 旅行
¥500(記事作成時点)


なお、ページによってはAppHTMLが起動しないことがあります。その場合には「普通の」ページを開いて、そこで起動してください。


Androidについては・・・あんまりわかりません。

一応、こんな手順でアプリページヘのリンクボタンは作れます。でもアプリアイコンは付きません。
もしアイコン付きでリンクを貼れる方法があったら教えて下さい!

Androidの手順

まず、Google Playページで、紹介したいアプリを探します。
探せたら、上のアドレス(URL)欄のURLの、「ID=」の右側の文字列をコピーします。
たとえば、

https://play.google.com/store/apps/details?id=jp.smarteducation.goccofiretruck

の赤字の部分です。

次に、Google Play Badge Generator | Android Developersのページを開き、

スクリーンショット 2014 11 10 18 06 15
(クリックで拡大)

「Language」は「日本語」、「Package name:」に先ほどコピーした文字列をペーストし、「Build my badge」をクリック、下に出てきたコードをコピーして自サイトにコピー。


Get it on Google Play

↑ こんなふうになります。

ボタンの上に、先ほどの「Create Link]でリンクをHTMLで貼れば、

GoccoしょうぼうしゃLite – 子ども向け消防士ゲーム

Get it on Google Play

こんなアレンジもできますね。

『注記』

「Google Play Badge Generator」で生成されるHTMLコード、サイト上では正しく表示できませんでした。srcタグがむき出しになっちゃいます。
どうも以下の赤四角部分に半角スペースが複数入っているのが原因のようです。

スクリーンショット_2014-11-11_7_35_28

半角を1つに直したらうまく表示されました。

 

【追記】

アンドロイドアプリを紹介する方法、いい感じのやり方がありました。

Amazonアフィリエイトを使います。

Amazonアソシエイト(アフィリエイト)プログラムに参加しよう! – クイックツアー

アフィリエイトって、商品を紹介して紹介料をもらうプログラム。
有名ブロガーさんやまとめサイトなんかで使われています。
このブログのように読者が少ないところでは紹介料はほとんど入りませんが、紹介するツールとして使うのにとても便利です。

上記のページで登録してみてください。

基本的にどんな商品でも紹介できるようになります。
たとえば

こんな感じ。

Chrome拡張機能の「AmaQuick」を使えば

子どもへのまなざし
4834014738
佐々木 正美,山脇 百合子 福音館書店 価格 1836円(記事掲載時)

こんな風にも。

そして、AmazonにはAndroidアプリストアもあるんですね。

これを使えば、

(Amazon公式のリンク)

(AmaQuick)
GoccoしょうぼうしゃPro – 子ども向け3D消防士ゲーム
B00JVILMFE
SSMART EDUCATION, Ltd. 価格 300円(記事掲載時)
(なぜかアプリアイコンを選べませんでした)




こてつは内臓ではない!2 のFacebookページ
よろしければ「いいね!」してください!

このブログのフィードをFeedlyに登録
follow us in feedly
このエントリーをはてなブックマークに追加
はてなブックマーク - 私がブログ記事で「埋め込み」に使っているブックマークレットなど(備忘録)(追記あり)
Facebook にシェア
[`yahoo` not found]
[`friendfeed` not found]
[`evernote` not found]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です