ミフネWEB-神戸

WEB制作 全般

css一行でできるCLS改善(slick.jsの場合)

slick.jsを使用している場合にcss一行でできるCLS対策を解説します。CLSとはページ描画後に発生するレイアウトのガタつき度合いです。影響を受けた範囲×移動した%で算出されるので、ページ上部に使われやすいスライダーはCLSの値が大きくなる原因となりやすいです。
ケーススタディ

[カラーミーショップ]クイックカートイン画面に商品サジェストを追加して効率的にクロスセル販売

単一商品の購入が主なショップ様はさておき、1度の注文で複数商品を購入されることの多いショップ様だと、いかに関連商品を効率よくアピールするかは重要なポイントです。...
BASE (ベイス)

「BASEのおすすめショップ事例11選」に選出していただきました

弊社が制作した「Noweee(ナウウィー)」様のネットショップ(で作成)が、Web幹事のおすすめショップ(アパレル部門)で選出されていました。こうして陽の目を見...
ネットショップ

独自ドメインを利用する場合の違い。カラーミー(フリープラン) vs BASE

無料で、独自ドメインでネットショップを始めたい。というご相談がありましたので、それが可能なBASEとカラーミーショップ(無料プラン)を比較してみました。どちらのサービスも独自ドメインの利用は無料でできますが、それぞれに制約があります。独自ドメインの設定方法、必要な設定、サブドメインの利用などについて、かんたんに違いをまとめています。
WEB制作 全般

sublime textでminifyが動かなかったので修正した話

ここ1年ぐらいVS codeに浮気していたので、久しぶりにsublime textを使おうと起動したところ、なぜかminifyが動かないというエラーが発生。co...
WEB制作 全般

レスポンシブ画像のまとめ

ブラウザサイズや解像度(retinaディスプレイ / デバイスピクセル比)に応じて画像ファイルを振り分けるレスポンシブイメージ。srcset sizes などのタグを使ったレスポンシブ画像の記述方法についてまとめます。
WEB制作 全般

モダンブラウザのconic-gradient対応が完了していた[CSS]

円錐状のグラデーションを描写するconic-gradient。conicはconicalのことだそうです。コーヒーミルの種類にコニカルカッターってありますけど、...
らくうるカート

らくうるカート制作キャンペーン【終了】

最近、新規ネットショップ出店先として、「らくうるカート」は非常に優れているのではないだろうか、と考えるようになりました。他ショッピングカートASPと比べて若干ハードルが高く感じるものの、ネットショップにかかる大半の業務を自動処理できる・月あたりのコストは低い、などメリットはかなり大きいと言えます。通常の制作料金から大幅に値下げしたキャンペーン価格でお受けしています。テンプレート制作だけなら10万円以下という破格です。破格ですので、ある程度で終了させていただきますのでご了承ください。
WEB制作 全般

グローバルナビゲーションをカスタマイズする[WordPress Cocoonテーマ]

word pressのグローバルナビゲーションをカスタマイズする際に必要となる、wp_nav_manu() とカスタムウォーカーの使い方について実例込みで説明しています。全般的なナビゲーションやコンテナ出力についてはwp_nav_menu関数で指定し、子要素以下の細部の設定はカスタムウォーカー(walkerオプション)で指定していく、という流れになります。
WEB制作 全般

font-sizeはclamp()関数で指定するのが良さそう

これまでcssのサイズ指定はスクリーンサイズ別に指定していましたが、clamp関数を使うことで一行にすべてが収まります。たとえばwidth:50vw;min-width:300px;max-width:1000px というcss指定は、width:clamp(300px,50vw,1000px); の一行に収まります。
WEB制作 全般

CSS:text-decorationでできること

text-decorationプロパティは以下のプロパティを一括指定するショートハンドです。text-decoration-line(線の位置) text-decoration-style(線の形) text-decoration-color(線の色) text-decoration-thickness(線の厚み)
WEB制作 全般

slick.jsのオプション設定をPC / モバイルで切り替える

slick.jsのレスポンシブ設定について説明します。レスポンシブ設定といっても『viewportに合わせたサイズで表示する』といった話ではなく、たとえばPCビューではドットを表示する、タブレット以下では表示しない、などのオプション切り替えの話です。slick.jsにはresponsiveオプションがあらかじめ用意されているので、respoinsiveオプションで、breakpointとsettingsを指定してやるだけです。respondToではレスポンシブ設定を基準を指定します。