Web開発日記

WordPressをさくらのレンタルサーバに構築する方法

今回はWordPressをさくらのレンタルサーバーに構築する方法を記載します。前提：さくらレンタルサーバーを契約していることそれでは始めます。さくらレンタルサーバーにWordPressインストールさくらのレンタルサーバにログインします。データベースを作成します。「データベスの設定」をクリック。「データベースの新規作成」をクリック。「データベース名」を入力し、「データベース文字コード」は「UTF-8」を選択し、「同意する」にチェックを入れ「データベースを

WordPressをローカル環境で構築する。「Local by Flywheel」の利用方法。

こんにちは、長野県松本市でWeb制作をやっています賀川といいます。 WordPressをやることになった CMSといえば私は普段Drupalを利用することが多いのですが、今回WordPressの案件をやることになりました。なんとなくWordPress案件は避けていたのですが、せっかくお声がけいただいたので『それならやってみようじゃないか！』と。頂いたからにはまずはWordPressについて知らないとな、と思い、ローカルでWordPress開発環境の構築から初めてみること

Nuxt.js + Netlifyで 404ページを作成する方法

現在Nuxt.js + contentful + Netlify でサイトを制作しています。今回のnoteでは、Netlifyで公開しているサイトの404ページ対応を行います。現状とやりたいこと特に何も設定しない状況だと、存在しないページにアクセスした場合下記のようにNetlifyのデフォルトのエラー画面が表示されてしまいます。これを、下記のように独自のエラー画面を表示するようにします。それでは始めます。 error.vueの作成404ページや403ページをそれ

Netlifyで公開しているサイトをSSL化する方法

現在Nuex.js + contentful + Netlify でサイトを制作しています。今回のnoteでは、Netlifyで公開しているサイトをSSL化する方法を記載します。 Netlifyにお名前.comドメインを設定する方法は下記です。それでは始めます。 Netlify管理画面での設定Netlifyにログインし、「Domain management」から「HTTPS」をクリックします。 HTTPSの「Verify DNS configuration」をクリッ

Nuxt.jsでGoogle Analyticsを利用する方法

現在Nuex.js + contentful + Netlify でサイトを制作しています。今回のnoteでは、Nuxt.jsで構築したサイトにGoogle Analyticsを導入する方法を記載します。 Google AnalyticsよりトラッキングID取得Google AnalyticsよりトラッキングIDを取得します。 https://analytics.google.com/ UA- から始まるトラックングIDが発行されますので、コピーしておいてください。

お名前.comで取得したドメインを、Netlify に設定する方法

Nuex.js + contentful + Netlify でサイトを制作しているのですが、お名前.comで取得したドメインの設定方法がわからなかったので調査メモです。前提・Netlifyでサイト公開済み・お名前.comでドメイン取得済みそれでは始めます。 Netlifyでの設定まずはNetlifyでの設定を行います。Netlifyにログインしてください。次に、ドメインを関連付けるサイトを選択します。対象のサイトをクリックします。「Domain set

【Nuxt.js + contentful】a hrefでエラーが出た。→ 解決した。

どんな状態でエラーが出たか1. ContentfulでURLフィールドを作成し、URLを記入した 2. Nuxt.jsのvueに下記のようにリンクを書いた <a href="{{post.fields.url}}">{{post.fields.url}}</a> 3. すると、下記のようなエラーが表示された。 Errors compiling template: href="{{post.fields.url}}": Interpolation inside att

DockerをMacにインストールする方法

DockerをMacにインストールする方法を記載します。 Dockerとは？Dockerとは、サイトやアプリを開発するときの仮想環境を作る仕組みで、簡単に開発環境が作成できます。とても便利です。詳しくは下記あたりを見ていただければと。 Docker Desktop for Macをインストール下記よりDocker Desktop for Macをインストールします。 ※ここからはログインしていることが必須になりますので、ログインしてから対応してください。アカウントお

【css】画像の横幅をレスポンシブに対応する方法

結果として少しの修正で対応できたのですが、ちょっとハマってしまった箇所なのでメモ。フロントエンドの対応していると、パソコンから見ると問題ないのですが、スマートフォンで見ると画像が横幅より飛び出してしまっている場合があります。問題例えば以下の画面ですが本来であればヘッダーに合わせて下記の赤枠内に収めたいのですが、画像がはみ出してしまっています。これは下記の青枠の画像がレスポンシブ対応できていないからなのです。対応策対応としては、対象のimgファイルにcssを

2019年8月の記事一覧