以前の記事で「Gulpのインストール不要でScssが使用できるサーバー イイウェブ」を紹介しました。 Gulpなどインストール不要。アップロードするだけでSassが使用できるサーバーが登場！！ | イエロー×グリーン | cross bench （クロスベンチ） みなさんScssを使用する際に自身のパソコンでコンパイラKoalaやタスクランナーのGulpを使用してcssに変換したものをアップロードしていると思います。 ですがまだまだ現場ではScssやGulpを使用している会社は半分ほどです。 HTMLコーダー/マークアップエンジニアに質問。 Sassのコンパイルに何を使っていますか？ ※Twitterの公式アンケート機能で回答ください ※その他の回答は個別にツイートください — 池田 泰延 (@clockmaker) 2017年8月22日 池田さんのアンケートではタスクランナーが60%となっております。 私もここ1、２年で積極的にScssを使用するようになりましたが 会社員時代は数人で作業する時やファイル納品がありましたのでcssでの記述が基本となっておりました。 今でも代理店さんからの依頼の最終納品は「css」が多い印象です。 すべてScssにするには全員がScssを知っている必要があり、 会社の方針としてScssで統一しなければいけません。 Gulpを使用するきっかけはGulpをつかわなければいけない案件があったからです。 HTMLファイルのミニファイ（改行をすべて削除して1行に） CSSファイルのミニファイと規則的な並びに 100ページを超えるコーディング すべて静的HTMLで納品 アイコンなどはfontに変換 Gzipの使用 手作業でこれらのノルマをクリアするのは厳しかった為、 この案件をする前にGulpをインストールしてなんとか納品することができました。 そしてGulpを使用してココがもうちょっと便利になったらいいのになーと思った箇所です。 インストールが大変 ターミナルを操作しないといけない WEBデザイナーには仕切りが高い 複数人での作業に向かない 運用もGulpが必要（修正する際にGulpを使用しないと先祖返りが起こる） Gulpは自由度も高くフロントエンドの方は覚えておきたいツールだと思います が！！ 今回はWEBデザイナー、Scssの練習をしたい、ターミナル無理という方の為にあるサービスを紹介したいと思います。 前から思っておりました。 「ブラウザーが勝手にScssを認識してくれたらいいのにー。」 cross bench （クロスベンチ） この記事に対して 「こんなサービスあったんだー」 「これってNetlify？？」という言われている記事を発見しました！ Netlifyというサービスは初めて聞きました。 もしかするとイイウェブより優秀かもしれないと思い早速試してみました！ （私はあまりターミナルなどは得意ではない…）…

みなさんScssを使用する際に自身のパソコンでコンパイラKoalaやタスクランナーのGulpを使用してcssに変換したものをアップロードしていると思います。 ですがまだまだ現場ではScssやGulpを使用している会社は半分ほどです。 HTMLコーダー/マークアップエンジニアに質問。 Sassのコンパイルに何を使っていますか？ ※Twitterの公式アンケート機能で回答ください ※その他の回答は個別にツイートください — 池田 泰延 (@clockmaker) 2017年8月22日 池田さんのアンケートではタスクランナーが60%となっております。 私もここ1、２年で積極的にScssを使用するようになりましたが 会社員時代は数人で作業する時やファイル納品がありましたのでcssでの記述が基本となっておりました。 今でも代理店さんからの依頼の最終納品は「css」が多い印象です。 すべてScssにするには全員がScssを知っている必要があり、 会社の方針としてScssで統一しなければいけません。 Gulpを使用するきっかけはGulpをつかわなければいけない案件があったからです。 HTMLファイルのミニファイ（改行をすべて削除して1行に） CSSファイルのミニファイと規則的な並びに 100ページを超えるコーディング すべて静的HTMLで納品 アイコンなどはfontに変換 Gzipの使用 手作業でこれらのノルマをクリアするのは厳しかった為、 この案件をする前にGulpをインストールしてなんとか納品することができました。 Gulpタスクランナーを使って作業効率化 | イエロー×グリーン | cross bench （クロスベンチ） ここ一年で「Gulp」というタスクランナーの聞く機会が増えました。 爆速！作業効率10倍！！というコピーがあったり、今時のフロントエンドなら当たり前！という記事を見て 何度かチャレンジしましたが馴染めず、今まで使う機会がなかったです。 最近のお仕事で速度を重視する案件が多く、静的で圧縮コンパイルが必須になりツールでは限界を感じましたのでやろうやろうと思っていたGulpを勉強しました。 学習コストが低いと言われていますが結構難しかった。 Gulpとは？ gulp.jsはNode.jsを使用し作業を毎回行う作業を自動化してくるビルドシステムです。 Koalaなどアプリケーションを使用してSassのコンパイルや圧縮することができますが、Gulpを使用すれば多くのアプリーケーションを使用せず、自分好みまたは案件ごとに作業の自動化をすることができます。 Node.jsインストール Gulpを使用するにはNode.jsのインストールが必要になります。 まだインストールしていない方は公式サイトよりインストールしてください。 ターミナルでバージョンが表示されたら無事インストールが出来ています。 node -v npm Node.jsではnpmというコマンドを使用してインストールを行います。 私が紹介するのはMacの「ターミナル」を使用してのインストール方法です。 gulpインストール npmではローカルとグローバルどちらにインストールするかを選択することができます。 今回gulpはグローバルでインストールしますので-gを追加しています。 先頭にsudoを付けないとインストールできないかもしれません。 npm…

