カスタマイズ on qwerty.work

【STUDIO】ブレークポイントの追加/削除/変更/調整

Fri, 28 Jun 2024 00:00:00 +0000

ノーコードでホームページ制作ができるSTUDIOで、表示デバイスの画面幅に合わせて表示する可変レイアウト（レスポンシブ）対応についてメモ。

様々なデバイスが世の中に溢れていて、それに対応するためのレスポンシブですが、「パソコン、タブレット、スマートホンの３つに対応すればヨシ」という訳にはいかないことが多々あります。特にパソコンとタブレットの間のMicrosoft Surface Proや、縦だとスマホ、横にするとタブレット表示になるiPhoneなど、ノーコードツールとはいえ、細部までこだわったサイトにしようと思うと、ディープな設定が必要になってきます。そのようなときにやってみたことを、ここにメモ。

STUDIO標準のブレイクポイントの追加/削除

標準　1280px以上（パソコン向け）
スモール　1140pxまで（小型ノート向け）
タブレット　840pxまで
モバイル　540pxまで（スマホ向け）
ミニ　320pxまで

それぞれ、既定の幅を数値の入力か、マウスドラッグで変更が可能です。ただし、上記の5つのブレイクポイントの他に追加ができません。

https://help.studio.design/ja/articles/4954050-%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%96%E3%83%AC%E3%82%A4%E3%82%AF%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88 https://help.studio.design/ja/articles/4954050-%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%96%E3%83%AC%E3%82%A4%E3%82%AF%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88

カスタムコードでCSSを書く方法もある

標準のブレイクポイントの数以上にオリジナルで追加したい場合は、有料プランにあるカスタムコードに直接CSSを書くしかなさそうです。カスタムコードに書いたCSSはプレビューでは反映されません。更新ボタンで公開したサイトで反映されるので、テスト的に使う場合は一般の目に触れないように注意することが必要です。

ここに手を付けると、もはやノーコードではない気がしますが、コーディングして制作するよりも制作は随分楽です。

Surface Pro 7+をタブレットのレイアウトに含めたい

iPadはタブレットのブレイクポイントで作成しますが、タブレットに近いサイズのSurface Pro 7+はスモール（PC）として認識されます。これを縦向きにしても、ほぼタブレットサイズに近いのに、スモールまたは標準のブレークポイントで制作したサイトが表示されます。

その場合の対応として、

タブレットのブレイクポイントを840ピクセルから912ピクセルに変更する
カスタムコードにCSSを書く

このどちらかになるかと思います。

カスタムコードの例

Surface Pro 7+の縦向き対応

STUDIOのブレイクポイントを変更せず、タブレットのデフォルト幅840px以上である841px～1023pxの間で縦向きだった場合のカスタムコードで対応する例。

