ocean

Webの何でも屋。

ocean

Webの何でも屋。

マガジン

  • 技術系

    日々のお仕事中に調べたこと。 WebのフロントエンドやCMSが中心。

  • 徒然

  • 家事・育児

  • my standard

    個人的な定番商品

最近の記事

WordPressで投稿タイプとタームを含めたURLにしたいときの設定方法

例えばレシピ(recipe)というカスタム投稿タイプにジャンル(genre)というカスタムタクソノミーがあり、そのタームが和食(japanese)のすき焼き(sukiyaki)という投稿があるとします。 そのURLが、以下のようになるようなパーマリンク設定の方法です。 レシピ一覧:/recipe/ ジャンル別一覧(和食の場合):/recipe/japanese/ レシピ詳細:/recipe/japanese/sukiyaki/ 一般的な名称でいうなこちら /post_t

    • flexでgapを使うときのwidth指定

      <ul class="flex"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li></ul> @function flexWidth($gap: 20px, $columnCount: 3) { @return calc((100% / $columnCount) - ((($columnCount - 1) / $columnCount) *

      • 【2023年】ゴールデンハムスターをお迎えするために買ったもの

        知り合いからゴールデンハムスターを譲り受けることになったので、ちゃんと育てられるように色々調べて道具を揃えました。あくまで調べながら買ったものなので、実際に使ってみると合う・合わないはでてくると思います。不足しているもの・いらないものもあるかもしれませんが、ほぼネットの情報だけで判断したらこんな道具類になりました。 ※感想は後日もし覚えていたら追記します。 ルーミィ60 グランスペース クリアーまずはケージ。調べる前は金網タイプを想像していたのですが、金網タイプは「歯に悪影

        • 【俺史上最高】ホームベーカリーで作る食パンのレシピ

          今回ホームベーカリーで作った食パンが俺史上最高に美味しかったのでレシピを記録します。 生クリームいらずなので、普段そこそこ食パンを作っている人ならいつでも作れる材料のはず。 使用しているホームベーカリーはPanasonic SB-BH1000。大スプーン・小スプーンは付属しているピンク色の計量スプーンのことです。 材料強力粉:250g 牛乳:200ml 砂糖:大スプーン2.5杯(約21.25g) 塩:小スプーン1杯(約5g) 無塩バター:20g ドライイースト:小

        • WordPressで投稿タイプとタームを含めたURLにしたいときの設定方法

        • flexでgapを使うときのwidth指定

        • 【2023年】ゴールデンハムスターをお迎えするために買ったもの

        • 【俺史上最高】ホームベーカリーで作る食パンのレシピ

        マガジン

        • 技術系
          20本
        • 徒然
          5本
        • 家事・育児
          9本
        • my standard
          4本

        記事

          [Vue.js]selectにv-modelを使った際selectedで初期値を設定する方法

          例えば以下のような場面だとします。 ・PHPでCRUDアプリを作っている ・セレクトボックスの選択肢によってフォームに変化を加えたい(例えば「その他」を選択したら入力欄が出てくるような) ・選択肢はPHP側で管理している そんなアプリの編集画面では、セレクトボックスの選択は以下のような状態になると思います。 <select name="example" id="example" v-model="selected"> <option value="item 1">i

          [Vue.js]selectにv-modelを使った際selectedで初期値を設定する方法

          ニトリのカラーボックスでランドセルラックを作った

          小学生になった娘のために、学校の準備が一箇所でできるようにランドセルラックを準備しました。 実現したかったことこれまで、娘としては自分がやりやすいようにやりたいけれど、その環境がないので中々自分1人で準備することができない、という状況でした。ランドセルや体操服を置く場所がバラバラだったり、宿題をする机とランドセル置き場が遠かったり。 そういった状況だとどこに何を置いていたかも分からなくなるし、宿題をやった後の後片付けも大変になってしまいます。 そこで、どこにどんな収納が

          ニトリのカラーボックスでランドセルラックを作った

          貝印 ステンレスピーラー

          普段使いで気に入っているものを記録・紹介するシリーズ。第4回は貝印のステンレスピーラーです。 シリーズの過去記事はこちら。 いろんな調理器具が100均で揃えることができる今、一人暮らしや料理を始めたばかりだとつい手軽な金額のもので揃えてしまうということがあると思います。ボウルや計量カップ、食器なんかは十分使えるものが揃っていますよね。 包丁やフライパンといったメインで使うだと、なんとなくそれらは使い勝手や耐久性が良くないんじゃないか、と思ってホームセンター等で買うことが

          貝印 ステンレスピーラー

          gitでコミット間の差分をZIPで抽出するコマンド

          git archive ブランチ名 --format=zip -o zipファイル名.zip --prefix=data/ `git diff --name-only --diff-filter=d 変更前コミット番号 変更後コミット番号`

          gitでコミット間の差分をZIPで抽出するコマンド

          澤井珈琲 クイーンモカ/モカブレンド 2kg

          普段使いで気に入っているものを記録・紹介するシリーズ。第3回は澤井珈琲のコーヒー豆 クイーンモカ/モカブレンド 2kgセットです。 シリーズの過去記事はこちら。 第2回ではKIHARAのマグカップを紹介しました。このとても使い勝手のいいマグカップでほぼ毎日コーヒーを飲む生活をしていると、コーヒー豆のコストも気になってきます。 誰かにギフトとしてあげたい、記念日にちょっと良いコーヒーを飲みたい、というときには珈道庵のコーヒーを選ぶことが多いのですが、普段はもう少しコストを

          澤井珈琲 クイーンモカ/モカブレンド 2kg

          KIHARA 有田HOUEN/1st マグカップ

          普段使いで気に入っているものを記録・紹介するシリーズ。第2回は有田焼・波佐見焼の産地商社であるKIHARAの有田HOUEN/1st 小泉 誠 マグカップです。 シリーズの過去記事はこちら。 このマグカップの特徴は何と言ってもこの形です。背が高すぎずやや下に広がった台形のフォルムは、すばらしい安定感を与えてくれます。 仕事中、電子機器が並ぶデスク周りにおいて、コーヒーやお茶をこぼしてしまうのは何としても避けたいところ。その点、このマグカップは多少手が当たってしまっても倒れ

          KIHARA 有田HOUEN/1st マグカップ

          810s KITCHE

          普段使いで気に入っているものを記録・紹介するシリーズ。初回はムーンスターが展開しているブランド810s(エイトテンス)のKITCHE(キッチェ)です。 810sは”腹八分目”をキーワードに、プロユースで長年親しまれているシリーズをデイリーユースにできるようリプロダクトされたブランドです。洗練された機能とデザインでありながらも価格が6,000円程度と、非常にコストパフォーマンスに優れたブランドになっています。 KITCHEは食品業界や厨房で使われているKITCHENSTAR

          810s KITCHE

          カラーミーのテンプレートで日時の条件分岐で表示を変更する方法

          例えば「2021年4月1日10:00になったら特設ページへのリンクを表示したい」というようなことをしたいときに使います。 カラーミーのテンプレートはSmartyで作られているので、その機能を利用することで手軽に指定できます。 コード例<{assign var="targetDate" value="202104011000"}><{if $targetDate <= $smarty.now|date_format:"%Y%m%d%H%M"}><a href="/path/

          カラーミーのテンプレートで日時の条件分岐で表示を変更する方法

          日産セレナにカロッツェリアのディスプレイオーディオを取り付けるときの機材一式

          2020年購入の日産セレナ(C27)にカロッツェリアのディスプレイオーディオFH-8500DVSを取り付けました。取り付けに際してはオーディオ本体以外にも必要な機材があり、まとまった情報を見つけられなかったのでここに書きたいと思います。 ※私がセレナを購入した6月時点では日産純正のディスプレイオーディオがなかったのでカロッツエリアのものを購入したんですが、2020年10月現在はApple CarPlay / Android Autoに対応した純正ディスプレイオーディオを6万

          日産セレナにカロッツェリアのディスプレイオーディオを取り付けるときの機材一式

          2019年買って良かったもの

          年末なので今年買って良かったものをまとめてみました。 シロカ 電気圧力鍋 SP-4D151生活を激変させたものとしてコレは外せません。カレーや煮込み料理などを手放しで作れるようになる素敵調理家電です。 電気圧力鍋で作れる料理は普通の鍋や圧力鍋でも作れるものですが、火力の調整が不要、(材料さえ同じなら)いつでも同じクオリティの料理ができる、他の料理or家事を並行して進めることができる、という点がポイント高いです。 メーカーのこだわりは特になく、大容量・見た目シンプル・取り

          2019年買って良かったもの

          サイトの文字サイズを変更するボタンの作り方

          間違ったWebアクセシビリティとして名高い、文字サイズ変更ボタンの作り方です。ぜひ滅ぼしましょう。 完成形 HTML文字サイズ<button class="size-button" data-font="12">小</button><button class="size-button active" data-font="16">中</button><button class="size-button" data-font="20">大</button> 「小」を含める

          サイトの文字サイズを変更するボタンの作り方

          Web2.0っぽいボタンをCSSで作る

          10年前に流行っていた、光沢+グラデーションで装飾されたリッチなボタンを作るというお仕事がきたので、CSSで実現してみました。 完成形 HTML<a href="#" class="c-button"><span>最先端のボタンデザイン</span></a> 文字をspanタグで囲まなくてはいけなかったところに、技術的な敗北感を感じています。悔しい。 CSS(Sass).c-button { background : linear-gradient(#2476ff,

          Web2.0っぽいボタンをCSSで作る