n.tsukuda/福岡を拠点に活動するWEBデザイナー

Webデザイン&コーディングを主とし、たまにWEB広告運用も行っています。 http…

n.tsukuda/福岡を拠点に活動するWEBデザイナー

Webデザイン&コーディングを主とし、たまにWEB広告運用も行っています。 https://www.youtube.com/channel/UCAeW57OtQ9cA8eXnjF356Mg 好きな物 ◆革(レザー) ◆珈琲 ◆ガジェット ◆車 ◆プログラミング

マガジン

最近の記事

【備忘録】Googleスプレッドシートからメールを一括送信する方法

ステップ 1: Google スプレッドシートの準備 スプレッドシートに「メールアドレス」「パスワード」などを記載したシートを用意。 ※筆者は既存の名簿を利用しました。 ステップ 2: Google Apps Script の作成 スプレッドシートで「拡張機能」メニューを開き、「Apps Script」を選択します。 新しいスクリプトファイルが開かれるので、以下のサンプルコードをコピー&ペーストします。 コードを適宜編集し、自分のニーズに合わせてカスタマイズします

    • 【備忘録】検索結果(モバイル・PC)にサイト名を表示する機能を、構造化データで指定可能する方法(WordPress編)

      検索結果にWebサイト名を表示させる構造化データの記入方法★シンプルな構造化データの記入方法 1.テーマのfunctions.phpファイルを使う方法 この方法では、WordPressテーマのfunctions.phpファイルにカスタムコードを追加して、サイト全体に構造化データを出力します。 WordPressのダッシュボードから「外観」>「テーマエディタ」を選択。 アクティブなテーマのfunctions.phpファイルを選択。 ファイルの末尾に、次のコードを追加。

      • 【備忘録】WordPressでビジュアルエディターの表示崩れ(ビジュアル⇔テキストの行き来で)の原因を解決したい

        WordPressでプラグイン「Classic Editor(クラシックエディタ)」を使用した記事の編集で、「ビジュアル」と「テキスト」を切り替えることで、<タグ>が自動で削除される事象を何とかしたいんです。 ググってみると、WordPressには「tiny_mce_before_init」フィルターという仕組みがあるよう。 ここでTinyMCE(WordPressで使用されるテキストエディタ)の設定を渡してあげることでタグが削除されるのを回避できそうです。 手順:tin

        • 【備忘録】Macbookでのクラムシェルモードができない時に見る参考記事

          クラムシェルモードとは?クラムシェルモードとは、MacBook(proやAir)を閉じた状態で外部のモニターなどに接続し、デスクトップPCのように使用する方法のことです。 クラムシェルモードに必要なもの本体(MacBook(proやAir)) 外部モニター 電源(外部モニターでケーブル1本で映像入力と電源供給ができる場合は不要) キーボード・マウス・トラックパッド ケーブル 外部モニターに接続するための電源アダプタ(純正OK)や、ケーブル(純正OK)などをMacB

        【備忘録】Googleスプレッドシートからメールを一括送信する方法

        マガジン

        • n.tsukudaのポートフォリオ
          4本
        • 参考記事
          2本

        記事

          【備忘録】WordPressテーマ【Habakiri】を使用するときの必須CSS

          Habakiri はBootstrap ベースのシンプルな WordPress テーマ。 レスポンシブで使い勝手がいいので、新規でサイトを作るときは良く利用させてもらってます。 ただ、余白が狭かったり、見出しのサイズが多少大きすぎたりして、好みと合わなかったりする事があるため、最初の段階でサイト全体を「CSS」で微調整しています。 ※特に「フォント」周りは、必須。 HabakiriBootstrap ベースのシンプルな WordPress テーマ。レスポンシブ、多くのカスタ

          【備忘録】WordPressテーマ【Habakiri】を使用するときの必須CSS

          【備忘録】シフト作成で楽をする為の、スプレッドシート集計とGoogleカレンダーに反映する方法。

          ここでは、スプレッドシートを使用した、アルバイトの「シフト作成」で楽をする為だけに作成したものを忘れないために記載しております。 スプレッドシートで表を作る1.「開始日」「終了日」の自動反映 「開始日」に日付を入力する事で「終了日」を自動で反映させる為に、以下の関数を指定する。※ここでは【C3】に入力。 =EDATE(C2,1)-1 ※=EDATE(C2,1)-1 は、セル C2 に入力されている日付から 1 か月前の日付を返す。 2.「終了日」が自動反映されると同

          【備忘録】シフト作成で楽をする為の、スプレッドシート集計とGoogleカレンダーに反映する方法。

          【ポートフォリオ】ショート動画をサービスに併せて複数作成(Instagramストーリーズ、TikTok、YouTubeShort)

          Instagramストーリーズ、TikTok、YouTubeShort用に、短いショート動画を複数作成しました。

          【ポートフォリオ】ショート動画をサービスに併せて複数作成(Instagramストーリーズ、TikTok、YouTubeShort)

          【ポートフォリオ】PMD医学部専門予備校「夏期講習」の動画広告作成

          予備校の動画広告のために、作成致しました。 制作過程人数:1人/日数:2日

          【ポートフォリオ】PMD医学部専門予備校「夏期講習」の動画広告作成

          【ポートフォリオ】CES医師国試予備校のWEBサイト作成

          医師国家試験(進級試験対策・卒業試験対策・国家試験対策)の予備校サイトです。 https://ishi-yobikou.com/ 制作状況製作人数:1人/日数:20日

          【ポートフォリオ】CES医師国試予備校のWEBサイト作成

          【ポートフォリオ】PMD医学部専門予備校のWEBサイト作成

          医学部受験予備校のサイトです。こちらは元々のサイトが煩雑で、すべてのページを調べ上げ、新たにリニューアルをしました。 https://www.pamda.info/ 制作過程製作人数:1人/日数:1ヶ月

          【ポートフォリオ】PMD医学部専門予備校のWEBサイト作成

          CSSで要素の単位の違い【備忘録】

          CSS単位の指定【px】ピクセル。画素数 【%】親要素に対する割合 【vh】ビューポート(画面サイズ)の高さに対する割合。100vhは画面の高さと同じ(100%)を表す 【vw】ビューポートの幅に対する割合 【vmin】画面の高さか幅の小さい方に対する割合 【vmax】画面の高さか幅の大きい方に対する割合 【注意点】100(vw・vh)と100%の違い(vw・vh)は(画面サイズ)に対しての割合。それに対して100%は親要素に対する割合のため注意が必要。 例題.backt

          CSSで要素の単位の違い【備忘録】

          【WordPress】投稿ページや固定ページの各記事ごとに個別のCSSやJavaScriptの入力エリアを設ける方法「備忘録」

          WordPressの「functions.php」を触って、入力エリアを設ける。※「functions.php」は極力触りたくないが、プラグインを導入をなるべく行いたくないので。 CSS//記事内CSS入力エリアadd_action( 'admin_menu', 'custom_css_hooks' );add_action( 'save_post', 'save_custom_css' );add_action( 'wp_head','insert_custom_css'

          【WordPress】投稿ページや固定ページの各記事ごとに個別のCSSやJavaScriptの入力エリアを設ける方法「備忘録」

          「楽天モバイル」の気になる通信状況<福岡・博多近辺>

          もう1年間の無料キャンペーンは終わってしまいましたが、1GBまで“0円”という事で、気になっている方もいらっしゃるのではないでしょうか? 筆者の住んでいるところは、福岡県博多です。博多では意外と繋がるところも多く自宅に居る中では快適に使えています。 ❏平日15時台 これだけ速度が出れば、動画もカクつくことなく見ることが出来ており、在宅ワークの際のネット回線も、楽天モバイル回線で不自由なく使えています。 ※私はメイン回線(通常SIM)を「UQモバイル」、サブ回線(eSI

          「楽天モバイル」の気になる通信状況<福岡・博多近辺>

          【三つ折り財布】買ってよかったコンパクト財布

          キャッシュレス化が進んで、新たに購入した財布。やはり小さいのはありがたい。 特にバッグなども持ち歩かないし、暖かくなれば薄着でポケットだけしか使わなくなるから最高の買い物でした。 小銭入れも付いています。さらに小銭入れが外れるのが最高!

          【三つ折り財布】買ってよかったコンパクト財布

          【備忘録】“箇条書き”をCSSで整える(デザイン)方法

          “箇条書き(ul)”を作成する必要があったので、今後のWEBサイト作成の為の参考素材 完成図 html<ul class="list"> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li></ul> css/* list */ul.list { margin: 2.5em; padding: 0.5em; list-style-type: none;}ul.list li { position: relative

          【備忘録】“箇条書き”をCSSで整える(デザイン)方法

          【備忘録】レスポンシブ対応のため、tableを横スクロールで表示する方法

          ●レスポンシブ対応とtableのスクロール機能の組み合わせ 利点①横スクロールがある表(table)はレスポンシブ対応強制的に画面内に表示される事がなくなるのでスマートフォンでも見やすくなる。 ②パソコンやタブレットでの表示の場合は、表の全体がすぐに見られるレスポンシブ対応のほうが横スクロールよりも見やすい印象。 <table width="100%"> 下記にてブラウザの幅に応じてレスポンシブにするか横スクロールさせるかを組み合わせてみます。 CSS@media

          【備忘録】レスポンシブ対応のため、tableを横スクロールで表示する方法