レスポンシブWebデザインについて考えよう【デメリットを補うには?】

レスポンシブサイト多いですね。
レスポンシブは消去法で最適だけど、最強・万能ではないと思っています😔

レスポンシブの欠点を「でもどうにかして!!」と言われないようにどういった対処ができるか、レスポンシブについてもう一度よく考えてみようと思います🙋

外でパソコンを広げ、青空コーディングをする女の子




レスポンシブWebデザインとは?

デバイスに関係なく、同じURLで同じHTMLコードを使用し、画面幅によってコンテンツサイズが変わるデザインのこと。

少し前までスマートフォンは大体みんな320pxだったので、PC用とスマホ用のHTMLコードを用意してデバイスによってそれぞれを読み込ませればよかったのですが、さまざまなデバイスサイズが存在する昨今、その方法では対応するのが難しくなってきました。

そこで採用されるのがレスポンシブWebデザイン
これで万事解決!

そう思われそうですが、レスポンシブにもメリットとデメリットがあります。

レスポンシブにするメリット

🙆多くの人に見てもらえる

レスポンシブにするとき使用するCSS3は現在ほとんどのブラウザでサポートされているため、多くの人に見てもらうことが可能です。

🙆同一コードを利用するため管理が楽

更新が頻繁にあるサイトの場合、これは重要になってきます。
PC用とスマホ用で2つコードかあると、どちらも更新しなければなりません。

レスポンシブで同一コードの場合、更新は1つのコードで済むので、更新忘れやスマホだけ古いまま…といったことを防げます。

またユーザーのデバイスに適した表示をするので、SNSでシェアされやすいという利点もあります。

🙆Googleに推奨されている

同一コードを利用するため、このデバイスではエラーが出るといった事態を防ぐことができユーザビリティの向上につながります。
またGoogle検索エンジンのクローラーの巡回の手間が少なくなります。
よってGoogleはレスポンシブデザインの使用を推奨しているようです。

Googleの検索順位に関係するモバイルフレンドリーや今後導入するとされているモバイルファーストインデックスにも適しています。

☝️モバイルフレンドリー
スマホでの閲覧に適したページの順位を引き上げ、適していないサイトを引き下げるGoogleのアルゴリズム。

モバイル フレンドリー テスト – Google Search Console

☝️モバイルファーストインデックス
これまでPCサイトの内容を元に評価していたのを、スマートフォンを主軸に評価しインデックス(検索エンジンのデータベースに登録)すること。
評価には様々な基準があり、今後導入予定とGoogleが発表しました。

🙆今後出てくるかもしれないデバイス幅にも対応できる

レスポンシブにしておけば今後もし新たなサイズのデバイスが出てもすぐに対応可能です。




レスポンシブのデメリット

🙅表示速度が遅くなる

同一コードのため、PCとスマホ両方のコードを読み込んでしまう、スマホでもPC用の大きな画像を読み込んでしまうため、特にスマホではページの表示速度が遅くなります。

🙅構築が大変

「同一コードなら作るの楽なんじゃない?」と思われそうですが、基本的に画面に横スクロールバーがでないよう、どの画面幅に対しても綺麗なレイアウトで見せなければならないため、工数は増え構築は繁雑になります。

🙅構築が大変

特に凝ったデザインで複雑なレイアウトだったり、対応デバイスが増えるほどコーディングは大変です。

🙅構築が大変

大事なことなのでもう5回くらい言いたい笑

🙅デザインやレイアウトが制限される

シンプルなデザイン・レイアウトでないとレスポンシブ対応はなかなか難しいです。
凝ったデザインでもなんとかなる場合もありますが、やはり表示速度が遅くなるなどデメリットが目立ってきます。

🙅スマホでのコンテンツ量が多くなり見にくくなる

テキストや画像を沢山載せたページの場合、PCでは見やすくてもスマホの小さい画面になると情報量が多すぎて見にくくなってしまいます。

🙅IE8以下は未対応

CSS3は多くのブラウザ対応とはいえ、IE8以下は残念ながら未対応です😔




レスポンシブの欠点を補うには?

