WordPressの現在のURLを取得する方法を調べていたところ、get_the_permalink();を使う方法がよく紹介されていたのですが、なんか難しかったのでもっと簡単な方法がないかと、自分なりにシンプルにできる方法を考えてみました。
get_the_permalink();ではなく、get_permalink(); を使用します。
これは、引数に記事IDを入れることで、その記事のURLを取得することができる関数。
つまり、今の記事のIDを取得して、get_permalink(); に入れればいいわけです。
$current_url = get_permalink( $post->ID );
以上、現場からでした。
最近、未経験からIT系フリーランスになりたい人が多いですよね。実は僕も、未経験からフリーランスになりたくてなったクチです。というわけで今回はそんな僕から、在宅フリーランスやるならWeb制作がいいよ！という話をしたいと思います。
実際、僕は在宅フリーランスのWeb屋をやっていて、2017年からずっとひきこもってます。
ITといっても、Web制作だけじゃなくてシステム開発とかいろいろあるわけですが、その中でも僕がWeb制作をやりたかった理由。それは、在宅フリーランスになってから、ランサーズで案件をとりやすそうだったからです。
試しにランサーズを覗いてみるとわかりますが、ランサーズのWeb制作の案件は、システム開発案件に比べ数が多いです。また、比較的小規模の案件が多いため、個人で在宅でも受注しやすいだろうと考えました。
実際、その通りだと思います。僕の周りには、在宅でなかなかの規模のシステム開発を請けている人もいてすげーなと思いますが、それができている人は僕の観測している限り、かなり少ないです。Web制作はまだ受注までのハードルが低く、どちらかというと初心者向けではないでしょうか。在宅フリーランスであれば、Web制作をやっている人が多い印象です。
注意として、Web制作と一言でいっても、範囲が広い（ディレクション、デザイン、コーディング、SEO、広告、マーケティング、ライティング etc…）ので、個人でやるためには自分の得意分野を決め、その分野の能力に特化することが大事だと思います。苦手なことをやろうとすると、時間はかかるわクオリティは低いわでいいことがありません。
例えば僕の場合は、コーディングとWordPressに特化しています。他のこともできなくはないですが、仕事としてやるには少々しんどいです。（でも、知識はあったほうがいい。）
フリーランスのエンジニアは、在宅ではなく常駐でならやりやすそうですけどね。開発のリソースが足りないときに、フリーランスを補充するという話はよく聞きます。
フリーランスとしてやるなら、デザインとコーディング、どっちがいいでしょうか。
これは、その人の得意不得意もあると思いますが、僕はコーディングを推します。
なぜかというと、デザインって、クライアントと直接やり取りして、相手が満足するまで何度もリテイクして…ってイメージないですか？僕が観測できる範囲にそういう事例が多いだけかもしれないんですが、そういうイメージです。
つまり、時間の予測がしづらいんですよね。デザインのスケジュールをたてたところで、実際その通りいかないことが多いです。間にディレクターがいて、進捗管理をばっちりやってくれてデザインディレクションもしてくれるならまだいいんですが、まぁなかなかそうもいかないです。
そんなわけで、スケジュール通りいきづらい印象のあるデザイン。スケジュール通りいかないと、案件がかぶりまくったり、納期直前なのに全然終わらなくて、なんかいつ見ても夜遅くまで仕事してる人をよく見かけます。
デザイナーさんって、根性ある人多いですよね・・・僕には無理です。
その点コーディングは、言ってしまえばもう決まっているものを実装するだけの作業なので、とても気が楽です。どれくらい時間がかかるかも把握しやすいですし、デザインの段階よりかは手戻しも少ない。
サイトの機能に直に関わってくる部分なので、気を付ける部分は多いです。また、いろんな技術を身につける必要もあるでしょう。が、何度も手戻しが発生しないというのは僕にとっては大きなポイントです。
作業時間が把握しやすいということは、それだけ時間管理もしやすくなります。健康的に仕事を継続するうえで時間管理は非常に重要ですので、デザインよりはコーディングのほうが、フリーランスに向いていると思います。両方できたらすごいですけどね。
Web制作は、ただWebサイトを作るポジションであるクリエイターだけでなく、Webサイトを作る前の企画・提案ができるディレクターや、既に完成したWebサイトの売り上げを伸ばすマーケター、広告の運用を専門とする広告代理店などがあり、そのマネタイズ方法も様々です。
例えば、マーケターが自分の施策により売り上げが上がった場合、その一部を報酬としてもらうといった契約ができれば、契約が増えるほどどんどん収入がアップしますよね。これはとても魅力的。
企画・提案からできるディレクターが営業もすれば、作業部分を外注にまわし、報酬額が大きい案件を複数こなすことで大きな収益を得られる可能性もあります。
このように、レバレッジの効く仕事ができるのもWeb制作の魅力ではないでしょうか。
というわけで、僕は在宅フリーランスやるなら個人でも請けやすいWeb制作を、さらに言うなら時間管理のしやすいコーディングをオススメします。
他にも、僕はその域には達していませんが、ディレクションやマーケターという道も魅力があって良いです。
フリーランスのコーダーが実際どんな仕事をしているのかを書いた記事もありますので、よかったらどうぞ。
それじゃ、バイバイ！
WordPressの検索、便利なんですがカスタムフィールドには対応していません。
というわけで、対応させましょう。
デフォルトのフリーワード検索を使う場合。通常のフリーワード検索はタイトル、本文、カテゴリー、タグあたりを検索しますが、そこにカスタムフィールドも追加で検索できるようにするイメージです。
functions.phpに以下のように書きます
function cf_search_join( $join ) {
global $wpdb;
if ( is_search() ) {
$join .= ' LEFT JOIN ' . $wpdb->postmeta . ' ON ' . $wpdb->posts . '.ID = ' . $wpdb->postmeta . '.post_id ';
}
return $join;
}
add_filter( 'posts_join', 'cf_search_join' );
function cf_search_where( $where ) {
global $wpdb;
if ( is_search() ) {
$where = preg_replace(
"/\(\s*" . $wpdb->posts . ".post_title\s+LIKE\s*(\'[^\']+\')\s*\)/",
"(" . $wpdb->posts . ".post_title LIKE $1) OR (" . $wpdb->postmeta . ".meta_value LIKE $1)", $where );
// 特定のカスタムフィールドを検索対象から外す
// $where .= " AND (" . $wpdb->postmeta . ".meta_key NOT LIKE 'number')";
// $where .= " AND (" . $wpdb->postmeta . ".meta_key NOT LIKE 'zip')";
// $where .= " AND (" . $wpdb->postmeta . ".meta_key NOT LIKE 'access')";
}
return $where;
}
add_filter( 'posts_where', 'cf_search_where' );
function cf_search_distinct( $where ) {
global $wpdb;
if ( is_search() ) {
return "DISTINCT";
}
return $where;
}
add_filter( 'posts_distinct', 'cf_search_distinct' );
特定のカスタムフィールドを検索対象からはずすこともできます。
こちらの記事を参考にさせていただきました。ありがとうございます。
WordPress内の検索対象にカスタムフィールドも適用する
現場からは以上です。
formって、textとかcheckboxで入力した値を「送信」ボタンを押したら送信しながら画面遷移…という感じが多いと思うんですが、そうではなくボタン自体に値を持たせておき、それをクリックしたらその値を送信しながら即画面遷移したい場合もあると思います。
実装には、
の２パターンでいけます。「りんご」「みかん」「ブドウ」の３つのボタンをクリックする想定でやってみましょう。
buttonにはnameもvalueも使えるので、シンプルに書けます。
<form> <button name="fruit" value="りんご" type="submit">りんご</button> <button name="fruit" value="みかん" type="submit">みかん</button> <button name="fruit" value="ブドウ" type="submit">ブドウ</button> </form>
type=”submit”を持たせておけば、formを動かすボタンとなります。これだけで、値を送信できます。
だいたいbuttonでいいんですが、checkboxやradioを使わなければいけない場合もあるでしょう。
そんなときはjsで補助してやらなければいけないのですが、onClickを使えばわざわざ別途jsを書く必要もありません。
<form name="fruitSelect">
<label onClick="document.fruitSelect.submit();">
<input type="checkbox" name="fruit" value="りんご">りんご
</label>
<label onClick="document.fruitSelect.submit();">
<input type="checkbox" name="fruit" value="みかん">みかん
</label>
<label onClick="document.fruitSelect.submit();">
<input type="checkbox" name="fruit" value="ブドウ">ブドウ
</label>
</form>
ポイントは２つ。
こうすることで、checkboxをクリックしたときにformが動き、同時にvalueを送信することができます。
radioも同じ要領でできると思います。
現場からは以上です。
この記事は現時点で、公開されているもののなかでは145記事目になります。
古い記事は削除したり、別のブログに移動させたりしてるのでほんとはもうちょっとあったんだけど、それにしても2018年1月から始めておいて、3.5年でこれくらいってことですか。少ないですね。
さてそんな、ブログを書き始めて3.5年。このサイト以外でもいろんなブログサイトを立ち上げては畳みを繰り返してきて、ここで一つのブログの壁、
「ネタがない」
について、本質的なことに気付いてしまったので、こいつのぶち破り方を考えてみましょう。せっかくやる気があっても、ネタがなくてブログをやめてしまう人は多いと思います。
ノウハウ系のみを書いているブログだったら、あっという間にネタがなくなります。
だってもう全部自分の知識を出してしまえば、あとは何も残ってないもの。これはもう避けようのない確定した事実。そしてネタが尽きて書くことがなくなったら、ブログを書くのをやめてしまう。
ネタは、なくなるものです。
でも名だたるブロガーたちはずっとブログを更新し続けているよね。彼らはいったい何をそんなに書き続けているのかというと…
紹介記事です。
海外の新しい技術やブログの紹介、おもしろいツイートの紹介、新商品の紹介…あるいは人生論を書いたようなブログは、読んだ本の内容の紹介をしています。
自分の周りのおもしろい人を紹介しているパターンもありますよね。あとは、自分に起こったできごとの紹介とか。人の悩みを紹介してそれを解決に導くのもあります。
そう…ブログってのは…言ってしまえば「紹介」なんですよね。
自分の持っている知識なんて、書き出してしまえばすぐになくなってしまいます。その後、何を書けるかというと、他所から仕入れたネタしかないんです。
プロブロガーと呼ばれる人たちは、毎日必死でネタを集めているわけです。本を読んだり、旅に出たり、知恵袋をあさったり…インプットなくして、アウトプットはありえません。
漫画やイラストの創作をしている人だって、身の回りにおこったできごとなどをおもしろおかしく書いている人のほうが、ずっと続いてます。
ブログを書き続けるためには、ネタを集めて紹介することが必須だとわかりました。
逆にいうと、集めるネタすらないジャンルは、続かないです。
もし自分が今やってるブログのジャンルがマニアックすぎると思ったら、とっとと撤退して新しいジャンルでブログを書きましょう。どうせネタが尽きれば書くことがなくなります。
また、ネタが絶えず集められるようなジャンルであれば、必然的に読者の母数も多くなります。
つまり、需要のあるジャンルでブログを書くことで、書き続けることができ、結果的にアクセス数が増えます。
あとは、自分が書いていて楽しいと思えるジャンルですね。いくらネタが多いといっても、自分の全然興味のないことを調べて書くのは苦痛ですし、楽しくなさはブログの記事ににじみ出てきますので、読者も読んでいて楽しくありません。
人間は、楽しいと思えないことは続きません。これがまたちょろっと書いてすぐに稼げるとかであればどんなジャンルも楽しいかもしれませんが、もうそんな時代は終わりました。今は、良質な記事を書き続けることこそが大事です。
ネタはなくなるものです。ネタがなくなったら、探しましょう。探してもネタがないなら、ネタを探しやすいジャンルに切り替えましょう。
あとは、楽しいと思えるかどうか。楽しくなかったら、別のことをやったほうがいいです。楽しくないまま続けてても稼げません。
それじゃ、バイバイ！
「ええ！？複数設置したslickスライダーのスライド開始タイミングをずらす！？」
「できらぁっ！」
単純にsettimeoutでslick()の実行タイミングを遅らせるだけでは、slick()が実行されていない段階のレイアウト崩れが発生してしまう。
というわけで、「読み込まれてから〇秒後に、自動スライドを開始する」作戦でいきましょう。
こうです。
$('#pickupSlider01').slick({
/* １つ目のスライダーのオプション */
});
// 0.5秒後に２つ目のスライダーのautoplayを開始
$('#pickupSlider02').on('init', function () {
var $self = $(this);
setTimeout(function () {
$self.slick('slickSetOption', 'autoplay', true, true);
}, 500);
});
$('#pickupSlider02').slick({
/* ２つ目のスライダーのオプション */
});
// 1秒後に３つ目のスライダーのautoplayを開始
$('#pickupSlider03').on('init', function () {
var $self = $(this);
setTimeout(function () {
$self.slick('slickSetOption', 'autoplay', true, true);
}, 1000);
});
$('#pickupSlider03').slick({
/* ３つ目のスライダーのオプション */
});
もっとあるときはeachで回すのもあり。
現場からは以上です。
WordPressの記事一覧でよくある、公開して一週間の間は「NEW」を表示させるやつ。
毎回テンプレートに直接プログラムを書くのは大変なので、関数を作って、表示させる日付も簡単に変更できるようにしましょう。
functions.phpに、以下のように書きます
function get_my_new( $limit = 7 ) {
$days = $limit;
$today = date_i18n('U');
$entry = get_the_time('U');
$kiji = date('U',($today - $entry)) / 86400;
// 出力部分
if( $days > $kiji ){
$html = ' class="new"';
} else {
$html = '';
}
return $html;
}
$html = ‘ class=”new”‘;の部分を、表示させるNEWマークに合わせて変更してください。この場合は、newというclassをくっつける処理ですね。画像を出したり、テキストを出したり、なんでもできます。
$limit = 7の部分で、デフォルトで何日表示させるかを設定できます。
※functions.phpは、以下の記事のように関数ごとにファイルを分けると、使いやすくなります。
あとはテーマ内でNEWマークを表示させたい部分に、
<?php echo get_my_new(); ?>
と書くだけです。
ここで、
<?php echo get_my_new(10); ?>
のように引数を指定してやると、デフォルトでは７日だけど、この部分だけ10日表示させるといったことも可能です。
以上、現場からでした。
「フリーランスのコーダーとしてやっていきたいけど、どんなことをすればいいのかわからない。」「実際フリーランスで生きているコーダーは、何をしてるんだろう？」
そんなみなさんの疑問に、実際フリーランスのコーダーとして現時点で４年やっている僕がお答えします。会社員時代と合わせると、７年やってます。
現在僕の所得は年700万ほどですが、8割以上の収入が受託コーディングです。
それでは参りましょう。
コーダーは「コーディングをする人」なんですが、その「コーディング」は何をするのかというのは、はっきりと定義されておらず、範囲が広いです。
コーダーとは、ソフトウェアやWebサイトなどの開発で、仕様書や画面イメージなどを元に、コンピュータ言語でコードを記述する人。
出展：IT用語辞典
とあるように、実はプログラムを書く人のことをコーダーと言います。プログラマーとほぼ変わりません。
ただ、日本では「Web制作、あるいはWebアプリにおいて、デザイン以降を担当する人」という意味合いが強いように思います。
また、大規模な開発の場合はHTML / CSS、動きを制御する程度のJavaScript(jQuery)の実装を担当する場合が多いです。
イメージ的には、
という感じが主流なんじゃないかと思います。
ちゃんとした定義はないし、人によってイメージが違うところではあるのですが、ここでは「Web制作のデザイン以降を担当する人」という意味で進めていきます。
僕も基本的には、Web制作においてデザイン以降をだいたい全部やっている感じです。
コーダーと言えばこれ。基礎オブ基礎。
HTML/CSSコーディングができないと、話になりません。
フリーランスが受託でコーディングを行うとは、クライアントから来たデザインを、HTMLとして実装することを指します。
また、今はまったくJavaScriptを使わない制作はほとんどありませんので、何かしら動きをつけたり、アニメーションを実装したりと軽いJavaScript(jQuery)の実装も必須です。
「デザインはできるけど、コーディングはできない」人はけっこういますので、基本的にはそこから依頼を受け、コーディングを担当することが多いです。
既存サイトの修正など、細かい作業もあります。
CMSとは、「コンテンツマネジメントシステム」の略で、HTMLやCSSのわからない人でも管理画面からWebサイトを更新できるシステムです。
WordPressがその代表ですよね。
Webサイト制作では、静的サイトをそのまま運用するということはあまりなく、CMSを組み込み、管理画面から更新できるようにすることが多いです。
WordPressの他にも、EC-CUBEやJimdo、Movable Typeなどいろいろありますが、そのすべてをできる必要はなく、フリーランスなら得意なものが１つあればいいです。他はできないと言ってしまって大丈夫。
もちろん２つ以上できてもいいんですが、どれも微妙にしかできないとか、学習に時間がかかるとかになると、コスパが悪くなります。
オススメはWordPressです。シェアがダントツなので需要も高く、仕事が多いです。
だいたい、コーディング+CMS組込がメインの仕事になります。
コーディングは慣れれば、CSS設計もできるようになりある程度早くなるのですが、それでも毎回デザインは違うし、「なんじゃそりゃ」と思う要望が今になっても毎回のようにくるので、なかなか思うように儲けるのは難しいと思います。
ただ、ページ数が多いサイトであればほとんど共通パーツで構成されていることもあり、１ページにかかる時間は少ない割にスケジュールは長く、まとまった金額が入るので、気持ち的にかなり楽です。
逆にLPとか、細かいパーツが大量にあるサイトなどはしんどいです。
CMSはコーディングと違って、だいたい毎回同じ実装になりますので、やり方がわかっていたりソースを使いまわせば、ややこしい実装を一瞬で完了させることができます。
最初は難しいですが、慣れればCMSは儲かります。
コーディングとCMS両方できれば、デザイン以降全部一人でできるので、自分のやりやすいように実装できてコスパが良いです。
ここからは、上記２つに比べてそんなには入ってこないのでおまけですが、こんなこともやるよというのを知っておくといいでしょう。
Webシステムの中でも、フォームの開発、検索サイトやメディアサイトの開発や、APIから引っ張ってきたデータを表示させる等、設計がほぼいらない比較的簡単なものの実装をすることがあります。
これは人によって違うと思うのですが、僕が基本Web制作しかしないことにしているので、大規模な開発はありません。
もし大規模な開発に関わるとしたら、たぶん在宅より常駐とかのほうが仕事があると思います。
Webシステムには、phpとJavaScriptの知識が必要です。システム開発といえば、フロントエンドエンジニアとバックエンドエンジニアに分かれているような印象がありますが、小規模だったりWeb制作レベルとなると、逆にどっちもやることになります。
また、開発は「すでにやったことがある」というパターンは少なく、だいたい未知の領域です。
なので、「予想してたより簡単だった」と「予想してたより難しかった」があり、当たり外れがありますが、そこそこのまとまった金額で受注することもあるので、うまくやれば稼げます。
静的サイトであれば、ファイルを移動するだけでいいので簡単にサーバー移管できますが、WordPressなどシステムが入っている場合、データベースの移管があるので、専門外の人には難しく、移管作業を任されることがけっこうあります。
このとき、phpのバージョン違い等によるエラーが起きていないか確認・修正も含みますので、少しだけ工数にバッファを盛ることが出来ます。
他にも、ただの移管ではなく「WordPressサイトがハッキングされたので、修復してほしい」という依頼もたまにあります。そのときは、がっつりバッファを盛ります。
どんな仕事をするかは人のスタイルにもよりますが、「フリーランスのコーダー」としては、この記事で書いたことが王道です。
フリーランスのコーダーとしてやっていくために必要なスキルは、技術面においては
ができれば十分です。
どれくらいできればいいかというと、例えば「こういうことってできますか？」と言われたとき、ちょっとわからないことがあっても「調べれながらやればできるだろう（もしくはできないだろう）という判断」ができるくらいまでのスキルがあれば、あんまり困ることはありません。
僕も、今でもしょっちゅうわからなくて調べながらやってます。
技術面以外では、「納期を守る」「コミュニケーションがとれる」「自分で何をするかを考え、経営戦略を立てていく」といった、社会人として当たり前のことができていれば、フリーランスとして生きていくことは難しくありません。
それじゃ、バイバイ！
世の中には２種類の人間がいる。
プログラミングスクールに通ったことがある人か、ない人か、だ。
こんにちは、プログラミングスクールに通ったことがないぜろみやです。
プログラミングスクール、いろんな話聞きますよね。就職できないとか、メンターがガラクタだとか、わけわからんことをやらされるとか・・・
一方で、プログラミングスクールに通ってIT業界に就職し、エンジニアとして現役で働いている人も確かにいます。
もちろん、僕のようにプログラミングスクールに通ってない業界人も普通にいます。昔はそもそもプログラミングスクールとかなかったですからね。
あったかもしれないけど、存在を知りませんでした。
さてそんな賛否両論あるプログラミングスクールですが、「結局どうなん？」ってところを、僕なりに考えました。
僕もそうですが、独学でエンジニアになった人は多いです。
希望の職種に就職できるだけのスキルを独学で身につけ、あとは就職してから実務でスキルが上がっていくというのがIT業界でよく見るパターンです。
僕の場合はWeb制作志望だったので、HTML / CSSの基本的な書き方と、Webデザインの基礎、あとはWordPressのテーマを使ったCMSの構築（カスタマイズは、軽くCSSをいじったりする程度）ができるようになってから、適当にWordPressでポートフォリオを作って面接に挑んだら、受かりました。
入社当時なんて、デベロッパーツールすら知らない素人同然だったんですが、まだ社員の少ない小さな会社で揉まれに揉まれることで、自然とスキルが身に付きました。
Web制作となればCMSの構築やjQueryなど、軽いものでもプログラミングをする必要があったので、phpやjavascriptなどもググりながら身につけました。さすがにphpについては、土台がないまま続けると崩壊しそうなので、１冊だけ書籍を買って勉強しました。
と、こんな感じで、教えてくれる上司すらいないまま、未経験から独学で今に至ります。そう、独学でもいけるんですよ。
ただ、独学だと新しい技術のキャッチアップには困りますので、ちょくちょく勉強会には行くようにしていました。
じゃあ独学でいけるやん、となるかもしれませんが、ここでちょっと立ち止まってみました。
まず最初に、独学でエンジニアをやってる人が多い理由の一つとして冒頭であげた、「昔はプログラミングスクールがメジャーではなかった」問題。
独学しか方法がなかったため、独学でやった、という人はいると思います。
もしかしたら、僕も当時プログラミングスクールの存在を知っていたら、通っていたかもしれません。
先ほど僕が独学でここまでなりました、とさらっと書きましたが、めちゃくちゃ時間もかかりますし、大変です。
土台がしっかりしていない状態で就職したため、スキル不足で連日残業はもちろん、しょっちゅうお客さんに怒られてました。
フリーランスになってからも勉強は続けてましたし、今の「もう自発的に勉強する必要はほぼ無い」という状態になるまで、結局４年くらいかかってます。
もちろんプログラミングスクールに数ヶ月通っただけで今の段階にたどり着くとは思いませんが、それでも、教えてくれる人がいて、学習する方法がわかるというだけで、効率は段違いです。
また、難易度の問題もあります。
僕の場合はWeb制作だったので、技術だけでいえば学習する範囲はHTML / CSS / CMS / jQueryと、どちらかというと軽い部類です。
でも、いきなりpythonがやりたいとかアプリ開発がやりたいとかになると、難易度が全然違いますので、こりゃ独学は無理だわとなった場合はプログラミングスクールに通うのは大いにアリです。
以上より、プログラミングスクールが必要かどうかという問いについては、
時間かかってもいいから独学でいけるなら通わなくていいし、短期間で学びたい・あるいは独学でいけないなら通えばいいです。
現役エンジニアの中には、プログラミングスクールに対して否定的な意見も多いですが、僕は、プログラミングスクールの必要性が全くないとは思いません。
プログラミングスクールに対して否定的な意見が多いのは、失敗談やクレームが目立つからということと、詐欺まがいのプログラミングスクールが存在することが原因です。
前者は、マイナスな意見は目立ちやすいというのは世界の仕組みなので仕方ないとして、後者はけっこう深刻ですよね。特にインフルエンサーが主体で行っているプログラミングスクールは、受講生からお金を搾り取ることを目的にしていることが多いので、くっそ高い金を払ったのに内容はゴミ、みたいなことをよく聞きます。
独学に比べ、プログラミングスクールのデメリットといえばお金がかかるの一点につきますが、独学でもめっちゃ時間がかかると思えば、この部分についてはトントンです。
あとは、就職の際に「プログラミングスクールに通っていた」と言うと嫌がられるとよく聞きますが、ただそれだけを理由に嫌がる企業はそれだけのことなので、受け入れてくれるところを探せばいいと思います。というより、アピールする部分はプログラミングスクールに通っていたことではなく、プログラミングができるということなので、そこを間違えないようにしましょう。
ただ問題なのは、大金をはたいたのに、何の成果も得られないというリスクが潜んでいることですよね。
そうならないために、プログラミングスクールを選ぶ際に気をつけなければならないこと、それは、
この２点です。
プログラミングスクールの情報については、各プログラミングスクールの公式サイトでの情報はもちろん、実際に利用した人の声を聞いてください。
ツイッターでスクール名で検索したらめっちゃ出てくると思います。
あ、通ってない人の意見ではなくて、通ってる人の意見を聞いてくださいね。
自分の目的というのは、例えば「転職したい」のか、「フリーでやってくためのスキルを身につけたい」のか、「やりたい言語があるから学びたい」なのか。
それぞれの目的に適したプログラミングスクールやカリキュラムがあります。
ただ漠然と、「プログラミングで年収イッセンマン！なんかスクール通ったらいいらしい！もとはすぐとれるって！」みたいな考えだと、ご愁傷様です。
さて、ここまで書いてきましたが、じゃあどこがええねんという人のために、僕がちゃんとしたプログラミングスクールを調べてみました。
どんなプログラミングスクールがいいか、というより、商品購入の選択をする際の基礎ですが、選ぶ基準としては「リーズナブル」か、「ハイクオリティ」のどっちかだと思うんですよね。
だから、その２点に絞りました。
TechAcademyは、WordPressコースやアプリ開発コース、フロントエンドコース、Webデザインコースなど、学べるコースが多いのが特徴。
さらに、学べる期間も１ヶ月～４ヶ月と選ぶことができ、１ヶ月コースでだいたい159,000円（税別・執筆時点）となっていて、プログラミングスクール内ではトップクラスの安さとなっています。
さらに、１週間無料体験ができるので、「大金払ったのにだめだった」というリスクは回避できますよね。無料体験できるってだけでアドバンテージ。
ここまで幅広く学べてコスパのいいプログラミングスクールは他にないんじゃないでしょうか。
DMM WEBCAMPは、なんと経済産業省が認定しているプログラミングスクールです。国のお墨付き。それだけで信頼性が段違いです。
何せあのDMMですからね。
転職に特化していて、転職成功率98%、離職率1%と驚異の実績を叩き出しています。
ITエンジニアに転職したいなら間違いなくここ。
受講料はやや高めですが、これだけクオリティが高ければ当然かなという感じです。
というわけで、プログラミングスクールってどうなん？という問いに対し、場合によれば大いにアリだよというお話でした。
「エンジニアになりたい」といっても、目的はそれぞれなので、まずはしっかりと自分がどうなりたいのかはっきりさせてから、最適な道を選びましょう。
それじゃ、バイバイ！
WordPressを構築していたら、本番環境とテスト環境で違う値にしなきゃいけないことがあると思います。
例えばMW WP Formをfnctions.phpでカスタマイズする場合、フックにフォームIDを使う必要があるわけですが、テストと本番ではIDが違う場合が多いです。
そんなとき、テストから本番にアップする際は値を変えてアップする…なんてことをしていると、テストでは動かなくなるし、また違う日に違うカスタマイズを誰かがやらなきゃいけなくなったときに、その値を正しく変えてくれる保証はありません。いつの間にか動かなくなってるとか怖いですよね。そしてめんどくさい。そんなことを考えなきゃいけないのが何よりめんどくさい。
というわけで、いい感じに解決しましょう。
テスト環境と本番環境でほぼ間違いなく違っていて、そしてそう触ることのないファイル。
それがwp-config.phpです。
wp-config.phpには各環境のデータベース情報が書かれていますので、つまりその環境ごとに固有の設定が書かれているわけです。wp-config.phpは、テストで修正したものを本番にアップする際に、そのまま一緒にアップするということはまずないと思います。
そんなwp-config.phpに定数を定義してあげれば万事解決。
例えばテストでは
/** MW WP Form ID Settings. */
define('MW_WP_FORM_ID', 2222);
とし、本番では
/** MW WP Form ID Settings. */
define('MW_WP_FORM_ID', 3333);
こうしとく。
ちなみにですが、この定数はwp-config.phpにもともと書かれている「/* 編集が必要なのはここまでです ! WordPress でブログをお楽しみください。 */」より上に書いてください。つまり「define(‘WP_DEBUG’, false);」の真下ですね。じゃないとうまく動かないです。
そしてfunctions.phpのフック内では
add_filter( 'mwform_choices_mw-wp-form-'.MW_WP_FORM_ID, 'mwform_add_birthday_options', 10, 2 );
こうやって定数を呼び出してやれば、同じfunctions.phpをテスト/本番で使っていても、値はそれぞれ別になっていることになります。
これで安心！いろんな面倒なことから解放されます。環境が他にもあったとしても使えますしね。
以上、現場からでした。
MW WP Formの日付ピッカーが動かなくて時間を食ったので、また同じことにならないように覚書。
エラーを見ると、
$(...).datepicker is not a function
と言われている。
wp_headやwp_footerも忘れてないし、他にjsのエラーが出ているわけでもないのに何だろうと思って調べていたら、どうもdatepickerはjQuery本体の他にjQuery UIもないと動かないらしい。
本来、wp_enqueue_script()を使ってwp_head()内でスクリプトたちを読み込んでいると、それに合わせてMW WP Formのプラグインもwp_head内にjQuery UIを読み込んでくれるんだと思うんだけど、僕はめんどくさくてテンプレートに直に書いてスクリプトを呼び出してるので、スクリプトを読み込む順番がおかしくなっていて、jQuery UIを読み込む前にdatepickerを実行しちゃっていたのが原因っぽい。
これを回避するには、WP推奨通りちゃんとwp_enqueue_script()を使ってスクリプトを読み込むか、
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
手抜きする場合はこれをjQuery本体呼び出しの後に書いてやれば動きます。
以上、現場からでした！
昔、下の記事でSlick.jsを使った無限ループスライダーの実装方法を紹介しましたが、
いろいろ問題があるうえ逆向き（左から右）ができないということで、今回はプラグインなしでjQuery+CSSで実装する方法を紹介します。
こんな感じになります↓
それでは実装してみましょう。
<div class="slider">
<div class="slider__inner">
<div class="slider__item"><img src="https://meshikui.com/wp-content/uploads/2020/07/iphone8IMGL8205_TP_V.jpg" alt="" width="300"></div>
<div class="slider__item"><img src="https://meshikui.com/wp-content/uploads/2020/07/200713.jpg" alt="" width="300"></div>
<div class="slider__item"><img src="https://meshikui.com/wp-content/uploads/2020/07/200701.jpg" alt="" width="300"></div>
<div class="slider__item"><img src="https://meshikui.com/wp-content/uploads/2020/05/blackmondayIMGL0444_TP_V.jpg" alt="" width="300"></div>
<div class="slider__item"><img src="https://meshikui.com/wp-content/uploads/2020/04/200402.jpg" alt="" width="300"></div>
</div>
</div>
グループ一つではループできないので、jQueryで３つに分身させます。
<script>
$(function(){
$('.slider__inner').each(function(){
var sliderWidth = $(this).width();
$(this).clone(true).insertBefore(this);
$(this).clone(true).insertAfter(this);
$('.slider').css('width', sliderWidth*3); // 親要素の横幅を子要素の３倍にする
});
});
</script>
CSS Animationを使って動かします。
まずは、全てを横並びにしましょう。
.slider {
display: flex;
}
.slider__inner {
display: flex;
}
続いてアニメーションの部分。
.slider__inner:first-child {
animation: loop 90s linear infinite;
}
.slider__inner:nth-child(2) {
animation: loop2 90s -60s linear infinite;
}
.slider__inner:last-child {
animation: loop3 90s -30s linear infinite;
}
@keyframes loop {
0% {
transform: translateX(200%);
}
to {
transform: translateX(-100%);
}
}
@keyframes loop2 {
0% {
transform: translateX(100%);
}
to {
transform: translateX(-200%);
}
}
@keyframes loop3 {
0% {
transform: translateX(0%);
}
to {
transform: translateX(-300%);
}
}
２つめと３つめのグループのdulationを、speedの-1/3、-2/3にするのがポイント。
.slider__inner:first-child {
animation: loop 90s linear infinite;
}
.slider__inner:nth-child(2) {
animation: loop2 90s -60s linear infinite;
}
.slider__inner:last-child {
animation: loop3 90s -30s linear infinite;
}
@keyframes loop {
0% {
transform: translateX(-100%);
}
to {
transform: translateX(200%);
}
}
@keyframes loop2 {
0% {
transform: translateX(-200%);
}
to {
transform: translateX(100%);
}
}
@keyframes loop3 {
0% {
transform: translateX(-300%);
}
to {
transform: translateX(0%);
}
}
地味に需要があるかもしれない！最初ちょっと崩れるかもなぁってときは、ローディング画面にするか透明にしとくか、適当に隠しておきましょう。
現場からは以上です。
世の中には劣悪な労働環境というものは確かに存在します。仕事内容しんどいのに給料が安いし、特にやりたい仕事でもないし、何か将来のために特別なスキルがつくわけでもない。
こんなとこにいても未来はない…
気力をゴリゴリ削られて精神が限界…
そんなとこで我慢して働いていても一切いいことはない。一切、ない。
というわけで、辞めちゃう。辞めるって言おう
でも、辞めるための口実が思いつかない。
ここですよね。素直に「しんどいから辞めたいです」というのは気が引けるし、そんなことを言っても、「もう少しがんばってみようよ」と言われるのがオチです。同じように言って同じように返されて、なかなか辞められずにいる人けっこういますよね。
そこで僕が過去何回か劣悪な労働環境から逃げ出した方法が、
「他にやらなければいけないことができたから、必然的に辞めなければいけない」
です。まぁ、嘘なんですけどね。
１回目は、「家庭の事情によりしばらく県外に行かなければいけなくなったので、辞めます」でした。２回目は、「実家の稼業を継がなければいけないので、辞めます」です。
「辞めたい」ではなく、「辞めなければいけない」という状況を作り出すことで、相手は納得せざるを得ません。引き留めることができません。引き留めたって物理的に無理ですからね。
嘘をつくことに抵抗があるかもしれませんが、嘘も方便と言います。時には、自分を守るために嘘をつくことが必要なこともあります。家族を生贄にしたらもしかしたら連絡されてバレるんじゃないかと思うなら、連絡されることがない親戚とか友人とかを生贄にしましょう。
街中でばったり会ったら？「あ、なんか移住がなくなったみたいで、今は別のところで働いてます（笑）」「はい、がんばってやってます（笑）」とか適当なこと言っとけば大丈夫。ばれへんばれへん。ばれたところでもう他人なので、どう思われようがどうでもいいです。
身も蓋もない言い方になっちゃいますが、馬鹿正直なだけでは悪い人にいいようにこき使われるので、人生にはずるさも必要ですよ。
泥沼からスッキリ抜け出して、新しい人生を！
それじゃ、バイバイ～！
地方でWeb制作をがんばっているみなさん、こんにちは。
僕もフリーランスになる前は岡山という大都会と呼ばれている田舎にある小さなWeb制作会社で働いていました。今は京都に住んでいますが、仕事はほとんど岡山からもらってますし、京都はITでいえば都会とは言い難いレベルなので、地方と大して変わりません。
さてさて、僕が岡山の制作会社に入って１年半くらいでしょうか、僕のコーディングスピードは社内では早いしいろんなことがわかるし、jQueryもphpもちょっと書けるし、地元の勉強会とか出ても技術的にはまぁまぁ比較的いろんなことができるっぽいし、もうほとんど神に近いレベルに達しているんじゃないかという錯覚に陥ってたんですね。
ところがある日、真の都会大阪で開かれるちょっと大きめの勉強会に参加する機会があったので、会社の経費で行ってきたんですよ。するとどうでしょう。。。
…え？
俺は今まで何してたの？
と思うようなよくわからない技術のオンパレードで。（BEM、Sass、Vagrantなど・・・）
「いやいや待て待て、講師だから、やっぱすごいんやろな。みんなきっと面食らってるに違いない…」と周りを見てみると、むしろその技術を知らない人のほうがおかしいみたいな顔してるじゃないですか。え？htmlを素で１文字ずつ書いてる人まだこの世にいるんですか？みたいな顔。いちおう僕も顔だけはそういう顔をしておきました。
その日、僕は懇親会に行く予定でしたが、なんか行ったら泣いちゃいそうなのでキャンセルして夜の大阪を一人で徘徊していました。あの日行った立ち飲み屋の刺身と日本酒、おいしかったな…
そんな雷に打たれたような経験の次の日から、勉強会で見たことをすぐに猛勉強しました。これぞ勉強会に行ったという感じですよね。
そして得た技術を、社内で共有することに努めました。BEMを初めて見た人はコーディングがすこぶる早くなったと泣いて喜び、Sassという画期的な技術でcssを書くのが楽になったと日夜お祭り騒ぎです。
Vagrantは正直あんまりでした。これなら単発でバリバリ制作するタイプの弊社はXAMPPのほうがええやんってなりましたので、全部の技術が最適とは限らないこともわかりました。でも、とりあえずやってみるっていうのは大事です。
今となっては上記の技術すら古いですよね。今は、DockerとかReactとかなんですかね？残念ながらもう僕はあんまりスキル方面を伸ばす予定がないため、技術メインの勉強会に行くことはほとんどないと思いますが、フロントエンドの技術はどんどん新しいものが生まれていって、キャッチアップは大変だなと思います。
こんな感じで、田舎の小さな制作会社で、自分のことをすげーできるやつだと思っていた愚か者が、都会の技術にぶん殴られて帰ってきて、その技術によって会社とともに圧倒的成長を遂げるきっかけになったわけです。
ツイッターでたくさんのつよつよ技術者をフォローしていると、けっこう自分の知らない技術を目にすることが多いので自分が遅れていることがわかりやすいですが、小さい世界に閉じこもっていると、自分を助けてくれる技術があるという認識すらせずに過ごしがちです。
普段から本とか技術系ブログとか読んでても、入ってこないことはやっぱりありますよね。
なので、地方でWeb制作をしている人やプログラマーたちは、ぜひ都会で開かれるちょっと大きめの技術系勉強会に参加してみてください。世界が変わります。自分も成長し、会社も成長し、売り上げアップ！社員は増える！ボーナスもらえる！早く帰れるようになる！いいことしかありません。
勉強会の探し方は以下の記事にも書いています。
都会といえば、九州のほうはわからないんですが、だいたい東京か大阪だと思います。特に東京はほとんど毎日のように何かしらやってますよね…
今はコロナの影響もあり、ウェブでセミナーをおこなう「ウェビナー」という形態が一般的になっているようなので、前より参加しやすいんじゃないでしょうか。
それじゃ、バイバイ！
お久しぶりです。
前回の記事から２ヶ月も空いてしまいましたが、またブログを書いていこうと思います。
さて、僕のブログは最初が2018/1なので、この記事で2.5年になります。途中休んだりもしていますが、やめなければ続いています（暴論）。
そんな僕がこの2.5年で感じた、「ブログで稼ぐってどういうことやねん」というのをまとめてみました。これからブログで稼ぎたい、もしくは思うように稼げない人は読んでみてください。
ちなみに僕はWeb制作を６年以上続けているプロのWeb屋であり、SEOも仕組みを知っている人だという認識でいてもらえればと思います。
これはどのブログ論でも言われていると思うのですが、アクセスあっての収益です。最初から「稼ぐぞ稼ぐぞおおおおううううおおおおおお」というテンションだとすぐに終わりが来ます。最初はマジで稼げないです。
Adsenseに合格するためにブログをがんばって書いている人もよくいますよね。Adsenseなんか、月に１万アクセスがあっても収益1,000円くらいですよ。
Adnsenseだけでなく、アフィリエイトも混ぜていく形になると思いますが、それにしたってアクセスがないと収益なんて発生しません。高いアフィリンクを貼っていると、まぐれでたま～に３ヶ月に一回くらい１万程度の収益が発生することもありますが、あなたがやりたいのはマグレで少額を稼ぐことですか？違いますね。根本からしっかりしていきましょう。
稼ぐための記事を書くことも重要になってきますが、それよりまずどうやったらアクセスを増やせるのかを考えるほうが先です。アクセスが増えたら収益化について考えましょう。
目指すなら、まずは月１万PVの壁を超えること。それを超えたら、２万、３万と増やしていきましょう。とにかく圧倒的なアクセスがないと話になりません。
こんなふうに思っている人は多いと思いますが、それは間違いです。
まず検索流入を狙うのであれば、それは検索されることが前提なのでノウハウ系の記事とか、トレンドを扱ったニュース、商品の紹介などに限られてきます。
さて、上記のようなカテゴリーの情報は、既に誰かから発せられた情報や、知識・経験をもとに書くことになりますよね。つまり、他にも同じことを書ける人が無数にいるわけです。
ということは、もう既にその道で権威性のある有名人や、長い期間かけてブログをしている人、お金をかけて一瞬で大量の良いコンテンツを作れる人、そういう人が当然有利になり、おいしいキーワードほどそういった人が上位を占めます（稼げるので）。
一方弱小ブロガーには権威性もありませんし、めちゃくちゃ時間をかけて良い文章を書いたところで、SEOバチバチに強めているブログには同じ情報では勝てないんです。言ってみれば、検索流入を狙うということはそういう猛者がひしめき合う中に飛び込むということです。それはもう大量のゴリラの集団に挑むアリのような無謀な挑戦です。
もうはっきり言いましょう。個人ブログで検索上位を狙うのは時間の無駄です。
誰がなんと言おうと無駄。僕はその結論に達しました。
あなたが誰も書けないような、かつ検索されるようなおいしいネタを持っているならやってみてもいいでしょう。ただ「検索されるキーワード」というのは簡単にリサーチできるため、あっというまにゴリラに見つかってボコられますし、そんな記事そうそう書けないですよね。
あとニッチな情報。「検索してもまともな記事がない」みたいなやつ。これはそもそも、検索されないので誰も書かないんです。さっきも言いましたがブログで大事なのは圧倒的なアクセス数です。検索されない記事を書いてもほとんどアクセスがないのは物理的に当たり前のことですよね。
Google広告など、月間検索数を調べるツールで例えば月100回検索されてるとしましょう。検索１位の場合は、検索数に対しだいたい平均３割程度のアクセスがあります。月検索数100回ということは月に30回しかアクセスがないということです。
月1000回検索されるキーワードはそこそこおいしいと言われていますが、それでも月300しかアクセスがありませんし、このレベルのキーワードは競合が多くなかなか勝てません。
トレンド系の記事であれば、競合が少ない状態なので勝ちやすくアクセスも稼げます。ただ、旬を過ぎるとスカッとアクセスがなくなりますので、ひたすらにトレンドを追い続け、毎日記事を書く必要があります。それも、競合より早くキャッチアップし、早く記事を書いて公開しなければいけない。のんびり屋の僕にはちょっとできませんが、競争が好きな人はやってみてもいいかもしれません。
もちろんSEOが完全にだめというわけではありません。ブログが強くなれば、ビッグワードで１位をとることもできるかもしれませんし、ニッチなワードで少数でも毎日アクセスがあればアクセス数の底上げになります。ただし、その状態になるまでにはかなりの時間を要しますので、SEOだけ考えていると遠回りになるということです。
SEOも頭の片隅に入れつつ、他のアクセスアップ方法を考えましょう。
検索流入以外のアクセスとなると、限られてきますよね。だいたいSNSです。あとは紹介されたりGoogleニュースに載ったりとかもありますが、その辺は自分だけのパワーではなかなか難しいので置いといて、SNSに注目してみましょう。
単刀直入にいうと、ブロガーとしてファンを増やせばいいんです。
「あのブロガーが書いた記事おもろいから読みたい」と思われれば、検索からの流入がなくとも、ブログ書いてSNSに流せば読んでもらえます。
そしてファンができれば、そのファンが記事を拡散してくれるかもしれません。その拡散により読者がまた増え、ファンになり…という、雪だるま式の流れ。
僕は、SEOよりこっちのほうが圧倒的に大事だと思います。だって毎回SEO対策とか競合リサーチとかして、クソ長い気持ち悪い文章書かなくても、適当に好きなこと書くだけでアクセスがあるんですよ？これこそブロガーじゃないですか？
もちろん好きなことと言っても、読者が好きそうなことを書かなきゃいけないですけどね。SEOマーケティングが検索キーワードを考えたものとすると、SNSマーケティングはウケ狙いを考えることになります。
そしてファンを増やすために大事なのは、記事内の情報のみではなく自分という個人を好きになってもらうことが重要なので、どこかに個性やおもしろさが必要になってきます。まぁこれはこれでSEOとは違う難しさがあるし、時間もやっぱりかかるんですが、それでもブロガーとしては大事な要素だと僕は思います。
まず、SNSでフォロワーを増やすことを考えましょう。
ブログで稼ごうとしている人に伝えたかったことは、
この３つです。
まぁ、これは僕自身に言い聞かせたいことでもあるんですけどね。
今まではとにかく役に立つ情報をひねり出そうとしていましたが、なんかもう疲れるだけで全然変わらないので、これからは、もっとみんなが「おもろいなー、もっと読みたいなー」と思うようなブログを目指していきます。
それじゃ、バイバイ～
「ユーザーにどうしてもアクセスしてほしいページがあるけど、これは検索からは来ないな」というページ、出てくると思います。
どうしてもアクセスしてほしいページというと、コンバージョンページだったり、アフィリエイトではキラーページ（大きな収益が発生するページ）と呼ばれるページが多いです。
こういったページは、競合も強くなかなか検索で上位に表示されなかったり、そもそも検索ワードでない場合もありますが、アクセスさせる方法は何も検索だけではありません。
「他のページから誘導させる」というテクニックを使いましょう。
例えば僕の以下のページ
https://meshikui.com/2020/04/08/2699/
この記事は、「イラスト 上達」というまぁまぁなビッグワードなので、検索上位はやばいやつらがひしめいているのですが、既にアクセスのある以下の記事
https://meshikui.com/2019/03/22/1578/
からうまく誘導することで、公開して早々、このブログでTOP5に入るPV数となっています。ほとんど検索からの流入はありません。今のところ９割近くが上のページからの流入で、だいたい20%くらいが流れてきてます。
誘導のコツとしては、ただ記事下の関連記事として載せるだけでなく、記事内にリンクを置くこと。
「続きを読ませる」ような感覚で置くか、もしくはランディングページでは軽くまとめるだけにしておいて「詳しいことはこちらのページに書いてます」といったように誘導するのがポイントです。
ちゃんと誘導できているかどうかは、Analyticsのページごとの解析画面からセカンダリディメンション「２ページ目」を見ることですぐにわかります。
思うように流れていない場合は、この入り口ページにアクセスしたユーザーが次に求めるであろう情報は何なのかを考え、誘導の仕方を変えてみましょう。
ちなみにですが注意点として、入り口ページに何かしらコンバージョンを置いている場合、別ページに移動する仕組みになることにより入り口ページのコンバージョン率はやや下がります。
何も１ページだけの誘導じゃなくてもいけます。
入り口ＡからキラーページＢに誘導したい場合、Ａ→Ｃ→Ｂでも別にいいわけです。
ただ、複数ページを渡らせるとだいぶ途中で帰っちゃうので、Ａ→Ｂの通路も関連記事として置いとくのもいいでしょう。
さらに、Ａ以外にもＤやＦといった入り口がある場合、各入り口からどうにかしてキラーページＢに動線を繋いでやれば、Ｂへのアクセスはより高まってきます。
また、こうした内部リンクの強化はユーザーの滞在時間や回遊率のアップ、クローリングの促進につながり、結果的にSEOが強化されるとされています。
僕が自分の例として挙げたイラスト記事の誘導も、キラーページへの誘導というよりは、どちらかというとSEO強化を目論んでいます。一記事でいいからビッグワードで勝ちたいんや…そのためには、イラスト系の記事にウェイト置かなきゃですね。
まだキラーページがない場合。
サイトを適当に書いていると正直どんなページに流入が増えるかってなかなか予測したようにはいかない場合が多いです。
でも、コンテンツを強化しているうちに、必ず何かしら突出してアクセスの増えるページが出てきます。そうなったときはチャンスで、「アクセスの増えたページをもとに、次にアクセスさせるページを作る」わけです。
例えば、ブログサイトのレイアウトについて技術的に説明しているページが予想外にアクセスが伸びてきたとすると、そのページ内に「美しいレイアウトのWordPressテーマまとめはこちら」みたいなリンクを置いておけば、あっという間にいろんなテーマを比較したキラーページへの動線ができあがります。
WordPressテーマの比較記事なんか競合強すぎて、まぁSEOじゃなかなか勝てないですからね。
キラーページとなるのはだいたいビッグワードであったりニッチ過ぎて検索から来ないページであったりすることが多いですが、このようにロングテールなどから来たアクセスを流すことによってコンバージョンさせる、また、SEOにも強くなるというのはけっこう重要なテクニックなので、覚えておいて損はありません。
この「入り口は広げておいて、入ってきた人をVIPルームへ誘導する」方法は、通常表立っては売りにくい商品を売るための手段として、Webだけでなくあらゆるマーケティングで用いられています。
VIPルームで最高のおもてなしを！
それじゃ、バイバイ～
「トップへ戻る」ボタンなど、ページ開いたときは出てないけど、ちょっとスクロールすると出てきてスクロールとともに追従し、フッター手前とかでピタッと止まる、そんなボタン。
割とよく実装する割に面倒なので、すぐ使えるようメモ。
$(function () {
var topBtn = $('#goTop'); // ボタンを指定
topBtn.hide(); //最初は隠しておく。CSSで隠してもオッケー
$(window).on("scroll", function () {
if ($(this).scrollTop() > 100) { // 100px以上スクロールしたら出てくる
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
scrollHeight = $(document).height();
scrollPosition = $(window).height() + $(window).scrollTop();
footHeight = $("#footer").innerHeight(); // ここでフッターの高さを取得
if ( scrollHeight - scrollPosition <= footHeight ) { // フッター付近まで来たら
topBtn.css({
"position":"absolute",
"bottom": footHeight + 65 // フッターの65px上で止まる
});
} else { // それ以外は画面下から20pxの位置に固定
topBtn.css({
"position":"fixed",
"bottom": "20px"
});
}
});
});
#goTopは#footerの中に入れておき、#footerはposition:relative;にしておく。
例↓
<footer id="footer" class="footer"> <div id="goTop" class="goTop"><a href="#header">トップへ戻る</a></div> </footer>
現場からは以上です。
レイアウトのサイズに合わせ、出力する画像を複数用意する時代はもう終わりを告げた。
今は「object-fit」というウルトラ便利なcssで、１つの画像を自在にトリミングして表示できるのだ。
というわけで、「object-fit」の使い方をまとめてみました。
まずは、画像をそのままトリミングしてみましょう。
以下は画像そのままのサイズのやつ。
これを300×300にトリミングします。
.trim01 img {
width: 300px;
height: 300px;
object-fit: cover;
}
できました。
画像のwidthとheightを指定し、「object-fit: cover;」と加えることで、画像がトリミングされて表示されます！
親要素が可変するので、画像もそれに合わせてトリミングしたい。背景みたいに使うパターンですね。
.trim02 {
width: 100%;
height: 200px;
}
.trim02 img {
width: 100%;
height: 100%;
object-fit: cover;
}
画像のwidthとheightを100%にしてあげればオッケー。
わざわざabsoluteとか使ってた人たち、泣いてませんか？
object-fit: cover; 以外にも、全部で５種類のプロパティがあります。
指定したwidthとheight通りに画像を変形させます（初期値）
指定したwidthとheightを埋めるように画像をトリミングします。この際、画像は指定したwidthとheightのうち、大きい方に合わせ自動でリサイズされます。background-size: cover; と同じ。
指定したwidthとheightの中にきっちり納まるように画像を配置します。トリミングはされません。background-size: contain; と同じ。
指定したwidthとheightを埋めるように画像をトリミングします。画像はリサイズされません。
containかnoneのうち、小さい方を表示させます。
使うのはcontainばっかりになりそうですが、他のも覚えておくといつか役に立つ日が来ると思います。
何も設定しないと中央を基準にトリミングされますが、「object-position」を使えばトリミング位置を調整することも可能。
object-position: 0 0; /* 横,縦 */
object-position: 100% 100%; /* 横,縦 */
pxでも指定できちゃう
object-position: 20px 30px; /* 横,縦 */
これを使うと、「WordPressで登録したサムネイルのトリミング位置を変更したい」という無茶振りにも割とスムーズに対応可能。
このCSS、Internet Exploreで使えない！
最近はIE対応しないのがデフォルトの人も増えてきたようですが、残念ながらまだIE11対応しなきゃいけない場合のほうが圧倒的に多い。こんなに革命的に便利なのに、IEで使えないんじゃだめじゃん…
しかしご安心ください。若干手間が増えますが、IEでも使う方法があります。
それが、「object-fit-images.js（通称ofi）」と呼ばれるjsスクリプトを使用する方法。
以下のように記述して、ファイルを読み込み、処理を呼び出します。だいたいページのhead内か、</body>直前とかに書きますよね。
<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.3/ofi.js"></script> <script>objectFitImages();</script>
これでhtml側の準備はＯＫなんですが、CSSにも書き加える必要があります。
.your-favorite-image {
object-fit: contain;
font-family: 'object-fit: contain;';
}
positionも加える場合はこう
.your-favorite-image {
object-fit: cover;
object-position: bottom;
font-family: 'object-fit: cover; object-position: bottom;';
}
「font-family」を使った謎の記述…どうなってるんですかねこれは…
ともかく、これでIEでも使えるようになります！よかったね。
それじゃ、バイバイ～！
僕は常日頃から「フリーランス最高！」と思っていますが、フリーランスになることを人に勧めたことはほぼありません。
なぜなら、「自由であることのしんどさ」を知っているからです。
人には、フリーランスに向いている人と向いていない人がいて、フリーランスに向いていない人がフリーランスになってもしんどいと思っています。
今回は、「自由」とは何か、そしてフリーランスに向いている人はどんな人かを考えてみましょう。
フリーランスのイメージはやはり「自由」でしょう。
しかし、自由とは逆に言えば、「誰かに守られていない」ということです。
会社員であれば、何かミスをしても責任は最終的に会社がとる形になります。もしかすると場合によってはあまりにもやらかすと解雇となることもあるかもしれませんが、それでも自分が今後その責任に縛られることはあまりありません。
フリーランスは、仕事でミスをすればそれは自分の責任です。誰も助けてくれません。
すべての仕事・活動に責任を持ち、仕事ができなければそれはすなわち破綻を意味します。もしくは、責任を負わなくていい回避法を持っておく必要があるでしょう。
この「責任」を軽んじているフリーランスはけっこう多いです。「うーん、しんどいからやめよ！ばいなら～笑」ぐらいの軽さで、納期前に突然職務を放棄する人がいて、そんなことをされるとそれはもう親クライアントからその親クライアント、果ては他のフリーランスの信用まで下がるなどと、いろんな人が困ります。マジで勘弁してほしいです。
まぁそこまでくると、フリーランスに向いている向いていないというか、人として終わってる気がしますけどね。
自由である状態、すなわち後ろ盾がない状態では、常にいつ仕事がなくなるかわからない不安が付きまといます。つい先日も、フリーランス歴10年の人が急にプロジェクト切られたと話題になっていましたね。
僕の場合は、たまたま常に仕事がある状態なのでそこまででもないですが、それでも１ヶ月収入がないときも普通にありますし、ざわざわします。
そもそも、仕事が思うようにいかず、収入が安定していないフリーランスは多いです。そういった人は基本表に出てくることはあまりなく、僕のような普通に生きてるフリーランスばかりを目にしてると思いますので、あまり意識することはないでしょうが。。
大半のフリーランスは失敗しています。
とはいえ、会社員でも安心はできないという意見はその通りです。いつ倒産するか、解雇されるかは残念ながら確実にないとは言えません。それでもある程度保証や保険があったりすると思いますので、フリーランスよりは圧倒的に安定しているのは確かです。
いつ仕事がなくなるのか、来月は仕事があるか、なかったらどうするか。そんな不安を抱えながら常に生きていくことになります。
逆にフリーランスに向いている人はどんな人でしょうか。いろんな人を見て観察してみたところ、ほとんどのフリーランスに共通しているのが、「常に次は何をしようか考えている」ことだとわかりました。もう圧倒的にパワーをつけ、少々大災害が起きたくらいでは揺らがない神フリーランスもいますが、それは置いときましょう。そんな人たちも、きっと最初は大変だったでしょう。
今のままではよくないことを自分で気付くことができ、改善するためには何をすればいいか、またさっきも書いたように「今の仕事が急になくなったら」どうするか、他に何かできることはないか、など、とにかく日々悩み、改善を繰り返していけるフリーランスは生存率が高いように見えます。
要は、「自分で自分の人生を選択できる」人は、フリーランスになってもがんばって生きていけるんじゃないかと。人から指示を受けないと動けない人は無理です。洗脳されやすい人、騙されやすい人も無理。
あとは当然ですが、「孤独と向き合える」人ですね。フリーランスになれば、仕事仲間は自分で積極的に作らない限りいなくなります。孤独に一人でやるのか、仲間を集めてやるのか、どちらにしても孤独であることと闘う必要があります。
一度フリーランスになったけど、やっぱり会社員のほうが向いてるから就職したって人はけっこう見かけます。それは、すごいスキルを持ってても関係ないです。稼げる稼げないじゃないんですよね。
それは決して恥ずかしいことではありません。ただ、「向いてなかった」。それだけの話です。フリーランスでなくなってもいいんだ！くらいの気持ちで、一度フリーランスになってみるのもいいかもしれませんね。もしかしたら、めちゃくちゃ楽しいかも。
それじゃ、バイバイ～！
ブログ書き始めのころ、「役に立つ大容量の記事を、１記事に時間をかけちょっとずる更新する」のか、「短めの軽い記事をとにかく毎日のように更新し続ける」のか、悩みますよね。
答えは、「両方」です。
また当たり前のことを言い出しましたね！まぁ聞いてください。
大抵最初は、自分の持つ知識をフルに絞り出した長い記事を書きがちです。別に全然いいと思うんですが、正直それだけでは続きません。
「大容量の記事」「軽い記事」２パターンの記事の特性を理解し、うまいことバランスをとりながらブログを成長させていきましょう。
記事が長いのはすなわち内容が濃いからです。
内容が濃いと、SEOに強いのはもちろん、読んだ人も「あ～読んだな～！役に立った！」となりやすいです。良記事と呼ばれるものはだいたい長い。
しかし反面、ダラダラと長いだけの文章は途中で飽きられますし、誰でも書いているような記事を書いたところでSEOで簡単に勝てるなんてことはありません。
しかも長い記事ばかりだと疲れるし、飽きます。
「こんだけがんばって書いたのにアクセスまったくないやん！やめたろか！」
どうでしょう、心当たりないですか？僕はあります。
他の記事と同じようなことを書くくらいなら、その記事を紹介して、自分なりの感想を述べたりしたほうがまだ有益です。
軽い記事は、じゃあ内容が薄いのかというとそうも言ってられません。
軽くてもしっかり文章構成を考え、読んだ人の役に立つような記事を書く必要があります。おもんない記事はゴミ記事として認定されます。価値のないゴミ記事を書き続けるブロガーはほとんどただの肉塊と変わりません。
でも、時間をかけずにすぐに書けるので、ネタさえあれば毎日のように更新することができます。
その中には当然、意外と反応がない記事とかもありますが、それも含めて、とにかく量を書くことは大事です。
なぜかというと、たくさん書けば、それだけデータも得られやすくなるからです。
そういったことは収集できるデータが多いほど解析しやすくなります。
また、頻繁に更新することで、「この人はブログを頻繁に更新しているんだな」と知ってもらい、リピーターを獲得しやすくなります。
ブロガーとしてだいじなのは「とにかく頻繁に記事を公開し続けること」です。ブロガーなので、ブログを書きましょう。軽くて内容のある記事を書きまくるのです。
そしてそんな軽い記事はバンバンSNSで流します。そのうち読者が増えていき、ある程度続けていれば記事を公開するたびにめっちゃアクセスがあるという状態になるでしょう。
ただそれだけでは、やっぱりSEOに弱い。もちろん書きまくっていれば稀にSEOでも上位になる記事はあるんですが、なんせSEOのことなんか考えずに書く記事が多くなりますので、（そもそも、「検索される」内容じゃないと検索されない）ほとんど検索から直接来ることはありません。
目標は、放置しててもアクセスがあるブログを目指すことではないでしょうか？毎日ブログを更新しないとアクセスがないというのもなんかしんどいので、SEOのことも考えてあげましょう。
そこで猛烈に長い記事に挑戦したいわけですが、長い記事はもちろん書くのに時間がかかります。長い記事にとりかかると、更新が止まってしまいますね。
これは避けたいので、「軽い記事の毎日更新はストップせず、長い記事は何日かに分けて書く」のがベター。本だって、一日で書きませんよね？なんか他の仕事しながら、毎日ちょっとずつ執筆を進めていくものです。
最初の頃は、長い量記事をたくさん書いてたのに、なんか最近うっすいペラペラの記事しか書かんようになったなーってブロガーさん、いませんか？
あれはもう、検索からもめっちゃ来るし、どんな薄い内容でも書いてSNSにアップしたらアクセスがあるという、ブロガーの境地に立った人たちだと思います。自転車は走り出すまで、乗り方を覚えたりペダルをこいだりと大変ですが、一度走り出した自転車は、軽い力でもスイスイ進むようになります。
僕も早くそれになりたい。
それじゃ、バイバイ～！