ナコさんのブログ | nako-log WEB制作のヒントと日常の便利を紹介。WEB制作はWordPressをメインにCSSやコーディングのHOWTOをまとめています。

注目キーワード

CATEGORY WEB制作のヒント

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

CSS

【コピペOK】レスポンシブサイトを印刷するとレイアウトがタブレットサイズになってしまう問題の解決法！
【コピペOK】レスポンシブサイトを印刷するとレイアウトがタブレットサイズになってしまう問題の解決法！

  • 2021.06.09

例えば集まりでの資料として、海外のホテル予約情報の予備、メモを追加したいからプリントアウト… そんなとき、レスポンシブでサイトを作っていると悲惨なことになっていますが、少しのCSS簡単に解決する方法を紹…

続きを読む
CSS

【たった１行！】WEBフォントがWindows端末でシャギー(ギザギザ・ジャギ)ってまう問題を解決する
【たった１行！】WEBフォントがWindows端末でシャギー(ギザギザ・ジャギ)ってまう問題を解決す…

  • 2021.05.27

１行でWEBフォントがWindows端末でシャギー(ギザギザ・ジャギる)にってしまう問題を解決する方法を紹介します。

続きを読む
coding CSS

compassをバージョンアップしたらDEPRECATION WARNINGが出るようになったときに対処法
compassをバージョンアップしたらDEPRECATION WARNINGが出るようになったときに…

  • 2021.05.25

さてさて、今日もコーディングがんばりますか！ とタスクランナーを動かすと見慣れぬエラーが…。どうやらcompasのベース部分の書き方で怒られているみたい。 ううむ、他案件でアップデートしたからかな、古い案件…

続きを読む
CSS

【2021年】現役WEBデザイナーが使っているオススメのfont-familyはこれだ!!【コピペOK】
【2021年】現役WEBデザイナーが使っているオススメのfont-familyはこれだ!!【コピペO…

  • 2021.03.12

windowsもmacも古いマシンもフォローしないといけないfont-famlyの指定って悩みますよね… 2021年現在、私が現場で実際に使っている指定方法使っているフォントの解説も含めてを紹介したいと思います！

続きを読む
coding

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

  • 2021.02.02

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

続きを読む
coding

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

  • 2021.02.01

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

続きを読む
coding
  • 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をアップデートしたら改行されなくなった時の対処法
WordPressをアップデートしたら改行されなくなった時の対処法

  • 2020.08.31

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

続きを読む
WordPress

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

  • 2020.08.07

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

続きを読む
WordPress

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

  • 2020.08.07

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

続きを読む
coding

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

  • 2020.08.06

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

続きを読む
coding

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…

続きを読む
WEB制作のヒント

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

  • 2020.07.27

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

続きを読む
デザイン

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

  • 2020.07.22

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

続きを読む
1 … 7