Yearly Archives: 2019

New!

Node.js: firebase でサイトを公開する手順

Node.js がインストールされていれば、firebase で簡単に静的サイトを公開することができます。 今回は firebase で静的サイトを公開するまでの手順を説明したいと思います。 目次 firebase でサイトを公開する手順 まとめ firebase でサイトを公開する手順 上から順にターミナルでコマンドを実行していくとサイトが公開できます。 コマンドツールのインストール ログイン 初期化 Hosting: Configure and deploy Firebase Hosting を選択する。 ローカルサーバを起動 公開する サイトを開く まとめ firebase login コマンドを実行すると、ブラウザでのログインとなり、その後 firebase init をターミナルで実行する必要があります。 複数の Google アカウントで firebase を利用している場合、ログインセッションが残っている設定でデプロイされるので、注意が必要です。 そのような場合は、いったんログアウトし、デプロイを実行したい Google アカウントでログインして下さい。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
Update!

WordPress: 前の投稿・次の投稿リンクの PHP コード

WordPress でカスタムテーマを作成する際、single.php 等での個別記事の表示時に次の投稿へリンクしたいことがあると思います。 今回は WordPress の 「前の投稿」「次の投稿」を表示する PHP コードをメモしておきます。 目次 前の投稿・次の投稿リンクの PHP コード まとめ 前の投稿・次の投稿リンクの PHP コード 1番目の引数はリンク先の URL、2番目の引数は表示する文字列、3番目の引数はカテゴリー指定、4番目の引数は除外するカテゴリーとなります。 この例では、カテゴリー ID=2 の記事を除外し、「前の投稿」「次の投稿」リンクを表示します。 まとめ 前の投稿・次の投稿のテキスト部分を HTML タグで表記すれば、スタイルでボタン等のグラフィックに変更することも可能です。 その際、クォーテーション、ダブルクォーテーションに注意して記述する必要があります。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
Update!

Tips: iPad で Smart Folio 入力時の先頭大文字変換を解除する

iPad OS & Smart Folio ではデフォルト設定の場合、メモ帳等で半角英語入力した場合、強制的に先頭が大文字で始まってしまいます。 先頭大文字、スペルチェック等、メモの場合は自動でやってくれると助かることも多いのですが、ソースコード等をメモする場合、かなりのストレスを抱えることになりかねません。 今回は、「強制的に先頭が大文字になる設定」を解除する方法をメモしておきます。 目次 iPad で Smart Folio 入力時の先頭大文字変換を解除する まとめ iPad で Smart Folio 入力時の先頭大文字変換を解除する 設定App -> 一般 -> キーボード -> Caps Lockの使用 OFF 設定App -> 一般 -> キーボード -> 自動大文字入力 OFF 以上で Smart Folio の Caps Lock キーで 日本語/英語 の切り替えとなり、自動大文字入力が OFF になりました。 まとめ iPad OS は iOS よりも PC に近づきましたが、まだまだ開発用途としては不十分です。 おそらく iOS との差別化が今後拡大していくと思いますので、期待したいと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
Update!

Tips: Gmail の受信トレイのメールをすべて既読にする

Gmail で他のアカウントのメールボックスを読み込んだ際、受信トレイにはすべて未読の状態でメールが取り込まれます。 100 件程度なら手動でなんとかなりますが、1000 件ともなると、とんでもないコストを裂いてしまう事になります。 今回はそのような時のために Gmail の受信トレイを「すべて既読にする」方法を説明したいと思います。 目次 Gmail の受信トレイのメールをすべて既読にする まとめ Gmail の受信トレイのメールをすべて既読にする すべて既読にしたいメールボックスを開きます。 件名ヘッダーの左端にある「チェックボックス」をクリックし、スレッドすべてをチェックをします。 チェック後に出てくる「受信トレイのスレッド n 件をすべて選択」クリックで全件選択されます。 全件選択されている状態で「既読にする」アイコンをクリックすれば、受信トレイ内すべてのメールが既読となります。 まとめ Gmail で pop アカウントのメール受信が出来ることを最近知りました。 Gmail の UI は良く出来ているので、素直に UI に従えば全件既読は当たり前のように完了できますが、自身のケースでは調査に少々時間を取られてしまったため、メモしておきました。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

