ブロックエディタでのデザイン作業から本番環境への挑戦
こんにちは、こんばんは。
みりんと申します。
本日は自分で作成したホームページを初めて本番環境まで移行しました！！
リンクを貼ったときの画像の設定や記事の入力等まだ途中ですが、とりあえず初めてのデザインは完了したので…笑
毎日少しずつでも進めていこうと思います。
上記のサイトはWordPressのブロックエディタを使用して作成したのですが、ファイルの本番環境への移行に少々手間取ったので覚書を残しておきます。
About
Name：みりん＠WEB制作受付中
デイトラというサイトでWEB制作コース受講中！
プログラミング未経験から学習を開始。
０→１達成のためにココナラでお仕事の募集を始めました！
- ローカル環境と本番環境の違い
- ローカル環境と本番環境へのWordPressのインストール
- All in One WP Migrationを使用したデータ移行
ローカル環境と本番環境の違い
まず、ローカル環境とは、インターネット上には公開されない仮想環境のこと。
デイトラの教材ではvsCodeの拡張機能LiveServerやMAMP、localで構築しているかと思います。
次に本番環境とは、インターネット上に公開されており、誰からでもアクセス可能な状況のことです。
普段皆さんがスマホ等から見ているものほぼ全てこちらに当たります。
では、違いは何でしょうか。大きく３つに分けました。
１．公開範囲
先述したとおり、ローカル環境では自分以外は見られないのに対し、本番環境ではインターネットに接続できるすべての人が見られる環境になります。
２．ファイルの管理場所
ローカル環境ではファイルは自身のパソコン上にあります。そのため直接編集することが可能です。
逆に本番環境ではFTPソフト等を使用して、自分のPC上からレンタルサーバー等にデータを移す事で、他の人がインターネット経由でそのデータにアクセスすることが可能になります。
３．コストとインターネット環境
ローカル環境では先述したように、データが自分のPC上にあるため管理費用がかかりません。
逆に本番環境では、データはレンタルサーバーを借りる必要があります。また、他の人がそのデータにアクセス出来るように、どのレンタルサーバーのどこにあるかを明記する住所（ドメイン）も借りる必要があります。
このドメインとレンタルサーバーの契約のために毎月費用がかかります。
WordPressのインストール
WordPressははてなブログのようなブログ公開サイトではなく、WEB制作をサポートするための道具です。
そのため、ローカル環境を準備して、そこにWordPressという道具を入れて制作をする流れになります。
インストール自体はあまりむずかしくありませんが、もしブロックエディタを使用して制作したい場合はlocalというツールがインストールや操作がしやすかったのでおすすめします！
ではローカル環境でWordPressのブロックエディタでデザインが完了した後、本番環境のWordPressへデザイン等のデータを一式を移行します！
移行の仕方は次のセクションで説明します。
ここで注意していただきたいのが、本番環境にもWordPressをインストールします。
私はXserverにてサーバー契約とドメイン取得両方を済ませたので、Xserverを使用した本番環境へのWordPressのインストール方法は以下のとおりです。
1．Xserverのレンタルサーバーメニューにログインする。
2．メニューのWordPress＞WordPress簡単インストールをクリック
3．WordPressインストールというタグがあるのでそちらをクリック
4．サイトURL（取得したドメインのURL）、ブログ名を入力。WordPressのユーザー名、パスワード、メールアドレスを入力し、インストールを押す。
5．インストール完了後、先程と同じWordPress＞WordPress簡単インストールの、インストール済みWordPress一覧のタブに管理画面URLがあるので、それをクリックすると本番画面のWordPress管理画面に移行できます。
私はこれが見つからなくてつまづきました…笑
All in One WP Migrationを使用したデータ移行
最後に、ローカルで作成したデザインや記事を本番環境（Xserverの管理画面から入るWordPress管理画面）に移行する方法です。
まずはローカル環境と本番環境の両方で１〜3の操作を行ってください。
1．ローカル環境と本番環境の両方でWordPressの管理画面を開いてください。
2．左のメニューからプラグイン（コンセントのマーク）をクリックし、新規プラグインを追加をクリックします。
3．そこの検索バーにAll in One WP Migrationと入力して、インストール＆有効化を押してください。
次に、ローカル環境の方の画面にて以下の操作を行ってください。
1．管理画面のホームに戻ると、左のバーに先ほどインストールしたAll in One WP Migrationのアイコンが増えていると思うので、そこをクリックしてください。
2．開いた画面にEXPORT SITE TOというボタンがあると思うので、それを押すとメニューが開くのでファイルをクリックしてください。
2．エクスポートが完了するとダウンロードのボタンが出るので、ダウンロードしてください。
※Macだとダウンロードの表示右上に出ますが、Macによってストップされている場合があるみたいなので保存というボタンを追加で押す必要があるようです！
最後に本番環境の方の画面にて以下の操作を行ってください。
1．All in One WP Migrationのアイコンにカーソルを合わせると、インポートというボタンが表示されるのでそちらをクリックしてください。
2．インポート元というボタンを押して、先ほどインストールしたデータを選択するか、Finderやファイル管理からドラッグ＆ドロップしてインポートしてください。
※間違えて保存データ消したかも！？という方や保存完了したと思ってローカル側のデータ変更しちゃった！！という方はAll in One WP Migrationのアイコンにカーソルを合わせると、バックアップというボタンがでるので、そこに行けば過去にエクスポートしたデータを広い直せます！！
以上でブロックエディタで作成したデザインの本番環境への移行は完了になります！
今までこういうものに触れてこなかった私にとってかなり難しく感じましたが、一つずつ進めていくしかないのでこれからも頑張りたいと思います。
デイトラWeb制作コース ノーコード開発を学んで１
こんにちは、こんばんは。
初めての方ははじめまして。
みりんです。
本日はwebサイトのノーコード開発の学習経過です。
といっても、ただ勉強をしてみた感想を書くだけなのですが…。
ひとまず、ノーコード開発を学習するに至った経緯からお話しさせてください。
私は1年ほど前にデイトラというサイトで
Web制作コースという商品を購入しました。
ざっくりと説明するとホームページやブログ等の
webサイト制作をするために必要なコーディングスキルを習得できるコースです。
購入を決めた理由は
- 価格が安かったこと
- 買い切り型だったこと
- 1年間のチャットサポートがあること
以上の３つになります。
プログラミング教材の中で10万円代でチャットサポートもついているのは
デイトラだけだったと思います。（自分が見た限りになりますが…）
結局１ヶ月程でだらけてしまってそのままになってしまっていたのですが、
最近ふと教材の詳細が気になって初級〜上級編、実務編と段階が分かれている教材を、
初級も終わってないくせに上級や実務の中身をのぞいてみました。
すると、コーディングだけではなくノーコード開発に関しても説明があり、
WordPressへの実装方法までの解説がありました。
元々副業のために学習していたので、
お手軽そうでいいな！と思い学習を再開しました笑
現在WordPressにおいてのノーコード開発の方法と実装方法まで学習が完了したので、
その感想についてお話しさせてください。
個人的には、
個人ブログを始めたいけどデザインがそのままだと味気ないとか、
作り方がわからない人向けに安価で受ける分には十分な機能だと感じました。
では、学習自体が不要になるかというとそうではなく、
エディタの更新に関してアンテナを立てていないといけなかったり、
どのようなテンプレートがあるのかの知識が必要だったりと
勉強をしなくても良くなる物ではないなと感じました。
それでも需要は０ではないと思うので、
コーディングの学習を続けつつ、並行して依頼を受けられたらいいなと思います。
ノーコード開発に関しての学習とデザインエディタの学習が完了次第、
ココナラというサイトにて出品しようと思います。
猫とコーヒーが織りなす日常
こんにちは、こんばんは。
初めての方ははじめまして。
みりんです。
皆さんはペットを飼ったことがありますか？
私は幼少期からずっと猫が飼いたくて仕方なかったのですが、
家に金魚がいた事もあり、ずっと飼えずにいました。
それが最近、猫をお迎えすることができました！
ハチワレのラグドールです！
無料イラストにそっくりな子がいたのでお借りしてきました。
初めての猫で大変な事もありますが、なんとかやれています。
猫を飼うことになって一番大変だったのは
朝ごはんの時間が決まっていることでした笑
元々朝が弱く、すっきり起きられないせいで夜更かししてしまうという
悪循環だったため、朝7時頃に強制的に起きるのがしんどくて…笑
すっきり起きるためにも今こそ眠っていたコーヒーメーカーを使う時では！？
そう思い、買ったもののなんだかんだ使っていなかった
シロカのカフェばこを引っ張り出してきました。
画像付けようと思って調べてみたら3万近くもするコーヒーメーカーでした笑
アフィリエイトではないので、
もしコーヒーメーカー迷っている方いらっしゃいましたらぜひ一度見てみてください！
この商品は高さが結構あるので私は炊飯器の横に置いてます。
炊飯器開けた時と同じくらいの高さがあるのでまあまあ場所は取りますね…。
ちなみにシロカさんの商品でもっとコンパクトで豆から挽ける商品もあります。
ただ、こちらはホッパーが無いので恐らく毎回計量必須になるかと思います。
どちらも豆は挽く前でも後でも使えるコーヒーメーカーで、
欲しいコーヒーの量を設定してボタンを押すだけで抽出してくれます！
コーヒーの良し悪しなんて正直よくわからない私でも
美味しいと思うのでやっぱり入れたてはいいのかなと思います！
ボタン押して猫と遊んでたら完成してます笑
注意点としては、豆を挽く時の音はやはりそれなりにするので、
壁が薄い家であれば挽いた後の物を使うか、
タイマー設定で日中に作っておくかするのがいいかもしれません。
コーヒー豆はカルディや近くのコーヒー屋さん、スタバ等で購入しています！
お店によっては香り付きのコーヒー豆を扱っていて、
バニラやキャラメルの甘い香りから燻製っぽい香りまで色々ありました。
休日の散歩ついでに探してみるのも楽しいです。
猫と暮らして家にいる時間も伸びたので、
おうちカフェの充実は正解でした！
皆さんの休日を彩るおすすめがあればぜひコメントで教えてください！
🌸満開の桜🌸
暖かい日が増え、例年より少し早く桜が満開になりました。
皆様いかがお過ごしでしょうか。
本日はお花見と桜大福のお話になります。
丁度休日に快晴の日がありましたので、
満開予測よりも２日程早かったのですが見に行ってみることにしました。
お菓子にはいつも３色団子を持っていくのですが、
その日は珍しく桜大福が売ってたのでそちらを購入して目的地へ。
※桜大福については別の記事で書かせていただいたので以下のリンクをご覧ください。
kuda-monogatari.hatenablog.com
予測よりも暑い日が続いていたので、ほぼ満開の桜を見ることができました。
既に新芽が出ている部分もあって、春の短さが感じられます。
写真を撮った数日後には桜は散って緑のほうが多くなっていました。
満開の桜は毎年数日しか見れないので
皆さんもぜひ通勤や散歩の時に気にしてみてください。
ふとした景色の移り変わりに気づく事で日々の色どりになるかもしれません。
🌸塩漬けの桜と白あん🌸
次第に暖かい日が増え、こたつも片付けを考える今日この頃。
皆様いかがお過ごしでしょうか。
本日は公式からのお題「あんこ」についてのお話です。
あんこと言ってもたくさん種類がありますし、
何と食べるかによって好みが違う方もいると思います。
私の周りだとおはぎは嫌いだけど大福は好きという人が居ました。
裏表が変わっただけで好みも変わるのは珍しいですよね。
さて、早春の今日せっかくお話させていただくということで
ぜひおすすめしたいのは桜餡🌸です。
ご存じの方もいらっしゃるかと思いますが、
市販では珍しいので説明させていただくと
こした白あんに桜の塩漬けを混ぜたものになります。
白あんの優しい甘みと塩漬けのしょっぱさがとても合っていて
飽きの来ない味になっています。
ただ甘いだけではないので、甘いものが苦手な人でも食べやすいですし、
お花見に行く際には桜を目と舌で楽しめる優れものです。
しかし最近では桜餡の大福はあまり見かけなくなりましたね…。
数年前くらいまではヤマザキさんが桜餡の大福が
98円くらいで和菓子コーナーに陳列されていたのですが…。
なので私は近隣の和菓子屋さんで購入したりしています。
もしかするとお花見の季節になれば、
期間限定で入荷しているかもしれないので、
ぜひ一度和菓子コーナーを見てみてください。
きれいな薄桃色の大福をしているので、
目につけばすぐにわかると思います。
ぜひ今年の桜は花でも団子でも桜を楽しんでください。
