ウェブ制作四方山話

Apr 7, 2017

フル画面のスライドショーを自分のブログに実装してみました。これまでのブログ投稿からお気に入りの写真をピックアップしたスライドショーです。

imgのsrcをbackgroundのurlに置き換える

画像をフル画面表示するには、画像を背景にすることでccsのbackground-size:coverが使えるので便利、アスペクト比を維持して親要素の縦横の長い方に合わせてくれて、レスポンシブにも対応できます。

DrupalのViewsのフィルタで選択した画像フィールドの画像を抽出するとだいたいこんな感じのHTMLができあがります。Drupalでなくても応用の効く方...

続きを読む
Aug 3, 2016

この自分の営業用サイト(ueroku.net)の何度目かのリニューアルを行いました。基本的なサイト構成は前回のリニューアルとと変えていないのですが、細部をひとつひとつ見直し、今後もっと積極的に更新していけるような仕組みを組み込みました。

主なリニューアルポイントです:

ウェブ制作四方山話

上町のおっさんの鳥鉄日記(旧:上町のおっさんのブログ)で書いていた、Drupal関連等やウェブ制作関連のコンテンツをこの営業用サイトに移転を図ってきたのですが、何度かトライしたものの、なかなか続かず、SEO的にもかなり拙い状態で放置されていることに気づきました。

... 続きを読む
Jul 11, 2016

このサイトをSSL化しました。トップページに問合せフォームを設置していることもあり、サイト全体をフルSSL化しています。

Let's encriptとか無料のSSL証明書サービスが正式サービスを開始しており、その導入にチャレンジしてみたのですが、通常のSSLとはインストールの手順がだいぶ違っていて、色々読んでみたけどイマイチピンと来ません。特に一時的にapacheを停止しなければならないみたいで、うなってしまいました。

最近SSL証明書が値上がり傾向なのですが、改めてググってみたところ、CoreSSLという証明書が年間1,000円程度で導入できることが...

続きを読む
Jul 5, 2016

ウェブサイトのタイトルや要約、画像、URLなどの情報を正確にFacebookにフィードするためのOpen Graphメタタグ(OGP)、Facebook疲れ、といった言葉もチラホラ聞こえる一方、TwitterでもOGPが使われるようになって、OGP自体の重要度は下がっていないと思います。

DrupalではOpen Graph meta tagsというOGPの設定に特化したモジュールがずいぶん前から配布されていて、自分も以前はこれを使わせてもらっていたのですが、何かと使い勝手がよくなくて(スミマセンだいぶ前なので詳しくは覚えていません)、Metatag moduleに乗り換え...

続きを読む
Jan 5, 2015

ueroku.netリニューアルのコンセプト、使ったスクリプト等をブログでまとめてみました。ご参考になることがあれば幸いです。

Dec 26, 2014

アピールしたいことをできるだけシンプルな文章とインパクトのある構成でお伝えすべく、全部を1ページに収めるサイトにしてみました。もちろんレスポンシブデザインなので、スマホやタブレットでもパソコンの全画面でもOKなので、ぜひお試しください。

スマホの場合は上下左右のスワイプジェスチャー、パソコンの場合はマウスのスクロール、またはキーボードの矢印キーで移動です。

Jun 23, 2013

トップページをEdge Animateを使ったアニメーションにしてみました。営業用にレスポンシブデザインの説明をしてみたのですが、ちゃんと伝わっているかどうかちょっと心配です。

このアニメーション自体がレスポンシブです。ブラウザの幅を狭めて、再読み込みして試してみてください。アニメーション内のノートパソコンのエレメントはレスポンシブにサイズを縮小、スマホとタブレットのエレメントはそのまま縮小すると小さくなりすぎるので、サイズを縮小せずに位置を変えるようにしています。そのためスマホサイズではスマホのエレメントは場面によっては画面からはみ出す感じにしています。...

続きを読む
Jun 1, 2013

このところ、運用中のサイトの、Drupal6からDrupal7へのアップグレードを何度も繰り返しています。HTML5やCSS3への対応はDrupal6でもできないことはないでしょうが、Drupal7にすることで、Drupal7用のテーマやモジュールの活用して、ずっと快適にHTML5やCSS3へ対応できる環境が構築でき、またより広範にグローバルな最新のテクニックを導入することが可能になるはずです。

このDrupal7へのアップグレード方法について、自分なりの備忘録を兼ねて手順をまとめてみます。

Drupal6からDrupal7へのアップグレードはDrupal5か...

続きを読む
May 23, 2013

IBM PS/V Vsionのあと、Windows95が発売された翌春に購入したパソコンがGateway2000 P5-133というマシンです。PS/V VisionにWindows95を入れてもまともに動かなかったのが理由です。

CPUはPentium 133MHz、メモリが32MB、1GBのHDDだったはずで、70cmくらいもあるフルタワー、これにナナオの17インチモニタをつけて、50万+αしました。これを24ヶ月くらいの分割払いで買った記憶があります。

当時、そんな羽振り良かった記憶はないのですが、よくこんなものを買ったもんだ、と不思議なりま...

続きを読む
May 21, 2013

ドコモの2013年夏モデル、やっぱりガラケーが1点もありませんね。よくみると1年前のモデルのカラーバリエーションが発売されたりしているようですが、春モデルもスマホばかりだったので最新のガラケーは2012年冬モデルということになります。

なかには「シンプルUI」とかいって、ガラケー風のユーザーインターフェース搭載をウリにしているものもあるのですが、それがBlueTooth、何に使うのかよくわからない赤外線通信、おサイフケータイ、ワンセグ、テザリング、しゃべってコンシェル、等々「全部入り」だそうです。

シンプル...

続きを読む
©Uemachi Web Factory