ハナモゲラボ / 試行錯誤の実験人生

日々、PCや各種デバイス、楽器等に翻弄されながら電脳の森をさまよう男の日常と様々な実験をさらりと記しております。

Category Archives: Web関連

iframe要素をアスペクト比を保持したままレスポンシブ化する方法

iframe要素といえばちょいと昔(XHTML1.1とか)では非推奨となってましたが HTML5になるとWebアプリとしての期待からか復活しよりまして(笑) そらーもうGoogleマップからYoutubeからなんでもかんでも 埋め込みコードを発行するとiframeだらけの水泳大会ですわ。 (決してヤケクソになっているわけではありません) さて、これがスマホ対応となるとそれなりに面倒くさいんですわね。 そんなもん幅100%指定してやればいいんじゃねえのか、と思いますが そーんな簡単にはいかんのですよね。 縦横の比率を保持したまま、とかになるとそれなりに頭使わんといけませんでした。 まずは iframe要素をdivで囲んでしまう どちらにもpositionプロパティを設定。 (divにはrela……(続きを読む)

刺激・昇進・エトセトラ

本日は2ヶ月に1回の割合で行っているWebマーケティングの勉強会でした。 それぞれがそれぞれの試行錯誤を発表してディスカッションしまくる会です(笑) こういうのはやっぱり一人で黙々とやってるとどうしても煮詰まるし かといってチャットやSNSのみの交流だけでは刺激も薄い。 その作業に没頭している人達に直接会って刺激をもらえるってのが一番! 今は3人が正式メンバーなのですが、前回から後半をオープンにして告知をしています。 今回はなんと福岡・長崎から初参加の人が来はりまして 迎える自分達も驚愕してしまいました。 いや、まさかそんな遠くからいらっしゃるとは思ってなくてですね。 でも、こんな形で同じ目的を持った人達と知り合えるのはとてもいいですな。 あっという間の4時間が過ぎて、心地よい疲れが。 この……(続きを読む)

WordPressのFaviconに通知(バッジ)を導入するプラグイン

ここ最近、ヌーラボのBacklogをお仕事に使ってるんですが 新規投稿があるとFaviconに投稿数がバッジ表示されるんですわね。 スマホみたいに。 「お。いいじゃんこれ」 さて、これを実装するためには世の中には既にライブラリが出回ってます。 favico.jsというのがそれ。 http://lab.ejci.net/favico.js/ こいつをこのブログに実装してみっか、と思ったけどheader.phpになんぞ書き加えて・・とか ちょっと面倒くさくなりまして、手っ取り早くプラグインねえのかと探してみると・・・ ありました。 最終更新3年前ですけど(笑) Favicon Notificationsというプラグインがそれ。 https://ja.wordpress.org/plugins/f……(続きを読む)

WordPressをSSL化 ― その後のもろもろの処理

さて、このブログも無事にXserverに移転、そしてSSL化運用というのを開始。 とりあえず投稿内の画像やテーマファイルに含まれたパスなども書き換えを終えた。 今の所、警告は出てないだろうと思っている。 が、なんせ2000以上の投稿がある故にそれぞれをチェックする事は無理。 なので「そういえばアレはどうなっておる」という視点から色々とチェックしてみた。 ちなみにこれは当ブログ「ハナモゲラボ」に限った話なので、いささか自分勝手な記事である。 Amazonアソシエイトの発行リンクはどうなってる? なんせ全ての画像パスが絶対パスで挿入されるWordpress。 設置ディレクトリを変更出来るが故にこういう仕様になるのはしゃーないけども さあ、それじゃあAmazonアソシエイトのリンクはどうなっておる……(続きを読む)

WordPressをSSL化 ― Search Regexに潜む罠とは

最近、借りてるサーバをXserverにしたのをきっかけにまずはバンドのサイトをSSL化しました。 https://fauntime.com 暗号化がどーたらとかそういう理由もなく、Xserverなら無料でSSLが使えるのでなんとなく。 このサイトはWordpressで構築しているのですが、WPのSSL化は以下の手順。 まずはXserverの管理画面でドメインに対してのSSL発行 WordPressの設定画面からURLの変更 内部リンクをSearch Regexで全て置換 htaccessにリダイレクト用のコードを追記 SSLのエラーチェック というのがおおまかな手順。 すんなり行くかなーと思いきややっぱりそうはいかない。 こういう作業には必ず何か罠が潜んでいる。 3の「内部リンクをSearc……(続きを読む)

[CSS]ol,liの番号リストにカッコを付ける方法

たまーに約款とかをサイトに載せてって時に原稿をもらうと (1)ほにゃらら~~~~ (2)なんちゃら~~~~ みたいなやつに遭遇する時があります。 list-styeのプロパティにはイロハまであるというのにこのカッコ付というのがない。 こういうのを用意しといてくれても良さそうなもんなんだけども・・ しかし、beforeとafter使ってなんとか出来るのではないかと模索。 まずはhtml部分。 <ol class="parentheses"> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> </ol> そして、CSSはこれで。 ol.par……(続きを読む)

 
1 / 2612345...1020...最後 »

« Apr 2017 May 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31