SCSS: Bootstrap4 ボタンスタイルのテンプレート

Bootstrap でよく利用するオブジェクトの一つがボタンだと思います。 Bootstrap ボタンには通常時と hover 時の色が細かく指定されていますが、今回は hover 時の色変更を opacity での透明度で表現し、色変えを行いやすいサンプルコードをメモしておきます。 目次 Bootstrap4 ボタンスタイルのテンプレート まとめ Bootstrap4 ボタンスタイルのテンプレート 各色を変数化し、また、a タグで href がない場合でも、ボタンとして表示されるようにコードを変更しています。(※各ボタンのカラーは Bootstrap のデフォルトカラーを記述しています) bs-button.scss variables.scss まとめ Bootstrap のボタンの色を変更するだけでも Web 全体の雰囲気が変わってきます。 最初に色を決めてしまえば後々悩む心配はなくなるので、多少イニシャルコストをかけても色スタイルは工夫するよう心がけましょう。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

CSS3: サイドメニューをボトムメニューに切り替えるサンプル

PC サイトのサイドメニューをモバイルで表示すると、画面が横長から縦長になるため、サイドメニューの領域によりメインコンテンツのエリアが狭くなってしまいます。 画面上部のグローバルメニューは、ハンバーガーメニューへ変更するパターンが多いですが、サイドメニューの場合はどうするか悩みどころだと思います。 今回は、サイドメニューをモバイルではボトムメニューへメディアクエリで切り替えるサンプルをメモしておきたいと思います。 目次 サイドメニューをボトムメニューに切り替えるサンプル まとめ サイドメニューをボトムメニューに切り替えるサンプル display: flex を使用し、メディアクエリで 768px 以下の場合はボトムメニューへ変更するサンプルとなります。 HTML CSS まとめ ボトムナビゲーションにする場合、メニュー項目はユーザビリティを確保するため、最大6項目が限界かと思います。 アップデート時にメニュー項目が増える場合は、プライオリティの低い項目をまとめるための項目を新設し、ネストすることで解決しましょう。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

CSS3: 使用頻度の高い擬似クラス一覧

個人的によく使う CSS3 擬似クラスの一覧を作成しました。 スタイルコーディング時にご参考にしてください。 目次 使用頻度の高い擬似クラス一覧 まとめ 使用頻度の高い擬似クラス一覧 記述例 説明 div[class] “class” 属性を持つ div 要素 div[class=”xxx”] “class” 属性の値が “xxx” である div 要素 div[class~=”xxx”] “class” 属性が空白区切りの値をとり、その値の1つが “xxx” である div 要素 div[class^=”xxx”] “class” 属性の値が “xxx” から始まる div 要素 div[class$=”xxx”] “class” 属性の値が “xxx” で終わる div 要素 div[class*=”xxx”] “class” 属性の値に “xxx” という文字列を含む div 要素 div[class|=”en”] “class” 属性の値がハイフン区切りの値をとり、その値が “en” から始まる div 要素 div:nth-child(n) n 番目の子である div 要素 div:nth-last-child(n) 後ろから数えて n 番目の子である div 要素 div:nth-of-type(n) 同じ型をもつ要素のうち n 番目にある div 要素 div:nth-last-of-type(n) 同じ型をもつ要素のうち後ろから数えて n 番目にある div 要素 div:first-child 最初の子である div 要素 div:last-child 最後の子である div 要素 div:first-of-type 同じ型をもつ要素のうち最初の div 要素 div:last-of-type 同じ型をもつ要素のうち最後の div 要素 div:only-child 唯一の子である div 要素 div:only-of-type 同じ型をもつ要素が他にない唯一の div 要素 div:empty テキストノードを含め子を持たない div 要素 a:linka:visited ハイパーリンクのアンカーである a 要素のうち、未訪問 (:link) であるもの、訪問済 (:visited) であるもの a:activea:hovera:focus 特定のユーザーアクション状態にある a 要素 div:target URI が参照したターゲットになる div 要素 div:lang(ja) 言語情報 “ja” を持つ div 要素 elm:enabledelm:disabled elm(UI 要素)のうち、有効 (:enabled) であるもの、無効 (:disabled) であるもの elm:checked elm(チェックボックスやラジオボタンなど)のうち、チェックされた (:checked) もの div::first-line div 要素の最初の整形済行 div::first-letter div 要素の先頭文字 div::before div 要素の内容の前にある generated content div::after div 要素の内容の後にある generated content div:not(sel) 単体セレクタ sel にマッチしない div 要素 div elm div 要素の子孫である elm 要素 div > elm div 要素の子である elm 要素 div + elm div 要素の直後に現れる elm 要素 div ~ elm div 要素のあとに現れる elm 要素 まとめ 長く CSS を触っていないと、解決方法は思いついても、肝心の記述方法を忘れていることが多々あります。 特に、擬似クラスは :before,:after や nth-child は思い出せても、正規表現を使った指定はなかなか思い出せません。… 続きを読む

