Firefoxで背景画像が表示できない場合の対処方法

2018.08.13

Chromeでは表示できているのに、Firefoxでは背景画像が表示できないという問題が起こりました。

svgの書き出し方なのか、パスの指定の仕方なのかなど、解決までに検討しましたが、問題は背景画像のショートハンドの書き方でした。

背景についての記述をまとめて、background: の中に記載していたのですが、その順番に問題がありました。

【FFで表示されなかった記載】
background: url(../img/〇〇.svg)center center no-repeat /contain;

【FFで表示される記載】
background: url(../img/〇〇.svg)center center no-repeat /contain;

つまり、サイズ指定である「/cotain」は、位置指定「center」などの後に記載する必要があるということのようです。

CSSの表記方法の誤りのようなのですが、Chromeで表示できていただけに、解決までに時間がかかってしまいました。

もし同じような問題が生じている方は、記載の順番に誤りがないか一度確認してみて頂ければと思います。


Adobe Photoshop CC 2015でツールバーのカスタマイズができない場合の対処方法

2018.07.04

ツールバーの切り抜きツールが表示されなかったため、調べたところ下記のページを見つけました

ツールバーでツールが見つからない

編集→ツールバーからツールバーの表示内容を変更できるという内容になっているのですが、どうしても編集の中にツールバーが見つかりません。

しばらく色々と調べたのですが、下記のページにて新機能として紹介されていることを考えると、おそらくですが、自分が使用していた「Photoshop CC 2015の0.1」では、ツールバーのカスタマイズが提供されておらず、2016年にアップデートで追加された機能だった可能性が高そうです。

[Photoshop]ツールバーをカスタマイズできるようになった!

結果、Photoshop CCを2018バージョンにアップデートしたところ、切り抜きツールもツールバーのカスタマイズ機能も無事表示されました。

アップデートはマメにした方がいいですね…。

同じようなことが起こっている方がいらっしゃれば、もし参考になりましたら幸いです。


SVG画像を横幅100%・縦幅100%で背景に設定できないときの対応方法

2018.07.01

SVG画像を横幅100%・縦幅100%で背景に設定した際に、GoogleのChromeで見ると画像がコンテンツサイズに縮んでしまうという現象が起きました。

調べてみたところ海外の質問サイトに回答がありました。

background-size:100% 100%; doesn't work properly in Chrome

SVGファイルをテキストエディターで開き、「preserveAspectRatio="none"」というタグを、SVGタグ内に埋め込むことで解決しました。

<svg id="レイヤー_1" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1369.01 516.51"><defs><style>.cls-1{fill:#faf9f4;stroke:#c8ab8a;stroke-miterlimit:10;stroke-width:0.5px;}</style></defs><title>content_bg</title><polygon class="cls-1" points="1368.26 515.76 0.75 515.76 0.75 43.91 684.51 0.76 1368.26 43.91 1368.26 515.76"/></svg>

下記のページに詳しい解説が記載されています。

https://www.yootheme.com/support/question/6801?order=modified

もし同じような問題が起こっている方がいれば、ぜひ参考にして頂ければ幸いです。


PHOTOSHOP CCでアートボードをレイヤーごとドラッグして移動させる方法

2018.06.29

PHOTOSHOPのアートボードを使って、ページごとにワイヤーフレームやデザインの制作を行うことがよくあります。

その際、アートボードを複製するとその場に複製されるため、移動させようとするのですが、アートボードを選択してドラッグしてもアートボードだけが移動してしまい、レイヤーがついてきません。

この解決方法を見つけたので、メモです。

これは、レイヤーウィンドウでアートボードとレイヤーを両方選択してからドラッグすると上手くいきます。

今まで十字キーで移動していたので、すごく時間がかかっていました。

気づいてみれば、当たり前すぎる方法なのですが、とても重宝しています。

もし同じように困っている方がいらっしゃれば、参考にして頂ければ幸いです。


Instafeed.jsを設置する際、InstagramのユーザーIDを調べる方法<2018年>

2018.06.22

インスタグラムを表示するための、jQueryプラグイン「Instafeed.js」。

instafeedを使い方については、下記のページが参考になります。
https://www.ni4.jp/2017/05/post_87.html

ただ、おそらくインスタグラムAPIの仕様変更により、2項目目のユーザーIDを取得するためのページである「Find my Instagram User ID - Smashballoon」が使用できなくなっているようです。

そこで、ユーザーIDを確認する方法を調べたのですが、調べ方が良くなかったのか、ピタリとくるものがありませんでした。

ワードプレスのプラグインを使用する方法もあるようですが、自分が選んだのは下記の方法です。

上記ページの3つ目の項目である「アクセストークンを取得する」を先に実行します。

アクセストークンの取得には、下記のようなURLをブラウザに打ち込むことで表示されるのですが、クライアントIDとリダイレクトURLだけあれば対応できるので、ユーザーIDを先に取得する必要はありません。

https://instagram.com/oauth/authorize/?client_id=クライアントID&redirect_uri=リダイレクトURL&response_type=token

またクライアントIDとリダイレクトURLの取得については、前述のページに詳しく記載がありますが、INSTAGRAM APIの管理画面より取得が可能です。

アクセストークンは下記のように表示されます。

https://kugenuma-3c-design.com/#access_token=0000000000.xxxxxxx.yyyyyyyyyyyyyyyyyyyyyyyyyyy

アクセストークンは「0000000000.xxxxxxx.yyyyyyyyyyyyyyyyyyyyyyyyyyy」の部分で、

ユーザーIDは、最初の「.(ドット)」の前の「0000000000」になります。

アクセストークンの中にユーザーIDが含まれているということです。

もし、ユーザーIDがわからなくて困っている方がいらっしゃれば、参考にして頂ければと思います。

 

 


1234

最新の投稿

お問い合わせ・お見積り(無料)






Contact