Home/Blog/

イラスト表示を画面サイズに合わせる

このサイトのイラストはポップアップ用のhtmlをイラスト毎に用意して表示させています。このやり方自体が古いような気もしますが、これまで作ってしまったものがあるのでなるべくそれを使って、イラストを画面幅に合わせて表示したい。

まずスマホ用のCSSへの切り替え、これは仕方ないのでファイル1つずつタグを加えました。それからサイズの指定、imgタグにcssでwidth: 100%; 、height: auto; としてみたら、見事に出来ました。横長の画像はスマホを横にすればばっちり。

自分のiphoneでしか確認していないので、Androidなどでどうなるか気になるところですが・・・とりあえずはこんなものでいいか。

スマホ用CSSで無駄な横スクロールをさせない

昨日までの作業でとりあえずスマホっぽい表示にはなったものの、見る時になぜかいらない横スクロールが発生。これが地味にイラッとするので何とかならないかと思っていたら、ありました。

https://www.firstsync.net/archives/9691

なんでも画面幅以上に設定されている要素があるのが原因のようです。早速確認してみたんですが・・・細かい設定をしまくったPC用のCSSからいじってあるので、どこが悪いのかよくわからない。これはまいったと思っていたら、ありました。

http://d.hatena.ne.jp/izit_kosuke/20110126/1296067112

ページ全体を囲んでいる要素にoberflew: hidden;を設定して、はみ出た部分は非表示にしてしまうようです。これを試したら見事に縦スクロールのみの、いかにもスマホライクなページになりました!

ページがモバイルフレンドリーではありません

少し前から、検索結果に上の文句がくっついてくるようになっていました。ずっと放っておいたのですが、検索順位にも影響するみたいで、このままではただでさえ少ないアクセスが無くなってしまうと思って対策をしてみました。

やったこととしては、スマホ表示の場合別のcssを読み込ませてピクセルで指定していた各種widthをスマホ画面に合わせるようにする、あまり役に立っているとも思えないサイドバーはこの際display: none;でごっそり隠す、タイトル画像を画面に合わせるようにする、といったもの。

以下のサイトを参考にさせていただきました。

CSSの切り替えはこちら。

http://samuri-blog.net/webdesign/5582.html

タイトル画像の可変化はこちら。

http://qiita.com/39_isao/items/009f2382f87988039215

詳しい解説のおかげでとりあえずテストではモバイルフレンドリーと出るようになりました。切り替えの指定以外いじったのはCSSだけ。CSSって凄いですね。

『マンガ 実録! 死ぬほど怖い人体実験の世界史』

『マンガ 実録! 死ぬほど怖い人体実験の世界史』

宝島社様より3月9日発売の『マンガ 実録! 死ぬほど怖い人体実験の世界史』において、科学者の肖像8点を描かせていただきました。描いたイラストの1点をアップしました。

『マンガ 実録! 死ぬほど怖い人体実験の世界史』より、ヴェルナー・フォルスマン

『江戸の武士 仕事と暮らし大図鑑 (廣済堂ベストムック)』

『江戸の武士 仕事と暮らし大図鑑』

廣済堂出版様より2月18日発売の『江戸の武士 仕事と暮らし大図鑑 (廣済堂ベストムック)』にて、束帯姿の将軍、直垂姿の大名など地位・役職別のイラストを14点描かせていただきました。

描いたイラストから8点をアップしました。

『江戸の武士 仕事と暮らし大図鑑』より、束帯姿の将軍

牡丹唐草段文様

牡丹唐草段文様

大鎧のイラストで使用した、赤地錦鎧直垂の文様。後醍醐天皇の皇子、大塔宮護良親王所用と伝わる直垂に基づいています。少し前まで京都南座の緞帳にもこの文様が使われていたようです。

  • Illustrator
  • 2017/01

絵韋(えがわ)

絵韋

大鎧のイラストで使用した絵韋の文様。絵韋というのは弦走と呼ばれる胴の部分や、兜の吹返しなどに張ってある皮のこと。主に鹿の皮で、型をあてて絵や文様を染め付けるそうです。この文様は源為朝が奉納したと伝わる厳島神社所蔵の『小桜韋黄返威鎧』に基づいて作成しています。

  • Illustrator
  • 2017/01

『大鎧』をアップ

「Statues」に『大鎧』をアップしました。Illustratorで作成しています。以前描いたのがかなり恥ずかしい出来なので、きちんとしたものを描きたいと思っていました。ストック素材にも出品する予定です。出来ればベクタ形式でも出したいのですが、データがぐちゃぐちゃなので果たして。

2017/01/20 追記

ストック素材に出品しました。ベクタ形式も出しています。

  • pixta_logo
  • imagenavi_logo

あけましておめでとうございます

こたつ鶏

あけましておめでとうございます。今年もよろしくお願いいたします。

年賀状用に描いた『こたつ鶏』をアップしました。

サンタコスの女の子

サンタコスの女の子をアップしました。