WEB」カテゴリーアーカイブ

Shopifyのテーマカスタマイズ画面にフォントピッカーを追加する方法

備忘録でっす。

テーマカスタマイズ画面にフォントピッカーを追加する

今回は無料テーマのDebutの「テキストオーバーレイ付き画像」セクションを改造しちゃうぞ~。

  1. フォントピッカーを追加したいセクションのテーマファイルを探すよ。
    sectionsフォルダ内にあるはずだよ。「テキストオーバーレイ付き画像」の場合はhero.liquidって名前です。
  2. ファイルを開いたら下記を探すよ。
{% schema %}

hoge

{% endschema %}
  1. すでにカスタマイズ画面に出ている機能がずらりと並んでいるはず。
  2. 括弧の位置に注意しながら、フォントピッカーを追加したいところにコードを書いていくよ。
{
    "name": "Typography",
    "settings": [

        /* ↓↓ ここに入れるよ~ ↓↓ */

        {
            "type":    "font_picker",
            "label":   "Heading font",
            "id":      "heading_font",
            "default": "helvetica_n4"
        }

        /* ↑↑ ここに入れたよ~ ↑↑ */
    ]
}
  1. ファイルを保存してshopifyにテーマをアップロード。Shopifyのテーマキット使ってると簡単だよ。
  2. もしかしたらスキーマがどうこうってエラーが出るかも。いちどShopifyの管理画面に行きます。
  3. 管理画面からテーマのカスタマイズを選ぶよ。
  4. フォントピッカーを追加したセクションを開くよ。ちゃんとフォントピッカーが表示されてればおk。
  5. 適当なフォントを選択して保存するよ。
  6. Shopifyのテーマキットを使ってる人は、いちどtheme downloadしときましょう。
  7. テーマファイルのconfig/settings_data.jsonを開くよ。
  8. さっき追加したフォントピッカーの値がちゃんとあればばっちり!どこにあるかはセクションによって違うよ。「テキストオーバーレイ付き画像」に追加した人はこのへんにあるはず↓
