ブログツール

App紹介の自動HTML作成Bookmarkletを実装

今日はこの実装に時間がかかった。単純に実装するにはすばらしい参考サイトがあるので簡単なんだけど、ちょっとデザインを調整しようと思ったらなんだかうまくいかず、だらだらと時間がかかってしまったというわけ。
いまのところこんな感じに仕上がっている。
App紹介ブックマークレット

このブックマークレットは、起動して任意のアプリ名を入れるだけで、紹介リンクを生成してくれるという素敵プログラム。
これそのものの実装方法は以下のサイトを参考にさせてもらいました。
すごくよくまとまっていて分かりやすかったです。すばらしい!

で、なにを直したのかというと、組み込んだデフォルトは以下のような感じになる。
デフォルト

まず、タイトルが大きく色が青い。
そして、アプリのスクリーンショットの大きさが若干大きい。
よーするに全体的にコンパクトにしたいと思った。文字の色もちょっとウルサイ感じがするので。

基本、CSSで調整するのだけど、それだけではタイトルがどーにもならなかったので、時間がかかった。CSSは、@importで読み込むことにした。そのほうがシンプルなので。とりあえずは「appinfo.css」というふうにしておいた。

まずは文字色。
AppInfoというclass名がついているので、そこに色指定をいれるだけで、タイトル以外はざくっと色が変わってくれる、カンタン。
あと、アプリアイコンの右にあるアプリ名のタイトル。これはタイトルなので、コイツだけ太字にしたり色も変えたい。そんな時は、div.AppInfo strong{}で各種の指定を加えればいいだけ。

手間取ったのは、画像の大きさ指定。単純な指定だとすべての画像に影響するので、いろいろ試した結果最終的に使ったのは以下の二つ。

  • img.landscape{}
  • img.portrait{}

パラメーターなどの設定は以下で。

width: 40%;
height: auto;
margin-right: 30px;
vertical-align: top;

縦と横の画像が混ざっているので、上揃えにしときました。
たったこれだけなのに時間がかかったのは能力不足ゆえ。分かる人ならすぐできちゃうくらいカンタンなはず。

一番悩んだのは、タイトル表記。これは、ブックマークレットで書き出されてくるHTML自身に色指定があったので、CSSではなんともできず困った。
そこで、じゃあ、書き出すプロセス上で変えてしまえと思い立った。
上で紹介した記事に書いてあったことを参考にすると、なんでもYahoo!Pipesで、編集できるらしい。以下を参照。

Yahoo!のIDが必要のようだけど、Flickrを使っているのでそのままIDを使い回せる。
それでソースを覗いてみると、冒頭の部分で以下のように記述されていた。

span style=”color: rgb(0, 0, 255);”

styleで青に色指定されてる。こいつのおかげでタイトルが青かった!
なのでここを以下のように変えました。

span id=”appinfotitle”

これでCSSでカンタンにデザインをコントロールできるようになったぞ!
もう煮るなり焼くなり好きなようにできる。
まあ、たいしたことはやってないのですが、素人なりにがんばりました。
で、当然divは設定してあるので、線をつけたり、マージンとったりで全体の印象を整えるっと。もう一度画像を載せるとこんなんです。
完成

タイトルの行間をもっと取りたいところかな、とか微調整は必要そう。
細かいところは全体が整ってきてから一気にやるつもりなので、今はこれで。

HTML & CSSをすでに習得済みな人はさくっとできちゃうことばかりだったな。。。
いつもより疲れた。

関連記事

  1. zenback1

    ブログツール

    ブログ記事バックナンバーを有効活用したい人のためのサービス『zenback』を導入してみた

    すでに導入してからずいぶんたちますが、導入方法をメモしておきます。い…

  2. 20120628181006

    ブログツール

    Google+の「+1」ボタン導入メモ

    ツイートボタンを設置したら、ついでにGoogle+ボタンも設置したい…

  3. nameserver

    ブログツール

    ドメインは『お名前.com』、『さくらのレンタルサーバ』で運用する方法

    ドメインは今まで信頼と安さのバランスで『お名前.com』を利用する…

  4. envatomarketのAPIキー作成方法

    ブログツール

    envatomarketのAPIキー作成方法

    WordPressの有料テーマを多く取り扱っている大手の「envato…

  5. new_domain.jpg

    ブログツール

    さくらレンタルサーバーに他で取得したドメインをマルチドメイン運用する方法

    ひとつのレンタルサーバーで複数のブログを運用するときにやったドメイ…

  6. new_zenback1

    ブログツール

    『zenback』がリニュールしたというので、さっそく試してみた

    ブログでお世話になりっぱなしの『zenback』がリニューアルしたそ…

最近の記事

  1. 【無印良品】ゴールデンウィーク中のご飯にレトルト買い込み!
  2. 世代ど真ん中だった!!『週刊少年ジャンプ展 vol2』
  3. デジタル通貨を買ってみた記録!とりあえず元は取っている!
  4. 【コレクション】カードダス:SDガンダム外伝シリーズ
  5. 【無印良品】作り置きに欠かせない!バルブ付き密閉保存容器
  6. 【UNIQLO】冬のジム通いにブロックテックフリースパーカをお得に購入!!
  7. 【UNIQLO】冬のジム通いにブロックテックフリースパンツをお得に購入!!
  8. 【UNIQLO】ユニクロ誕生感謝祭で買いだめ!
  9. 便利すぎる!買ってよかったキッチンツール「キッチンペーパーハンガー」
  10. ジムで活躍!プロテイン用のボトルにおすすめ!「nalgene(ナルゲン)の沖倉商店コラボ・ボトル」

アーカイブ

  1. D&DEPARTMENT

    講演会

    「ロングライフデザインについて 深澤直人×ナガオカケンメイ」 3
  2. 【無印良品】よく利用するインスタント系を入れておくための「整理ボックス3」

    無印良品

    【無印良品】よく利用するインスタント系を入れておくための「整理ボックス3」
  3. 20120630223226

    WordPress

    Facebookのいいね!ボタン導入メモ
  4. 日常

    豪華な
  5. iPhone6用のケースでもっともシンプルでかっこいいと思った「spigen Neo Hybrid」

    ガジェット

    iPhone6用のケースでもっともシンプルでかっこいいと思った「spigen N…
PAGE TOP