kusamura_monoのブックマーク (30)

  • CSSだけでスライドするタブ切り替えを考えてみた

    <div class="tab-wrap"> <input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked="checked" /><label class="tab-label" for="TAB-01">ボタン1</label> <div class="tab-content"> <p>コンテンツ1</p> </div> <input id="TAB-02" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-02">ボタン2</label> <div class="tab-content"> <p>コンテンツ2</p> </div> <input id="TAB-03" type="radio" nam

    CSSだけでスライドするタブ切り替えを考えてみた
  • Gutenbergでサイドバーに選択式のCSSクラス設定を追加する

    完成したコード「実現したいこと」を踏まえた上で完成したコードがこちらです。 /*! * Copyright (c) 2020 kusamura * https://web.monogusa-note.com/ * Released under the GPL license. * see http://www.gnu.org/licenses/gpl-2.0.html * * 参考: https://www.webopixel.net/wordpress/1499.html */ //コンポーネントの読み込み const { Fragment } = wp.element; const { addFilter } = wp.hooks; const { PanelBody, SelectControl } = wp.components; const { InspectorControls

    Gutenbergでサイドバーに選択式のCSSクラス設定を追加する
  • 【電子書籍対応】Cocoon楽天商品リンクブックマークレット

    2022-10-14追記:当記事のコードではエラーが出るページがあります。Cocoon公式のブックマークレットが最新になっておりますので公式サイトのブックマークレットをご利用ください! Cocoonの楽天商品リンクショートコード作成用のブックマークレットが公式ページにて公開されているのですが、楽天Koboの電子書籍には未対応だったので対応版に改変して自分が使っている物を公開します。 ※以下、Cocoon公式ページで紹介されているブックマークレット=公式ブックマークレットとします。

    【電子書籍対応】Cocoon楽天商品リンクブックマークレット
  • ソースコードを丸ごとパクられてしまった時の対処の記録

    判明した経緯なにやら、一部の記事のアクセス数(Cocoonのアクセス集計)が異常に多い。 最初はこの記事がどこかで紹介でもしてもらったのだろうか?なんて思ってたけど、そんな様子もなく…どうもおかしい。 そこでサーバで提供されているアクセスログを確認しました。 リファラー(リンク元)の統計を確認していると …なんか見たことない知らないアドレスからのアクセスが上位にある。 怪しいアドレスにアクセスしてみたGoogleアナリティクスでも見たことないアドレスが2つあったのでアクセスしてみました。 コピーサイト1…ん? コピーサイト2んんん~~??見覚えあるなぁ… 当サイト見覚え…あるよなぁ~~~!? びっくり。いつの間にか複数のサイトでCSSを丸ごとコピーされていた事が判明。 アクセス数に異常があったのはコピーされたコードにアクセスをカウントするコードが含まれていたためです。 ブログのアクセスが増

    ソースコードを丸ごとパクられてしまった時の対処の記録
  • 【続・実録】突然Amazonアソシエイトが閉鎖された後の処遇

    最後の月間レポートの怪最後に届いた月間レポートは閉鎖アカウント用の文面になっていました。 閉鎖メールが届いた時は未払いの紹介料は支払われるとの内容だったので、そこはちゃんと払ってくれるんだな~と思っていたのですが 最後のメールには気になる一文があります。 最低金額を満たしていないと支払われない?このメールによると、「銀行を選択していた場合5,000円以上、Amazonギフト券を選択している場合500円以上が対象」と書いてあります。 通常、紹介料はこの条件で支払われるので当然といえば当然なのですが銀行を選択していた方で紹介料が最低額に届いていない場合結構衝撃な気が…。 閉鎖メール時の未払いは支払うとはなんだったのか…。 私は閉鎖される直前まで支払いが行われるほど紹介料が発生していなかったのですが、支払いはAmazonギフト券を選択していたようです(ログイン出来ないので確認出来ません) 最終的

    【続・実録】突然Amazonアソシエイトが閉鎖された後の処遇
  • CSSだけで使いやすく汎用性の高いタブ切り替え(複数設置対応)を実装する

    See the Pen タブ切り替え(汎用版) by 草村 (@kusamura_mono) on CodePen.38847 HTML<div class="tab-wrap"> <input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked="checked" /><label class="tab-label" for="TAB-01">ボタン 1</label> <div class="tab-content"> コンテンツ 1 </div> <input id="TAB-02" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-02">ボタン 2</label> <div class="tab-co

    CSSだけで使いやすく汎用性の高いタブ切り替え(複数設置対応)を実装する
  • 冬&梅雨に大活躍!三菱のマットタイプ布団乾燥機でカラッと快適

    ジメジメの季節が到来していますねー 実は今冬、人生初の布団乾燥機を購入しました。 昔は布団を床に敷いて寝ていたので敷布団は干せばよかったんですが、 脚付きマットレスのベッドに変えたのでマットレスは干せない…。 今まで布団乾燥機の必要性をあまり感じていなかったのですが、 こんな時のために必要なんだ!と気づきました。 まずは下調べ!布団乾燥機にはマットのあり・なしがあるらしい。 布団乾燥機のマットって何?マットって一体なによ?って感じなんですが、 シーツのような大きな袋が付属していて、これを敷布団と掛け布団の間に挟みます。 そしてこの袋(マット)の中に乾燥機の空気をボワーーっと入れて膨らみ マット全体からこの乾燥した空気を放出! 覆っている布団全体を乾燥させるっていう物です。 マットなしタイプはホースを布団の中につっこんで風を送り込むものが多いですね。 マット付きを選択!やっぱりマットをわざわ

    冬&梅雨に大活躍!三菱のマットタイプ布団乾燥機でカラッと快適
  • Cocoonのトップへ戻るボタンを目次に戻るボタンに変更する

    コピペするコードCocoon子テーマのjavascript.jsに以下のコードをコピペでOK ! //右下のトップへ戻るボタンを目次に戻るに変更する (function($){ var toc = $('.entry-content .toc'); if( toc.length ) { $('.go-to-top-button').off('click').click(function(){ $('body,html').animate({ scrollTop: toc.offset().top -10 }, 300); }).addClass('go-to-toc-button'); } })(jQuery);

    Cocoonのトップへ戻るボタンを目次に戻るボタンに変更する
  • Cocoonのモバイルフッターメニューをヘッダー固定にカスタマイズ【実装されました】

    /* モバイルフッターメニューをヘッダー固定にする ===========================================*/ .mobile-menu-buttons { min-height: 40px; top: 0; bottom: auto; padding-bottom: 0; align-items: stretch; transition: .3s; } .mobile-menu-buttons .menu-button .menu-button-in { height: 100%; display: flex; flex-direction: column; justify-content: center; } /* #homeをタイトル画像に */ .mobile-menu-buttons .home-menu-button>a { min-width:

    Cocoonのモバイルフッターメニューをヘッダー固定にカスタマイズ【実装されました】
  • ものぐさWEBノートの人気記事

    オタク。虚弱体質。が好き。 CSSだけでなんとかしたい。 時代に取り残されていく一方の しがないWebデザイナー

    ものぐさWEBノートの人気記事
  • CocoonのAmazonショートコードを楽天に一括で置換する

    Amazonアソシエイトが使えなくなったらまずAmazonからの閉鎖メールで「Amazonコンテンツ削除してね」って言われるので、Amazonのリンクを削除する必要があるようです。 ※そのまま掲載し続けても紹介料は発生しません PA-APIが利用できなくなるPA-APIAmazonショートコードで商品情報を取得するため利用されます。 今後Amazonショートコードを入力しても新しく商品情報が取得できなくなります。 Amazonショートコードはどうなる?Amazonショートコードはキャッシュが保持されているうちは表示されるようになっています。 Cocoon設定>API>キャッシュ設定の保存期間で取得してからの保存期間を確認できます。 この日数を過ぎてもバックアップキャッシュが消えるまでは表示されます。 使えなくなってから日数を変更しても意味ないかな?(多分)

    CocoonのAmazonショートコードを楽天に一括で置換する
  • 【実録】突然Amazonアソシエイトが閉鎖されてしまった理由

    こんにちは。ブログ管理人の草村です。 令和が始まり晴れやかに新元号を迎える目前4月下旬、突然AmazonアソシエイトのアソシエイトIDが閉鎖されました。 当ブログではほとんど利用していませんが別のレビューブログでは商品紹介の際、商品番号のみでパッと商品を表示出来る(※)ため重宝していました。 ※WordPressテーマCocoonの機能です。 売り上げも極わずかですがなかったわけではなく、規約違反もない(多分)、閉鎖の連絡も見当たらない(後に原因判明)。 とにかくアカウント復活が出来ないか?問い合わせました。 その経緯など超ざっくり紹介していこうと思います。

    【実録】突然Amazonアソシエイトが閉鎖されてしまった理由
  • 【長期レビュー】お手入れ楽すぎ!象印のポットみたいな加湿器はズボラにおすすめ

    という流れです。 現在の象印加湿器を買う前の物はそれぞれ2シーズンは使っていました。 象印以外の機種は使い続けると手入れが大変になっていきました…。 スケール(結晶)の手入れ大変すぎ問題スチームファン式(蒸発布)で発生。 蒸発布をかぶせてタンクに水入れるだけで楽!と思いきや スケール(水に含まれるミネラル等が結晶化したやつ)が蒸発布や加熱される部分にこびりついてガチガチに硬くなり全然取れない! 仕方なく布を交換しようにも固まってしまい脱着も大変 中のこびりついた結晶はこすってもとれないし削れない…(削ると体を痛めるのでNG) 2個めのスチームファン式も案の定同じ末路でした… 当にこまめに手入れが出来ないとスケールの掃除でくたびれてしまいます。 カビ発生したらどうにもならない問題次に使った気化式 スチーム式は手入れが難しい… 気化式ならスケールがスチーム式ほど固まったりしないので汚れてき

    【長期レビュー】お手入れ楽すぎ!象印のポットみたいな加湿器はズボラにおすすめ
  • グルテンフリーの米粉パンを通販してみた感想+おすすめ米粉ケーキ

    セット内容パン半斤(3枚)ジャパンハーフリトルジャパンプチ角パン 5種 田んぼパン黒糖パンくるみパンレーズンパン芋パンベーコンネギエピウィンナーパン合計10種の米粉パンのセットです。 消費期限は製造日から2週間後。うち(関西)の場合製造日の翌日には届きました。 銀色の包装で到着 冷凍された状態で送られてくるので、冷凍庫に余裕がないと厳しいかな?と不安に思っていましたがひとつひとつが小さめのパンなので結構コンパクトでした。 比較にiPhone6をとなりに置いてみました。 ひとつずつ包装されているので解凍も楽そう。(パンは一つの袋に3枚入っていました) 早速「プチ黒糖パン」を実!サイズはこんな感じ。当にプチサイズ! 温め方がわかりやすく書かれた用紙も一緒に届いたのでこの通り温めます。 まず袋の端をカットして 電子レンジで1分ほど加熱。ブーーン その後袋から取り出し オーブントースターで

    グルテンフリーの米粉パンを通販してみた感想+おすすめ米粉ケーキ
  • 大人も履ける可愛さ!ナチュラルデザインのリサ・ラーソン総柄スニーカー

    なかなかしっくりくるデザインのスニーカーが見つからず 長らく買い換えないまま過ごしていました。 普段遣いにも使える色味で少し個性のあるものを探していたのですが 私の好きなリサ・ラーソンデザインのスニーカーを購入したのでご紹介。 可愛いデザインはリサ・ラーソン! studio CLIPから販売されてるリサ・ラーソンの (マイキー)、ハリネズミ(イギー)、ライオンがプリントされたスニーカーです。 ナチュラルカラーでパッと見はとてもシンプルですが よく見たらリサ・ラーソン!という大人が履いても違和感なくとてもおしゃれで可愛らしいデザインです。 紐を好みの色味の物に変えればアクセントになり個性も出せそう。 素材・使用感など 布製で白っぽい色なので汚れが目立ちやすいだろう点は気になります。 ナチュラルカラーの宿命ですね… 少しの水滴は弾くようなコーティングですが雨の日は不安かなぁ… 値段のわりに

    大人も履ける可愛さ!ナチュラルデザインのリサ・ラーソン総柄スニーカー
  • ムームードメイン+さくらレンタルサーバで独自ドメインとリダイレクトを設定

    「サーバ情報の表示」>「サーバに関する情報」をクリック 「IPアドレス」の項目の上段の数字がIPアドレスなのでこれをメモ帳などにコピペしておく。 さくらのレンタルサーバ 独自ドメインを取得ムームードメインのトップページで「欲しいドメインを入力」して「検索する」と利用可能なドメインが表示されるのでカートに入れ申し込みします。(初めて利用する方は会員登録の手続きも) 「ドメイン設定」>「WHOIS公開」は「弊社の情報を代理公開する」に設定しておかないと、自分の住所や名が公開情報として掲載されてしまうので注意しましょう。 「ネームサーバ(DNS)」は「ムームーDNS」でOK(あとから変更も可能) ムームードメイン ムームードメイン側の設定ムームードメインのコントロールパネルにログイン ネームサーバをムームーDNSに設定サイドメニューの「ネームサーバ設定変更」>設定する独自ドメインの「ネームサー

    ムームードメイン+さくらレンタルサーバで独自ドメインとリダイレクトを設定
  • 拭けるから清潔!とぼけた顔が可愛い猫柄スリッパ

    トイレ用に購入しました。 底が厚めでクッション性があり履き心地が良いです。 汚れても簡単に拭ける耐水性のある素材でメンテナンスも楽そう。 デザインはホワイトとブラックの2種類あり、可愛すぎずシンプルなのでどこでも馴染む感じ。 ただ、男性や足のサイズが大きい方には少し窮屈かもと感じました。 2018-12-07 追記購入して使い始めてから2ヶ月以上経過しました。 ホワイトの方をトイレ用スリッパとして使用中です。 今の所、擦り切れたり汚れたりといった事はなく綺麗なまま使用出来ています。 底のクッション性もまだまだくたびれる事なく状態はいいです。 フワフワした布のスリッパは結構すぐヘタレて色あせてしまいがちなので頑丈な作りは嬉しいですね。 ブラックを替え用にするか別の場所で使うか迷っていましたが、 少なくとも数ヶ月で交換する様な必要はまったくなさそうです。 今はまだブラックは未使用ですが気分によ

    拭けるから清潔!とぼけた顔が可愛い猫柄スリッパ
  • ものぐさノート

    オタク。虚弱体質。が好き。 お家で快適に過ごす生活を模索中。 試した物をのんびりレビューします。 よかったらゆっくりしていってね。

    ものぐさノート
  • Cocoonで使える[ショートコード]のオプションと使い方まとめ

    Cocoonで使えるショートコード+オプション一覧と、使い方が掲載されている公式ページへのリンク集的なまとめです。 便利な機能がたくさんあって流し見でこんな機能あったのか~!なんて発見もあるかもしれません。

    Cocoonで使える[ショートコード]のオプションと使い方まとめ
  • さくらレンタルサーバで使えるモリサワWebフォント書式見本

    さくらのレンタルサーバではスタンダード以上のプランでモリサワの上質な日フォントをWebフォントとして無料で使用出来ます。 ただ、いかんせんフォントのサンプルが用意されていない※ためフォント選びをするには少し不便なのでさくらのレンタルサーバで使用出来るWebフォントを一覧にしました。

    さくらレンタルサーバで使えるモリサワWebフォント書式見本