<style>@media screen and (min-width: 841px) and (max-width: 1023px) and (orientation: portrait) {   #対象のid .sd.appear {       ここにルールを書く   }}</style>

【Wordpress】各記事のページに投稿編集用のリンクを設置

Mon, 19 Dec 2022 00:00:00 +0000

サクッと編集するためのリンクを設置したい

Wordpressの記事を投稿した後に、誤字脱字の訂正や間違いの変更、追記など行うことがよくりますが、その度にログイン画面のURLを打ったり、お気に入りからログイン画面を出すのが面倒です。

そこで、投稿ページの記事内に編集用のリンクが欲しいなと思ったので、やり方をいくつか見つけたのでメモ。

記事の最後にリンクを設置する方法

function.phpにコードを追加して、記事の一番下に編集用のリンクを設置する方法の参考ページ。

https://q-az.net/wordpress-entry-edit-button/ https://q-az.net/wordpress-entry-edit-button/

記事内の任意の場所にリンクを設置する方法

single.phpにコードを追加して、任意の記事内の任意の場所にリンクを設置する方法の参考ページ。

https://jiguma.com/wp-edit-button/ https://jiguma.com/wp-edit-button/

その他参考

https://www.miso.blog/wordpress-get-admin-url/ https://www.miso.blog/wordpress-get-admin-url/

【SharePoint】編集フォームのレイアウトを変更する方法メモ

Wed, 25 May 2022 14:10:57 +0900

フォームのレイアウトを複数列にしたい

ShraePointのリストに新規レコードを追加したり、既存のレコードを編集したりする際、デフォルトの状態だとフィールドが縦一列に並んで表示されます。フィールド（列）が少ないと問題ありませんが、登録したい項目が多いとスクロールしたり、情報が部分的にしか見れないため不便です。

そこで、複数列にできないか方法を探したところ、「レイアウトの構成」から「コードの書式設定」にJSON形式で設定を記述すれば、ある程度はカスタマイズできることがわかりました。参考になったページをメモ。

参考ページ

https://www.micknabewata.com/entry/sharepoint/list-form-configuration https://www.micknabewata.com/entry/sharepoint/list-form-configuration

https://idea.tostring.jp/?p=6886 https://idea.tostring.jp/?p=6886

https://pa-wsc.work/2022/03/31/spo_json_list_custom/ https://pa-wsc.work/2022/03/31/spo_json_list_custom/

https://qiita.com/maekawawawa/items/b814d08cefb3911b5cf9 https://qiita.com/maekawawawa/items/b814d08cefb3911b5cf9

マイクロソフトのページ

https://docs.microsoft.com/ja-jp/sharepoint/dev/declarative-customization/list-form-configuration https://docs.microsoft.com/ja-jp/sharepoint/dev/declarative-customization/list-form-configuration

複数列にしたいときの書式例

とりあえず、以下の書式を「コードの書式設定」に貼り付けて必要なフォールド名を書き換えていくことで、感覚が掴めると思います。

{
    "sections": [
        {
            "displayname": "",
            "fields": [
                "Title"
            ]
        },
        {
            "displayname": "Details",
            "fields": [
                "Department",
                "Email",
                "Country"
            ]
        },
        {
            "displayname": "Application",
            "fields": [
                "Application Id",
                "Approver",
                "Reviewer"
            ]
        }
    ]
}

ヘッダーのカスタマイズ

簡易版

とりあえず、ヘッダーに色の付いたタイトルを表示したいときは以下ソースを「ヘッダー」の「コードの書式設定」に貼り付ければ適用できます。

{
    "elmType": "div",
    "attributes": {
        "class": "ms-borderColor-neutralTertiary, ReactClientFormDefaultHeader"
    },
    "style": {
        "width": "99%",
        "border-top-width": "0px",
        "border-bottom-width": "1px",
        "border-left-width": "0px",
        "border-right-width": "0px",
        "border-style": "solid",
        "border-color": "#ccc",
        "margin-bottom": "16px",
        "color": "#974B8B"
    },
    "txtContent": "=[$Title]"
}

アイコン付き版

ヘッダーにアイコン付きのタイトルを表示したいときのソース。

{
    "elmType": "div",
    "attributes": {
        "iconName": "Group",
        "class": "ms-borderColor-neutralTertiary, ReactClientFormDefaultHeader"
    },
    "style": {
        "width": "99%",
        "border-top-width": "0px",
        "border-bottom-width": "1px",
        "border-left-width": "0px",
        "border-right-width": "0px",
        "border-style": "solid",
        "border-color": "#ccc",
        "margin-bottom": "16px",
        "color": "#974B8B"
    },
    "txtContent": "=[$Title]"
}

アイコンについて

タイトルの左側に表示されるアイコンは"iconName": "Group"で指定していますが、他のアイコンに変更したいときは以下のページでアイコンを探し、アイコン名を変更すれば可能です。

https://uifabricicons.azurewebsites.net/ https://uifabricicons.azurewebsites.net/

https://developer.microsoft.com/en-us/fluentui#/styles/web/icons#icons https://developer.microsoft.com/en-us/fluentui#/styles/web/icons#icons

カテゴリによってアイコンを切り替えたいとき以下のページによると、IF文を使ってカテゴリ名によって表示するアイコンを切り替えることができるようです。

https://www.hogehoge-note.com/2020/02/15/post-695/ https://www.hogehoge-note.com/2020/02/15/post-695/

その他参考ページ

https://qiita.com/Momono_gg/items/58bf768fb83bddfbdca1 https://qiita.com/Momono_gg/items/58bf768fb83bddfbdca1

https://qiita.com/Momono_gg/items/dc6b3253e4c0c64cf170 https://qiita.com/Momono_gg/items/dc6b3253e4c0c64cf170

【EC-CUBE】関連商品プラグインで表示される商品一覧をカスタマイズしたいとき

Fri, 18 Feb 2022 14:55:37 +0900

デフォルトのソース

何もいじっていなければ、テンプレートは以下のようになっているはずです。これをカスタマイズします。

/app/Plugin/RelatedProduct4/Resource/template/front/related_product.twig

<script>
    $(function () {
         $('#RelatedProduct-product_area').appendTo($('.ec-layoutRole__main, .ec-layoutRole__mainWithColumn, .ec-layoutRole__mainBetweenColumn'));
     });
</script>
<div id="RelatedProduct-product_area" class="ec-shelfRole">
    <ul class="ec-shelfGrid">
        {% for RelatedProduct in Product.RelatedProducts %}
            {% set ChildProduct = RelatedProduct.ChildProduct %}
            {% if ChildProduct.Status.id == constant("Eccube\\Entity\\Master\\ProductStatus::DISPLAY_SHOW") %}
                  <li class="ec-shelfGrid__item">
                    <a href="{{ url('product_detail', {id : ChildProduct.id}) }}">
                        <p class="ec-shelfGrid__item-image">
                            <img src="{{ asset(RelatedProduct.ChildProduct.main_list_image|no_image_product, 'save_image') }}">
                        </p>
                        <p>{{ RelatedProduct.ChildProduct.name }}</p>
                         <p>
                              {% if RelatedProduct.ChildProduct.hasProductClass %}
                                  {% if RelatedProduct.ChildProduct.getPrice02Min == RelatedProduct.ChildProduct.getPrice02Max %}
                                      {{ RelatedProduct.ChildProduct.getPrice02IncTaxMin|price }}
                                  {% else %}
                                     {{ RelatedProduct.ChildProduct.getPrice02IncTaxMin|price }} ～ {{ RelatedProduct.ChildProduct.getPrice02IncTaxMax|price }}
                                  {% endif %}
                              {% else %}
                                  {{ RelatedProduct.ChildProduct.getPrice02IncTaxMin|price }}
                              {% endif %}
                          </p>
                      </a>
                      <span>{{ RelatedProduct.content|raw }}</span>
                  </li>
              {% endif %}
         {% endfor %}
      </ul>
  </div>

related-product-plugin/related_product.twig at 4.0 · EC-CUBE/related-product-plugin · GitHub

カスタマイズ後はEC-CUBEの管理画面にログインして以下の画面で「登録」ボタンを押さないとページに反映されないので注意してください。

[コンテンツ管理]-[ページ管理]-[商品詳細ページ]

カスタマイズに使った変数

  変数
  内容




  {{ RelatedProduct.ChildProduct.id }}

  {{ ChildProduct.id }}
  商品ID


  {{ RelatedProduct.ChildProduct.code_min }
  商品コード

  {{ RelatedProduct.ChildProduct.name }}
  商品名


  {% for hoge in ChildProduct.ProductClasses %}

  　{{hoge.id }}

  {% endfor %}
  商品クラスID

カートに入れるために必要なProductClassのIDが取得できずに困りましたが、以下のページが参考になりました。``文を使って取得することが必要でした。

https://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=17413&forum=5 https://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=17413&forum=5

{% for hoge in Product.ProductClasses %}
　{{hoge.id }}
{% endfor %}

デバッグしたいとき

Product.idなど、Productに関して取得できる変数や値の内容を知りたいということがありました。

.envファイルを開いてデバッグモードにして、商品詳細ページのテンプレート（detail.twig）に{{dump(Product)}} を追記して、商品詳細ページをブラウザで表示すると変数や配列に入っている値を確認できます。

デバッグモードに変更する方法と追記するコード

.envファイルの変更

#本番モード
APP_ENV=prod
APP_DEBUG=0
 ↓
#デバッグモード
APP_ENV=dev
APP_DEBUG=1

テンプレートに追記するコード

Prodect関連の配列や値を確認したい場合。以下のコードをTWIGテンプレートに追記すると配列の内容が画面上に表示されます。

{{dump(Product)}}

参考ページ

https://homupedia.com/eccube4-template-data.html https://homupedia.com/eccube4-template-data.html

作成したソース

<script>
    $(function () {
        $('#RelatedProduct-product_area').appendTo($('.ec-layoutRole__main, .ec-layoutRole__mainWithColumn, .ec-layoutRole__mainBetweenColumn'));
    });
</script>
<div id="RelatedProduct-product_area" class="ec-shelfRole">
<h3>関連商品</h3>
<table class="table table-striped table-hover rp-list-table">
<thead>
    <tr>
        <td>商品コード</td><td>商品名</td><td>金額<small>（税込）</small></td><td>数量</td><td>カート</td>
    </tr>
</thead>
<tbody>
{% for RelatedProduct in Product.RelatedProducts %}
{% set ChildProduct = RelatedProduct.ChildProduct %}
{% if ChildProduct.Status.id == constant("Eccube\\Entity\\Master\\ProductStatus::DISPLAY_SHOW") %}
    <tr class="ec-productRole__actions test">
    <form name="form{{ ChildProduct.id }}" id="productForm{{ ChildProduct.id }}" action="{{ url('product_add_cart', {id:ChildProduct.id}) }}" method="post">
        <td><a href="{{ url('product_detail', {id : ChildProduct.id}) }}">{{ RelatedProduct.ChildProduct.code_min }}</a></td>
        <td>{{ RelatedProduct.ChildProduct.name }}{% for ChildProductClass in ChildProduct.ProductClasses %}&nbsp;<small>（デバッグ用ClassID:{{ChildProductClass.id }}）</small>{% endfor %}</td>
        <td>
            {% if RelatedProduct.ChildProduct.hasProductClass %}
                {% if RelatedProduct.ChildProduct.getPrice02Min == RelatedProduct.ChildProduct.getPrice02Max %}
                    {{ RelatedProduct.ChildProduct.getPrice02IncTaxMin|price }}
                {% else %}
                    {{ RelatedProduct.ChildProduct.getPrice02IncTaxMin|price }} ～ {{ RelatedProduct.ChildProduct.getPrice02IncTaxMax|price }}
                {% endif %}
            {% else %}
                {{ RelatedProduct.ChildProduct.getPrice02IncTaxMin|price }}
            {% endif %}
        </td>
        <td class="ec-numberInput"><input type="number" id="quantity{{ ChildProduct.id }}" name="quantity" required="required" min="1" maxlength="9" class="quantity form-control" value="1"></td>
        <td><div class="ec-productRole__btn">
            <button class="ec-blockBtn--action add-cart" data-cartid="{{ ChildProduct.id }}" form="productForm{{ ChildProduct.id }}" type="submit">{{ 'カートに入れる'|trans }}</button>
        </div></td>
    <!-- エラーになるので非表示 <input type="hidden" id="mode" name="mode" value="add_cart" />-->
    <input type="hidden" id="product_id{{ ChildProduct.id }}" name="product_id" value="{{ ChildProduct.id }}">
    {% for ChildProductClass in ChildProduct.ProductClasses %}
    <input type="hidden" id="ProductClass{{ ChildProduct.id }}" name="ProductClass" value="{{ChildProductClass.id }}">
    {% endfor %}
    <input type="hidden" id="_token{{ ChildProduct.id }}" name="_token" value="{{ csrf_token('Eccube\\Form\\Type\\AddCartType') }}" />
    </form>
    </tr>
{% endif %}
{% endfor %}
</tbody>
</table>
</div>

商品詳細ページで使用するときの注意事項

form id=“form1"があるとうまく動かない

商品詳細ページにオリジナルのカートボタンを設置する際は、商品詳細ページのテンプレート（detail.twig）にあるメイン商品のカードボタン（``）をコメントアウトするなどして、無効または削除しないと関連商品プラグインのテンプレート（related_product.twig）に追加設置したカートボタンで商品がカートに入りませんでした。どうやらform1が優先されるみたいです。

モーダルがうまく動かないとき

「カートに入れる」ボタンを押したときに表示されていたモーダルウィンドウが表示されなくなってしまったときは、商品一覧のテンプレート（list.twig）を参考に商品詳細ページのテンプレート（detail.twig）にある以下の部分を変更したら動きました。これがモーダルウィンドウ（ec-modal）を発火させるトリガーの要素の指定みたいです。

$form = $('#form1');
 ↓
var $form = $(this).parents('.test').find('form');

この上あたりにある規格チェックや数量チェックの一部JSが邪魔してうまく修正できなかったので、そのチェック部分はコメントアウトしました。

その他参考ページ

https://xoops.ec-cube.net/modules/newbb/viewtopic.php?viewmode=flat&order=DESC&topic_id=23859&forum=11 https://xoops.ec-cube.net/modules/newbb/viewtopic.php?viewmode=flat&order=DESC&topic_id=23859&forum=11

【EC-CUBE】この好みの場所に『カートに入れる』ボタンを設置したいとき

Thu, 17 Feb 2022 17:16:29 +0900

『カートに入れる』ボタンを自作したい

オリジナルの**『カートに入れる』**ボタンを作成したいときに調べたときのことをメモ。

対象バージョンは4.1.1

参考ページ

https://xoops.ec-cube.net/modules/newbb/viewtopic.php?viewmode=flat&topic_id=25215&forum=10 https://xoops.ec-cube.net/modules/newbb/viewtopic.php?viewmode=flat&topic_id=25215&forum=10

ここにあったソースをちょっと改造

上記ページにあった参考のソースのままではなぜか、{{ product_class_id }}を取得することができなかったので、{{ form.ProductClass.vars.value }}に変更したら取得できました。このコードを商品ページのテンプレート（/app/template/default/Product/detail.twig）に置いてテストしてみたところ、ちゃんとカートに入れることができました。

<div class="好きな名前">
  <form name="form{{ Product.id }}" id="productForm{{ Product.id }}" action="{{ url('product_add_cart', {id:Product.id}) }}" method="post">
    <div class="好きな名前">
      <div class="好きな名前"><span>数量</span>
        <input type="number" id="quantity{{ Product.id }}" name="quantity" required="required" min="1" maxlength="9" class="test5" value="1">
      </div>
    </div>
    <input type="hidden" id="product_id{{ Product.id }}" name="product_id" value="{{ Product.id }}">
    <input type="hidden" id="ProductClass{{ Product.id }}" name="ProductClass" value="{{ form.ProductClass.vars.value }}">
    <!--<input type="hidden" id="ProductClass{{ Product.id }}" name="ProductClass" value="{{ product_class_id }}">-->
    <input type="hidden" id="_token{{ Product.id }}" name="_token" value="{{ csrf_token('Eccube\\Form\\Type\\AddCartType') }}" />
  </form>
  <div class="ec-productRole__btn">
    <button class="ec-blockBtn--action add-cart" data-cartid="{{ Product.id }}" form="productForm{{ Product.id }}" type="submit"> 購入する </button>
  </div>
</div>

カートに入れるために必要な情報

カートに入れるためには「数量、商品ID、クラスID、トークン」の4つが揃っていないとエラーになるようです。

<input type="number" id="quantity{{ Product.id }}" name="quantity" required="required" min="1" maxlength="9" class="test5" value="1">
<input type="hidden" id="product_id" name="product_id" value="{{ Product.id }}">
<input type="hidden" id="ProductClass" name="ProductClass" value="{{ product_class_id }}">
<input type="hidden" id="_token" name="_token" value="{{ csrf_token('Eccube\\Form\\Type\\AddCartType') }}" />

トークンの部分は以下のコードでもいいみたいです。

<input type="hidden" id="_token" name="_token" value="{{ form._token.vars.value }}" />

純正コードの控え

<form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  {% if Product.stock_find %}
  <div class="ec-productRole__actions"> {% if form.classcategory_id1 is defined %}
    <div class="ec-select"> {{ form_widget(form.classcategory_id1) }}
      {{ form_errors(form.classcategory_id1) }} </div>
    {% if form.classcategory_id2 is defined %}
    <div class="ec-select"> {{ form_widget(form.classcategory_id2) }}
      {{ form_errors(form.classcategory_id2) }} </div>
    {% endif %}
    {% endif %}
    <div class="ec-numberInput"><span>{{ '数量'|trans }}</span>
 {{ form_widget(form.quantity) }}
      {{ form_errors(form.quantity) }} </div>
  </div>
  <div class="ec-productRole__btn">
    <button type="submit" class="ec-blockBtn--action add-cart"> {{ 'カートに入れる'|trans }} </button>
  </div>
  {% else %}
  <div class="ec-productRole__btn">
    <button type="button" class="ec-blockBtn--action" disabled="disabled"> {{ 'ただいま品切れ中です。'|trans }} </button>
  </div>
  {% endif %}
  
  {{ form_rest(form) }}
</form>

【EC-CUBE4】商品詳細ページをカスタマイズしたいときのメモ

Wed, 16 Feb 2022 17:02:53 +0900

テンプレートの場所

管理画面からテンプレートを編集

[コンテンツ管理]-[ページ管理]-[商品詳細ページ]

テンプレートの場所

eccubeディレクトリ/app/template/default/Product/detail.twig
または
eccubeディレクトリ/src/Eccube/Resource/template/default/Product/detail.twig

Googleアナリティクスとの連携でアクセスランキングが作れる『Ranklet』

Mon, 13 Dec 2021 22:11:12 +0900

ブログにアクセスランキングを設置

どんなブログでもGoogleアナリティクスのアクセス数を利用して、アクセスランキングを埋め込める『Ranklet』というサービスを見つけました。現時点でMovableTypeを使用しているこのブログに埋め込みたいと思います。

https://ranklet.com/ https://ranklet.com/

使い方はとても簡単です。

Googleアカウントでログオン
ランキングに使用するGoogleアナリティクスのプロファイルを選択
表示されたコードをコピペ

これだけで簡単にブログに埋め込むことができます。

HTML、CSS、Javascriptを編集する画面があるので、カスタマイズの自由度はとても高いです。ランキングの集計期も直近の期間から長期までいろいろ選べます。

デフォルトのソース

デフォルトで表示されるHTMLソースは、なぜか****が使用されています。

html

<div class="ranklet ranklet-reset">
    <table class="ranklet-table">
        <tbody class="ranklet-pages">
            {{#context.pages}}
            <tr class="ranklet-page">
                <td class="ranklet-rank">
                    {{rank}}
                </td>
                <td class="ranklet-image">
                    {{#image}}
                    <a href="{{url}}" class="ranklet-link">
                        <img class="ranklet-img" src="{{image}}" />
                    </a>
                    {{/image}}
                </td>
                <td class="ranklet-meta">
                    <div class="ranklet-title">
                        <a href="{{url}}" class="ranklet-link">
                            {{title}}
                        </a>
                    </div>
                    {{#description}}
                    <div class="ranklet-description">
                        <a href="{{url}}" class="ranklet-link">
                            {{description}}
                        </a>
                    </div>
                    {{/description}}
                </td>
            </tr>
            {{/context.pages}}
        </tbody>
    </table>
</div>

CSS

#ranklet-{{context.id}} {
    .ranklet-reset { // リセット
        table, tr, td, div, span {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
            line-height: 1;
            box-sizing: border-box;
        }
    }

    .ranklet-table {
        border-collapse: separate;
        border-spacing: 8px 24px;
        width: 100%;

        td {
            vertical-align: middle;
        }

        .ranklet-rank {
            text-align: center;
            font-size: 120%;
        }

        .ranklet-image {
            text-align: center;
            img {
                max-width: 64px;
                max-height: 64px;
            }
        }

        .ranklet-meta {
            .ranklet-title {
                font-size: 120%;
                line-height: 125%;
            }

            .ranklet-description {
                margin-top: 8px;
                line-height: 125%;
            }
        }
    }

}

MovableType用に書き換えたテンプレート

デフォルトので組まれているソース嫌なのと、デフォルトのまま使用するとデザインがおかしくなるので、以下のようにリスト形式にカスタマイズしました。デフォルトのソースにあるページの概要は不要なので{{description}}を省きました。

HTML

<aside >
<section id="side-recentpost" class="side-entrylist">
<nav>
<h2 class="widget-header"><i class="far fa-file-alt" aria-hidden="true"></i>週間アクセスランキング</h2>
<div class="widget-content">
	<ol class="entryList ranklet-list">
		{{#context.pages}}
        <li class="ranklet-list-item">
				  <span class="ranklet-image">
					  {{#image}}
						  <a href="{{url}}" class="ranklet-link"><img class="ranklet-img" src="{{image}}" loading="lazy" /></a>
					  {{/image}}
				  </span>
				  <span class="ranklet-title">
              <a href="{{url}}" class="ranklet-link">{{title}}</a>
          </span>
        </li>
		{{/context.pages}}
  </oll>
</div>
</nav>
</section>
</aside>

CSS

ol.ranklet-list {
list-style-position: inside;
}
.ranklet-image, .ranklet-title {
display: table-cell;
}
span.ranklet-image {
width: 25%;
}
img.ranklet-img {
width: 100%;
}

他にもMovableTypeのCSSに合わせスタイルをいじっていますが、最終的に見た目は以下の通りになりました。

参考サイト

https://mbdb.jp/web-technical/html/ranklet-template.html https://mbdb.jp/web-technical/html/ranklet-template.html

【簡単】新Microsoft Edge（Chromium版）の検索エンジンをGoogleまたはYahooに変更する方法

Wed, 29 Jan 2020 23:06:30 +0900

検索エンジンをBingからグーグルかヤフーに変更したい

新しいEdgeをインストールしたものの、アドレスバーから検索するとデフォルトのままではBingの検索結果が表示されます。EdgeがMicrosoft製なのでBingが既定になっているのは当然で、Bingの検索精度が良ければ問題ないのですが、自宅はGoolgeを使い、会社ではYahooを使っているので不便で仕方ありません。そこでEdgeの既定の検索エンジンを変更する方法をメモ。メニューの場所さえわかれば結構簡単に変更できます。

変更手順

画面右上の**［**］をクリックし、表示されたメニューの［**設定］**をクリック。

**［*プライバシーとサービス］**をクリック。

画面一番下の**［アドレスバー］**を選択。

ここで**「Bing（推奨）、既定値）」となっているところを「Yahoo!JAPAN」または「Google」**に変更すればデフォルトの検索エンジンの変更は完了です。

独自の検索エンジンを登録したいとき

あまり使うことはないかもしれませんが、メニューには無い検索エンジンやグーグルやヤフーの検索にパラメーターを加えるなどカスタマイズしたいときは以下のメニュー**［検索エンジンの管理］**に入ります。

現在使用できる検索エンジンの登録の一覧で表示されるので、ここで検索URLを登録して新たな検索エンジンの追加や登録済みの検索エンジンのカスタマイズができます。

これで少しChromium版の新しいMicrosoft EdgeがGoogle Chromeチックに使いやすくなります。

カスタマイズ on qwerty.work

【STUDIO】ブレークポイントの追加/削除/変更/調整

STUDIO標準のブレイクポイントの追加/削除

カスタムコードでCSSを書く方法もある

Surface Pro 7+をタブレットのレイアウトに含めたい

カスタムコードの例

Surface Pro 7+の縦向き対応

【Wordpress】各記事のページに投稿編集用のリンクを設置

サクッと編集するためのリンクを設置したい

記事の最後にリンクを設置する方法

記事内の任意の場所にリンクを設置する方法

その他参考

【SharePoint】編集フォームのレイアウトを変更する方法メモ

フォームのレイアウトを複数列にしたい

参考ページ

マイクロソフトのページ

複数列にしたいときの書式例

ヘッダーのカスタマイズ

簡易版

アイコン付き版

アイコンについて

その他参考ページ

【EC-CUBE】関連商品プラグインで表示される商品一覧をカスタマイズしたいとき

関連商品のテンプレートTWIGファイルをカスタマイズしたい

テンプレートファイルの場所

商品詳細ページに表示される部分のテンプレート

管理画面用テンプレート

デフォルトのソース

カスタマイズに使った変数

デバッグしたいとき

デバッグモードに変更する方法と追記するコード

.envファイルの変更

テンプレートに追記するコード

参考ページ

作成したソース

商品詳細ページで使用するときの注意事項

form id=“form1"があるとうまく動かない

モーダルがうまく動かないとき

その他参考ページ

【EC-CUBE】この好みの場所に『カートに入れる』ボタンを設置したいとき

『カートに入れる』ボタンを自作したい

参考ページ

ここにあったソースをちょっと改造

カートに入れるために必要な情報

純正コードの控え

【EC-CUBE4】商品詳細ページをカスタマイズしたいときのメモ

テンプレートの場所

管理画面からテンプレートを編集

テンプレートの場所

Googleアナリティクスとの連携でアクセスランキングが作れる『Ranklet』

ブログにアクセスランキングを設置

デフォルトのソース

html

CSS

MovableType用に書き換えたテンプレート

HTML

CSS

参考サイト

【簡単】新Microsoft Edge（Chromium版）の検索エンジンをGoogleまたはYahooに変更する方法

検索エンジンをBingからグーグルかヤフーに変更したい

変更手順

独自の検索エンジンを登録したいとき