Archives - Page 1

  • 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ページ)で、同一カテゴリの投稿を関連記事として表示させることでブログ内の回遊率向上を狙いました。 表示件数を絞る指定することができず、解決に多少時間がかかっ […]

  • letter-spacingを使用した文字のセンター寄せ・右詰め

    letter-spacingを使用した文字のセンター寄せ・右詰め

    letter-spacingを使用する時の小技 デザインをする上で、使用するfontによっては、letter-spacingを多めに使用したい場合がある。 その文字を右詰めにする場合、letter-spacingの特性上 […]

  • 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 […]