フロントエンド、バックエンドなどWEBデザインという括りから多くの役割ができてきました。 WEBの進化が早く、数年前の技術やデザインが古くなってしまい時代の流れについていくのに必死です。 かっこいいサイトやキレイなサイトを見るとやる気がでますね！ 今回はよく参考にしている今時のWEBデザインまとめサイトをご紹介します。 ぶっくま! ぶいすりー https://bookma.org/ 日本サイトはもちろん、キャンペーンサイトや海外のサイトもまとめられている。 バランスよく管理人のセンスが光ります。 最近はこのサイトを見ることが一番多いです。 MUUUUU.ORG http://muuuuu.org/ 海外のサイトやクール系、フラットデザインが豊富。 最新の技術を使われたサイトがピックアップされているのでトレンドを知れます。 WEB DESIGN GALLERY for WEB DESIGNERS http://design-gallery.biz/ 日本サイト多めでマウスオーバー時にタグやカテゴリーを詳しく見れる事やスマートフォン表示の確認ができるので目的にあったサイト探しがスムーズにできます。 「かわいい」「ふんわり」など日本人の感覚でイメージのサイトが探せるので便利です。 io3000 http://io3000.com/ シンプルなサイトが多くホワイトスペースをうまく使っているサイトが掲載されています。 全体数が多いのでカテゴリーから探すこともできます。 81-web.com 81-web.com 国内サイトのみピックアップしたまとめサイト。 上のサイトを被るサイトも多いですが、管理者の好みか上記にはないサイトも多いです。 海外デザインはカッコイイですが、 海外ならではのかっこよさや好みがあるので日本人が好むサイトはやはり日本サイトから探すことが多いです。 ズロック http://www.zzrock.net/ サムネイルが小さくザーッと見ることができます。 ヘッダーのアイコンが気になる。。笑 レスポンシブJP http://responsive-jp.com/ 日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト。 PC画面、タブレット、スマートフォンの表示が同時に見ることができるので 自分でデバイス変更する必要がありません。 数が多いのでついついPCサイトだけしか見ないことがあるのですが、これならメニューの仕組みもよくわかります。 地域別Webデザインリンク集 4db http://4db.cc/ 日本国内でも地域によってシンボルカラーや雰囲気があります。 他府県のサイトをつくる際は要チェックです。 ウェブクロ http://webukuro.net/ 中小企業や個人運営の方のWEBサイトが掲載されています。 すごいサイトやよく動かすWEBサイトではなく中身を考えさせられます。 ランディングページ集めました。 ランディングページのまとめサイトといえばここ！！ WEBサイトでは表現しきれないページや一押し商品をPRしたい場合に制作するページです。…