CSS3: デフォルトのフォントスタイルを指定する

モダンブラウザであればフォントのことは特に気にしなくても、いい感じに出力されますが、レガシーブラウザの対応までを考慮すると、フォントの指定も重要となってきます。 今回は CSS でスタイルを定義する際、ベースとなるフォント指定をメモしておきます。 目次 デフォルトのフォントスタイルを指定する まとめ デフォルトのフォントスタイルを指定する body 自体にゴシック系のフォントをとりあえず指定し、.mincho と .gochic クラスを任意のテキストに指定すれば、明朝体とゴシック体を使い分けられると思います。 /*transform: rotate(.03deg);*/ のコメントを解除すると、古い PC の IE(9,10)で 文字の ディザを軽減する効果 があります。 ただし、position:fixed 等をしている場合は transform とコンフリクトを起こし、正しく表示されない(fixed が効かない)可能性があるので、注意が必要です。 まとめ 今回の指定の仕方が正解というわけではありませんが、日本語環境の場合、フォントの見え方でサイトの良し悪しが大きく左右されてしまうので、意識的にデフォルトフォントの指定をしておいて損はないと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

JavaScript: gulpfile.js の autoprefixer 設定を package.json へ変更する

突然上記のようなエラーが出たので、解決方法をメモしておきます。 目次 gulpfile.js の autoprefixer 設定を package.json へ変更する まとめ gulpfile.js の autoprefixer 設定を package.json へ変更する gulpfile.js にある以下のコードをコメントアウトし、package.json の最後尾へ記述します。 gulpfile.js package.json まとめ autoprefixer の設定を行なっている gulpfile.js があれば、上記の変更を行う必要があります。 sass コンパイルに gulp を利用している方にとって、autoprefixer は欠かせない存在だと思うので、しっかり対応しておいてください。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

WordPress: カスタム投稿のテンプレート

WordPress ではデフォルトで用意されている「投稿」以外に、オリジナルの投稿「カスタム投稿」を作成することができます。 今回は、WordPress でカスタム投稿を新規作成し、表示させるテンプレートをメモしておきます。 目次 カスタム投稿のテンプレート まとめ カスタム投稿のテンプレート 以下はカスタム投稿タイプ「お客様の声」追加する場合のサンプルコードとなります。 function.php template-[custompost-name].php まとめ WordPress にはカスタム投稿以外にも、カスタムタクソノミー(分類)を作成する機能があります。 次回は、カスタムタクソノミー作成のサンプルコードを説明したいと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。