ザリガニデザインオフィス

おすすめの記事

記事一覧

undefinedのサムネイル

NuxtでAdobe Fontsを使う方法

Google Fontsは外部CSSを読み込むだけで使えるので手軽ですが、Adobe Fontsなどはダイナミックサブセットを使っているのでスクリプトを埋め込む必要があります。共通のスクリプトを設置する方法を解説します。

undefinedのサムネイル

Vue CLIでFont AwesomeのTwitterアイコンを追加する方法

Font AwesomeはVue用にパッケージが公開されているので、npmなどでインストールして利用することができます。しかし、TwitterやFacebookのアイコン(以下、ブランドアイコン)を利用する際には公式ドキュメントのままやっても表示できず、少し工夫が必要です。

undefinedのサムネイル

ハンバーガーボタンジェネレーターを作りました

使い方はいたって簡単で、ハンバーガーボタンの縦、横、線の太さを入力するだけで自動的HTML、CSS、jQueryのコードが生成されます。

undefinedのサムネイル

Gutenbergのカスタム投稿でカテゴリーが出ない場合

function.phpをいじって自前でカスタム投稿タイプを作成し、自前のカスタム投稿用のカテゴリー(カスタムタクソノミー)作成しましたが、記事編集画面にが出ないときの対処法です。

undefinedのサムネイル

align-contentが効かないのはflex-directionのせい?

display : flexは便利でもうfloatとclearfixには戻れない感じです。そんな便利なflexですが、先日Twitterでalign-contentが効かないという話がありましたので、その原因と仕組みについて解説します。

undefinedのサムネイル

プラグイン不要javascriptでパラパラマンガ

Gifアニメーション楽だけどは重いし、画質が悪いし、という時にjavascriptでパラパラマンガを実装する方法です。特別なプラグインやjQueryも不要です。

undefinedのサムネイル

マネしたいWebデザインをまとめたサイト、「マネるデザイン研究所」

知り合いのデザイナーと共同で、マネしたいポイントをちょっぴり解説したWebデザイン集を作りました(企画・実装担当)。普通のWebデザインギャラリーはサムネイルとリンクだけですが、このサイトはそれぞれにマネしたいポイント、応用できそうな場面、そして懸念点をまとめています。

undefinedのサムネイル

設計事務所向けWordPressテーマを作りました

設計事務所向けの、WordPressテーマ、The Architectを作りました。無料で誰でも利用できます。

undefinedのサムネイル

Gutenbergで保存できない時

次期エディタのGutenbergで記事の保存ができなくなりました。固定ページやカスタム投稿タイプではできるのですが、投稿の時だけエラーが出てしまいます。その試行錯誤した時の話です。

undefinedのサムネイル

【ネタ】暗号化されているっぽいページの作り方

パッと見た目暗号化されているようなページを作る方法です。実際に暗号化されていませんし、選択してコピーすれば元のテキストも読み取れます。あくまで見た目だけの話です。

undefinedのサムネイル

info@ドメインのメールアドレスは作らない方がいいかも

よく、お問い合わせ用にinfo@ドメインのようなメールアドレスを作るかと思いますが、このアドレスは作らないほうが、場合によってはセキュリティ的に高まるかもしれません。

undefinedのサムネイル

illustrator + anime.jsで動く円グラフ

Adobe illustratorで作ったベクトルの円グラフをanime.jsで動かす方法です。

undefinedのサムネイル

floatはオワコンなのか

横並びのレイアウトにdisplay : flex、段組みにdisplay : girdがあり、いずれも便利ですよね。あの便利さを知ってしまうとfloatを使ってのレイアウトには戻れません。floatはオワコンになってしまったのでしょうか。

undefinedのサムネイル

「CSSだけで作るハンバーガーボタン」をあまりオススメしない理由

