確認と修正 正確には画像の表示サイズがおかしくなっていたせいで崩れていたんですけど、Google Chromeのデベロッパーツールで調べてみると知らないCSSが…。 html :where(img) { height: auto; max-width: 100%; } /wp-includes/css/dist/block-library/style.min.css 何だろ？これ？追加した記憶がないですし、これのせいで一部の画像（img）の大きさがおかしなことになっていました。それが事で冒頭のレイアウト崩れにつながっているみたいでした。 とりあえず、解決方法としてCSSに以下ソースを追加して回避しましたが原因を調べて根本を解決しなければ意味がありません。 html :where(img) { /* max-width: inherit!important; */ } 調べて見たところどうや
先日案件にてShopifyのコーディング作業に携わりました。 Shopifyの需要は多くなってきていますが、情報がまだまだ少ないので、悪戦苦闘しながらの作業になりました。 （英語の情報が多く、日本語の情報は少ない） はじめに結論を言うと、今回ブログでお伝えしたい注意点は以下の2つになります。 開発作業の複数人展開は上書きに注意 画像ファイルの参照で1手間2手間かかる 前者は主に作業フローにおける注意点で、後者はコーディング上の注意点になります。 上記の要因には、Shopifyコーディングにおけるいくつかの特徴といえる部分が影響します。なぜそうなるか要因となるShopifyコーディングの特徴を合わせて解説します。 ローカル環境で動作確認ができない Shopifyが提供しているTheme Kitを使うことで、ローカルでテンプレートファイルを修正したりすることは可能です。しかし動作確認はShop
Shopifyでテーマフォルダに入れたCSSや画像ファイルを画面に表示する方法を解説します。 テーマフォルダ以外にも管理画面からアップロードしたファイルを読み込む方法についても解説します。 ShopifyでCSSやJSファイルを読み込む方法 cssやjsフォルダの読み込み方法は次の３つがあります。 テーマのassetsフォルダから読み込む 管理画面のファイルにアップロードしたものを読み込む 外部サーバーから読み込む テーマのassetsフォルダから読み込む テーマで使用するCSSやJavascriptファイルは通常assetsフォルダに入れて管理します。 assetsフォルダにあるcssファイルやjavascriptファイルを読み込むには、asset_urlフィルタを使います。 <link rel="stylesheet" href="{{ 'style.css' | asset_url
PCで任意の箇所にいれた改行をスマホでは改行せずに表示したい！っていう、レスポンシブ対応するうえでのあるある。 このあるある問題を解決するとっても簡単な方法をご紹介します。 このような記述の場合 <p>これはレスポンシブ対応時の改行問題を解決する方法です。<br class="br-sp">ここで改行しています。</p> PCではbrタグで改行されて表示されます。 ここに、任意のクラスを付与しておきます。（例では「br-sp」としました。） スマホのとき（例では画面サイズが640px以下の場合）はこのbrタグを表示しなければいいので、以下のcssを追記します。 @media screen and (max-width: 640px) { .br-sp { display:none; } } これで、OK！
javascript でテーブルの特定行の表示を切り替える処理を書いている時にハマりそうになったのでメモする。 FireFox、Safari、Chromeなどでは、CSS で tr要素 に display:block; を指定すると表示が崩れてしまうが、javascript でも当然同じことが言える。 javascript で要素の表示/非表示を切り替える際は、display プロパティを none から block（またはその逆）にして制御するケースが多いが、tr要素 を操作する場合に同じことをすると、上記理由からテーブルの表示が崩れてしまう。 tr要素 の表示を切り替える場合は、以下例のように table-row を使用するか、display プロパティを空にする。 element.style.display = 'none'; // 非表示 element.style.display
表題のとおりなんですが、画像を使わないで、ツリー状のサイトマップを作る方法をご紹介します。 キャプチャのようなサイトマップが出来上がります。 まずはHTMLから。 <section> <h1><a href="#">ホーム</a></h1> <ul> <li> <a href="#">ページ1</a> </li> <li> <a href="#">ページ2</a> <ul> <li> <a href="#">ページ2-1</a> </li> <li> <a href="#">ページ2-2</a> <ul> <li> <a href="#">ページ2-2-1</a> </li> </ul> </li> </ul> </li> <li> <a href="#">ページ3</a> <ul> <li> <a href="#">ページ3-1</a> </li> </ul> </li> </ul> <
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く