ブログ

  • All in One WP Migrationでコピーしたら下層ページが404になったときの対処方

    All in One WP Migrationを使って既存サイトを新規サーバーにコピーしたら、コピー先のサイトの下層ページが404になってしまった。

    パーマリンクを更新してみたけど直らないし、.htaccessを編集してみたけど全ページがトップページになってしまう!

     

    そんなときは、設定→パーマリンクの「パーマリンク構造」がコピー元と同じになっているか見てみましょう。

    どうもここの設定はコピーされないようです。違っていれば同じにしてみてください。

     

    以上、現場からでした。

  • All in One SEOのパンくず構造化データを削除

    All in One SEOのパンくず構造化データを削除

    WordPressのAll in One SEOは自動でパンくずの構造化データを出力してくれる。

    大変ありがたいんだけど、自前でプログラムを用意する場合や、他のプラグインを使いたくてちょっと邪魔になる場合もある。

    しかし管理画面から構造化データの出力をオフにすることはできないので、プログラムで書いてやる必要があるのであった。。

     

    実装

    こう!

    add_filter( 'aioseo_schema_output', 'aioseo_filter_schema_output' );
    
    function aioseo_filter_schema_output( $graphs ) {
        foreach ( $graphs as $index => $graph ) {
    		if ( 'BreadcrumbList' === $graph['@type'] ) {
    			unset( $graphs[ $index ] );
    		}
    
    		foreach ( $graph as $key => $value ) {
    			if ( 'breadcrumb' === $key ) {
    				unset( $graphs[ $index ][ $key ] );
    			}
    		}
    	}
    	return $graphs;
    }

     

    なお、All in One SEOが吐き出す構造化データを全部消したいときは、こう!

    add_filter( 'aioseo_schema_disable', 'aioseo_disable_schema_products' );
    
    function aioseo_disable_schema_products( $disabled ) {
       if ( is_singular( 'product' ) && aioseo()->helpers->isWooCommerceActive() ) {
          return true;
       }
       return $disabled;
    }

     

    以上、現場からでした。

  • WordPress – wp_queryでtermを選択していない記事のみ表示させる

    WordPress – wp_queryでtermを選択していない記事のみ表示させる

    wp_queryで、特定のtermを選択している記事を表示させるのはリファレンスに書いてあるとおり、

    $args = array(
    	'post_type' => 'post',
    	'tax_query' => array(
    		array(
    			'taxonomy' => 'people',
    			'field'    => 'slug',
    			'terms'    => 'bob',
    		),
    	),
    );
    $query = new WP_Query( $args );

    これでオッケー。

     

    じゃあ、termを何も選択していない記事だけ表示したいときはどうすんのということですが、ググったけどわからずChatGPTに聞いたら教えてくれたので、ググってこの記事にたどり着いてしまった人に共有しておきます。

    $args = array(
    	'post_type' => 'post',
    	'tax_query' => array(
    		array(
    			'taxonomy' => 'people',
    			'operator'    => 'NOT EXISTS'
    		),
    	),
    );
    $query = new WP_Query( $args );

    こうです!

     

    以上、現場からでした。

  • grid不要!PCとスマホで要素の順番が全然違うときのcss小技

    grid不要!PCとスマホで要素の順番が全然違うときのcss小技

    レスポンシブで、PCの場合とスマホの場合で要素の順番が違う。

    例えばPCでは見出し→画像→テキストの順なのに、スマホでは画像→見出し→テキストになっていること、あると思います。

    これを小難しいことをせず、シンプルなcssで対処する方法を紹介します。ちなみにgridは僕が全然わからないので使いません。難しくないですかあれ。

     

    レベル1

    まずは一列のパターン。

    これは簡単ですよね。display: flex; を使います。

    @media screen and (max-width: 750px){
      .block {
        display: flex;
        flex-wrap: column;
      }
      .item01 {
        order: 3;
      }
      .item02 {
        order: 1;
      }
      .item03 {
        order: 2;
      }
    }

    flex-wrap: column; で縦に並べ、order で順番を指定してやればOK。

     

    レベル2

    PCでは見出し、テキスト、ボタンが左側にあって右側には画像があるけど、スマホでは画像が見出しの下にくるみたいなパターン。

    これには、display: contents; を使います。

    @media screen and (max-width: 750px){
      .block {
        display: flex;
        flex-wrap: column;
      }
      .left {
        display: contents;
      }
      .item01 {
        order: 1;
      }
      .item02 {
        order: 3;
      }
      .item03 {
        order: 4;
      }
      .item04 {
        order: 2;
      }
    }

    display: contents; は知らない人が多いかもしれません。僕も最近はじめて聞きました。

    これがどういったものかというと、.leftにdisplay: contents; を指定した場合、.leftという親要素の枠だけが消えるというもの。

    .leftの枠が消えることにより、中にあるitem01~item03が、item04の兄弟要素になるわけです。やばい!

    箱を取り去って中身を出すイメージですかね。

    これであとはitem01~04をorderで並び替えるだけです。

    今まではabsoluteを使って無理やり位置を調整したり、PC用とSP用に2つ要素を使って出し分けたりと無駄なことをしていましたが、もうこれで簡単にできちゃいます。

     

    なおIEでは使えませんが、もう知ったこっちゃないですよね。そもそもレスポンシブのときに使うのであれば、IEのことは無視してオッケーだし。

    以上、現場からでした。

  • iOS SafariでリロードするとjQueryが動かなくなったとき

    iOS SafariでリロードするとjQueryが動かなくなったとき

    「ページをリロードすると、iOSのSafariだけアニメーションが動かない」と報告を受けたので、調べた結果、

    $(window).on(‘load’, function(){}) が同じ関数内で2回使われていると、うまく動かないようでした。よく考えたら確かにおかしい書き方なんですが、他のブラウザでは動いてしまうので、なかなか気づけませんでした。

     

    正確には、僕のコードは以下のようになっていたところ、

    $(function () {
      // When Document Ready
      animation();
    });
    
    function animation() {
    
      $(window).on('load scroll', function () {
        // ロードおよびスクロールしたときに動くアニメーション
      });
    
      $(window).on('load', function () {
        // ロードしたときに動く別のアニメーション
      });
    
    }

    こう直すと動きました↓

    $(function () {
      // When Document Ready
      animation();
    });
    $(window).on('load',function(){
      // When Window Load
      animation2();
    });
    
    function animation() {
    
      $(window).on('load scroll', function () {
        // ロードおよびスクロールしたときに動くアニメーション
      });
    
    }
    
    function animation2() {
      // ロードしたときに動く別のアニメーション
    }

    「ロードしたときに動く別のアニメーション」を、分離したわけですね。

    現場からは以上です。

  • vwを使って、ウィンドウ幅によらずデザイン通りの比率にしたいときのmixin小技

    vwを使って、ウィンドウ幅によらずデザイン通りの比率にしたいときのmixin小技

    どのウィンドウ幅でもデザイン通りの比率に見えるようにコーディングしたいというときがあると思います。

    単位vwを使えば再現可能なのですが、自力で計算してやっているとめんどくさすぎて泣いちゃいます。

    そんなときは、sassのmixinを使いましょう!




    実装

    vwは、モニターの横幅を基準に、何%の大きさかを指定できる神単位です。

    例えば .block { width: 50vw; } と指定すると、ウィンドウ幅1800pxのときは横幅が900pxだった.blockが、ウィンドウ幅900pxのときは、横幅450pxになるということです。

     

    考え方として、「どのウィンドウ幅でもデザイン通り」ということは、例えば1366pxのデザイン中である要素の横幅が200pxだったとすると、デザインと要素の比率をそのままvwになおしてやればよいので、

    width = ((200 / 1366) * 100) vw

    となります。

    ((要素の大きさ / デザインの横幅) * 100)

    ということですね。

    これはwidthだけでなく、height、font-size、margin/paddingなど、単位がつくものはだいたいすべてに使えますので、上記の計算式を当てはめることで、ウィンドウ幅によらずデザイン通りの比率を再現することができます。

     

    ただこれを電卓でやっていくのはしんどいので、mixinを使っちゃいましょう!sassやmixinが使えない人は、がんばってください!

    関数はこんな感じ↓

    $pcDesignSize: 1366;
    $spDesignSize: 750;
    
    @function vw( $size: 16 ) {
      $vw: $size * (100 / $pcDesignSize) + vw;
      @return $vw;
    }
    @function svw( $size: 16 ) {
      $svw: $size * (100 / $spDesignSize) + vw;
      @return $svw;
    }

    PCデザインサイズとスマホデザインサイズを変数として持たせておけば、あとで全体の調整をしたいときとか、別のサイトで使いまわしたいときに便利です。

    $size: 16にしているのは僕がデフォルトのfont-sizeに合わせて適当にやってるだけなので、ここはなんでもいいです。

     

    あとはスタイルを指定するときに、デザイン上でのサイズと同じ数値

    .block {
      font-size: vw(20);
      width: vw(265);
      height: vw(70);
      padding-top: vw(16);
    }

    このように書いてやりましょう。pxをvw()に直すだけですね。

     

    以上、現場からでした。

  • Adsenseを自動広告にしたらクリック率が50%以上増えた話

    Adsenseを自動広告にしたらクリック率が50%以上増えた話

    Google Adsenseをお使いのみなさん、こんにちは。

    自動広告、やってますか?最近のAdsense事情はあまり詳しくないんですが、少し前は自動広告にするとサイトの変なところに広告が出るから、あまり使われていない印象がありました。

    僕もずっと手動で固定広告を入れてたんですが、3ヶ月前に記事内に自動広告を入れるようになったところ、なんとクリック率が50%以上も増えていたので、ちょっと記事にしてみます。




    比較データ

    こちらが、自動広告を入れた8月から今日までの3ヶ月と、その前の3ヶ月の比較データです。見づらいと思いますので、拡大とかして見てください。

    収益は出しちゃいけないらしいので、ぼかしてますが、注目していただきたいのは右端。クリック数が3ヶ月で54回→82回、51.9%上昇してます。

    しかも、ページビュー数は変わってないどころか、むしろちょっと減ってるんですよね。

    サイト自体はそんなに変わってないのに、自動広告にしただけで収益が目に見えて上がっているのがお分かりいただけると思います。

     

    ただ、クリック率が約50%増えたのに比べ、収益自体の増加は25%と、やはり1回のクリックに対する単価は低いようです。といっても、自動広告にしただけで25%も収益が増えているならすごいですよね。

     

    最初は、ちょっと広告多すぎるかな…と思ってましたが、「まぁGoogleがやってることだし、問題はないんだろう」と思うようになりました。実際、広告が多くなったことで客足が遠のくといったことも観測されていません。みんなもう広告に慣れたんでしょうね。もっとひどいサイトいっぱいあるし、これくらいなら全然マシなんだと思います。

    2ヵ所だけ、PCでいうと右上のデカ広告と記事下のシェアボタンの上にある広告だけ固定で入れてますが、あとは全部自動で入ってます。そんないうほどおかしいところに出現する広告もなくなったように見えます。ただ一つ、ページ遷移するときに出てくる全画面広告だけははずしてます。あれはクリックもされないし、ただただ邪魔。

     

    もしまだ自動広告入れてない人がいれば、検討してみてはいかがでしょうか。

    以上、現場からでした。

    しかし、俺のブログはいったいいつになったら関連記事広告が出せるようになるんだ…

  • 受託Web制作フリーランスが暇なときにできること

    受託Web制作フリーランスが暇なときにできること

    こんにちは、暇人です。

    12月にやるはずの3案件が全部ずれて、しばらく暇になってしまいました。いやーこんなことあるんですね。しかたないのでブログ書いてます。

    さて受託Web制作で生計を立てている僕ですが、やはり仕事がない日はちょいちょいあります。コーディングが意外と早く終わった、急に案件がなくなってスケジュールが空いた、シンプルに案件がない、など理由は様々ですが、忙しいときもあれば暇なときもある。それが世の常です。

    1日だけ暇な日もあれば、月単位で暇なときもあります。そんな仕事がない日は何をしているのか、紹介したいと思います。

    ・ブログを書く
    ・ブログを読む
    ・サービスやアプリを作る
    ・難しい問題に挑戦してみる
    ・データの整理をする
    ・仕事を探す
    ・経理
    ・何もしない

    だいたいこんな感じです。それではいってみましょう!




    ブログを書く

    今やってることですね。

    ブログを書くといっても、収益化とか難しいことは考えなくても大丈夫です。実際、収益化は難しいです。収益化しようと思うと、本気で毎日ブログのことを考え続る必要があると思います。

    そこまで身構えなくても、仕事のことや技術のこと、自分のことなどをアウトプットするだけで、自分の中の情報整理にもなりますし、フリーランスに必要な「自分を知ってもらうこと」がブログを通じてできるようになります。

    twitterなどSNSをフリーランス名義でやっているのなら、ブログのリンクを貼ることで名刺代わりにもなります。

    収益化しないのであればわざわざWordPressで作らなくても、Qiitaでもはてなブログでもなんでもいいので、とりあえず書いておいて損はないです。ただ、WordPressでオリジナルでいい感じのブログサイトを作ることができれば、それだけで技術のアピールはできますよね。

    ブログを読む

    はてなブックマークやQiita、あるいは同業者さんたちのブログを読み、業界のトレンドを知っておくのもいいでしょう。

    ひとりでやっていると、世界に取り残されがちですからね…

    自分のブログを書くネタ探しにもなります。

    TwitterやFacebookで同業者やそれに近しい人をフォローしてると、思いがけない優良情報が入ってきたりもするので、普段からSNSで情報収集するのもオススメ。

    サービスやアプリを作る

    長期間暇な場合は、サービスやアプリを作ってみるのもありでしょう。

    そしてこの際、今まで自分がやったことのない技術に挑戦してみることをオススメします。

    例えば僕の場合、触ったことのないLaravelでサービスを2つリリース(どっちも特に使われることなく終わりましたが…)したり、アプリ開発のためにKotlinを勉強したりしました。

    ただ今からAndroidとiOS両方のアプリ開発を両方別々にやろうと思うとまぁしんどいので、今は、Flutterを勉強してます。(作りたいアプリはあるけど、まだ設計から何も進んでないんですよね…アプリ難しい…)

    もちろん今自分ができる技術で、サクッと何か作ってしまうのもありです。僕もWordPressで何個もサイトを作ってきました。

    自分ひとりで開発するのは大変ですが、チームではないしクライアントも上司も納期もなく、逆に自由に気楽に取り組めます。

    もしかすると、ヒット作が生まれるかも…?

    難しい問題に挑戦してみる

    「あのとき妥協した問題」はないでしょうか?

    もっといい実装方法はあるはずなのに、時間がないから「もうこれでいいや」と妥協した問題が…え?ないの?いいや、あるんです!!

    そんな、あのときできなかった問題に改めて取り組んでみるのもいいと思います。自己の成長にも繋がりますし、心残りがなくなってスッキリします。

    データの整理をする

    長い間受託をやっていると、コーディングデータはもちろん、先方から送られてきた資料やデザインデータなどが溜まってきます。

    定期的に整理しておくといいでしょう。

    ちなみに僕の場合、古いコーディングデータは圧縮してクラウドにしまうかgithubへpushしてローカルから削除。デザインデータはこちらで保管しておく必要がないので、全部削除しています。

    仕事を探す

    長期間仕事がないと、まぁぶっちゃけやばいですよね。探しましょう。

    僕の場合は、初期の頃はランサーズで仕事を探していました。

    いつもお世話になってるクライアントさんや昔お世話になっていたクライアントさんに、安くするので何か仕事ないですかと相談してみるのも全然ありだと思います。

    中にはリスティング広告を出している人もいるみたいです。ブログのアクセスが多いのであれば、仕事募集中のLPを作って誘導してもいいですね。

    経理

    フリーランスなので、経理からは逃れられません。

    確定申告直前に1年分の経理を行うのはしんどいと思うので、1~3ヶ月くらいでまとめて、暇なときに経理をしておいたほうがいいでしょう。

     

    何もしない

    本当に何もすることがない。あるいは、何もする気が起こらない。

    そんなときは、休みましょう。誰にも怒られませんし、休んでも支障はありません。だって仕事がないんだもの。

    休みとはいえ連絡や細かい修正なんかは入ってくるかもしれないので、ゲームしたり読書したりと、いつでも仕事に入れる状態であればベストかと。

    緊急の対応がなさそうであれば、連絡や細かい仕事は後回しで外に出かけるのも、リフレッシュになったり刺激があったりでいいと思います。「偶然何かを発見する」ってなかなか家の中ではできないですからね。

     

    おわり

    以上、受託Web制作フリーランスが暇なときにできることでした。仕事が無くてもいろいろできることはありますが、休めるなら休んでいいと思います。

    どうしても、何か仕事に繋がることをしなきゃいけない気になっちゃうんですよね。でも大丈夫。さぁ、ゲームのスイッチを押してみて!

    ピピッ ウィ~ン(PS4の起動音)(牧場物語)(ゲームの中でも仕事)

     

    それじゃ、バイバイ~

  • CSSでテキストに枠をつけるジェネレーター(枠が太くても大丈夫)

    CSSでテキストに枠をつけるジェネレーター(枠が太くても大丈夫)

    CSSでテキストに枠をつけるためには、text-shadowを複数指定して「影を枠っぽく見せる」ことで再現しますが、枠が太くなるにつれてちょっと大変なことになります。

    というわけで今回はそれをパパっとできるジェネレータをご紹介。




    CSS text-stroke generator

    リンクはこちら→CSS text-stroke generator

    使い方は簡単で、フォントサイズ、カラー、枠の色、太さを指定するだけで下部にcssが表示されます。なっが…こんなもん書いてられません。

    枠の太さは20pxまで指定可能。めちゃくちゃ便利…ありがたいですね。

    現場からは以上です。

  • XAMPPのphpを7.4にするときApacheが起動できない場合の対策

    XAMPPのphpを7.4にするときApacheが起動できない場合の対策

    ずっとXAMPPを使ってローカルでコーディングを行ってるんですが、そろそろphpアップデートするかいっつってアップデートしようとしたらApacheが起動しなくて躓いたときの話。

    なんとか解決しました。




    問題

    XAMPPのサイトから、最新版のphpをダウンロードして、現在のphpと入れ替える。

    基本はこれだけでいいんですが、僕の場合は入れ替えたあとにApacheを起動しようとすると、

    Error: Apache shutdown unexpectedly.
    This may be due to a blocked port, missing dependencies, 
    improper privileges, a crash, or a shutdown by another method.
    Press the Logs button to view error logs and check
    the Windows Event Viewer for more clues
    If you need more help, copy and post this
    entire log window on the forums

    こんなエラーが…

    「なんかよくわからんけどだめっぽいから、エラーログ見てね」というエラー文らしい。ここでは教えてくれないのね

    というわけで、下の画像にあるボタンをクリックして、Apacheのエラーログを確認。

    するとこんなエラーが。

    PHP Warning:  'vcruntime140.dll' 14.0 is not compatible with this PHP build linked with 14.16 in Unknown on line 0

    どうも「vcruntime140.dll」というファイルが現在のphpと合いませんよと言われているらしい。vcruntime140.dllは、phpを動かすために必要なランタイムパッケージとのこと。

     

    そこでまず、こちらの記事で紹介されているように、Vidual Studio C++再頒布可能パッケージをインストールしてみた。

    https://qiita.com/ricchan_k/items/5b05851a351d3d590f34

    しかし、動かず…エラーも同じである。これはたぶんWindows全体の話であって、xamppの中の小さな世界で使われているvcruntime140.dllはまた別のものなんだろうなと思った。

     

    次に、こちらの記事で

    https://labor.ewigleere.net/2020/02/24/xampp-php-update/

    xampp/apache/bunの中にあるvcruntime140.dllを、別のアプリケーションで使われているvcruntime140.dllと入れ替える」と書かれていて、そんなことができるんですかと思って試しにCドライブをvcruntime140.dllで検索、そして適当にOneDriveの中にあったvcruntime140.dllと入れ替え。

    まさかこれで動かんよなーと思ってApache起動してみると…

     

    動いた。

     

    まとめ

    ・とりあえず、エラーログを見ましょう。
    ・”PHP Warning: ‘vcruntime140.dll’ 14.0 is not compatible with this PHP build linked with 14.16 in Unknown on line 0″と言われた場合、他のアプリケーションからvcruntime140.dll を持ってきて、xampp/apache/binの中にあるvcruntime140.dllと入れ替えましょう。

     

    現場からは以上です。

  • CSSだけで埋め込みGoogle Mapをモノクロに

    CSSだけで埋め込みGoogle Mapをモノクロに

    Google Mapの埋め込みの見た目を変えるためには基本的にはGoogle Maps APIを使用してプログラムを書く必要がありますが、全体的にモノクロにしたいだけなら、CSSだけでいけます。




    実装

    こんな感じでhtmlを書いて

    <div class="googlemap">
      <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d3240.482450600333!2d139.689727715259!3d35.68974363019235!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sja!2sjp!4v1628750015349!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
    </div>

    こんな感じでcssを書きます

    .googlemap {
      iframe,
      object,
      embed {
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);
      }
    }

    以上!

     

    filter: hoge(); は、画像にいろんなフィルターをかけられるプロパティ。ぼかしを入れたりセピア調にしたり、彩度を変えたりといろんなことができる神プロパティです。grayscale は、モノクロ調にするフィルターです。

    注意として、IEでは使えません。

    なので、Google Mapをモノクロにしてほしいと言われた際は、Google Maps APIを使ってちゃんとやるか、IEでは適応されませんが大丈夫ですか?か、どっちか確認しておきましょう。

     

    現場からは以上です。

  • フリーランスが仕事を継続してもらえるには何が必要なのか

    フリーランスが仕事を継続してもらえるには何が必要なのか

    前回、こちらの記事で

    とある在宅フリーランスの仕事の取り方

    「フリーランスで生きていくには、継続して仕事をもらえることが大事」という話をしましたが、それでは、継続して仕事をもらうためには、どのような努力をすればいいのでしょうか。

    僕が継続して仕事をもらうために必要だと思うことは、以下の3つです。

    ・相手の期待に応える
    ・料金の感覚が合っている
    ・コミュニケーションがとりやすい




    相手の期待に応える

    相手の期待に応えることができなかったら、またお願いしようとは思われないでしょう。

    期待といっても、クライアントごとに異なります。例えば、

    ・納期までに要望通りの納品ができる
    ・いつでも対応してほしい
    ・最初から完璧に仕上げほぼ修正なしの状態で納品してほしい
    ・値段が安いのがいい

    などですね。

    僕がその中で一番重要視しているのは、「納期までに要望通りの納品ができる」です。他の点については、正直優先度は低いです。確かにそれらを望むクライアントもいましたが、そこは自分にあったクライアントと付き合うのもフリーランスを続けるうえで大事なので、無理をしないとやっていけないようなクライアントの仕事は請けないようにしています(というか、相手の期待に応えられていないため、向こうから継続して来なくなります。)

     

    もちろん、「自分が得意とする分野において、相手が実装してほしいことを実装できる」のは当たり前です。できないできないでは、仕事は頼めないですからね。

     

    料金の感覚が合っている

    いくらスキルが高くても、相手の予算を超えることは難しいです。こちらの提示した金額が、相手の感覚をはるかに上回るようでは、仕事をいただくのは難しいでしょう。

    実際僕も、フリーランスになってから徐々に単価を上げていったんですが、初期からお世話になっていた何社かは1年ぐらいで連絡をしてこなくなりました。

    でも、それでいいんです。大事なのは、自分のやりたいちょうどいい仕事が、ちょうどいい金額でできることなので、それが通るクライアントから継続してもらえるのが一番です。

    つまり自分の実力を、しっかり定価で販売できているということですよね。高ければ「こんな高いのに微妙やな…」と思われますし、安ければただ自分がしんどいだけです。めっちゃ働いているのに全然稼げないのでは事業としては失敗です。

    ただ、どうしてもこの仕事請けたいなという場合は、相手に合わせて金額を調整するのもありだと思います。

     

    コミュニケーションがとりやすい

    いくらスキルがあって金額も納得の値段であっても、なんか話してて嫌だなと思ったら発注しづらいです。

    コミュニケーションが苦手であっても、フリーランスをやるのであれば仕事上のコミュニケーションは必須になりますので、コミュ障なんて言ってられません。

    ポイントとしては、相手のテンションや言葉遣いに合わせる、トゲのない言い回しを心がける、仕事のホウレンソウは丁寧に、とはいえ硬くなりすぎず柔軟に、そしてちょっとした雑談などはややフランクに、といったところを気を付けています。

     

    おわり

    まとめです。

    ・相手の期待に応える
    ・料金の感覚が合っている
    ・コミュニケーションがとりやすい

    これらを気を付けることで、継続発注してもらえる可能性が高くなります。

    クライアントとしては、とりあえず「ちゃんとしていて、料金も問題ない」のであれば、他の発注先を探すよりも継続して同じ人に発注したほうが圧倒的に楽なんですよね。

    一度頼めば、実力も値段もわかるので、次からも発注しやすくなりますし。

     

    また、自分がちゃんと仕事ができる人であれば、今の自分に見合ったクライアントが自然につくんじゃないかと思ってます。

    安いのであれば、値段が安いのを好むクライアントが、高くても完璧な仕事をするのであればピッシリしたクライアントが。そして僕のように、納期はしっかり守ったうえでそれなりのものが納品できる人には、それをヨシとするクライアントが。

    もちろん、ちゃんと仕事ができない人には、どんなクライアントもつかないですけどね。まず、ちゃんと仕事をする。そこは個人事業として最低限必要なことなので、それができないのであればたぶんフリーランスは無理です。

     

    それじゃ、バイバイ!

  • 表の項目名とか1行のテキストを両端揃えにする CSS + jQuery

    表の項目名とか1行のテキストを両端揃えにする CSS + jQuery

    表の項目名を、両端揃えにするやつやりたい!

    こういうやつ!

    なるほど、やってみましょう。




    実装

    真っ先に思い浮かんだのは、text-align: justify; ですが、これはなんとまだSafariで使えないとのこと。

    みんなIEのことなんやかんや言ってるけど、Safariも大概しんどいよ・・・。

    というわけで、以下のように考えてみました。

    ①要素内のテキストを1文字ずつspanで囲む
    ②display: flex; で、両端揃えにする

     

    まず基本のhtmlはこんな感じ。今回は説明を省くため、表ではなく項目名だけリストにしてますが、だいたいどんな構造でもいけます。

    <ul class="list">
      <li><p class="justify">設立</p></li>
      <li><p class="justify">代表者</p></li>
      <li><p class="justify">住所</p></li>
      <li><p class="justify">事業内容</p></li>
    </ul>

    ①要素内のテキストを1文字ずつspanで囲む

    <span>設</span><span>立</span>

    みたいな感じで1文字ずつ囲っていくわけですが、これを全部手動でやるのはめんどくさすぎるので、ここはjQueryのパワーを借りましょう。

    $('.justify').each(function() {
      var content = $(this).html();
      var text = $.trim(content);
      var newHtml = "";
      text.split("").forEach(function(v) {
        newHtml += "<span>" + v + "</span>";
      });
      $(this).html(newHtml);
    });

    これで、.justifyごとに全て1文字ずつspanで囲まれます。
    もちろんjQueryでなくてもできますので、自分の環境に合わせ、「JS 1文字ずつ span」でググってみてください。

    ②display: flex; で、両端揃えにする

    両端揃えにする前に、横幅を確定しておく必要があります。
    ここは、一番多い文字数に合わせ、emで設定してみました。

    .justify {
      width: 5em;
      display: flex;
      justify-content: space-between;
    }

    これで、両端揃えになります!

    現場からは以上です。

  • とある在宅フリーランスの仕事の取り方

    とある在宅フリーランスの仕事の取り方

    「在宅フリーランスって、どうやって仕事とってるの?」

    「いざフリーランスになったはいいけど、仕事の取り方がわからない」

    そんな方のために、在宅フリーランス5年目になる僕が実際どうやって仕事をとって生きているのかをご紹介します。




    仕事は取ってない

    おっと、さっそくどういうことでしょうか。

    そう、僕はほとんど自分で仕事を取っていません。基本的には、いろんな人から仕事をもらって生きています。

    フリーランスというと、営業して仕事をとっているイメージがあるかもしれません。確かにそうやって生きている人もいますが、僕のように複数のクライアントがいて、継続して仕事をもらっているフリーランスも多いです。

    継続して仕事がもらえるようになると、自分で営業するコストが省けます。営業するのも大変ですからね。

    営業を省くぶん、自分の得意な分野、僕の場合はコーディングに力を注げるわけです。

     

    継続して仕事をもらうコツは、以下の記事で書いています。

    フリーランスが仕事を継続してもらえるには何が必要なのか

    新規クライアントとの出会い

    継続して仕事もらえるから営業しないといっても、仕事をくれるクライアントがいないと意味がありません。

    僕の場合は、以下のような形で新しいクライアントと出会うことが多いです。

    ・以前勤めていたWeb制作会社での繋がり
    ・その人からの紹介
    ・勉強会での出会い
    ・ランサーズで仕事を請けた人からの紹介

    こんな感じです。

    ランサーズは、フリーランスになった最初の頃にちょっと使ってました。いろいろ言われていますが、使い方を間違えなければ、普通に便利です。

    https://meshikui.com/2018/10/25/1198/

    あとはほぼほぼ、勤めてた会社の繋がりなんですよね。

    Web制作会社なので、もちろんその繋がりはほとんどWeb制作専門の人が多いわけで、しかも営業して仕事をとってくることに長けていて、制作を外注する人たちなんですよね。もう完璧です。営業しない技術者である僕からしてみたら、まさにベストパートナー。

    未経験からフリーランスになったなら

    会社に勤めず、未経験からフリーランスになった場合。

    正直、僕はその方法はオススメしていません。なぜなら、技術云々の前に業務のことがわかってないからです。いくら技術があっても、仕事のやり方がわかってないと、よほど根性のある人かセンスのある人じゃないとフリーランスとしてやっていくのは厳しいと思うのですが、それでもなっちゃったという場合。

    やはり、最初は営業しないとダメでしょうね。繋がりもないし。

    もちろん自分は未経験なわけなので、売り込む際はかなり苦戦を強いられるでしょう。もう最初なんて安いしか取り柄がないですからね。

    しかし、ちゃんとクライアントの期待に応えて実績を積んでいけば、いつかは安定して仕事がもらえるようになるかもしれません。

    ただ、僕は一度ちゃんと会社で働いたほうが圧倒的に有利だと思います。

    営業しないデメリット

    営業しなくても仕事がもらえるのは、営業コストがかからないぶん楽ではあるんですが、やはりデメリットもあります。

    仕事があるときとないときの差が激しい

    いろんな人から同時に仕事が入ることもあれば、ピッタリどこからも入らないときもあります。

    こればっかりは受託の逃れられない運命とでも言いましょうか、仕方ないことではあるんですが、やはりきついときはありますね。

    あまりにも多いときに、仕事を手伝ってもらえる人がいると大変有利です。断らずに済みますからね。仕事を断らないというのは、継続して仕事をもらえるポイントの一つでもあります。

    仕事がないときは、もちろん収入もまったくありませんので、そこを乗り切れる余裕は持っておかないと、ただ運悪く仕事がなかっただけなのに急に廃業せざるを得なくなることもあります。3ヶ月くらいは無収入で生きていける余裕はほしい。

    大きくは稼げない

    基本的に、受託というのは単価×工数で金額が決まる、いわゆる労働集約型ビジネスです。

    営業してたっぷり予算をもらって、制作を外部に依頼してマージンをごっそりいただくというおいしさは、やはり営業できる人にしかありません。

    もしクライアントワークで大きく稼ぎたければ、営業して大量の仕事を回すことを考えたほうがよさそうです。

    あるいは僕の場合は、受託で使う時間を減らし、ストック型収益を得る仕組みを作っています。

     

    仕事をただもらうだけのスタイルは、仕事があるうちは楽だし安定していますが、いつ仕事がなくなるかはわからないし、毎回違う案件をこなし続けるのはシンプルにしんどいです。

    なので、それを土台に、他の柱を建てていくといった立ち回りが重要になります。

    おわり

    というわけで、今回の在宅フリーランスの仕事の取り方のご紹介は、

    「みんなが仕事をくれるので、自分から仕事はとってない」

    でした!

    でもこのままだとまずいので、受託を土台にしつつも、自立できるよう工夫しようねというお話。まぁこれが難しいんですけどね。

     

    それじゃ、バイバイ~。

  • ローカルでメールを送信せずにMW WP Formのデバッグを行う

    ローカルでメールを送信せずにMW WP Formのデバッグを行う

    ローカルでXAMPPとかを使ってWordPressの開発を行っている際、MW WP Formの確認→完了の遷移や、メール本文の中身もテストしたい。

    そんなご要望にばっちりお応えする機能が、MW WP Formにはあります。




    実装

    wp-config.phpに、以下のように書きます。場所は define(‘WP_DEBUG’, false); の直下にでも。

    define('WP_DEBUG', false); // ←元からあるやつ
    define('MWFORM_DEBUG', true); // ←追加

    これだけで、MW WP Formのデバッグモードが有効になります。

    デバッグモード中は、送信ボタンを押してもメールは送信されませんが、メールが機能していなくても確認→完了画面の遷移が機能します。

    また、wp-content > uploads > mw-wp-form_uploads フォルダ内に、メール送信時のログが出力されます!

    これにより、メールを送信することなく、メールの中身を見ることが可能。公開されているサイトでも、メール送信なしで動作確認したい場合にも使えますね。

     

    現場からは以上です。

  • wp_get_archivesのリンクが404になるときの対処法

    wp_get_archivesのリンクが404になるときの対処法

    wp_get_archives()でカスタム投稿タイプの月ごとのアーカイブのリストを表示させたのに、リンク先が404になってしまう…

    そんなときの対策です。




    なぜ404になるんだい

    月別アーカイブページのURLって、デフォルトだと例えばnewsという投稿タイプであれば’/news/2021/08’みたいな感じだと思うんですけど、投稿タイプのパーマリンクを’/news/%post_id%’にしてしまっている場合、記事の詳細ページのURLが’/news/2021’って感じで、アーカイブのURLとかぶるんですよね。

    つまり、「‘/news/2021/08’ という記事はありませんよ」と誤って認識されちゃうみたいです。

    アーカイブページじゃなくて、記事ページとして認識されてしまっている。

     

    ということは記事のパーマリンク構造を変えればいけるのでは?ってなると思うんですが、記事のパーマリンク構造を変えるのはまぁいろいろきついです。

    ここは、もっと簡単なプランBでいきましょう。

    実装

    実は、月別アーカイブページには「/news/2021/08」ではなく「/news/date/2021/08」でもアクセスできることがあります。これはアクセスできないときもあるので、おそらく、パーマリンクを’/news/%post_id%’にしているとき限定で特別に用意されるパーマリンクなのかなと。

    これは実際この辺の仕組みを完全に理解しているわけではないので推測ではありますが、先ほどこのブログでも試しに記事のパーマリンクを’/%post_id%’にしたところ、「/date/2021/08」にアクセスできました。なので、間違ってはないと思います。

    というわけで、wp_get_archives()のリンクの文字列を無理やり書き換えちゃいましょう。

    wp_get_archives(); を書く場所を、以下のように変更。

    $args = array(
      'show_post_count' => true,
      'echo' => false,
      'post_type' => 'news'
    );
    
    $monthly_list = wp_get_archives( $args );
    $monthly_list = str_replace('/news/', '/news/date/', $monthly_list);
    echo $monthly_list;

    wp_get_archives()はそのままでは出力までしてしまうのですが、‘echo’ => falseを設定することで、文字列として変数に代入できます。
    さらに文字列を置換する関数str_replaceで、リンクの’/news/’を’/news/date/’に書き換えているわけですね。

    ちなみにですが、デフォルトの投稿(post)では、この処理はwp_get_archives()で自動でやってくれるみたいなので、やらなきゃいけないのはカスタム投稿タイプのときだけのようです。

    現場からは以上です。

  • PC/スマホで改行する位置を変えるCSS小技

    PC/スマホで改行する位置を変えるCSS小技

    センター寄せのテキストなんかで、PC向けとスマホ向けで改行位置が違う場合、テキスト自体を出し分けている人が多いようなので、もっと簡単にできる小技をご紹介。




    実装

    以下のclassを用意します。

    @media screen and (min-width: 751px){
    	.pc-non {
    		display: none !important;
    	}
    }
    
    @media screen and (max-width: 750px){
    	.sp-non {
    		display: none !important;
    	}
    }

    751px以上のときは、.pc-nonは非表示になり、逆に750以下のときは.sp-nonが非表示になるスタイルです。

    「表示させる」だと、blockだったりinlineだったりで使い分けなきゃいけないんですが、「非表示にする」だと非表示にするだけなのでシンプルで良いです。

     

    そして、改行タグ<br>に以下のようにclassをつけましょう

    <p>これはPC用の<br class="sp-non">改行</p>
    <p>これはスマホ用の<br class="pc-non">改行</p>
    
    <p>スマホでは改行したいけど、<br class="pc-non">PCでは改行したくない</p>

    なんと、<br>にもdisplay:none;が効くんですね!

     

    このclassはbrじゃなくても、いろんな出し分けに重宝するのでぜひ使ってください。

    現場からは以上です。

  • absoluteで上に乗った要素が邪魔でクリックできないときのCSS小技

    absoluteで上に乗った要素が邪魔でクリックできないときのCSS小技

    ボタンの上とかにabsoluteで何か乗ってて、ボタンがクリックできない!

    そんなときに使える小技です。




    実装

    absoluteしている要素に、以下のcssを追加。

    pointer-events: none;

    これだけで、下のボタンが押せるようになります。

    selectのスタイルを変更するときにも便利!

     

    以上、現場からでした。

  • フリーランスを長く続けるために、「がんばりすぎない」努力をする

    フリーランスを長く続けるために、「がんばりすぎない」努力をする

    1年以内にギブアップしてしまうフリーランスがほとんどの中、僕はなんとこんな調子で5年目を迎えてしまいました。

    まぁ1年以内にギブアップするのは、やってみたけど向いてなかったか、全然そんな実力がなかったかのどっちかだと思うんですが、それにしても5年目ともなると、けっこう続いていると思うんですよね。

    今まで3年以上同じ仕事をしたことがなかった僕にとっても、ここまで長く続いているのも珍しいですし、たぶんまだまだいけるんじゃないかという気はしています。

    というわけで今回は、フリーランスを長く続けるにおいて、僕が大事だと思う

    「がんばりすぎない」

    について、考察してみましょう。




    がんばりすぎない

    なぜ僕ががんばりすぎないことにこだわるかというと、自分の嫌なことであったり、しんどいことは、自分の意思で続けることは難しいからです。

    これは人間の脳がそういう仕様になっていますので、よほどの変態でない限り抗うことはできません。

    フリーランスは自分の意思で動くことが前提の働き方になりますので、しんどかったら続きません。会社員だったら、しんどくても会社に行けば仕事があり、やらなきゃいけないのでやるしかないんですが、フリーランスの場合は自分で仕事を請けないと仕事はないし、自分で進めないと仕事は進みません。

    そんなわけで、長く続けていても、苦しくないので、続けられるというのはとても大事な要素です。

    そもそも、必要以上にがんばらないと回らないのであれば、それは事業として失敗しているといえます。もちろん将来の展望があるから今はがんばりどきというなら話は別ですが、一生そんな調子では続きません。

     

    ところで僕は毎日のように働きたくないと言ってますよね。苦しくないんですか?

    はい、僕が見ているのはもっと先、本当の意味で働かなくてもよくなる未来なので、そのために今がんばるのは全く苦ではありません。

    働きたくないと言っているのは、逆に自分を奮い立たせている理念みたいなもんですね。働かない未来を目指していることを忘れないための。プロフィールに書いてある通り、「働きたくない」は僕の信念の柱であり、行動の源です。

    がんばりすぎないコツ

    がんばりすぎないことは大事と言いましたが、これはけっこう大変だったりします。

    だって、がんばらないと仕事ないし、仕事なかったらお金もないじゃん。無理してがんばって稼がないと、生活が苦しいでしょと思うのは当然です。

    それじゃがんばりすぎないためにどんなことをすればいいのかを見てみましょうか。

    得意なことに集中する

    苦手なことをやろうとすると精神的にしんどいですし、時間がかかるうえクオリティも低く、メリットは一切ありません。

    逆に、得意なことであればサクサクできますし、短時間でクオリティの高い仕事ができます。つまり少ない時間で稼ぐことができるということです。得意なことに集中しましょう。

     

    例えば僕の場合、コーディングとWordPressが得意です。あとはWebサイトに実装する程度のプログラミングであれば、なんとなくこなすことができます。

    しかしデザインやインフラに関しては苦手なので、やらないことにしています。それが必要な場合、得意な人に任せる。

    営業しない

    営業も苦手だし、営業にかける労力を仕組み作りに回すことにしているので、極力やりません。

    え?営業しなくても仕事があるの?

    はい、あります。僕は基本的に、一度仕事をいただいたクライアントからのリピートや、人脈、紹介で繋がったクライアントからのリピートで生きています。

    営業しなくても、みんなが勝手に仕事をくれる状態ですね。

     

    そうなるためには、自分のやり方に合っていて、定期的に仕事をくれるクライアントと出会う運ももちろん必要ですが、ちゃんとクライアントが満足できる仕事をして、信用されることが一番大事です。

    世の中にはパレートの法則と呼ばれる法則があり、ざっくり言うと、売り上げのほとんどは、リピーターが生み出していると言われています。

    なのでリピーターを大事にすることで、営業もすることなく安定した売り上げを得ることができます。

    ただし、100%リピーターに依存していると、いざ繋がりが切れたときに一気にピンチになりますので、そうならないよう緩やかに新規顧客を獲得する仕組みも作っていたほうが、より安心です。

     

    逆に営業が得意な人は、どんどん営業して大量の仕事を回すのもアリだと思います。そうなった場合、フリーランスより法人のほうが向いてそうですけどね。

    時間管理はしっかりやる

    フリーランスは会社員と違って、就業時間は決まっていませんので自由に仕事ができます。

    ただ、一日のいつでも好きな時間に仕事をするという感じだと、いつでも仕事するぞ!というやる気とは裏腹に、ダラダラしてしまいなかなか進捗が出ません。やる気の無駄使いです。

    働く時間が自由とはいえ、一日に何時間仕事するのかはしっかり決めておいたほうがいいです。

     

    受託Web制作は、基本的には納期ありきなので、納品までの日数が決まっています。その日数から、一日何時間やれば達成できるかを把握し、その時間内は集中して仕事をすることが大事です。

    仕事をやるときはやり、休むときは休む。

     

    また、持てる時間の全てを受託に集中させるのは避けたほうがいいです。受託は仕事をもらえないと仕事がないフロー型ビジネスなので、これだけを基盤としていると、急に仕事がなくなりいきなりピンチになることが多いにあり得ます。

    受託の時間を減らして、並行してストック型収益の仕組みを作るか、あるいは最初だけ受託をガンガンやりまくって、貯金してさっさと事業を起こすかどちらかをしないと、あまり長続きはしないでしょう。

    おわり

    まとめです。

    フリーランスを長く続けるには、「がんばりすぎない努力」が必要

    以上!

     

    あ、あと健康には気を使おうね。体調崩して仕事できなくなったらやばいからね。栄養のある美味しいものを食べて、良く寝て、適度に運動しましょう。

    それじゃ、バイバイ。

  • 【これは強い】僕が未経験からWeb制作会社に入るまでにやったこと

    【これは強い】僕が未経験からWeb制作会社に入るまでにやったこと

    最近、未経験からIT業界を目指す人が多いようなので、今回は僕が未経験からWeb制作会社に入るためにやったことを紹介したいと思います。

    といっても実は僕は会社員になる予定はなく、未経験からちょっと勉強してフリーランスになろうとしていたクチです。だけど、4ヶ月くらいやってみて無理そうだったので、Web制作会社で経験を積むことにしました。

    なので正確に言うと、Web制作会社に入るためにやったというより、Web制作をやるために勉強したことが、結果的にWeb制作会社に入るために役に立ったということになります。なので僕の場合は少し時間はかかりましたが、最初からWeb制作会社に入るつもりで行えば、もっと早く達成できると思います。




    前職

    僕がWeb制作会社に入る前は、棚卸業者でアルバイトをしていました。IT全然関係ない!26歳くらいまでフリーターだったわけですね。

    あまりにも過酷で低賃金な労働環境だったため、もっと自由に楽しく、今よりも稼げるWeb制作フリーランスを目指しました。他にもシステム開発とかある中なぜWeb制作を目指したかは、こちらの記事に書いています。

    在宅フリーランスやるならWeb制作がオススメな理由

    フリーランスになりたいと思ったら、すぐに棚卸業者はやめました。心身ともに疲れ切っているなか、勉強するのは難しいです。その代わり、コンビニでバイトを始めました。コンビニならそんな長時間働くことはないし、給料は安いから生活は苦しかったけど、勉強する時間はたっぷりありました。

    でも、新しい職に就くために勉強する際は、だいたい半年くらいは生きていける手立てがあるか、もしくは今の職を続けながらがんばって勉強するかのどちらかがいいですね。生活が苦しいとやっぱりストレスにはなるし、お金がないのはいろいろしんどいです。

    あと、コンビニでアルバイトしてるときに高校の同級生と会ったときはマジで気まずかったです。

    本題

    さてちょっと悲しい話になってしまいましたが、そろそろ本題に移りましょう。僕がWeb制作会社に入るまでにやったことは、以下の5つです。

    1.Webデザインの基礎を学ぶ
    2.HTML/CSSの基礎を学ぶ
    3.ランサーズのWebデザインのコンペに参加する
    4.WordPressでブログサイトを作り、運用する
    5.ポートフォリオサイトをWordPress自作テーマで作る

    順番に見ていきましょう。

    なお、僕の場合は本を買って読んだり、ネットで調べながら独学でやりましたが、今はTechAcademy [テックアカデミー]とかProgateとかいった、プロに教えてもらう選択肢もありますので、ちょっと独学では自信ないなと思う方はそういったサービスも検討してみるといいかと思います。

    プログラミングスクールって実際どうなん

    1.Webデザインの基礎を学ぶ

    Web制作をやるなら、Webデザインの知識は欠かせません。

    もう7・8年前のことになるので何の本を読んだか忘れちゃったし、こういうのはどんどん新しい技術が出ているので、Amazonとかで新しくて人気の書籍を買った方がいいと思います。

    確か、「Webデザイン全般の基礎」と「ロゴ」と「タイポグラフィ」の3冊を読んだ覚えがあります。

    2.HTML/CSSの基礎を学ぶ

    Web制作をやるなら、HTML/CSSの知識は(略)

    Webデザインしかしないって人でも、全く知らないのと知っているのでは全然できることが変わってきますので、1冊は読んでおいた方がいいと思います。

    また、デザインもコーディングもどっちもわかるほうが、Web制作会社への就職は有利でしょうね。

    僕は1冊だけ読みましたが、これも古いし今思うとそんなに良い本ではなかったので、紹介は控えておきます。

     

    そんな僕が今紹介するのが、このWebデザインとHTML/CSSが同時に学べる素晴らしい本です。

    この本は、ManaさんというWeb制作業界の神が執筆している本で、めちゃくちゃ売れています。

    Manaさんは、Webクリエイターボックスという有名メディアを運営している方で、知っている人も多いんじゃないかと思います。知らない人はぜひブックマークしておいてください。僕も、こちらのサイトに大変お世話になりました。

    3.ランサーズのWebデザインのコンペに参加する

    基礎を学んだあとは、いきなりランサーズのWebデザインのコンペに参加しました。

    Web制作会社に入る前に、3ヶ月ほどランサーズで案件を探して請けていました。まぁ結果は散々だったんですが、それでも良い経験にはなりました。実務経験が少なからずあるということで、Web制作会社への就職も有利になるんじゃないかと思います。

    僕がオススメするのは、Webデザインのコンペです。なぜかというと、コンペはクライアントからフレームワークなどの資料を提供されることが多く、Webデザインの練習やポートフォリオへ記載するネタにもなるからです。

    他の人のデザインも見ることができるし、当選した人のデザインはとても勉強になります。

    しかももしかすると、自分が当選して報酬がもらえるかもしれません!実際僕は、このとき1回LPのデザインで当選しています。

    4.WordPressでブログサイトを作り、運用する

    ここまで実践してきたことで、オリジナルのWebサイトが作れるようになっているはずです。
    レンタルサーバーを借り、ドメインを取得し、WordPressでブログサイトを作り、艦これの攻略ブログを書いていました。しかもAdsenseまで貼っちゃって。

    ブログサイトの運営は、SEOやSNSマーケティングの勉強にもなりますので、オススメです。

    WordPressでのブログサイトの作り方は、記事にしているのでよかったら見てみてください。

    https://meshikui.com/2019/09/11/1997/

    5.ポートフォリオサイトをWordPress自作テーマで作る

    WordPressの運用のやりかたもわかったら、いよいよ自作テーマでポートフォリオ作りです。

    といっても面接時に見せるポートフォリオなので、作ったのは

    ・トップページ
    ・一覧ページ
    ・詳細ページ

    の3ページだけでした。

    このときは、自作テーマの作り方を先ほど紹介したWebクリエイターボックスの、「WordPress オリジナルテーマの作り方」を見ながら勉強しました。

    ちなみにですが、僕は今の今までWordPressの本は「サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル」しか読んだことなくて、後は全部ネットで調べました。いやー、これだけ情報が載ってるとほんと助かりますよね。

    しかも結局プラグインは作ってません。

    ポートフォリオに載せるのはもちろん、さっき書いたランサーズのコンペで作ったデザインです。ボツになって世に出てないデザインでもいいんです。作品なので。

    おわり

    おさらいです。

    1.Webデザインの基礎を学ぶ
    2.HTML/CSSの基礎を学ぶ
    3.ランサーズのWebデザインのコンペに参加する
    4.WordPressでブログサイトを作り、運用する
    5.ポートフォリオサイトをWordPress自作テーマで作る

    こうやって自分がやってきたことを見返してみると、強くないですか?完璧な流れだと思います。あまりにも強いので、記事タイトルに【これは強い】を追加しておきました。でも、誰にでもできることだと思います。

     

    あとは、面接に挑みましょう!これは余談なんですが、通勤時のストレスを解消するため、なるべく自分の家から近い会社を狙うことをオススメしています。

    僕はこれだけの準備をしておいたおかげか、面接にクソださい私服で生き、志望理由に「家が近いから」と書いていたとしても、一発で受かりました。

     

    会社員からフリーランスになるためにやったことも書いているので、よかったらどうぞ。

    ちゃんとしたフリーランスになるために準備した5つのこと

    それじゃ、バイバイ!