当ブログでもハンバーガーボタンの作り方を掲載していますが、こちらはjQueryを使ったものになります。しかし、jQuery(Javascript)を使わずCSSだけでハンバーガーボタンを作るやり方もあります。しかし、このCSSのみのやり方自分はあまり好きではありません。

undefinedのサムネイル

BracketsでEmmetの自動ベンダープレフィックスをオフにする方法

gulp-autoprefixerなど使う時、emmetの自動でベンダープレフィックスを付与する機能は余計なお世話だったりします。その機能をオフにするやり方です。

undefinedのサムネイル

ドロワーメニュー用のテンプレートを作りました

当サイトで紹介しているアニメーションで×印になるハンバーガーボタンや横から出てくるドロワーメニューの作り方をまとめたテンプレートを作成しました。このHTMLとCSSとJSを読み込めば手軽にドロワーメニューを実装することができます。

undefinedのサムネイル

【OAuth認証】WP Mail SMTPでGmailを設定する方法

WP Mail SMTP ver 1.2.5でのやり方です。以前はGmailのアカウントとパスワードを入力するだけで使えていたようですが、Googleのセキュリティ強化もありクライアントIDとシークレットを登録する必要があります。

undefinedのサムネイル

プラグインを使わず、ワードプレスに構造化データを埋め込むやり方

プラグインいれなくてもテンプレートにコピペでいけます。今回紹介するのはブログ(type : BlogPosting)の構造化データです。JSON-LDを使って基本的なデータを埋め込みます。

undefinedのサムネイル

埋め込みYoutubeのサムネイルのカスタマイズ

Youtube APIを使ってサムネイル画像をクリックで再生する方法です。Youtube側でも動画のサムネイルはカスタマイズできますが、Webサイト埋め込みではまた違うのを使いたかったりします。特に開発者側(ディベロッパー)ではYoutube動画自体のサムネイルを変えることが不可能の方が多いです。

undefinedのサムネイル

SEOとは◯◯ダイエットのようなもの

自分はSEOの専門家ではありませんが、SEOについて自分が大事にしていることを書いておきます。

undefinedのサムネイル

ABBAをWeb上で正しく表示する方法

小ネタですが、ABBAの正しい表記を画像ではなくテキストで実装する方法です。

undefinedのサムネイル

CSSで水面のようなアニメーション

CSSのアニメーションとフィルターを使って、水面のようなゆらゆらと水面が揺らめく表現の実装方法です。

undefinedのサムネイル

Local by flywheelがUh-oh Could not update hosts fileの時の対処法

「Fix it」ボタンを押しても直らない時の対処法

undefinedのサムネイル

こういう時に便利!Gridレイアウトの応用

ここでは、有り得そうなデザインでfloatだけでは対処が難しいような場面を想定して作った一例です。

undefinedのサムネイル

jQueryで作るドロップダウンメニュー

スライドだったり、フェードだったりの動きのあるドロップダウンメニューを6行程度のjQueryで作ります。

undefinedのサムネイル

常時SSL化その前に

Web界隈では常時SSL化が流行ってますが、流行りに乗っかってSSL化する前にいくつか確認しておきたい点をまとめました。

undefinedのサムネイル

本文がグラデーションで消える、続きを読むボタンの作り方

画像のような本文の冒頭は見えているけど、後半はグラデーションで消えているような「続きを読む」ボタンの作り方です。

undefinedのサムネイル

Webの文字詰め

最近はWebでも文字詰めができるようになりました。

undefinedのサムネイル

このサイトの表示スピードを早くした時の話

サイトの表示スピードもSEOに影響があるらしい。どこまで影響があるか分かりませんが、早い方が良いことには変わりありませんよね。

undefinedのサムネイル

当サイトのプラグイン

このサイトで使っているプラグインを晒します。何かの参考になれば幸いです。

undefinedのサムネイル

Webにおける解像度のお話

紙のデザインをやっている人にとっては画像の解像度というのは気をつけるものですが、Webにおける解像度というのはちょっと複雑です。

