CATEGORY WEB制作のヒント

WEBに関するハックや小ネタを発信していきます。

【コピペOK】1分で完成!「ScrollReveal.js」ライブラリを使って憧れのスクロールアニメーションを実装しよう!
【コピペOK】1分で完成!「ScrollReveal.js」ライブラリを使って憧れのスクロールアニメ…

  • 2021.02.02

1分で実装できる「ScrollReveal.js」。「ScrollReveal.js」ライブラリを使ってコピペで簡単に今流行のスクロールアニメーションができるようにまとめました。サンプルもあります。

【コピペOK】jQueryを使って数字がカウントアップするアニメーションを3ステップで簡単実装しよう。
【コピペOK】jQueryを使って数字がカウントアップするアニメーションを3ステップで簡単実装しよう…

  • 2021.02.01

数字をカウントアップするアニメーションはサイト制作で視覚的に数字を表現する時によく使われる手法です。 ■brotherのサイト 企業サイトでも数字で見る○○というページによく使われていますね! アニメーションがあ…

  • 2020.12.24
  • 2020.12.24

glupしたらcompassエラー「Error: spawn /usr/local/bin/compass ENOENT」で動かないときの解決法
glupしたらcompassエラー「Error: spawn /usr/local/bin/comp…

  • 2020.12.24

古いBOXから生成したプロジェクトのglupが動かなかったので解決法のメモです。 久しぶりに起動したプロジェクトのSCSSをビルドしようとすると以下のエラーが… events.js:183 throw er; // Unhandled ‘error&#…

WordPressをアップデートしたら改行されなくなった時の対処法
WordPressをアップデートしたら改行されなくなった時の対処法

  • 2020.08.31

先日セキュリティ対策の為WordPressのバージョンアップをしたらビジュアルエディタで編集時に改行が消えちゃう現象がおきたのでその解決法です。 2年前に作成したWordPressのサイト。 バージョンの差分がひどくなっ…

【WordPress】投稿する時に便利!h2,h3,br,p等の基本タグをボタン1つで挿入できるようにしよう
【WordPress】投稿する時に便利!h2,h3,br,p等の基本タグをボタン1つで挿入できるよう…

  • 2020.08.07

グーテンベルクエディター使っていますか? 旧エディタの良いところはタグが自由に組めるところで、タグ打ちメインの私は気に入っています。 グーテンベルクは直感的に使えるのでクライアントさんにはオススメして…

【WordPress】Twitterのシェアボタンを押した時、その記事のカテゴリーやタグを自動で #ハッシュタグ にする方法
【WordPress】Twitterのシェアボタンを押した時、その記事のカテゴリーやタグを自動で #…

  • 2020.08.07

みんなに教えたい時にボタンひとつでシェア出来るSNSシェアボタン、便利ですね。 今回はtwitterのシェアボタンを押した時、その記事のカテゴリーやタグをハッシュタグとして付加し、より一層拡散力を強化する方法を…

CSSでanimation指定したSVGアニメーションをスクロールで画面内に入った時に動かす方法
CSSでanimation指定したSVGアニメーションをスクロールで画面内に入った時に動かす方法

  • 2020.08.06

CSSのアニメーションで動かしたSGVアニメーションをスクロール連動させてみました! 複数ページにも対応しています。 今回の困った問題点 SVGをアニメーションする時に各パーツにクラスを作成しアニメーションさせ…

centos/7+Vagrant+VirtualBoxでrsyncが失敗する解決法(There was an error when attempting to rsync a synced folder.)
centos/7+Vagrant+VirtualBoxでrsyncが失敗する解決法(There wa…

  • 2020.07.31

centos/7+Vagrant+VirtualBoxでローカル環境中にrsyncでエラーが出て詰まったので解決法です。 なんとも毎回なんだかのエラーに捕まっている気がします。 エラー内容 ターミナル表示 There was an error when attem…

【コピペOK】2020年版 WordPressのチートシート〜よく使う独自関数・コードをコピペで使おう!〜
【コピペOK】2020年版 WordPressのチートシート〜よく使う独自関数・コードをコピペで使お…

  • 2020.07.27

WordPressはアップデートで大きな変更が入ったり、非推薦になったコードが出てきたりします。あれ?あのタグ使えなくなってる??って事が多々あるので最新のWordPress(WordPress 5.0系)で私がよく使う関数・コード…

現役WEBデザイナーが教える商用利用可の素材サイト【保存版】
現役WEBデザイナーが教える商用利用可の素材サイト【保存版】

  • 2020.07.22

制作会社でWEBデザイナーをしていますナコです(@nako_x)。 最近は広告収入モデルの商用利用可の素材サイトが増えてきましたね! 無料で使えるのでありがたいことです。 ブログを作成するときにも使える 私が仕事で…

【コピペOK】無料・日本語対応・商用利用可のWEBフォント「Google Fonts」を簡単コピペで使おう!
【コピペOK】無料・日本語対応・商用利用可のWEBフォント「Google Fonts」を簡単コピペで…

  • 2020.07.22

かっこいいタイトルを画像じゃなくフォントで表現したい! 注目させたい見出しの書体を変えたい! サイト全体をどの環境でみても同じフォントで表現したい! そんな時に便利なのがWEBフォントです。 大丈夫!! 今…

【コピペOK】WordPressで特定のカテゴリーを振り分ける方法
【コピペOK】WordPressで特定のカテゴリーを振り分ける方法

  • 2020.07.16

WordPressを使っていて特定のカテゴリーの時は違うデザインにしたり、タイトル画像を別々に表示したりするためのハックです。 アーカイブ・一覧ページで振り分ける アーカイブや一覧など、リスト表示での振り分け方…

CSS

【コピペOK】CSSだけで縦・横・斜めのストライプアニメーションをする方法
【コピペOK】CSSだけで縦・横・斜めのストライプアニメーションをする方法

  • 2020.07.12

サイトのアクセントになるCSSアニメーション。効果的に使っていきたいですね。 今回はストライプをCSSで作成し、それを文字の背景やBoxにアニメーションで表示させていきます。 ストライプの作り方 ストライプはCSS…

WordPressでブログを始める前に〜Googleアカウントを作った方がいい5つの理由〜
WordPressでブログを始める前に〜Googleアカウントを作った方がいい5つの理由〜

  • 2020.07.09

こんにちわ!WEBデザイナー歴16年、ブログ歴3年のナコです(@nako_x)。 ブログサービスを使わず自分のブログを始めたいなら レンタルサーバー+独自ドメイン+WordPress での運営がオススメです が、 WordPressで…

【コピペOK】CSSで「最初」「最後 」「何番目」「 何番目以降」など要素の順番を取得するnth-childタグまとめ
【コピペOK】CSSで「最初」「最後 」「何番目」「 何番目以降」など要素の順番を取得するnth-c…

  • 2020.07.02

CSS3で要素の場所を指定出来るnth-childの書き方をよく忘れるのでコピペで使えるようにまとめました。 互い違いに色を変えた表や一覧を作ったり、リストの最初の1件の前にmarginを入れたり、コーディング時によく…

CSS

吹き出しやフローチャートで使える!CSSだけで三角形を作るジェネレーター5選
吹き出しやフローチャートで使える!CSSだけで三角形を作るジェネレーター5選

  • 2020.06.23

CSSで三角形を作るにはbodrerタグを使うのですが、数値を変えて微妙なニュアンスを作っていくのがめんどくさいときがありませんか? そんなときに役立つ、吹き出しやフローチャートで使える三角形を見た目を確認し…

1 6