快適にサクサク動くMac用FTPツールは「ForkLift」がおすすめ（Diffも可） | HPcode（えいちぴーこーど）
個人的に好きだった「Yummy FTP」が使えなくなり、、、代替として「Forklift」を使ってみたのですが、これまた素晴らしいので紹介です。 Yummy FTPの保守が完全に止まってしまっているので、同等の機能（それ以上かも）を備えているForkLiftに切り替えました！ Yummy FTPはCatalinaから完全に使えなくなってます…😭 — はにわまん (@haniwa008) October 28, 2019 個人的に感じた、おすすめポイントとしては以下のとおりです。 サクサク動いてストレスがないローカルファイルとサーバーファイル間でDiffできる更新ファイルだけを検出してアップロードできる 一応免責事項として、サーバー内のファイルの操作はとてもデリケートです。万が一、当記事を参考にして何か問題やトラブル起きても管理人は一切の責任を負わないことをご了承ください…（ご利用は自己責
画像上の任意の場所をクリックできる「クリッカブルマップ」の使い方 | HPcode（えいちぴーこーど）
Webサイト上に配置した画像内の任意の場所をクリックできるようにするコーディング方法の紹介です。 「クリッカブルマップ」あるいは「イメージマップ」と呼ばれたりしていて、特別な実装方法ではなくHTMLがあらかじめ用意されている仕組みで対応できたりします。使うタグとしてはmapとareaですね。 この記事では「クリッカブルマップ」の実装方法と、レスポンシブに対応する方法について紹介していけたらと思います！ クリッカブルマップの基本コード 今回はこの画像の「1」と「5」の場所をクリックできるようにしていきます。 （全部の番号も可能ですが、コード量が増えるだけなので…） まだ何もコードを入れてないので、マウスでクリックしても何も反応しないことを確認しておいてください。 imgとmapとareaを用意 クリッカブルマップの基本コードが以下の書き方になります（※ 型なので、このコードを貼り付けても動き
カスタム投稿タイプを簡単に作成できる「Custom Post Type UI」の使い方！ | HPcode（えいちぴーこーど）
カスタム投稿タイプの一覧ページ（URL）を作るかどうか カスタム投稿タイプはデフォルトでは一覧ページを「持たない」という設定になっています。持たなくもいいケースもあるかと思いますが、今回は「ニュース」としてのカスタム投稿タイプを作りますので、一覧ページはほしいところです。 ということで、少しスクロールした先にある設定から「アーカイブあり」の項目をtrueに変更しておきましょう。 カスタム投稿タイプのテンプレートの作り方 カスタム投稿タイプのテンプレートの作り方です。前提知識としてWordPressのテンプレート階層を理解している必要があるのですが、ここではカスタム投稿タイプに必要な部分だけを紹介してこうと思います。 個別ページ single-{カスタム投稿タイプのスラッグ名}.phpで作成します。今回は「news」というスラッグ名でカスタム投稿タイプを作成したので、single-news.
Adobe XDのデザインカンプからコーディングに必要な画像や値を取得する方法 | HPcode（えいちぴーこーど）
必要な画像の分だけ、同様に書き出していきましょう！ XDから各種値を取得する 続いてはXDから色々な値を取得していく方法です。正確なコーディングをするには正確な値を取得しないといけません。 文字テキスト自体を取得 選択ツールの状態でダブルクリックすると文字の中に入ることができます。テキストツールに切り替えなくてもいい点が素晴らしいですね。 文字に関する値を取得 選択ツールで文字エリアを選択すると右のエリアに各種値が表示されます。 今回の例だと、それぞれ以下のような値になります。 font-family → メイリオfont-weight → normalfont-size → 16pxline-height → 1.5（24px ÷ 16px）letter-spacing → 1.2px（16px × 0.75）color → #3C3C3C（塗りのチェック付いている箇所） XDはシンプル
【完全網羅】WordPress管理画面のメニューをプラグインなしで消す方法 | HPcode（えいちぴーこーど）
WordPressの管理画面でお客様に応じて出したくないっていうメニューもあるかと思います。プラグイン等でも削除できたりしますが、functions.phpからも簡単に削除できるので一覧でまとめてみました。 メニュー消す系のプラグインを使いたくない人や、部分的な非表示なのでプラグイン使うまでもないって案件で参考にしてあげてください！ 管理画面のメニューを消す方法 WordPress管理画面のメニューには「サイドメニュー」と「アドミンバー」の2つのメニューエリアがあります。 ぞれぞれの消し方を見ていきましょう！ サイドメニューを消す方法 サイドメニューはWordPress管理画面の左側に出ているメニューですね。管理画面の中で一番利用頻度の高いメニューかと思います。 サイドメニューは、admin_menuのアクション内でremove_menu_pageによって対象のメニューを指定してあげればO
Advanced Custom FieldsとCustom Post Type UIで「管理しやすい」編集画面を作ろう！ | HPcode（えいちぴーこーど）
Rettyの特集ページ（https://retty.me/topic/16065/）のような項目が決まっていて使い回しができそうなWordPressのテンプレートページを作り方を紹介します。 編集エリアにHTMLタグを打っていけば作れるのですが、お客様に提供する画面は「管理のしやすさ」が大事だと思うので、 カスタム投稿タイプを使って専用の投稿ページを作りカスタムフィールドを使いお客様が使いやすく（入力しやすく）する といった2点を盛り込んでいきます。 カスタム投稿タイプって何？カスタムフィールドって何？など説明していません。テンプレートファイルの扱いやプラグインの使い方なども含めて、WordPressのカスタマズの基本が分かっている人向けなので、中級者以上の方でないと理解はできないかもしれません。。 ちょっと難しめということを念頭において、早速作り方を見ていきましょう！
Illustratorのデザインカンプからコーディングに必要な画像や値を取得する方法 | HPcode（えいちぴーこーど）
WebコーダーはIllustratorを完全に扱える必要はありませんが、コーディングに必要な値やデータを取得できなければなりません。 （Illustrator自体は、わたしはほぼ使えません…＞＜） というのも、Webデザイナーさんが作成したデザインカンプを元にコーディングするのがコーダーのお仕事だからです。デザインカンプはIllustratorで作られることがあるので、Illustratorからコーディングに必要な値や画像を取得する知識が必要ということですね。 この記事ではIllustratorからコーディングする際に必要な値や画像を取得する方法を紹介しています。
PerfectPixelを使えばデザインカンプを完全再現したコーディングができる！ | HPcode
PerfectPixelを使えばデザインカンプを完全再現したコーディングができる！ 2018 10/31 コーダーとしての質の高さの指標の1つに、デザインカンプからの再現度の高さが挙げられると思っています。 PCサイトだけ作っていればいい時代に生まれた言葉で「ピクセルパーフェクト」があります。ピクセルパーフェクトとはデザインカンプから1mmもズラさずに再現するというものです。 今の時代にそこまで厳密に求めてくる会社はないと思いますが、それでもデザインカンプの再現を理由もなく怠るのはコーダーとしてありえないと思います。 「PerfectPixel」という（名前そのままの）ブラウザ拡張ツールを使えば、デザインカンプの再現を高いレベルで担保することができます。コーディングを担当している方は、ぜひ使ってみてほしいツールです！ 📝コーディング時にデザインカンプを100%再現するためのツール「Per
【実例12パターン】画像スライダーはSwiper使っておけば間違いない！実用的な使い方を紹介 | HPcode（えいちぴーこーど）
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="dist/css/swiper.css"> <title>Title</title> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="https://haniwaman.com/cms/wp-content/uploads/2018/05/swiper01.png" alt="Swiper01"><
Gutenbergにオリジナルなブロックを作成する方法（静的編） | HPcode（えいちぴーこーど）
プラグインを作成 独自のブロックはプラグインで作成するのが一般的なようです。 プラグインの詳しい作り方については以下をご参考ください。 https://haniwaman.com/my-plugin/ my-gutenbergをpluginsフォルダ内に作成してindex.phpを作成して以下を記述します。 「My Gutenberg」というプラグインがプラグイン一覧に表示されるようになるので、有効化しておきます。 Gutenbergブロックの作成方法 ブロック用のスクリプトを登録ブロックの定義を登録ブロックの内容を登録 1.ブロック用のスクリプトを登録と2.ブロックの定義を登録はinitをフックにしてregisterを登録します。3.ブロックの内容を登録については、JavaScriptで記述していきます。 ブロック用のスクリプトを登録 WordPressでスクリプトを登録するためのwp_
VSCodeにコードスニペットを登録して効率的にコーディング！ | HPcode（えいちぴーこーど）
VSCodeでは各拡張子ごとにスニペットを登録しておくことが可能です。スニペットとは、単語登録のように、何かの文字をキーにコード一式を登録しておいて、簡単に使い回しできる機能のことです。 プログラミングをしていると、「これ何回同じ入力繰り返してるんだ・・・」ってコードがいくつかあるはずです。そういったコードを都度入力するのは無駄な時間以外のなにものでもありません。 スニペットとして登録して、3文字入力すれば100文字分のコードが出力されるみたいな登録をしておき、コーディングの効率化を図りましょう！
EJSの使い方！静的なHTMLサイトで「共通パーツ」と「変数」を使おう | HPcode（えいちぴーこーど）
EJS（イージェーエス）はテンプレートエンジン呼ばれるNode.jsのパッケージの１つです。JavaScriptとHTMLを混ぜた感じでHTMLサイトが作れることをイメージしてもらえたらと思います。 1番のメリットとしては、ヘッダーやフッターなど複数ページにまたがる共通パーツと呼ばれるコードを1つのファイルで管理できることですね。100ページある普通のHTMLサイトなら、ヘッダーの一部分を変更するときに100ファイル分の修正が発生しますが、EJSでヘッダーを１つのファイルで共通に管理すれば1ファイルの修正で済みます。 静的なHTMLサイトで数十ページを超えるようなサイトをコーディングする場合はぜひ使ってみてください。
Sassを使うメリットとよく使う機能を５つだけ厳選！ | HPcode（えいちぴーこーど）
Sassは、CSSを拡張した言語で、利用する主な目的としては「CSSを管理しやすくするため」です。 平面にベターっと並ぶCSSはとてつもなく見づらく管理しずらい圧倒的なデメリットがあります。CSSが数千、数万行となったときにとてもじゃないけど、どこに何が書いてあるか把握することは困難だと思います。あとから修正しようと思ったときに必ずといっていいほど修正漏れが起こりやすいのがCSSです。 Sassを使えば、「CSSの管理しずらい」という問題を少なからず解決してくれます。 今ではSassを使っていないWeb制作会社の方が少ないってくらいに使われる言語なので、Webコーディングを仕事とするなら必ず覚えておかないと仕事にならない可能性があります。 この記事では、最低限で理解しておきたいSassの使い方を紹介していきます。サクッと覚えて使えるようにしておきましょう！ Sassを使うメリット 冒頭でも
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPressのお問い合わせフォームで郵便番号から住所を自動で入力 | HPcode（えいちぴーこーど）
WordPressで自動出力されるタイトル系のカスタマイズ方法まとめ | HPcode