わたしはこれまで約300件のWordPressカスタマイズ対応を行ってきました。実績については主にココナラに溜まっているので参考にしていただければと思います。 → haniwamanさんのプロフィール | ココナラ 対応 […]
ブログ
Googleフォームの送信内容をスプレットシートへ書き出し&任意のメールアドレスに通知する方法
Googleフォームが楽すぎることが判明しました。サイトにいつも設置しているお問い合わせフォームもデザインを気にしなければGoogleフォームでも十分かもしれません。 Googleフォームのメリットとしては以下のとおりで […]
WordPressのエディタが変わった…！「Classic Editor」で前のエディタに戻す方法
WordPress5.0からエディタが「Gutenberg」に強制変更されました。対応しているプラグインがなかったり、使い慣れていないなど、まだ心の準備ができていない…って方も多いのかと思います。 とりあえず […]
Gutenberg（グーテンベルク）の基本的な使い方とブロック要素まとめ
WordPressの新エディタ「Gutenberg（グーテンベルク）」の使い方を紹介していきます。使い方といっても見返すとほぼブロックの説明になっていました笑 Gutenbergは、ブロックを組み合わせていくことによって […]
WP-CLIで面倒なWordPressの初期設定をやってしまおう！※ Local by Flywheelを使う前提
わたしはWordPress案件をメインにフリーで活動しているのですが、WordPress案件をいただいた時に必ずローカル環境を作成します。 ローカル環境の構築に使うのが「Local by Flywheel」です。Word […]
PerfectPixelを使えばデザインカンプを完全再現したコーディングができる！
コーダーとしての質の高さの指標の1つに、デザインカンプからの再現度の高さが挙げられると思っています。 PCサイトだけ作っていればいい時代に生まれた言葉で「ピクセルパーフェクト」があります。ピクセルパーフェクトとはデザイン […]
Photoshopのデザインカンプからコーディングに必要な画像や値を取得する方法
WebコーダーはPhotoshopを完全に扱える必要はありませんが、コーディングに必要な値やデータを取得できなければなりません。 この記事ではPhotoshopからコーディングする際に必要な値や画像を取得する方法を紹介し […]
仕事としてWordPressを覚えるメリット！10パターンの案件に結びつく可能性があります
わたしはWordPressのカスタマイズ案件を約300件ほど対応してきているのですが、この実績をもとに副次的なWordPress案件も多数対応してきました。 一般的にWordPressはサイトを制作するためのツールという […]
WordPressで独自ショートコードの作り方！汎用性の高い投稿にしましょう！
WordPress投稿記事の共通化できる部分はショートコードとして作成しておくと運営が楽です。 わたしのサイトでは次のような吹き出しが全記事にあるわけですが、ショートコードとして作成しておくと、後から「画像を変更したい& […]
Web系フリーランスが「最初の」仕事を獲得するための5パターン
わたしは今フリーランスのWebコーダーとして活動していますが、最初の仕事を受けたときの緊張は今でも忘れません。 これから個人で仕事を獲得していきたい人も多いと思いますが、最初の第一歩の踏み出し方（仕事の獲得の仕方）が分か […]
Webコーダーの仕事内容は「デザインカンプをHTMLやCSSで再現すること」
Webコーダーの仕事内容を一言で表現すると、 デザイナーが作成した「デザインカンプをHTMLやCSSで再現すること！」です。 これができれば仕事として成立します。 この記事では、フリーのWebコーダーであるわたしが行って […]
WordPressテーマからCSSファイルとJSファイルを読み込む正しい方法
WordPressテーマからCSSファイルとJSファイルを読み込む正しい方法です。 <head>に直接書きたくなるのは分かりますが、、、WordPressにはWordPressなりのお作法があります。Word […]
フリーのWebコーダーが円滑に仕事を進める上で持っておくべきツールまとめ
フリーのWebコーダーであるわたしが、仕事を円滑に進める上で 持っていて良かったと思うツール （持ってないけど…）持っておいた方がいいツール を紹介していきます。 この辺を持っておけば大きく困ることはないかと […]
background-sizeの４つの指定の違いと背景画像のCSSでよく使われがちなパターン３つ
コーディング時に意外と使われがちな背景画像のCSSについて紹介です。 背景で最も覚えておくべきは「background-size」だと思います。この指定の違いによって表示がどのように変わってくるのか、マウスでドラッグしな […]
【コピペOKのサンプル付き】Flexboxはこの5パターン覚えておけば大丈夫！
Flexboxのプロパティってめっちゃ多いですが、全部を覚えなくても実務レベルで使うことはできます。わたしも最初のころはFlexboxのプロパティを試していましたが、実際に使うようになって「あれ、ほとんどのプロパティは使 […]
【コピペOK】よく使われがちなマウスホバーのCSSパターン１０選と作り方
マウスホバーのパターンを１０個まとめました。 ホバー時の動きは、基本的には指示がなくコーダーに一任されることが多いので、自分の中で「お決まり」のホバーアクションを決めておくとコーディングが捗るかもしれません。 ちなみにわ […]
実践力を身につけよう！模写コーディングするサイトの探し方
Webコーディング上達の近道にサイト模写コーディングがあります。「模写コーディング」という言葉自体はもしかしたら造語なのかもしれませんが、 模写コーディングとは、 「公開されているWebサイトを見て、ソースコードを見ずに […]
WordPressで作る側（仕事する側）の知識を得るためおすすめ書籍を3つ厳選
わたしはこれまでWordPressのカスタマイズ関連の仕事を300件近く対応してきたのですが、他人のサイトをカスタマイズするにはちゃんと理解してないと対応できません（その人の環境に応じたオーダーメイドの対応になるわけなの […]