WordPressのパーマリンクについて考えたことはありますか？ 私も今までパーマリンクという設定を分かっていたつもりでしたが自分がブログを書き出してから不便な点がでてきました。 パーマリンクはSEOにも少し影響がでてくる場合はあるので、途中で変更する前にしっかりメリットとデメリットを考えて設定しましょう！ パーマリンクについて wordpressのパーマリンクについてはこちらを見てください。 パーマリンクとは、ブログの個々の投稿、カテゴリーなどの投稿一覧ページへの恒久的（半永久的）な URL です。パーマリンクは、他のブロガーがあなたの投稿やセクションにリンクを張るときや、投稿へのリンクを Eメールで送ったりするときに使います。個別の投稿への URL は常に存在して決して変らないようにすべきです。そういう訳で、「perma」リンクといいます。 https://wpdocs.osdn.jp   私がよく設定しているパーマリンク Example Domain 今回の記事の場合はこうなります。1133が今回の記事番号です。 このパーマリンクのメリットは記事毎にアドレスの名前を考えなくて良いのです。 Wordpreeサイトを構築していて使用者の多くの方は 日本後のパーマリンクを設定する方がほとんどでした。 「日本語のタイトルは使用せず毎回アドレスを考えて設定してくださいねー」 と説明してもうっかり日本語のパーマリンクになっており文字化けしている事が多々おきました。 日本語のアドレスだと404エラーになる場合があるため。 お客さんに納品する前に構築側でなんとかできないかー。と考え自動的にパーマリンクが設定されるようにしております。 がしかしブログをやっていて気づいてしまいました！ googleアナリティクスで解析データを見ると、、 どの記事のデータか分からない！！ 自動で設定される事が正しいと思っていましたが、解析する場合に記事内容をいちいち確認しなければいけません。 困った。 WordPress初期のパーマリンク 初期のパーマリンク設定でも記事番号でアドレスが自動的に設定されますがカテゴリーがない為、アドレスからどの記事か判断できないです。 SEOとパーマリンクについて パーマリンク設定を正しくすればSEO対策になりランキングが上がるということはありません。 上記にも書きました、日本語アドレスの場合は減点になる可能性があるので控えましょう。 分かりやすい記事名を毎記事考えなければいけませんが、解析時にアドレスを見るだけでどの記事か判断できるので便利です。 パーマリンクを途中で変更するデメリット パーマリンク設定はいつでも変更することができますが、変更すると今までSNSでシェアされた数がすべてリセットされてしまいます。 さらにGoogleの検索エンジンからの評価もリセットされます。 どうしてもパーマリンク設定を変更したい場合は301リダイレクトを設定するようにしましょう。 まとめ ブログを書いてアフィリエイト収入を狙っている方は カテゴリ名 + ポストネームがオススメです。 本サイトとは別に新着記事をちょっと更新したい、パソコン操作が苦手な方は カテゴリ名 + ポストIDがオススメです。 私はポストネームにしておけばよかった。。と後悔しています。 パーマリンクは適当に決めずしっかり先の事を考えて設定しましょう。

私自身wordpressで記事を投稿するようになり、wordpressのプラグインの豊富さに助けられています。 昔はブログをしていなかったのでプラグインは定番のものしか知りませんでした。 実際に自分が使ってみて便利だったプラグインをご紹介したいと思います。 wordpress初心者の方にもオススメです。 セキュリティー対策&バックアップ バックアッププラグインは有料コンテンツと無料コンテンツがありますが、紹介する3つのバックアップツールは無料の範囲でも十分復元が可能なプラグインです。 無料ではできない範囲の場合に有料版をお買い求めください。 Akismet 海外からの悪意あるコメントからサイトを守ってくれるプラグインです。 無料でも使用できますのでコメント機能をONにしている方は安全の為インストールしておくことをオススメします。 https://ja.wordpress.org/plugins/akismet/ SiteGuard WP Plugin WordPressのログイン画面はよくアタックされます。 このプラグインをインストールしておくと、ログイン画面に画像認証を追加したりお決まりのログインアドレスを変更し予測されにくくなります。 ただセキュリティが固く少しめんどくさくなる部分もあるので心配な方はインストールをお勧めします。 https://ja.wordpress.org/plugins/siteguard/ BackWPup – WordPress Backup Plugin WordPressにはバックアップは大切です。 人気のプラグインです。FTPへのバックアップやクラウドサービスへのバックアップに対応しています。 Cronを使用すれば定期的なバックアップも可能です。 https://ja.wordpress.org/plugins/backwpup/ Dropbox Backup & Restore BackWPupと同じですが、こちらも評価が高ったので2つ試しております。 DropBoxでバックアップがしたいという方はこちらをインストールすれば定期的バックアップも可能です。 https://ja.wordpress.org/plugins/dropbox-backup/ UpdraftPlus WordPress Backup Plugin 最近話題のバックアッププラグインです。 上記のBackWPupと同様のことができます。 使いやすいバックアッププラグインを使用してください。 https://ja.wordpress.org/plugins/updraftplus/ SEO対策 All In One SEO Pack SEOの定番プラグイン、キーワード設定の他 サイトマップの生成も無料でできます。 記事ごとにSNSのアイキャッチ、メタ情報を細かく設定することができます。 Googleではディスクリプションやキーワードは意味がないと言われていますので、 このプラグインを設定したからといってランキングが上がるわけではありません。 https://ja.wordpress.org/plugins/all-in-one-seo-pack/ Google…

