Shopifyの商品管理画面で、入力欄の縦横幅を広げる方法

Shopifyの管理画面で、商品タイトルとか商品説明の入力欄が狭い！でも幅を広げる設定が無い！ということで、ブックマークレットを作成しました！

「ブックマークレット？」という方でも簡単に設定できるように解説します。

ひとまず、作成した「ブックマークレット」を使うとどうなるかというと、、、動画を御覧ください。

※注意：Chromeブラウザで設定します。商品タイトルや商品詳細を入力するエディタの幅を広げるために使用します。Shopifyは更新が頻繁なので、使えなくなることをご了承ください。

Contents

ブックマークレットとは？
ブックマークレットの設定方法を解説！
ブックマークレットを使ってみる

ブックマークレットとは？

ブックマークレットを知っている人は、ここは飛ばしてください。

ブックマークレットは、ブラウザのブックマークバーに保存できる「小さなソフトウェアアプリケーション」です。(って言っても意味不明ですよね。。。）

ものすごく簡単に言うとブックマークバーにある「お気に入り」ボタンをポチッと押すと、ウェブページの見た目をパッと変更できるように設定したものが「ブックマークレット」だと思ってください。

今回はポチッと押したら「狭かった入力欄が広くなった！」となるようなブックマークボタンを簡単に設定できるように解説します！

ブックマークレットの設定方法を解説！

ブックマークレットを作成するには、以下の手順に従ってください。

Chromeブラウザを開き、ブックマークバーを表示します（表示されていない場合は、Ctrl+Shift+B（Windows）またはCommand+Shift+B（Mac）を押して表示させます）。
ブックマークバーのどこか空いているスペースを右クリックし、「ページを追加」を選択します。
名前を適当に付けます（例：「Shopify入力欄の幅拡張」）
コードをコピーします。
URLの部分に、コピーしたコードを貼り付けます。
保存します。

設定は以上！

コピーするコードは以下。

javascript:
(function(){
  const iframeOnLineStore = document.querySelector('iframe[title="オンラインストア"]');
  let root = null;
  if(iframeOnLineStore){
    root = iframeOnLineStore.contentWindow.document;
  } else {
    root = document
  }

  const sectionSecondary = root.querySelector('.Polaris-Layout__Section--oneThird_170z4');
  if(sectionSecondary) {
    if(sectionSecondary.style.display == 'none'){
      sectionSecondary.style.display = 'block';
    } else {
      sectionSecondary.style.display = 'none';
    }
  }

  const iframe = document.getElementById('product-description_ifr');
  if(iframe) {
    iframe.style.resize = 'vertical';
    iframe.style.overflow = 'auto';
  }
})();