WEB

  • Next.js × WordPressでリニューアル

    Next.js × WordPressでリニューアル

    ポートフォリオサイトをリニューアルしたいなとずっと思っていて、フロントエンドをNext.js、サーバーサイドをWordPressで構成する今時なサイト構築を行いたくて実装しました。 結構、苦労したのですが自己満足は満たさ […]

  • Javascriptでカウントダウンを作るsafariでは挙動が違う

    Javascriptでカウントダウンを作るsafariでは挙動が違う

    JavaScriptである時間になると公開されるように設定をしたい。 JSで設定する内容 ・公開したい時間 ・現在の時間 ・挙動を起こす分岐   現在の時間を取得 const hoge = new Date() […]

  • 三角形をランダムで描画する~Javascript~

    三角形をランダムで描画する~Javascript~

    Javascriptを使用して、背景に三角形を描画するscriptです。 今回の目的は背景に三角形を描画すること。 ただし、大きさ・向きはランダムであることが前提です。   サンプルHTML <div i […]

  • async awaitのサンプル例~webpack使用~

    async awaitのサンプル例~webpack使用~

    今までJavascriptのasync / awaitの使い方が不明瞭だったので勉強を兼ねてサンプルを作りました。 今回はオブジェクトが右側に移動し、その後文字が書き換わるように設定しました。   サンプルHT […]

  • WordPressの投稿詳細ページで同一カテゴリの投稿を関連記事として表示する

    WordPressの投稿詳細ページで同一カテゴリの投稿を関連記事として表示する

    今回実装したのはWordpressの投稿詳細ページ(singleページ)で、同一カテゴリの投稿を関連記事として表示させることでブログ内の回遊率向上を狙いました。 表示件数を絞る指定することができず、解決に多少時間がかかっ […]

  • Vue.jsで別のインスタンスのメソッドへデータを渡す方法

    Vue.jsで別のインスタンスのメソッドへデータを渡す方法

    Vue.jsで、ボタンをクリックしたときに、別のVueインスタンスのメソッドにデータを渡す実装を行った。 jsを使用することでリロードを発生させずに再描画することが目標   イメージした完成形 wordpres […]

  • アイキャッチ画像の画像パス取得方法

    アイキャッチ画像の画像パス取得方法

    WordPressにて下層ページのメイン画像を「アイキャッチ」「ページタイトル」「ページスラッグ」で構成したい 例)よくあるアイキャッチ取得方法 <?php if(has_post_thumbnail()): ?& […]

  • WPのアーカイブページのループ文~ WP Query ~

    WPのアーカイブページのループ文~ WP Query ~

    WordPressのWP_queryをアーカイブページで使った時の注意点 投稿一覧で最新の投稿と、それ以外で表示する形を変えたい ※具体的には、最初の投稿以外をwrapでくくりたい コーディング思案 loop文の最中にw […]

  • デザインのリニューアル

    デザインのリニューアル

    ホームページデザインをリニューアルしました。 大きくデザイン弄りましたが、基本はブログ主体です。 ユーザーのニーズに基づいた制作物 アンテナの感度を保つ 今年の目標 以上の目標を意識しながら、クライアントの困りごとに寄り […]

  • Vue.jsを使ってTwitterウィジェットを埋め込みする

    Vue.jsを使ってTwitterウィジェットを埋め込みする

    投稿毎にTwitterウィジェットを埋め込む ある案件で、ブログ記事ごとに関係者のTwitterウィジェットを表示したいとのこと ただし、Twitterウィジェットを縦に並べるのは、野暮ったいので簡単にできるように思案し […]