2018年8月

1/2ページ

Font Awesome v5の使い方

  • 2018.08.31

様々なアイコンがcssだけで使えるようになるFont Awesomeがバージョン5にアップデートして少し使い方が変わっていたのでメモ 導入方法 CDNで公開されているcssファイルを読み込むだけです。 [crayon-5ba502795719f278053122/] 最新版はこちらから 使い方 使いたいアイコンをこちらのページで調べてタグをコピペするだけです。 [crayon-5ba5027957 […]

ampについて Part.2

どうも中野です。 前回ampについて書きましたが、なぜ今ampを聞かないのか? メリットがある分、デメリットもあると書きましたが、どんなデメリットがあるのか?詳しく見ていきましょう。 1.サイトのデザインが崩れる可能性がある 禁止されているタグやJavaScript(AMP JS以外)があるため、サイトのデザインが大きく変わる可能性があります。 2.AMP対応に手間がかかる サイトの構成によって様 […]

ampについて

どうも中野です。 先日お客様と電話でデザインの話をしている際に「ブログページはアンプにしますか?」と聞かれまして、アンプが何かわからず、とても困ったので、もしわからないという方は読んで下さい。 ampとは ひとことで言うならば「モバイルページを高速に表示させるための手法」のことです。AMPを実装すると、モバイル ページの表示速度が約4倍、データ量が約1/10になると言われていて、ユーザーはストレス […]

JSON-LDで構造化データマークアップ

JSON-LDとは、検索エンジンでパンくずリストや評価などのリッチスニペットを表示させるために必要な構造化データマークアップです。 JSON-LD 基本構文 基本的にjsonと同じですが、"@context": "http://schema.org/"が最初必要な点やオブジェクトの役割を"@type": "",で指定する点が少し変わっていると思えます。 [crayon-5ba5027957c901 […]

動きの面白いサイト

どうも中野です。 最近きになった(面白かった)サイトを紹介したいと思います。 1.森永製菓株式会社 金のキョロちゃん https://www.morinaga.co.jp/kyorochan/shaberu/ もう、このサイトは遠藤さんを見せたいのか、金の缶詰をアピールしたいの分からないです。 ですが、少しスクロールすると次はどんな事が起こるのだろうか?とワクワクさせてくれるサイトになってます。い […]

Djangoのモデルにcreated_at,updated_atを実装する

Djangoのモデルによくある作成日(created_at),更新日(updated_at)を追加する方法です。 基本的にモデルに各項目を設定するだけで実装できます。 各項目の追加、更新も自動で行ってくれるので、脳死でとりあえず追加しておくのもありだと思います。 設定方法 models.pyのモデルに2行追加するだけです。 polls/models.py [crayon-5ba5027958277 […]

Photoshop 覆い焼き・焼きこみツール その2

どうも中野です。 前回いった通り、今回は覆い焼きと焼きこみツールの使い方を説明したいと思います。 今回修正する画像はこれ 番傘が印象的なこの写真。このままでも全然大丈夫なんですが、今回は1手間加えていきます。 やり方はすごく簡単です。 1.見てもらいたい対象の選択 まずは、どこを見てもらいたいのか考えます。この写真だともちろん番傘になります。 2.覆い焼きまたは焼きこみツールで対象をクリック 覆い […]

jsでpull to refreshを実装する

Twitterなどで採用されているスマホを下に引っ張ったときに更新する機能「pull to refresh」をjsを使って実装する方法です。 let _startY; const inbox = document.querySelector(‘#inbox’); [crayon-5ba50279586fa857187306/] 実装方法は、いたって簡単です。 まず、タッチ開 […]

Photoshop 覆い焼き・焼きこみツール

どうも中野です。 今回はPhotoshopの「覆い焼きツール」と「焼きこみツール」について説明します。 今回はざっくりした説明になりますので、次回、詳しい使用方法などを書いていきたいと思います。 覆い焼き このツールは画像を部分的に「明るく」して目立たせたり、なじませたりする時に使用します。 少しわかりづらいのですが、半分から上の薔薇を明るくしてみました。 焼きこみ 焼きこみツールは覆い焼きツール […]

Win10でiOS Safariのconsoleを確認する方法

Win10でiOS safariのconsoleを確認する方法です。 先日、ローカル環境で構築したサイトのService Workerが上手く動かった問題もiOSのconsoleのログをこの方法で確認することができたので原因究明することができました。 PCで発生せず、スマホやiOS端末のみで発生するバグなどの解決に際にsafariのconsoleを確認できることはかなり早く問題を解決へ導いてくれる […]