ブログツール

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. new_zenback1

    ブログツール

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

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

  2. zenback1

    ブログツール

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

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

  3. googleadWords01

    ブログツール

    『Googleアドワーズ 無料お試し券』を試してみた

    メールで送られてきた『Googleアドワーズ 無料お試し券』を試し…

  4. envatomarketのAPIキー作成方法

    ブログツール

    envatomarketのAPIキー作成方法

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

  5. new_domain.jpg

    ブログツール

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

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

  6. 「Google Search Console」に登録してみた

    ブログツール

    「Google Search Console」に登録してみた

    ウェブマスターツールに登録しようと思ったら「Google Search…

最近の記事

  1. 【無印良品】作り置きに欠かせない!バルブ付き密閉保存容器
  2. 【UNIQLO】冬のジム通いにブロックテックフリースパーカをお得に購入!!
  3. 【UNIQLO】冬のジム通いにブロックテックフリースパンツをお得に購入!!
  4. 【UNIQLO】ユニクロ誕生感謝祭で買いだめ!
  5. 便利すぎる!買ってよかったキッチンツール「キッチンペーパーハンガー」
  6. ジムで活躍!プロテイン用のボトルにおすすめ!「nalgene(ナルゲン)の沖倉商店コラボ・ボトル」
  7. コミックのイラストが新鮮だった!『MARVEL展』
  8. シンプルで使い易い!!「雷に強い マイクロタップ 4個口」
  9. ジム用に購入♪ リバーサル・オッシュマンズ別注「ドライスウェットショーツ」
  10. 暮しの手帖社とのコラボ作品!大きい面積が使いやすい!「日東紡の新しいふきん」

アーカイブ

  1. hm_brick_lane_bikes-1.jpg

    プロダクト

    H&Mのコラボコレクション「H&M for BRICK LA…
  2. 日常

    家具に夢中
  3. WordPress

    WordPress:個別ページで第一階層しか表示しないようにしたい
  4. 日常

    タイムアップ!
  5. カタカナ+ローマ字

    プロダクト

    カタカナの響きフォント
PAGE TOP