サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
デスク環境を整える
haniwaman.com
CSSで横並びを表現できる5パターンと使い所 レイアウト的な横並びはflexを使うとして、その他の横並びは使い所を抑えて起きましょう! float floatは、一昔前のキングオブ横並びです。これから作る新規サイトでは横並び(レイアウトという意味で)で使うことはほぼないと思いますが、過去サイトの改修するをする際には、一応知識が必要になってきます。 そんな過去のものとなってしまったfloatですが、現代の使い所としては「回り込み」があるかと思います。 <div> <img class="float-test" src="https://haniwaman.com/cms/wp-content/uploads/2018/02/cat.jpg" alt=""> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non sint m
WordPressの管理画面でお客様に応じて出したくないっていうメニューもあるかと思います。プラグイン等でも削除できたりしますが、functions.phpからも簡単に削除できるので一覧でまとめてみました。 メニュー消す系のプラグインを使いたくない人や、部分的な非表示なのでプラグイン使うまでもないって案件で参考にしてあげてください! 管理画面のメニューを消す方法 WordPress管理画面のメニューには「サイドメニュー」と「アドミンバー」の2つのメニューエリアがあります。 ぞれぞれの消し方を見ていきましょう! サイドメニューを消す方法 サイドメニューはWordPress管理画面の左側に出ているメニューですね。管理画面の中で一番利用頻度の高いメニューかと思います。 サイドメニューは、admin_menuのアクション内でremove_menu_pageによって対象のメニューを指定してあげればO
わたしはWordPress案件をメインにフリーで活動しているのですが、WordPress案件をいただいた時に必ずローカル環境を作成します。 ローカル環境の構築に使うのが「Local by Flywheel」です。WordPressの面倒なインストール作業を全部省いて使える状態まで持っていってくれるので、重宝しまくっているのですが、不満が点が1つだけ。 英語の環境でインストールされるということ… そんな不満を抱えながら何十件とローカル環境を構築しては、管理画面の設定から手で直すということを繰り替えしていただのですが、ついにこのストレスから解消される方法を見つけました! それは、WP-CLIを使うことです。 cliなので黒い画面のコマンドへの入力になるのですが、やることはコピペです。「Local by Flywheel」ではWP-CLIが標準で使えるのも素晴らしいです。 普段「Local by
WordPressで無限スクロールを実装する方法です!無限スクロールの実装を理解できているとカスタマイズもしやく、かつWordPressの動きもちょっとだけ深く理解できるようになります。 前提として、WP_QueryなどWordPress特有のループ処理方法が当たり前のように出てきますが、その辺りの説明はしないのでWordPressの基本は理解している前提で記事が書かれていることをご理解いただけますと幸いです…。 一応、サブループについては以下で解説しています。 https://haniwaman.com/loop/ 動きのサンプル例 実際の動きはこんな感じです。スクロールが最後まで行くと、ローディングが開始して記事を取得して表示するという動きになっています。 自作できるようになっていると、ローディング時の動きなど柔軟に対応できるようになるはずです。 WordPressで無限スクロールを実
Googleマップの埋め込みタグの取得 まずはGoogleマップの埋め込みタグを取得していきましょう。 Googleマップのページにアクセスしてください。 → Google マップ 新宿の紀伊国屋を例にコードを取得していこうと思います。 (住所:東京都新宿区新宿3丁目17−7) 左上の検索エリアから「東京都新宿区新宿3丁目17−7」を入力します。 検索結果が表示されて間違いなければ、「共有アイコン」をクリック。 ポップアップが開くので「地図を埋め込む」のタブを選択します。 「小」「中」「大」「カスタムサイズ」から「カスタムサイズ」を選択して、幅、高さをデザインカンプの値に合わせて変更させましょう! iframeのHTMLタグがすぐ下にできあがっていると思うので、こちらをコピーしてHTMLファイルに貼り付けます。 今回だと以下のような埋込みタグが作られました。 <iframe src="ht
カスタム投稿タイプの一覧ページ(URL)を作るかどうか カスタム投稿タイプはデフォルトでは一覧ページを「持たない」という設定になっています。持たなくもいいケースもあるかと思いますが、今回は「ニュース」としてのカスタム投稿タイプを作りますので、一覧ページはほしいところです。 ということで、少しスクロールした先にある設定から「アーカイブあり」の項目をtrueに変更しておきましょう。 カスタム投稿タイプのテンプレートの作り方 カスタム投稿タイプのテンプレートの作り方です。前提知識としてWordPressのテンプレート階層を理解している必要があるのですが、ここではカスタム投稿タイプに必要な部分だけを紹介してこうと思います。 個別ページ single-{カスタム投稿タイプのスラッグ名}.phpで作成します。今回は「news」というスラッグ名でカスタム投稿タイプを作成したので、single-news.
GulpでPugの環境を構築する方法です! 同列に語られがちなHTMLのテンプレートエンジンであるEJSと近いかと思いきや、意外とDreamweaverのテンプレート機能と近いという感覚でした。 使えるようになれば、静的なHTMLサイトの構築が楽になるのは間違いないので、時間がある時にでも触ってみてください。
Lightboxのダウンロード 以下にアクセスしてください。 ダウンロード先 → Lightbox 「DOWNLOAD」ボタンからダウンロードできます。 いろいろなファイルが入っていますが、使用するのはdist内のファイルだけです。 Lightboxの使い方 Lightboxの使い方はめちゃくちゃ簡単です。 distフォルダ内のCSSファイル、JavaScriptファイル、imagesフォルダを移動して、画像のリンク先を指定したaタグを用意するだけになります。 CSSを<head>内に読み込みます。パスはご自身の環境に応じて変更してください。
「スマホは〇〇、PCは〇〇でタブレットは不要です」、みたいなのもあると思いますが、自分としてはインナーからiPadが一番崩れやすく、ここの表現はどうやってるんだろうととても不思議に思っています。 (PCは固定幅でスマホに移行するまでは水平スクロールOKとかなら分かりますが…) 今回は例題として、以下のデザインカンプをいただいたとして、どのようにブレークポイントを決めるかを紹介していきます。こちらのカンプはnoteでも販売しているものになりますので、実践したい方はぜひ! → Photoshop、Illustrator、XDからのコーディングに慣れよう! インナーの幅を知る ブレークポイントを決める上で重要視しているのは、インナーの幅です。インナーとは、サイトの実質的な横幅です。ウインドウサイズは可変なので、どこまでの幅を担保するかはデザインカンプの時点で基本的には決まっているはずです。 この
設定ができたら、Activeが「はい」であることを確認して、「公開」ボタンで使えるようにしましょう。 公開すると、フィールドグループの一覧から管理できるようになります。タイトルの「リード」はここで使われる名前(逆にここだけでしか使われませんが)なので、内容が分かりやすいタイトルをつけておくと管理が楽かもしれません。 投稿ページを確認 それでは、投稿ページに反映されているか実際にみていきましょう。投稿 → 新規追加 から覗いてみると、、、ありました! このように、「Advanced Custom Fields」ではいくつでも項目を増やしていくことができます。ただし今の状態では表示されません。なぜなら「Advanced Custom Fields」で設定した(今回の例だと「リード」)を表示させるためのテンプレートタグがテンプレートに記載されていないからですね。 次は「Advanced Cust
※ Yummy FTPの作者の方がお亡くなりになられたようで保守が止まっております。最新バージョンのMacでお使いいただく場合は、代替ツールとして「ForkLift」がおすすめです。 (ちょっとお高くなります…) WindowsからMacに乗り換えてから悩みの種だったFTPツールが「Yummy FTP」に切り替えたことで完全に解決しました。むしろWindows時代よりパワーアップしたって感じです。 MacのFTPツールは、「Yummy FTP」が最強でした。ポイントは以下の3点です。 サーバーとローカルファイル間でdiffができる操作感がMacのFinderと同じ洗練されたUIがMacと親和性が高い 特にアナログなWebコーダーのわたしにとって、diffできるFTPツールがないと仕事にならなかったので、本当に助かりました…。 有料ですが、30日間は無料で使えるので、ぜひ試してみてください。
WindowsでGulpコマンドを使えるようになるまでの手順です。 順番さえ覚えておけば、数分で終わります! gulpインストールまでの流れ ざっくりと流れは以下のとおりです。 Node.jsのインストールnpmのインストールgulpのインストール gulpをインストールするためには、npmが必要で、 npmを使うためにはNode.jsが必要なので、Node.js → npm → gulp という順番でインストールしていくことになります。 Node.jsのインストール 以下のサイトにアクセスしてください。 → https://nodejs.org/ja/ 最新版と推奨版があります。特に理由がなければ推奨版をダウンロードしてください。 ダウンロードしたファイルを実行します。手順どおり進んでいけば問題ありません。キャプチャだけ貼っておきます。 Next ライセンスにチェックしてNext Nex
EJS(イージェーエス)はテンプレートエンジン呼ばれるNode.jsのパッケージの1つです。JavaScriptとHTMLを混ぜた感じでHTMLサイトが作れることをイメージしてもらえたらと思います。 1番のメリットとしては、ヘッダーやフッターなど複数ページにまたがる共通パーツと呼ばれるコードを1つのファイルで管理できることですね。100ページある普通のHTMLサイトなら、ヘッダーの一部分を変更するときに100ファイル分の修正が発生しますが、EJSでヘッダーを1つのファイルで共通に管理すれば1ファイルの修正で済みます。 静的なHTMLサイトで数十ページを超えるようなサイトをコーディングする場合はぜひ使ってみてください。
WordPressでオリジナルな一覧ページを作る上で意識して指定しているのが、pagedという値だと思います。 WP_Query( array( 'paged' => $paged ) );といった感じですね。 この$pagedの取得方法が一覧ページと個別ページで取得方法が異なるというお話になります。あまり情報もなく詰まると平気で数十時間を費やすつまずきポイントでもあるので、頭の片隅にでも残しておいてください!
transformプロパティでは、以下の変形を実現できます。 移動縮尺回転傾斜遠近効果 transform自体は要素を変形させるだけの役割ですが、 transitionなどと組み合わせることで、マテリアルデザインで表現されているような、繋がりのあるアニメーションを実現することができたりします。 実際の変化を見ながら、transformの変形について見ていきましょう。
わたしはフリーランスで活動してるWebコーダーですが、実はWeb制作会社に就職したことはありません。HTMLもCSSも独学で学びました。また、仕事をする上で必要なお作法も独学です。 (なので、未経験からフリーのWebコーダーというキャリアになるんですかね…) いきなりフリーランスということもあり、コーダーになる方法について考えた時間は、普通に働いているコーダーよりも長いんじゃないかなって思います。 そんなわたしの経験を交えながら、Webコーダーとして仕事をするために どういったことを勉強すればいいかどこまでできるようになればいいか について紹介していきます。Webコーダーを目指している方にとって役立つ内容になっているはずです。最後の実践までクリアできたら、あなたは今すぐコーダーになれます。 コーダーなるために必要な勉強量 コーダーになるために必要な勉強を項目ごとに並べていこうと思います。1
ドロワーやモーダルといった、いかにもクリックアクションをJavaScriptで操作している系の動きも実はCSSだけで実現できたりします。 仕組みの大枠としては、以下の3つを組み合わせる感じです。 チェックボックにあるチェックされた時のスタイルを適応できる:checked クリック要素(チェックボックスのon/off)として使うfor属性 アニメーションを制御できるtransition
GitHubとのやり取りをコマンドではなく、ボタンなどの操作で直感的に操作できるのがSourcetreeというツールです。 ターミナルなどの黒い画面が苦手な方でも、Sourcetreeを入れておけば簡単にGitの操作、およびGitHubとのやり取りができるようになります! この記事ではクローン、ブランチ作成、プル、プッシュ、マージなどなどの基本な操作を紹介していけたらと思います。細かい部分で足りない説明はあるかもしれませんが、大雑把な流れがイメージできるようになれば嬉しく思います。 Sourcetreeのインストール Sourcetreeのダウロードページ → Sourcetree | Free Git GUI for Mac and Windows 「Download」ボタンからダウンロードしてください。 インストールするために「Atlassian」と「GitHub」のアカウントが必要に
FC2ブログからWordPressへ記事を移行する方法です。 WordPressでの対応から一気に難しくなりますが、頑張ってついてきてください・・・。 ※ なにか不具合が生じても一切の責任を負いません。自己責任で行ってください。 ※ WordPress環境が用意できている前提のお話になります FC2ブログからエクスポート 記事と画像の両方をダウンロードする必要があります。両方とも左のサイドメニューにあるツール → データバックアップ を選択。 FC2の記事を保存 全ての記事から「ダウンロード」からtxtファイルがダウンロードできます。 FC2の画像を保存 ファイルをバックアップの画像から「リストを開く」をクリック。 開いたページからCtrl + S(名前を付けて保存)から保存します。 ファイルの種類は「Webページ、完全」を選択してください。 画像がまとまったページが保存されます! 画像フ
VSCodeでは各拡張子ごとにスニペットを登録しておくことが可能です。スニペットとは、単語登録のように、何かの文字をキーにコード一式を登録しておいて、簡単に使い回しできる機能のことです。 プログラミングをしていると、「これ何回同じ入力繰り返してるんだ・・・」ってコードがいくつかあるはずです。そういったコードを都度入力するのは無駄な時間以外のなにものでもありません。 スニペットとして登録して、3文字入力すれば100文字分のコードが出力されるみたいな登録をしておき、コーディングの効率化を図りましょう!
背景に動画を使うための方法を紹介していきます。厳密には背景は画像しか指定できないので、「背景っぽく」CSSで表現するって感じですね。 この記事ではファーストビューの画面いっぱいに動画を表示させるための書き方を紹介していきます。ヒーローイメージの動画版と考えていただければと思います。 ちなみに、短めでいい感じの動画がほしい方は以下のサービスがおすすめです!(無料) → Beautiful, Free Stock Video Footage For Your Homepage
必要な画像の分だけ、同様に書き出していきましょう! XDから各種値を取得する 続いてはXDから色々な値を取得していく方法です。正確なコーディングをするには正確な値を取得しないといけません。 文字テキスト自体を取得 選択ツールの状態でダブルクリックすると文字の中に入ることができます。テキストツールに切り替えなくてもいい点が素晴らしいですね。 文字に関する値を取得 選択ツールで文字エリアを選択すると右のエリアに各種値が表示されます。 今回の例だと、それぞれ以下のような値になります。 font-family → メイリオfont-weight → normalfont-size → 16pxline-height → 1.5(24px ÷ 16px)letter-spacing → 1.2px(16px × 0.75)color → #3C3C3C(塗りのチェック付いている箇所) XDはシンプル
斜めの背景を作るためのCSSの書き方 斜めの背景を作るためのCSSの書き方です。要素全体をガタッと傾けて、中の文字を覆う要素は傾きを戻し、傾けた部分がはみ出ないようにoverflow-x: hidden;といったイメージになります。 要素全体をガタッと傾ける 外側を覆っている要素をガッタと傾けます。ただ、傾けると左右に空白が生まれて背景っぽくなくなってしまうので、ウインドウサイズからはみ出来るくらいのサイズを指定してあげてください。 幅がはみ出ているため、水平スクロールが発生してしまいます・・・。 <!-- section1 --> <section id="section1" class="section"> <div class="inner"> <h2>セクション1</h2> <p>コンテンツです。コンテンツです。コンテンツです。コンテンツです。コンテンツです。コンテンツです。コンテ
スムーズな移動!「smooth-scroll.js」で固定ヘッダーも考慮したページ内リンク 2018 7/27 1ページで完結するようなLPでよく使われるのが、ヘッダーのグローバルメニューが各見出しへのページ内リンクになっているというもの。 普通に設置してもいいのですが、グイーンと移動してくれた方が、ページ内を「移動している感じ」がしてユーザービリティがいいのではないかと思います。 そんなスムーズなページ内を移動をサポートしてくれる「smooth-scroll.js」というJavaScriptライブラリの使い方を紹介します!
WordPressでサイト制作する上で絶対に押さえておくべき仕組みの1つに「任意のループを作る」があると思っています。 「ループ」とは管理画面から投稿した記事をまとめて一覧で表示させる仕組みとイメージしていただければいいと思います。これをテンプレートの好きな場所に好きな条件で表示させられうかどうかが、思い通りのサイトを作れるかどうかの分かれ道になるかもしれません。 よくあるのが、コーポレートサイトのトップページの一部に「新着ニュース」を部分的に表示されるみたいな書き方ですね。 この記事では、WordPressで好きな箇所に好きなループを作る方法を紹介していきます。
URLを貼り付けるだけで埋め込まれるWordPress内部リンク(oEmbed)をカスタマイズする方法 2018 5/15 WordPress4.4から、oEmbed対応の記事だったらURLを貼るだけで埋め込み表示されるようになりました。 他の WordPress サイトに投稿を埋め込めるようになりました。エディターに投稿の URL を入れるだけで、設定したタイトル、抜粋、アイキャッチ画像を備えた埋め込みプレビューがすぐに表示されます。さらに、サイトアイコンやコメント・共有用リンクも含まれます。 WordPress 4.4 “Clifford” 初期表示だとこんな感じ。※ 画像です。 めちゃくちゃデカイですね。 アイキャッチタイトル抜粋ロゴサイト名コメント数共有ボタン めっちゃ便利な機能ではあるのですが、ちょっと場所を取りすぎです。そこで、この記事に埋め込まれるoEmbedの表示をカスタマ
データベースのアカウント確認 まずは、データベースにアクセスするアカウントを確認します。 WordPressをインストールしたフォルダ直下にあるwp-config.phpの以下の箇所に書かれているので、開いておいてください。 ※ 「********」の中に各環境に応じて値が入っているはずです。 ここの値を次のphpMyAdminにログインする際に使用します。 phpMyAdminににアクセス phpMyAdminにアクセスしてデータベースを操作します。メジャーなレンタルサーバーであれば管理画面からアクセスできるようになっているはずです。 わたしはXserverなのでこちらを例にすると、 サーバーパネルにログインして「phpmyadmin」をクリックすることでアクセスできます。 Xserverではベーシック認証でユーザーIDとパスワードを確認されます(一般的にはログイン画面がでます) ここに
.inner要素を固定幅にして、小さくした時にはみ出ないようにmax-width: 100%;にします。そして、ブロック要素を中央寄せする時のおまじないであるmargin: 0 auto;を指定することで、親の#aboutに対して左右中央で配置されるという仕組みです。 📝 レイアウトの中央配置としてめっちゃ使うHTMLとCSS ✅ 中央配置用に.innerで囲む ✅ .innerを固定幅に ✅ margin: 0 auto; で中央配置 <section> <div class=”inner”> <h2>見出し</h2> </div> </section> .inner { width: 980px; max-width: 100%; margin: 0 auto; padding: 24px; } pic.twitter.com/8QdugJRxsR — はにわまん (@haniwa0
「キャッシュの削除お願いします」をなくせ!強制的にCSSのキャッシュを無効化する2つの方法 2018 5/27 ~ とあるサイトのカスタマイズ案件にて ~ わたし「対応が完了したので、ご確認いただけますでしょうか。」クライアント「変更されていません。」わたし「大変お手数ですが、キャッシュを削除してからご確認いただけますでしょうか。」クライアント「キャッシュの削除ってなんですか?」わたし「PCだとCtrl + Shift + R、スマホだと各機種によって異なるため、「[機種名] キャッシュ削除」で検索していただけますか。」クライアント「まだ変わっていません。」わたし「どのような画面が表示されていますか?」クライアント「(キャプチャー添付)」わたし「またキャッシュが残ってますね。。大変お手数ですが、もう一度さきほどのキャッシュの削除をお試しいただけますか?」 うわあああああああああああ キャッ
次のページ
このページを最初にブックマークしてみませんか?
『HPcode(えいちぴーこーど) | はにわまんの技術ブログ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く