︙
    "sections": {

︙

      "hero": {
        "type": "hero",
        "settings": {
          "heading_font": "itc_stone_informal_n4"
        }
      },
︙
  1. これでフォントピッカーを使えるようになったよ。

選んだフォントをデザインに反映するよ~

選んだフォントをデザインに適用してみよう~。

残念なことに、スタイルシート用のtheme.scss.liquidファイルからはセクション内でカスタマイズした値を読めないっぽいんだ 😥
しゃーないので、セクションのテーマファイルの中に直接CSSを書いちゃうよ!

  1. さっきフォントピッカーを追加したliquidファイルを開いてね。
  2. 下記を適当な位置に入れてあげます。
<style>
{% assign sample_heading_font = section.settings.heading_font %}
{{ sample_heading_font | font_face }}
</style>
  1. これでさっき選んだフォントが@font-faceで読み込まれて、指定できるようになるよ。
  2. フォントを使いたいタグに下記を入れてあげましょう。classやidでの指定がいい人はそうしてね。
<h2 style="font-family:' {{ sample_heading_font.family }};'">
  1. 保存したらテーマをアップロードするよー。
  2. さて実際のサイトで表示してみましょう。うまく適用されてるかな??

めっちゃ参考になるサイト様

Configuring theme settings ・ Shopify Help Center
The font object ・ Shopify Help Center
Fonts ・ Shopify Help Center
Shopify’s font library ・ Shopify Help Center
Liquid Font filters in Shopify ? Avada Commerce
Unable to access section setting in sections.scss file ・ Issue #714 ・ Shopify/slate ・ GitHub

Shopifyのフォントライブラリー、すごい色々選べるから、使いこなせれば管理画面から簡単にデザインの変更できてお客さんハッピーになれるだろうな。
まだまだ奥が深いぜShopify。

Shopifyのテーマをローカルで開発するのに超絶便利なTheme Kitの使い方

Theme Kitとは?

Shopifyが提供している、開発者用のコマンドラインツールです。

https://shopify.github.io/themekit/

Theme Kitをダウンロード

「Installation」のセクションから、お使いの環境に合ったTheme Kitをダウンロードします。
コマンドラインに慣れている素敵な貴方はコマンドラインから。
お願いだからexeファイルください…とヨボヨボな貴方と私は「Manual Installation」しましょうね。

Theme Kitのインスコ

管理人はWindowsユーザーなので、Windowsの解説しますよー。

  1. program filesフォルダの中に「Theme Kit」フォルダ作ります。名前はなんでも大丈夫だよ。
  2. さっきダウンロードしたtheme.exeを作ったフォルダにぶち込みます。
  3. パスを通します。環境変数ってやつだね。英語だけどここがスクショ付きで説明しているのでわかりやすいです。
    pathのところに「C:\Program Files\Theme Kit」が追加されれば大丈夫!
  4. Powershell(かコマンドプロンプト)を立ち上げて、下記コマンドを打ってみましょう。
    theme
    theme kitの説明がずら~と表示されればインスコ成功です!

macやlinuxの方は下記を参照にがんばって。

Linux & macOS

Download the themekit binary that works for your system.
Compare checksums of the binary by running md5 theme
Put the binary on your path. We recommend somewhere like /usr/local/bin
Ensure that it works as expected by running theme version

APIアクセス権をもらうよ

Shopifyの管理画面から、APIでアクセスするための設定をします。
Theme Kitのページに、すんごいわかりやすいgifがあるので参考にしてね。

  1. 管理画面から「Apps > Manage private apps」
  2. 「Create a new private app」をクリック、下の方に小さくあるよ。
  3. Private App Name(なんでもいいです。Theme Kit Accessとかでいんじゃない。)と自分のメアドを入力。
  4. 「Theme templates and theme assets」の権限を「Read and write」に設定
  5. 「Save」を押下。

Shopifyとローカルをつなげちゃうよ

  1. Shopifyのテーマを保存したい場所にフォルダを作ります。
  2. そのフォルダでPowershellを立ち上げます。フォルダ上で「shift+右クリック>この場所でpowershellを開く」で開けるよ。
  3. つなげてみましょう。下記コマンドを打つよ!
    theme configure --password=[APIのパスワード] --store=[shopifyストアのURL(hoge.myshopify.com)] --themeid=[テーマのID(※)]
    ※ テーマのIDは管理画面でテーマのカスタマイズ開いたときのURLでわかります。数字が並んでいる箇所がテーマIDだよ。
  4. config.ymlファイルができているはずです。

Shopifyからテーマをダウンロードしてみよう

  1. 下記コマンドを打つよ。
    theme download
  2. テーマのダウンロードが始まります。
  3. パーセンテージが100%になったらフォルダを確認してみよう。Shopifyからテーマファイルがダウンロードされているはず。

Shopifyと同期してみよう

この機能がマジ神です。
ローカルでファイルを変更すると、Shopifyにダイレクトに反映されます。

  1. 下記コマンドを打つよ。
    theme watch
  2. ローカルでなにかファイルを変更してみましょう。
  3. ファイルを保存すると、自動でファイルがアップロードされます。Powershellにもログが出ているよ。
  4. Shopify上で表示を確認してみましょう。変更されたかな?
  5. 同期の終了は「ctrl+c」です。

神動画

イケメンがShopify Theme Kitの使い方を手取り足取り教えてくれます。
この人若いっぽいのに有能…すごい…!!

【なんてこった】FlickrとWordPressの連携機能が3/25で終わるらしい

詳細:[Official Thread] Welcome back HTML Embeds! Goodbye to some sharing options.

Flickrのこの機能、かなり便利に使わせてもらってたのですが、まさかの打ち切り。
まいったぞー。
代替機能探さないと…。

25日過ぎたら、きっとエロい人たちが代わりになるような機能をまとめてくれると思うので、それに期待してひとまず放置。

IE11のデベロッパーモードでブラウザモードを変える方法

まさかこんなところで引っかかるとは。
以下手順。

  1. F12を押してデベロッパーモードにする
  2. 左ペインの一番下(もしくはctrl+8)を押してエミュレーションの設定を開く
  3. ユーザーエージェント文字列からブラウザを選ぶ
  4. ユーザーエージェント文字列の中にブラウザが表示されていない場合、「カスタム」を選択しユーザーエージェント文字列を手入力する

自分の場合、なぜか最初はユーザーエージェント文字列の中にブラウザ一覧が表示されていなかったので、わざわざカスタムで手入力した。
でも別のタイミングで見たらばっちり表示されてて、あの苦労は何だったんだ状態。

もしブラウザ一覧が表示されていなかったら、IE Testerでテストするほうが楽だと思うよ。

プラグインを使わず、テーマも変更せず、WordPressでコメントを受け付けない設定にする方法(過去記事も)

  1. ダッシュボードから設定>ディスカッション を開く
  2. 投稿のデフォルト設定の「新しい投稿へのコメントを許可する」を外す
  3. 他のコメント設定の「X日以上前の投稿のコメントフォームを自動的に閉じる」のチェックをオン
  4. 「X日以上前の投稿のコメントフォームを自動的に閉じる」のXを1に設定
  5. 変更を保存

備忘録的に。
WordPress全体に適用される、コメント設定って無いんだね。

CloudFlare使ってるWordPressサイトをいじるときに気をつけること

備忘録。

CloudFlare使ってるとき、WordPress(Webサイトも?)いじる場合は要下記設定。
プラグインにW3 Total Cache入れてる前提で。

  1. WordPressの管理画面から、Performance > グローバル設定 へ。
  2. 下の方にある「Network Performance & Security powerd by CloudFlare」を見つける
  3. Development mode をオンに
  4. Purge cacheをポチッとな

これやんないと、うまい具合に変更がサイトに反映されなくてパニクるので注意をば。
W3 Total Cacheを入れていない場合、CloudFlareのWebサイトからログインして、設定画面で上記と同じ場所をゴニョゴニョすればおk。

ロリポップの大量乗っ取りに学ぶ、WordPressのセキュリティ設定

この前、ロリポップがクラッカーから大規模攻撃受けましたね。
自分のサイトもお客さんのサイトも、たくさんのサイトがロリポに置いてあったので、正直冷や汗モンでしたw
自分には幸運にも直接的に影響ありませんでしたが、念のための確認作業やらで時間取られました。

ロリポが行った対策は色々あるのですが、今後WordPressで構築する際にためになりそうな箇所をメモっておきます。

  • wp-config.phpのパーミッションを400に
  • install.phpのパーミッションを000に
  • .htaccessのパーミッションを604に

いやーしかし、CGIのフルパスとデータベースパスワード変更された時にはどうしたもんかと思いましたぜ…
事態は沈静化してきていますが、うーん、セキュリティは気をつけても気をつけても足りないなあ。

要素をプルプルプルプル動かせるjRumbleが楽しい

まずは何も言わず、デモサイトを見てみるんだ。

http://jackrugile.com/jrumble/

な!!楽しいだろう!!

あまりにプルプルプルプル動くから楽しくって、開発しながら笑ってしまうのよ、このプラグイン。

使い方

まずはjQueryを読み込むのと、プラグインを読み込む。
こんなかんじね

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jrumble.1.3.js"></script>

プルプルプルプルさせたい要素に対してスクリプトを書くよ

$('#要素id').jrumble();
$('#要素id').hover(function(){
    $(this).trigger('startRumble');
}, function(){
    $(this).trigger('stopRumble');
});

これで動くはず。
上記サンプルはマウスオーバー時の処理なのだけれど、クリック時やずっと動きっぱなしな処理も出来るよ。
詳しくは公式サイトにゴー。

ライセンス

MIT Licenseです。やったあ。

使い所

なにせ目立つので、強調したいリンクや、ドッキリ的な仕掛けに使えそうだね。
うーん、楽しい。

いろんな言語への対応について考える

昨日新しく適用させてみた、Twenty Thirteen
一日ちょい使ってみて、やっぱりどーも慣れないので、前のテーマ(Twenty Twelve)に戻しました。

デザイン的には結構好きだったんですが、英語圏用に調整されているテーマって、日本語で見やすくするには修正が必要なんだよね…。
結構直さなきゃいけないところあります。
たとえば…

  • 文字の行間とか
  • フォントサイズとか
  • 日本語フォントと英語フォントの大きさが違うからその考慮とか
  • 英語フォントだと表示OKだけど、日本語フォントだとおかしくなる箇所とか
  • Webフォントとか…
    英語圏のひとたちは使えるWebフォントが大量にあって羨ましいなあ。

そういえば最近良く見るのが、右から左に読む言語に対応しているフレームワークやテーマ。
日本語と英語の違いでだってこんなにやることあるのに、右から左に読む言語とかだともう何をどうしていいのかまったく頭が回りませぬ。
デザイン正反対にすればいいってわけでも無さそうだし…うむむ。
その言語を全く知らないゆえに、対応が難しそうだ。

Web屋、勉強することありすぎワロタ…
いやワロエナイ…

Twenty Thirteenがキタ━(゚∀゚)━!

WordPressを3.6にしたら、Twenty Thirteenがやってきていましたよ!
早速当ブログにテーマ適用してみたのですが…

なんていうか…
うん…

日本語フォントってアレだよね?

Winの明朝体って、ディスプレイで表示するとなんでこんなアレになるんだろう…

しばらく機能を色々使ってみて、しっくりこなかったら前のテーマに戻そうと思います。
なんかなあ、最近のWEBのトレンドと日本語フォントが合ってない気がするのよね…。
もやもやする…