Archives - Page 1

• Nextjsを共有サーバーにアップする書き出し方（SSG）

  

  今日の志 nextjsをフロントエンド、WordPressをヘッダレスCMSとして構築 一般的な共有サーバーへアップロード できごと Nextjsの構成 ブログの基本機能実装 個別ページの作成 componentsの作成 […]

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

  

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

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

  

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

• レスポンシブのリボン見出し

  

  デザインデータの見出しを見たときに、ページのサイズによって変動するリボン型見出しだったので、どうにかしてレスポンシブにしたいと試行錯誤してできたので、手順を公開。   完成品イメージ 要素の書き出し 背景パター […]

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

  

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

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

  

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

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

  

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

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

  

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

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

  

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

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

  

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