Bootstrap4 ブートストラップ4のHTMLがワードプレスで使えるテーマ＜WP Bootstrap 4＞
最近では静的なHTMLページ作成では「Bootstrap」や「Foundation」を利用することがほとんどです。楽天やヤフーショッピングでも「Bootstrap」を多用してます。 そんな過去に作成したページをワードプレスで再利用しやすいテ...
Bootstrap4 ワードプレス テーマカスタマイザーをグレードアップしてくれるプラグイン＜Kirki Toolkit＞
テーマカスタマイザーは、WordPress 3.4で追加された機能です。 WordPressの管理画面上からテーマの変更をリアルタイムで表示確認（ライブプレビュー）しながらカスタマイズできる機能、WordPress管理画面の「外観→カスタマ...
Bootstrap4 Bootstrap4の＜カード（Cards）で画像が縦に伸びてしまう＞IE対策
IEでBootstrap4で使ったページのカード（card）画像が縦に伸びてしまう場合の対処方法 対処方法【1】 h-100クラスをimgタグに追加 対処方法【2】 d-blockクラスをcardクラスに追加 対処方法【３】 スタイルシート...
CSS・HTML 正方形の中に異なったサイズの画像を収める＜レスポンシブ対応CSS＞
楽天やヤフーショッピングのゴールドやトリプルやランキングページを作成するときに同じサイズの正方形の中に異なったサイズの画像を収めたい場合があります。 そんな時に使えるCSS。 高さ、幅を決めた骨組みにイメージを入れます、イメージは骨組みに収...
CSS・HTML 楽天、ヤフーショッピングなどで商品名を3点リーダーで省略する＜複数行に対応CSS＞
楽天やヤフーショッピングのゴールド、トリプルでページを作成する場合どうしても長い商品名を省略したい場合ばあります。 2行で省略、3行で省略、簡単に実現できるCSSが下記、IEにも対応しています。 ※IE対応で見栄えを揃えるため1行省略では定...
ヤフー Yahoo!ショッピングストア＜最新店舗メニューリンク先＞2019年5月末以降
Yahoo!ショッピングストアのトリプル等でページを作成している場合、メニュー項目などで使うリンク先が2019年5月末以降廃止になるものがあります。 5月末以降に旧URLへアクセスがあった場合は、リダイレクトされず、ページ内容は表示されなく...
ヤフー 楽天、Yahoo!ストアのスマホページをPCで確認する・スマホページでPCページを表示させる。
楽天ゴールドでスマホ専用ページを作成する＜2018年7月25日以降の楽天RMSリダイレクト設定＞で書いたのですが問い合わせが多いのでまとめました。 ●●●●●はお店のIDに置き換えてください。 楽天、Yahoo!ストアのスマホページをPCで...
Bootstrap4 Bootstrap4の＜タブナビゲーション＞を理解する
基本 Bootstrap4のタブナビゲーションはボタン部分は基本ナビゲーション（Navs）と同じです、そこにコンテンツ部分へのリンクを貼ります。 ボタン部分 親要素に「nav」クラスと「nav-tabs」クラスを設定する。 子要素に「nav...
Bootstrap4 つい忘れてしまうメディアクエリ(Media Queries)の以下/以上と文字列によるCSSの適用
つい忘れてしまうメディアクエリ(Media Queries)の以下と以上や文字列によるCSSの適用 横幅を条件にしてCSSの適用 「max-width」: 表示領域の最大幅。この横幅以下の場合にのみ適用。 「mix-width」: 表示領域...
お知らせ サイト変更しました
サイトをワードプレス公式テーマ「Twenty Sixteen」で作成しました。カスタム内容は随時Ec Tipで紹介していこうと思います。