欠点を説明しても、「やっぱりレスポンシブがいい!」となることは多いと思います。
構築が大変とか見る人には関係ないもんね…そうすると利点の方が多いもんね…
完成した後「なんか表示遅くね?」とか「デザイン変わってるじゃん!!」とか言われないために、では、どういった対策ができるでしょうか。

🙋レスポンシブが本当に必要か確認をする

できればデザインを作る前に、レスポンシブかどうか確認した方が今後自分の首を絞めることがなくなります。

🙋ブレイクポイントを詰める

たとえば750px以下はレスポンシブだけど、それ以上は横スクロールバーが表示されるとか、なんちゃってレスポンシブの提案もいいかもしれません。
PC、スマホ、タブレット以外で、わざわざブラウザの画面幅縮めて見るのなんてそうそうない…
動画サイトとお絵かきソフトで2画面するときくらいでしょ…でしょ!!?

ちなみにこのサイトはなんちゃってレスポンシブサイトです(

☝️ブレイクポイント
ブラウザ画面を縮めていったときレイアウトが切り替わるポイントのこと。
CSSで調整する。

🙋できるだけシンプルなデザインにする

デザイナー()としては凝ったデザインにしたいわけですよ!!!
でもそうすると自分の首が絞まるわけですよ!!!!

🙋できるだけテキストベースで作る

画像ベースだと上記のデメリットでページ表示速度が遅くなってしまうので、できるだけテキストベースで作るのが良いかもしれません。
結果工数が増えます笑

どうしてもデザイン性重視で画像を使用する場合は、スライス時に普通なら2、3枚にするところを1枚にし、さらに解像度を下げるなどしてデータを軽くすると良いようです。

🙋スマホメインで作る

スマホ用の画像やCSSを先に記述し読み込ませると、スマホの表示速度が少し早くなるかもしれません。
PCコンテンツ量が多い場合はスマホのコンテンツ量を調整することも必要です。

☝️モバイルファースト
スマホで見やすく使いやすい設計にすること。
PCに比べ画面が小さく回線速度が遅いスマホの場合、スワイプによる操作を中心に、必要最小限の情報を適切なレイアウトで表示させることが必要となる。

🙋jsでIE8以下にも対応させる

jsを利用することでIE8以下にHTML5、CSS3を対応できるようです。

IE8以下でもレスポンシブサイトを有効にする




結局どうすればいいんだってばよ

①レスポンシブが必要かどうかよく考え
②盛り込む情報を精査、スマホでも見やすい設計にし
③テキストベースでPC・スマホ共に構築しやすいレイアウト、デザインにし
④必要に応じてIE8以下にも対応させる

ということだってばよ!!

今のところ全てを網羅するようなベストな代替策は私のようななんちゃってWebデザイナーには考えもつきませんが、きっと今後いろんなアイディアがもっと生まれてくると思います。
同時に問題ももっと生まれたりしないといいね😉まじで😉

あとレスポンシブがこんなに大変って思うのは私の力量不足もあるのかも…とか…
今後もっと勉強していこうと思います!




【参考サイト様】
レスポンシブデザインとは|今更きけない基礎知識とメリット・デメリット|ferret [フェレット]
レスポンシブWebデザインについて知っておきたいこと【作り方入門編】 : ビジネスとIT活用に役立つ情報
モバイルフレンドリーとは?対応して順位を下げないための基礎知識|ferret [フェレット]
モバイルファーストインデックスとは? SEOへの影響と対応方法
【速報】モバイルファーストインデックス、Googleの本番環境にて既に導入が開始 現在の状況と必要な対策とは?
モバイルファーストとは?スマートフォンサイトをデザインする時の考え方 | デジタルハリウッドお役立ちWebマガジン「くりたま」

参考サイト様方、本当にありがとうございます!🙇‍♀️

🎀WebデザイナーによるWebサイトの作り方はこちら!




「死滅回遊」更新しました!

サイト制作を担当した「死滅回遊」を今月も更新しました!

トップページの模様は毎月更新しています!
かわいい模様ばかりなので、私も楽しみです😊✨

そしてお礼をいただいてしまいました!
いつもありがとうございます😍

見て!!!みどりちゃんポストカードとシール☺️
最高にかわいい😭💕

しおりにつけるタグやスティック状の練り香水のインコちゃん達もめっちゃかわいくてニヤニヤしました!

マステもたくさん!ありがとう!!
早速手帳に貼ってみました

ほぼ日手帳 マスキングテープ

やばいこれ…めっちゃかわいい☺️☺️☺️☺️☺️☺️

ほぼ日の1日1ページは来年からだから、みどりちゃんシールは来年貼るのがめっちゃ楽しみです!!!
充実した手帳ライフ✌️

Webサイトをデザインする【スマートフォン対応デザインのコツ】

サーバー、ドメインもどれにするか決めて、イメージが湧いてきたらいよいよサイトデザインです!

その前に…例のアレです…✊

マルチデバイス対応について考えよう😌

スマートフォン、タブレット、PC…
いろんな機種があり画面サイズがあります。

マルチデバイスたちです。
新機種が出るたびぐぬぬ状態です。

少し前ならPCサイトとSP(スマートフォン)サイトの2サイトを切り替えれば済む場合もありましたが、現在はSP対応といってもiPhoneだけで5、6や7、さらにPlusとサイズの違いがあります。

こうなるとレスポンシブWebデザイン(コンテンツが画面幅に合わせて変化するやつ)がいいのかなと思います。
でも設計や制作の手間、表示速度が遅かったりデザインの自由度が下がってしまったり…
欠点もたくさんあるみたいです。最善ではないんですね。

とはいえマルチデバイス対応を考えると、やっぱりレスポンシブはいいなあと思います。
ソース1個ですむし…その1個の分量が多くなるから重くなるんだけどね…笑

今回はPCのみ対応か?SPまで対応か?レスポンシブにするか??
決めておきます。

なぜならデザイン段階で、SP対応・レスポンシブの場合、押さえておきたいポイントがあるからです。

📱スマートフォン用画像は倍で作る

iPhone5で画面いっぱいの幅は320pxですが、画像を作るときは倍の640pxに合わせて作ります。
そうしないと画像がぼやけて表示されてしまいます。

PCと同じ画像を使ったらなんかぼやけてる…となるので、スマホ用画像の準備が必要となります。

スマートフォン用のデザインは幅640pxで作っておけば、ひとまず大丈夫だと思います。

さらに左右の余白は40px以上にしておくとスッキリして見えます。

スマートフォン用のデザインの左右の余白は40px以上

※640pxのとき40pxの余白を作るので、320pxにすると余白は20pxとなります。

📱スマートフォンでのフォントサイズは16px以上推奨

サイトをデザインするときは、基本的にHTMLでのテキスト部分も制作しておきます。

スマートフォン用デザインの場合、フォントサイズは16px以上推奨です。
できれば18pxはほしい…!
小さくても14pxかな、と思います。

このサイトはスマートフォンで12pxなのでちょっと小さいですね。
だめじゃん!笑

そしてボタンもできるだけ大きく作ると使いやすいサイトになります。
なおこのサイトは…🤗

スマートフォン対応はできるだけやっておこう

スマートフォン普及率が上がる昨今、サイトへのアクセスもPCよりスマホからが多いです。
スマホ対応は必然といえるかと思います。

難しそうですが、先にPC用のデザインを制作して、SP用にリサイズしていくと作りやすいです。
PC用デザインを複雑にしてしまうとSP用の制作が難しくなるかもしれないので、できるだけシンプルにした方がいいかと思います。

次回は例を交えて実践していきます!
その次になるかもですが、これさえあればきっとなんとかなる!という魔法の呪文もお知らせします。

大丈夫です、スマートフォン対応こわくないですよ!👍

◀️PREV
【ムームードメイン・ロリポップ・エックスサーバー・お名前.com】独自ドメイン最強伝説

🎀WebデザイナーによるWebサイトの作り方



【ムームードメイン・ロリポップ・エックスサーバー・お名前.com】独自ドメイン最強伝説

前回は初級〜中級編ということで、無料のホームページ・ブログサービスについて書きました。

【FC2・忍者・アメブロ・はてなブログ】無料ホームページ・ブログサービスを比較してみた【WebデザイナーによるWebサイトの作り方①初級〜中級編】

今回は上級編として、独自ドメイン取得・サーバーレンタルについて書こうと思います。

トラックパッドでパソコンを操作する女の子イメージ

🙆独自ドメイン取得のメリット

・突然記事やサイトを消される心配がない
・サイトを見る人にある程度の信頼感を与えることができる
・カスタマイズ性が高い
・アフィリエイトも自由にできる

🙅独自ドメイン取得のデメリット

・費用がかかる
・カスタマイズが上級者向け

ただドメイン取得やサーバーレンタルについてはネットにたくさんやり方が載っているので、初めてでも大丈夫です。
私もできました笑

サイト構築のHTMLやCSSは少し勉強すれば、というかサイトを制作していけば大体わかってくると思いますが、javascriptやPHPは結構勉強しないと難しいかもしれません。

でもサイトのデザインカスタマイズ程度ならjsやPHPはわからなくてもなんとかなります。
なってます笑

どこで取得すればいい?

ではどこでドメインやサーバーを登録するのが一番いいのでしょうか?

CMSはWordpressを利用する場合で考えてみました。

💡手軽に始めるならムームードメイン+ロリポップ

ドメイン代やプランにもよりますが、ロリポップサーバーはスタンダードで月500円とお手頃です。
データベース30個、マルチドメイン100個です。

つまりホームページが100個、Wordpressが30個持てます!

初期費用が1500円かかりますが、ムームーでドメインを取得すれば無料に!
Wordpress簡単インストールもあります。

月々の費用を押さえつつ手軽に始めるならムームードメイン+ロリポップの組み合わせがオススメです。

💡高速・安定を狙うならエックスサーバー

こちらはサーバーのみになりますが、どのサイトを見てもオススメされているエックスサーバー。
月々の費用は数千円するようですが、高速・安定のようです。
36ヶ月分まとめて払うと月々900円みたいですね。

X10(スタンダード)プラン – 料金 | レンタルサーバー【エックスサーバー】



💡手軽かつ山ほどサイトを作るならお名前.com

ドメインとサーバーをセットで申し込めば、ドメイン1年間1円+サーバー2ヶ月間無料

サーバー費用は1年払いにすれば月々900円データベース50個、マルチドメイン無制限と大容量が使用可能です!

ドメイン1年間1円につられて私は現在こちらを利用しています笑
登録の前は気をつけてね🔽
お名前.com利用の際に勝手にはまった落とし穴



💡Whois情報公開代行を忘れずに!

他にもWebフォントが使えたりしますので詳細は各サービスのページを見てみてください!

あとドメインが決まったら「Whois情報公開代行」を忘れずにね!

ドメイン・サーバーが決まったら

サイトデザインが完成してからでも良いですが、できれば先に登録までしておいた方がいいです。
javascriptはサーバー上でないと動作しない場合もあるので、確認しながらの制作となります。

とにかく無料でも有料でもドメインとサーバーを決めて「ここで公開しよう!」というイメージを持ったら、いよいよ本格的にサイト制作です!

◀️PREV
【FC2・忍者・アメブロ・はてなブログ】無料ホームページ・ブログサービスを比較してみた

NEXT▶️
Webサイトをデザインする【スマートフォン対応デザインのコツ】

🎀WebデザイナーによるWebサイトの作り方



【FC2・忍者・アメブロ・はてなブログ】無料ホームページ・ブログサービスを比較してみた

colorboxをスマートフォンで表示させるためのカスタマイズ
のアクセスが多いので、少しWeb制作について語ろうと思います。

このブログでは漫画読んだり刺繍したりしていますが、本業はWebデザイナーです笑
正確には元Webデザイナー?

「自分のサイトを持ちたいけど何から始めればいい?」

「HTMLやCSSの基礎知識はあるけど、どうやってサイトを立ち上げていいかわからない!」

そんな方向けにまずはこちらをどうぞ。

ベッドでパソコンをたしなむインドア派な女の子イメージ

モチベーションを高めよう!

私の場合ですが一番の活力は「このサイトを公開したい!」という欲求です笑

いろんなテンプレートをみて奮起します。

ブログテンプレート一覧からテンプレートを検索しよう! | FC2ブログ

一から自分でデザインする方はこちら。

WEBデザインの見本帳|WEBデザイナーのためのデータベース・リンク集、サンプル・配色・参考・ご提案に!!

イケサイ ウェブデザイナーのWEBデザインデータベース

こちらの2サイトには本当にお世話になっています。
色んなサイトを見て自分のサイトをどんなのにするか決めます。

気に入った部分はどんどん参考にします!
言葉は悪いかもしれませんが、デザインのはじめは真似ることだと思います。

どんどん真似しましょう!
詳しくは別の記事で書きたいと思います。

とりあえず始めは「こんな感じにしよう!」というイメージを決めておきます。

公開場所を決めよう!

ここでいう公開場所とはサーバーのことです。

Webサイトはサーバーに置くことで公開されます。
その場所を示すのがhttpから始まるURLになります(このサイトなら「http://palette33.jp/」)。
さらにそのURLに含まれるのが、そのサイトを表すドメイン(このサイトなら「palette33.jp」)となります。

ドメインは誰かが使っていると同じものは使用できないため、世界で唯一のものとなります。
さらにドメインの取得やサーバーレンタルには本来費用がかかります。

その費用を「広告を表示させることで無料にするよ!」というサービスが幾つかあって
今回は初級中級編ということで、そちらをご紹介したいと思います。

🎊FC2

私が一番オススメするのはFC2です。
私も以前使っていたし、Webサイト制作の依頼は基本こちらにお世話になります。

FC2ホームページ – 無料ホームページスペース
FC2ブログ | 無料で高機能なブログ。デザインは5500種類以上

🙆メリット
無料で使っても広告はフッターに「Powered by FC2ホームページ」の1文のみ。
デザインの幅が広がります!

URLも「(アカウント名).web.fc2.com 」とfc2が短く入るだけ!

さらにブログも自由にカスタマイズ可能なのでサイトにデザインを合わせることもできます。

🙅デメリット
アカウント1つにつきWebサイト1つとなります。
複数サイトを持ちたいときは、メールアドレスを準備してアカウントをもう一つ作らなければなりません。
その切替が煩雑です。

また、1ヶ月ほど更新が滞ると一番上に広告が表示されます。
Webサイトにとってファーストビュー(スクロールせずに見える範囲)は、そのサイトの顔とも言えるとても重要な部分です。
そこが広告で埋まるなんてもったいないし、新鮮な情報を求められるWebで「あ、このサイト更新されてないな」とひと目で分かりページ離脱に繋がります。

よって定期的な更新が必要といえます。

ブログのデフォルトスマホ版は広告が多いのもデメリットです。
これは自分でスマホ対応させることで回避できますが上級者向けです。

あとほとんどのサービスでNGなアダルト向けのサービスがあります。
これはメリットかデメリットかはその人次第だと思います笑

🙆向いている人
・サイトは持って2つくらい
・更新頻度が高い
・サイトとブログセットで欲しい

🎊忍者

こちらも使ったことがあります。

無料でホームページを作成するなら|忍者ホームページ
無料でブログを簡単作成!|忍者ブログ

🙆メリット
FC2と違い同一アカウントでサイトを複数管理できます

🙅デメリット
ドメインがダサい個性派揃いです笑
(アカウント名).○○ 」なのですが、この○○の部分が
「忍者」というくらいなので「sekigaharablog.com (関ヶ原ブログ)」とか「edoblog.net (江戸ブログ)」とかあります。
「mangalog.com (漫画ブログ)」や「dou-jin.com (同人)」などもあるのでぴったりくるのが見つかれば使いやすいです。

一番無難なのが「ninja-web」とかだったと思うので、そこさえよければオススメです!

🙆向いている人
・サイトを3つ以上作りたい
・更新頻度が高い
・サイトとブログセットで欲しい
・個性的なドメインでも気にしない

🎊アメブロ

アメブロはブログのみとなります。

🙆メリット
これも以前使っていたのですが、検索順位が上位に上がりやすいです。
あと読者がつきやすい傾向があります。

アバターやアメーバピグなど独自の楽しみもあります。

🙅デメリット
大幅なレイアウトのカスタマイズができません
CSSは変更できるようですがHTMLは無理なのかな…?
テンプレートを基本にしたカスタマイズは可能なようです。

簡単カスタマイズで自分だけのブログデザインを作ろう!|Ameba (アメーバ)

またアフィリエイトが基本禁止されています。
アメブロ側の独自のアフィリエイト、もしくはAmazonと楽天なら可能ですが、アドセンスやA8等でアフィリエイトを始める予定の方には不向きです。

🙆向いている人
・ブログがあればいい
・ピグをやりたい
・アフィリエイトはやらない

あと個人的なイメージですが、アメブロは芸能人やショップの日常ブログとしての活用が多いように思います。

🎊はてなブログ

これも以前使っていました笑
こちらもブログのみになります。

はてなブログとは – はてなブログ

🙆メリット
利用者の多い「はてなブックマーク」や「はてなスター」と連携しているので多くの人に読まれる可能性が上がります。

🙅デメリット
こちらも大幅なレイアウトのカスタマイズができません
またアフィリエイトも基本禁止されています。
ガイドラインに沿っていればある程度できるみたいです!

🙆向いている人
・ブログがあればいい
・ブログだけでいい
アフィリエイトはやらないA8などでアフィリエイトしたい

こちらも個人的なイメージになりますが、自分の思いを書いたり商品を紹介したり、何かに特化したブログが多い気がします。
はてなブックマークは利用者が多いのでバズりやすい傾向もあると思います。

最後に無料サービスのデメリット

ここまでいろいろおススメしてきましたが、最後にこれら無料サービスのデメリットをあげたいと思います。

🙅規約違反などで突然凍結・削除される可能性がある
🙅サービスがいつ終わるかわからない

予算の関係でどうしても無料で始めたい方にはおススメしますが、ほとんどのサイトで言われているように独自ドメイン最強伝説です。
やっぱりCMS(WordpressやMovable Type)が安心です。
上級者向けとはなりますが、今はたくさん情報があるので調べながらやればなんとかなる面もあります。

ぜひぴったりのサービスを見つけてください!☺️

今後はデザインの基本とかコツとかwordpressの良さとか笑
書いていきたいと思います。

NEXT▶️
【ムームードメイン・ロリポップ・エックスサーバー・お名前.com】独自ドメイン最強伝説

🎀WebデザイナーによるWebサイトの作り方



お名前.com利用の際に勝手にはまった落とし穴

もともとFC2ユーザーだったのですが、独自ドメインとwordpressにあこがれてお引っ越ししました。
その際に契約したのがお名前.com

「えっ初年度1円でいいの!?」

そうなんです。でもちょっと待って!

🙋1円なのはドメイン1年間+サーバー2ヶ月

ドメイン・サーバー1年間1円じゃないんですよ!!笑

サーバー代はデフォルトだと月1620円くらいでした。
独自SSL、迷惑メールフィルターなどオプションを自分で外して、年間でまとめて払うと、謳われている「月900円」になります。
(共用サーバーSD-11の場合)

公式のこのページを良く読んでね🔽
共用サーバーが2ヶ月無料!さらにドメイン1円!

正直ロリポップとかの方が安いし安定してるらしいですが…😌

🙋アフィリエイトが効くのはクレジットカード決済時

クレカ持ってません🙋

お名前サーバーにしてよかったこと

🙆普通に安定して使える

バズるようなサイトでもない笑

🙆Webフォントが使える

新ゴやMB101といったモリサワフォントが使えます!
本文に使用したらジャギって見にくいけどね!!

🙆データベース50個、マルチドメイン無制限

これは結構大きいけど、自分は多サイト運営してないのであまり関係ない…

Webフォントくらいしかよかったのがない~😋
ネットでおすすめされるのはエックスサーバーがダントツです。

もっと気軽に始めるならロリポ+ムームードメインがいいと思います。
職場のサイトでやってみたら(プランにもよりますが)サーバー代は初期費用無料で月500円!

私もこっちにすればよかったな~笑
お名前でも全然不具合ないけどね。ちょっと高かったよね😢



コピーライト表記に変更する【Twenty Seventeen WordPress】

Palette -acrylic-では
wordpressのテンプレート「Twenty Seventeen」を
使用させていただいているのですが
今回はフッターのwordpressリンクを
コピーライト表記に変更してみました。

参考サイト様
ワードプレスのフッターをCopyright(C)に表示して著作権を守る方法 | WordPress指南書
フッターの「Proudly powered by WordPress」をCopyrightに変更 | アフィリエイトで稼ぐ方法を全部話そうと思う

上記参考サイト様をみると、テーマの編集から

<div class=”site-info”>
</div>

内を変更するようになっていますが、
Twenty Seventeenではインクルードされているので
サーバーからフッターデータをダウンロードします。

以下のパスにある「site-info.php」をDL!

/wp/wp-content/themes/twentyseventeen/template-parts/footer

そしてsite-info内を下記のように書きました。

Copyright © <?php echo date('Y '); ?> <a href="<?php echo home_url( '/' ); ?>" title="<php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">><?php bloginfo( 'name' ); ?> </a>All Rights Reserved.

これでコピーライト完成です!

Copyright © 2017 Palette -acrylic- All Rights Reserved.

と表記されました!
年数も自動で更新されるのでとっても便利ですね☺️💕

参考サイト様方、本当にありがとうございました🙏🙏🙏

サイト、ブログ移転のお知らせ

なんとドメイン取得しました。

ということで移転しました。
今後ともよろしくお願いいたします。

サイト
http://palette33.jp/

ブログ
http://palette33.jp/blog/

あ~あこがれの~
独自~ドメインに~~
なーったーよ~♪

あわせてどうぞ!🔽
お名前.com利用の際に勝手にはまった落とし穴



サイト制作担当しました!【死滅回遊】Zn様

大分を中心に活躍中のアーティスト
Zn様のサイトを制作させていただきました!

170613.jpg

さまざまな模様でいろんな動物を表現した
とっても素敵な代表作「模様生命体」など
多数の作品をご紹介

ぜひご覧ください(*´ω`*)

死滅回遊
http://abortivemigration.web.fc2.com/

制作について少し…

レスポンシブ挑戦してみました!
画面サイズを変えても
サイトの内容が見れるようにしてあります。
バグがなければ!!(

とっても勉強になったし一つ自信がつきました(^o^)

実は制作にはかなりの期間かけてしまったのですが
心優しく対応してくださったZn様に感謝感謝です!

今後も更新等々がんばっていきますので
ぜひぜひお気に入り登録してチェックしてください





colorboxをスマートフォンで表示させるためのカスタマイズ

絵描きさんは絵を描く休憩に絵を描くっていうけど
サイト作る休憩にサイトを作るという暴挙(
レスポンシブむつかしかったんや…パソコン用から完成させるね

さて、このサイトでは、画像の拡大表示に
colorbox」を使用させていただいております。

今回休憩にサイトのスマートフォン対応を進めているんですが、
colorboxをPCと同じに使っていると
画像が超でかくなったり、変な位置に表示されたり、
背景(拡大したとき暗くなるとこ)の下に表示されたりしちゃいます。

151108_01.jpg 151108_02.jpg

そこで回避策を実行しました。
一部無理やりで正しいのかわからないけどw
メモしておきます!

パソコンと同じhtmlを使う場合で
jsやメディアクエリなんかを使って振り分けている想定です。
jsは詳しくないのもあり(^q^)ここは省略します!

あとcolorboxのデザインはデフォルトで、実機検証はiPhone5です。

「スマートフォンの場合colorboxを使用させない」という手もあるかと思いますが
むつかしくてできませんでした(^q^(^q^(^q^笑

それでは回避策です。

※まだスマートフォン版は公開していないので
ひとまずは載せてる画像を参考にお願いします。

→2015.5.1公開しました。(以下追記あり)




1.拡大画像が画面からはみ出て、大きく表示されてしまう

151108_07.jpg

jQueryのlightbox系のプラグインColorboxをiPhone(スマホ)で使う」(kagzugiの備忘録 様)

にあるソースをお借りします。

ちなみに画像の高さがブラウザサイズ内になる「maxHeight」を使うと、
縦に長いイラストが小さくなり、このサイトの場合
PCで見にくくなっちゃいます。twitterみたいに

ひとまずは速さもおいて、[]内も適宜変え、
下記のように書きました。

<script type="text/javascript">
$(function() {
$('a[class^=group1]').colorbox({maxWidth:'100%'});
});
</script>

これで画像がスマートフォンでも見やすいサイズになりました。




2.変な位置に表示されてしまう

151108_03.jpg

サイズはなおったけど
表示領域を超えていたり、それで逆に画像が小さくなりすぎたり
ページが全面に表示されなかったり…

そういうときは「jquery.colorbox.js」を触ります。

このjs内の「initialWidth」と「initialHeight」は
画像が表示される前、あのクルクル回ってるやつが出るときのサイズです。

151108_08.jpg

これが600とかスマートフォンの幅より大きいと、
変な表示になってしまいます。ですので

initialWidth: "250",
initialHeight: "100",

としてみました。

iphone5できれいに表示されました。

これで表示領域を超えてしまうことはなくなります。

ちなみに、1でおいておいた速さですが
ここで「speed」の数値を変えても反映されるのかな…?
検証はしてません(X3_ヽ)_




3.画像が背景の下に表示されてしまう

151108_04.jpg

2でうまくいかない場合も活用できます。

スマートフォン(android・iPhone)に告ぐ!Lightbox 表示したければ、jquery.colorbox.js だ!!
(BLUE STYLE LOG 様)

を参考にさせていただきました。

1のソースに書き足します。

<script type="text/javascript">
$(function() {
$('a[class^=group1]').colorbox({maxWidth:'100%',top:true});
});
</script>

これで通常通り背景の上、中央に表示されます。

が、記事の通り、画像表示位置は上部に固定されてしまいます。

スマートフォンだけならしょうがないかな…と思いましたが、
そういえばPCと共用のソースでした。

head内のjsなので、cssでの振り分けはできません。
振り分けるjs、書けません笑

そこで強行策です。
スマートフォンではもう背景を消してしまいましょう!

z-indexとかやってみたけどちょっと違うのかなあって…
背景がなければ潜ることもできなくなるだろうふははは

触るのは「colorbox.css」です。
メディアクエリを使えば、スマートフォンのみで適用できます。

#cboxOverlay{
background:url(images/overlay.png) repeat 0 0;
}
↓
#cboxOverlay{
background:none;
}

これで背景は非表示になります。

デザイン的にはおしい感じになるけど
画面いっぱいに画像が表示されるスマートフォンなら
背景なくてもまあいいかなあと思いました。

※今回変更したcolorboxのjs、css以外をアップして公開してみたところ、上記2、3の現象は起きませんでした。
公開中のサイトでは黒背景ありとなっています。
どっかへんな書き方してたのかな…
ということで変更部分は、以下のおまけと
2の「initialWidth」と「initialHeight」の数値
(不具合はないが表示がずれていて気になったので)のみです。
(2015.5.1追記)




おまけ
長いタイトルを全文表示させる

151108_05.jpg 151108_09.jpg

画像の下に表示されるテキスト、
hrefの「title」に書いてる部分ですが、
私のサイトをスマートフォンで見ると最大3行になるようです。

でも1行しかちゃんと読めなかったり
ボタンの下に隠れてしまったり…
そんなときは4と同じく「colorbox.css」を修正します。

まずは画像下の余白を広げます。

#cboxLoadedContent{
margin-bottom:28px;
}
↓
#cboxLoadedContent{
margin-bottom:100px;
}

ボタンの位置も変えましょう。

「#cboxPrevious」「#cboxNext」「#cboxClose」の
bottom:0;
↓
bottom:70px;

これで短いテキストだと、デザイン的には残念な感じになるけど笑
長いテキストも読めるようになりました。

151108_06.jpg

以上、「スマホ?スマフォ?わかんないからスマートフォンって書こう」
間違えました、「colorboxをスマートフォンで表示させるためのカスタマイズ」でした。
参考サイト様方、本当にありがとうございます!

ちなみに「colorbox.css」でのid名は
もしかしたら変わってたりするかもなので
念のためデベロッパーツールなどで確認してみると
良いかと思います!

ああ~~マルチデバイスススススs




🎀WebデザイナーによるWebサイトの作り方はじめました!