2021-01-01から1年間の記事一覧

もう迷いたくない!isset,emptyなどの書き方

WordPressでカスタムフィールドの値を出力する際に、変数に代入させることがあります。 「値があれば代入」「値があれば出力」など色々書いていますが、理由もわからず出てくるエラーに対してあれこれ直しています。 デバックモードでは特にエラーを出してし…

CSS、Sassでの変数の書き方

Hugoブログを絶賛カスタム中です。 (テーマは「Clarity」を使っています) このテーマではSassが使われているのですが、変数を用いて色やwidthの数値を設定しています。 そしてなぜかSassの中でcssのカスタムプロパティを使っていました。 しかも私にとって…

Hugo - メニュー、各項目の表示

前回でロゴやファビコンの変更ができたので、次はメニューなどの表示面を整えていきます。 理想のブログの構成 ただ記事が探しやすく見られればよいので簡単な構成にしました。 TOP ┗カテゴリー ┗記事 ┗タグ ┗記事 About(筆者紹介のページ)などヘッダーに…

gulpのアップロードタスクの書き方について

gulpを使うようになって設定するものの1つとして「ファイルアップロード」があります。 具体的には「vinyl-ftp」というプラグインを使っています。 vinyl-ftp - npm 最新の更新も4年前(2021年10月現在)と、更新が滞っているプラグインですが、FTPクライア…

MAMPのエラーのはなし

MySQLのアップグレードをしようとしたときに起こったエラー MAMPを起動させると、MySQLのアップグレードを促してきたので試したところ、エラーになってしまいました。 アップグレード前のMySQLのバージョンは5.7.30です。 (アップグレードしてなるはずだっ…

Hugo - ファビコン、ロゴ、サイト名の変更

はてなブログからHugoを使ったブログの移行が全然進んでいないので、また少しずつ進めようと思います。 Hugoのテーマによって仕様が異なると思うので自分メモです。 もとのテーマ:clarity Clarity | Hugo Themes ☆今回の作業をやった後に見つけた記事です。…

SVG画像の使い方

SVG

使うことが増えてきたSVG画像。 曖昧だった部分をまとめました。 SVGとは SVG(Scalable Vector Graphics)です。 拡大縮小できるベクター画像。 SVGがベクトル形式なのに対し、JPEG、PNG、GIFはビットマップ形式でラスター画像です。 Illustratorに出てくる…

SVGで図形を書いてみよう

練習にイチからSVGを書いてみようと思いました。 use を使った物を作りたいので、同じ図形が複数出てくるもの...五輪! 今にぴったりなので作ってみることにしました。 著作権の問題でNGでした もしやと思って調べたところ、 オリンピック・パラリンピックに…

PHPでTODOリストを作ってみた(2) - TODOの追加

TODOリストを作ってみています。 ピンポイントの「TODOリストの作り方」記事は見ずに、できるかぎり調べて書いています。 前回はDBのテーブルの表示までできました。 次は「登録」ボタンを押してPOST送信したデータをテーブルに追加します。 4. SQL文でレコ…

PHPでTODOリストを作ってみた(1) - テーブルの表示

TODOリストを作ってみます。 作り方を調べたら真似をして終わりになってしまうので、調べることは最低限にして試行錯誤していこうと思います。 ☆以下は必要に応じて追記していきます。 環境 MAMP(ローカル環境) PHP(7.4.9) MySQL(5.7.30) 仕様 普段TOD…

PHPで新しく知ったこと - try/catch、threw句、ルーティングなど

Hugoサイトのカスタマイズと同時進行でphpの勉強をしたいと思っています。 いよいよ手元にあるLaravelの本でサイトを作ろう(原点回帰)!としたところ、 それよりは基礎です!というお話を頂きました。 ごもっともです。 基本的な知識や一般的な関数・処理…

ドメインとサーバーを契約しました

やっと、やっと申し込みました。 お金がかかるからという単純な理由でこれまで渋っていましたが、何とか安く済ませられそうなので一念発起してドメインとサーバーを契約しました(大げさ)。 Xserverでキャンペーンがありました。 Xserverのキャンペーン キ…

Hugoサイトでcssを上書きする(Theme使用)

ようやくNetlifyでHugoサイトを公開しましたが、元のThemeのままです。 少しずつカスタマイズしていこうと思います。 ☆使っているテーマは「hugo-clarity」です。 sassファイルを確認してみる デザインを変えたいのでcssを調べます。 cssファイルは見当たら…

Hugoでサイトを作り直します

すっかりご無沙汰になってしまったHugoのサイト作り、テーマを新しいものにして作り直そうと思います。 今回はこちらのテーマにしました。 去年の記事を見ながらhttp://localhost:1313/で表示できるところまで進めました。 前回作ったサイトへのアクセスもht…

gulp導入の覚え書き(後編)- gulpとnpmの使い方

gulpを利用した当初は、なすがままに設定していただきました。 コマンドもほぼはじめましてだったので、黒い画面に呪文...と、何が起きているのか理解に苦しみました。 現在理解している範囲でnpm、gulpまわりで集めた情報をまとめます。 大まかな流れ 1. ho…

gulp導入の覚え書き(前編)- Node.jsのインストールまで

gulpを使おうとなった時に以前行った手順は記憶の彼方なので、これまでのメモをまとめました。 (特にNode.jsまでは一度入れてしまえば中々入れ直すこともないと思うので忘れてしまいます) ☆長くなるので前・後編に分けました。後編はこちら。 大まかな流れ…

レスポンシブな画像の表示を考える

投稿するコンテンツの場合、アップする画像サイズを統一させられないのが常です。 いろいろな縦横比の画像を画面いっぱいに表示させる方法を模索しています。 wordpressなどでは、リサイズさせた画像を表示させたりするので、あまり頻繁ではありませんが、た…

読み込む画像のCLSと遅延読み込みについて

SEO

Googleの、Search Consoleの「ウェブに関する主な指標」で不良のURLがありました。 引っかかっていたのは「CLS に関する問題: 0.25 超(モバイル)」です。 他の指標としてはLCP(Largest Contentful Paint: コンテンツの初回ペイント)やFID(First Input D…