DLマーケットから宣伝してくれませんかー？ というメールが届きました。 このテンプレートは長く使わせていただいており、 後々宣伝しようと思っていましたので今回の機会にご紹介したいと思います。 どんな方にオススメか アフィリエイトが目的の初心者ブロガーさん WordPressやHTMLの知識がない方 初期投資ができる方 どうせブログをやるのであれば多くの人に見てもらいたいですよね。 それにはブログのデザインがオリジナルでかっこよければいっぱい人が来る！ と思っている方いませんか？ ブログで一番大切なのは文章です！！ デザインや機能性も大切ですがどれだけいいデザインのブログでも 内容が何もなければ誰も見に来てくれません。 私も昔はWordpressでブログテンプレートを作っておりましたが、 ブログを書くというよりも見た目ばかり気にして最終的にはブログをまったく書かなくなりました。 さらにはカスタマイズすらもしなくなっていきました。 ハミングバードを使うようになったきっかけ お仕事でこのテンプレートを使用して構築してもらいたいというお話がきました。 有料ブログテンプレートなんて、、と思っていた僕です。 ふむ。このテンプレートSEOに強いだの、最強だの言われてるので自分も一度、 使ってみようかなと思いました。 謎に上からでした。。 はじめて日本有料テンプレートを使ってみました。 ↓↓ハミングバードショートコード一覧↓↓ demo-hummingbird.open-cage.com/short-code/ ハミングバードと相性の良いプラグイン WordPress Popular Posts （人気記事ランキングが簡単につくれます） Black Studio TinyMCE Widget （ウェジェットをビジュアルで編集できます） SNS Count Cache （SNSシェアに数字を追加することができます） Jetpack （Wordpress記事投稿時にSNSで共有させることができます） AddQuicktag （ショートコードを簡単に埋めることができます） ハミングバード様様 管理ページを見てみてビックリ！すでに色々揃っている！！ レオパレスに入居した気分です。 WordPressはプラグインとの組み合わせや 自分の思うようにする為にはwordpressのカスタマイズが必要なのですが ハミングバードはブログを書くことに必要なカスタマイズがすでに施されているのです。 もちろんオリジナルテンプレートも大切です。 私のようにブログに慣れていない人だと、まずブログを書く！ 見てくれる人が多くなればテンプレートを自分で作っていく。 の順番がモチベーションも上がりますしブログを長く続けられるフローになります。 WordPress難しいんでしょ？…

Adobe2017 CCがリリースされましたので、得意の人柱になります。 今回アップデートしたのは下記のツール達 Photoshop CC(2017) Illustrator CC（2017） Dreamweaver CC（2017） Premire Pro CC（2017） After Effects CC（2017） 使っていないけど一応アップデートしたのはこれ。 使っていないツールは積極的にアップデートしていきます。 Audition CC（2017） Animate CC（2017） Dreamweaver CC（2017） sublime textやcoda2も使用しているので2017になって問題が起きても 大丈夫であろうということでアップデートしました。 Dreamweaverは大きな変更は今までなかったのですが、今回はうれしいアップデートがありました。 Sassに対応 Dreamweaverでは今までSass表示が対応していなかったのですがCC 2017で標準で対応されました。 コードが見やすい見やすい〜 @mixinや@includeも使用できます。 サイト定義からScssの出力設定などができます。 リアルタイムプレビュー htmlやcssを編集して保存するとブラウザーも更新されるようになりました。 デバイスでのプレビュー QRはなぜかうまく動作しませんでした。 HTML ファイルでのクイック編集モードの使用 idや、classにカーソルを合わせてcommand + E を押すと対応したcssをクイックに編集することができます。 コメントアウトの追加と削除 CC 2015のEmmetの機能でcommand + / を使用してコメントアウトを追加することはできたのですが、削除がうまくできませんでした。 CC 2017から標準で追加されたみたいなので追加と削除が無事動作していました。 地味にうれしいです。 複数の場所でのテキストの追加または変更 sublimeにも同じような機能があります。 commandを押しながら修正したい場所を選択します。…