ブログツール

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

    ブログツール

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

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

  3. nameserver

    ブログツール

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

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

  4. googleadWords01

    ブログツール

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

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

  5. new_domain.jpg

    ブログツール

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

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

  6. envatomarketのAPIキー作成方法

    ブログツール

    envatomarketのAPIキー作成方法

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

最近の記事

  1. 【UNIQLO】ユニクロ誕生感謝祭で買いだめ!
  2. 便利すぎる!買ってよかったキッチンツール「キッチンペーパーハンガー」
  3. ジムで活躍!プロテイン用のボトルにおすすめ!「nalgene(ナルゲン)の沖倉商店コラボ・ボトル」
  4. コミックのイラストが新鮮だった!『MARVEL展』
  5. ジム用に購入♪ リバーサル・オッシュマンズ別注「ドライスウェットショーツ」
  6. 暮しの手帖社とのコラボ作品!大きい面積が使いやすい!「日東紡の新しいふきん」
  7. 水引と風呂敷の包み方のデザインが美しい引き出物「祝づつみ」
  8. 【無印良品】ちょっと小さいクリップも買っておいて損はない「袋止めクリップ・小」
  9. 【無印良品】普通に使えるクリップが安くてうれしい「袋止めクリップ・大」
  10. 今年の手帳はコレに決めた♪「ほぼ日手帳 2017 オリジナル」

アーカイブ

  1. 留学

    『人は見た目が9割』
  2. fnm005-1.jpg

    MTG

    【MTG】FNMの3月プロモゲット! でも全敗
  3. メディア芸術祭

    展覧会

    メディア芸術祭にいってきた
  4. 初春石鹸2017とやっていきたいことメモ

    日常

    初春石鹸2017とやっていきたいことメモ
  5. 日常

    またもや、懐かしい人たちと
PAGE TOP