undefinedのサムネイル

Contact Form 7 add confirmのスクロールを調整

確認画面に移行した際に、フォームの一番上に自動的にスクロールで戻りますが、ヘッダーを固定していると、戻りすぎて、ちょっと厄介です。

undefinedのサムネイル

横から出てくるドロワーメニューの作り方

クリックすると、横からニュッとメニューが出てくるやつの実装方法です。最近はCSSによりアニメーションのサポートが進み、複雑なjQueryを書かなくても済みます。

undefinedのサムネイル

アニメーションで×印になるハンバーガーボタン

3本のハンバーガーボタンがクリックするとアニメーションと共に×に変化するハンバーガーボタンです。時々みますよね。そして、このサイトにも採用しています。以下がそのソースコードになります。

undefinedのサムネイル

さくらインターネットでワードプレスのSSL化(スクショ付き)

さくらインターネットでサイトをSSL(ラピッドSSL)化した際の手順になります。クリーンショットは2017年6月現在のものなので現在とは違う可能性がありますのでご了承ください。

undefinedのサムネイル

これからWordPressを勉強する前に覚えておきたいこと

WordPressはプログラミングです。正確には違うけど。はじめて学ぶ人はそれくらいの気持ちで。

undefinedのサムネイル

間違って、HTMLファイルなどを上書きしてしまった時の救済法(ただしブラウザで表示している時に限る)

古いファイルと統合しようとして、誤って上書きしてしまった時の話です。ちょっとした操作ミスで起こるこの事故。そしてそのようなミスは疲れている時に起こりやすく(?)、疲れている上に精神的ダメージも大きいというオマケ付きです。状況はだいぶ 限定的ですが、以下が救済方法です。

undefinedのサムネイル

Bracketsでemmetが動かなくなったら

先日、Bracketsのemmetのスニペットを編集しようとしたら、失敗してemmetプラグインが動かなくなった時の話です。自分以外にも同じような人の助けになれば幸いです。ただし、実行は自己責任でお願いします。また、環境によっては必ずしも直るわけではないので、予めご容赦願います。

undefinedのサムネイル

──ダッシュ2つのやつ

リード文などの頭につける、ダッシュを2つ重ねたやつ、倍角ダッシュという名前らしいのですが、HTMLでダッシュを2つ続けても間が途切れてしまいます。その上、半角や全角、伸ばし棒、ダッシュっぽい記号もたくさんあります。どうすれば2つつながったのが書けるのか検証しました。

undefinedのサムネイル

CSS3で作る、切れ目に差し込んだようなデザイン

アルバムや写真のスクラップブックみたいなのに使えると思います。 box-shadow,transformを使っているのでCSS3対応ブラウザでないと見れません。

undefinedのサムネイル

ブラウザの禁則処理の違い

自分はFirefoxユーザーなのですが、Chromeと禁則処理に関するブラウザの解釈の違いで、時々不意を突かれます。標準化が進んでも、まだまだブラウザ間の差異はあるんですね。

undefinedのサムネイル

hogeとfugaの話

自分がjavascriptを習いたての頃、色んなサイトを参考にしながら見て回っていた時のこと。良く見かける言葉にhogeというのがありました。

undefinedのサムネイル

プラグインなしで、画像をPOPUP表示するjQuery

ポップアップくらい、自前で書けるぜと言えるような、実装例です。プラグインを導入したけど、他のプラグインと干渉して動かない、デフォルトのものではなく、自分好みにカスタマイズしたいなど、自前でポップアップを書く時の参考にして下さい。

undefinedのサムネイル

ちょっと技術的な観点からみた JPGとPNGの使い分け方

デザインしたものをコーディングしようとする時に必要なのが画像の切り出しです。ここで直面するのは、どの画像形式で書き出すかという問題です。Webで使われる画像形式は様々あります。今回はよく使われるJPGとPNGの使い分けについて解説します。