ブログツール

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

    ブログツール

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

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

  2. new_zenback1

    ブログツール

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

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

  3. envatomarketのAPIキー作成方法

    ブログツール

    envatomarketのAPIキー作成方法

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

  4. new_domain.jpg

    ブログツール

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

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

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

    ブログツール

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

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

  6. nameserver

    ブログツール

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

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

最近の記事

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

アーカイブ

  1. uiwebview-1.jpg

    iOS

    UIWebViewにコンテンツを表示させる
  2. あこがれのジブリ飯を堪能できるぞ!「ジブリの大博覧会」

    展覧会

    あこがれのジブリ飯を堪能できるぞ!「ジブリの大博覧会」
  3. 日常

    まず一息。
  4. 日常

    Start:Art&Design-International Summ…
  5. kamawanu_harajyuku-5.jpg

    日常

    手ぬぐい選びならまずはココ!「かまわぬ原宿店」
PAGE TOP