みなさんこんにちは。
今回から、初心者向けのHTML・CSSを勉強方法などをご紹介していきます。
とりあえず喋ることが好きな営業マンが、実際に自分でコードが書けるようになるまで、どんなことを勉強しているかを記載していきます。
目標は、HPを１つ自分で作れるようになることです！！
学習のための準備
まず、HPを自分で作れるようになるためには、必要な物がいくつかあります。
１・コーディングソフト
HTMLやCSSと言われるHPを構成する言語をコーディング（書く）するには、メモ帳のような単純なテキストエディタを使用して作成することもできますが、やはり専用のコーディングソフトを活用することで、簡単＋スピーディーにコーディングを進めていくことができます。コーディングソフトは様々ありますが、とりあえず始めるのであれば無料のものありますから探してみてください。
無料コーディングソフト
・Crescent Eve
有料コーディングソフト
・Dreamweaver
・Coda2
様々ありますから、とりあえず利用してみて本格的に始める方は有料版を利用してみてください。
→基本的にコードを記載する行為はどれを使っても同じですので、こちらの記事ではDreamweaverを利用して内容を紹介していきます。
ブラウザー
後々、自分の書いたコードを確認する際に非常に便利な機能がありますので、こちらは、Google Chromeを利用していきましょう。
ダウンロードURLはこちら→https://www.google.co.jp/chrome/browser/desktop/
環境が準備できていることを確認する
最低限、上記の２つが揃っていればコーディングをしていくことはできます。実際にサイトを公開するまでになると、WEBサーバーやドメインなど複数の物が必要となりますが、現状の段階ではこれだけあれば十分です。
では早速、ダウンロードしてきたコーディングソフトと、ブラウザーを使って簡単なテキストを作成してみましょう。
step1 まずはコーディングソフトを立ち上げてみる
まずはコーディングソフトを立ち上げてみてください。（紹介はDreamweaverを使用しています。）
すると、まっさらな画面が表示されるかと思います。まっさらな画面に下記と同じものを記述してください。（コピー＆ペーストで結構です。）
Dreamweaverの方は新規でHTMLのファイルを作成すると自動で下記の文章が記載されているかと思います。
[crayon-662bdc3ce0724899917139/]これはHTMLを記述していく上でベースとなる構造文なので、簡単に解説をしていきます。
<html>の中身は大きく head と body の2つの要素にわけることができます。
step2 文字を書いて保存してみる
ここまではコーディングソフトを開いて、最低限のものを準備したというだけです。まずは一度文章を書いてみましょう。記載する箇所は
実際にはコードはこのようになります。
[crayon-662bdc3ce0734443432285/]ここまでできたら、一度保存をしてみましょう。
保存方法は、macであれば「⌘command」＋「s」で、Windowsであれば「Ctrl」＋「s」で保存ができると思います。
保存するときは名前をindex.htmlとして、デスクトップに保存をしておきましょう。このindex.htmlという名前は、HPの中で特殊な存在で基本的にTOPはこのファイル名にして保存する必要があるので、覚えておきましょう。
ここまでで、文字を書いてみて保存をするという、基礎の部分が完了しました。
step3 書いたものをWEB画面で確認してみる
実際にここまでで準備をしてきたindex.htmlファイルをブラウザにドラッグ&ドロップをして確認してみましょう。
すると画面が下記のように変わることを確認してください。
先ほど記述した文章が表示されていることがわかりますね。
まとめ
今回はHTMLの基礎的として文章を書いてみる。と、ご紹介してみました。次回はこの文章に対してCSSで装飾をしてみるところからご紹介していきます。
]]>みなさんこんにちは。
今回から、初心者向けのHTML・CSSを勉強方法などをご紹介していきます。
とりあえず喋ることが好きな営業マンが、実際に自分でコードが書けるようになるまで、どんなことを勉強しているかを記載していきます。
目標は、HPを１つ自分で作れるようになることです！！
学習のための準備
まず、HPを自分で作れるようになるためには、必要な物がいくつかあります。
１・コーディングソフト
HTMLやCSSと言われるHPを構成する言語をコーディング（書く）するには、メモ帳のような単純なテキストエディタを使用して作成することもできますが、やはり専用のコーディングソフトを活用することで、簡単＋スピーディーにコーディングを進めていくことができます。コーディングソフトは様々ありますが、とりあえず始めるのであれば無料のものありますから探してみてください。
無料コーディングソフト
・Crescent Eve
有料コーディングソフト
・Dreamweaver
・Coda2
様々ありますから、とりあえず利用してみて本格的に始める方は有料版を利用してみてください。
→基本的にコードを記載する行為はどれを使っても同じですので、こちらの記事ではDreamweaverを利用して内容を紹介していきます。
ブラウザー
後々、自分の書いたコードを確認する際に非常に便利な機能がありますので、こちらは、Google Chromeを利用していきましょう。
ダウンロードURLはこちら→https://www.google.co.jp/chrome/browser/desktop/
環境が準備できていることを確認する
最低限、上記の２つが揃っていればコーディングをしていくことはできます。実際にサイトを公開するまでになると、WEBサーバーやドメインなど複数の物が必要となりますが、現状の段階ではこれだけあれば十分です。
では早速、ダウンロードしてきたコーディングソフトと、ブラウザーを使って簡単なテキストを作成してみましょう。
step1 まずはコーディングソフトを立ち上げてみる
まずはコーディングソフトを立ち上げてみてください。（紹介はDreamweaverを使用しています。）
すると、まっさらな画面が表示されるかと思います。まっさらな画面に下記と同じものを記述してください。（コピー＆ペーストで結構です。）
Dreamweaverの方は新規でHTMLのファイルを作成すると自動で下記の文章が記載されているかと思います。
[crayon-662bdc3ce0724899917139/]これはHTMLを記述していく上でベースとなる構造文なので、簡単に解説をしていきます。
<html>の中身は大きく head と body の2つの要素にわけることができます。
step2 文字を書いて保存してみる
ここまではコーディングソフトを開いて、最低限のものを準備したというだけです。まずは一度文章を書いてみましょう。記載する箇所は
実際にはコードはこのようになります。
[crayon-662bdc3ce0734443432285/]ここまでできたら、一度保存をしてみましょう。
保存方法は、macであれば「⌘command」＋「s」で、Windowsであれば「Ctrl」＋「s」で保存ができると思います。
保存するときは名前をindex.htmlとして、デスクトップに保存をしておきましょう。このindex.htmlという名前は、HPの中で特殊な存在で基本的にTOPはこのファイル名にして保存する必要があるので、覚えておきましょう。
ここまでで、文字を書いてみて保存をするという、基礎の部分が完了しました。
step3 書いたものをWEB画面で確認してみる
実際にここまでで準備をしてきたindex.htmlファイルをブラウザにドラッグ&ドロップをして確認してみましょう。
すると画面が下記のように変わることを確認してください。
先ほど記述した文章が表示されていることがわかりますね。
まとめ
今回はHTMLの基礎的として文章を書いてみる。と、ご紹介してみました。次回はこの文章に対してCSSで装飾をしてみるところからご紹介していきます。
]]>
開発会社で仕事をしていると、普段個人的には絶対に使用しないであろう、イラストやアイコンを多く使用します。
そんな私は、絵を描くセンスが０なので、いつも似たようなアイコンを活用しており、自分でも少し飽きてきているのですが、今回は、googleが新しくリリースした新サービスは、そんな私には非常に便利であろうサービスだったので簡単に紹介をしていければと思います。
Google新サービス「AutoDraw」
AutoDrawってどんなサービスなの？
「AutoDraw」はGoogleが4月11日(米国時間)「Fast Drawing for Everyone」で発表した、機械学習（Ai）を活用した、お絵かきツールです。
お絵かきツールなんて簡単に書きましたけど、機械学習が入っているので、どんなに絵が下手な人で大体のものは思い通りの絵に仕上げることができるんです。
https://youtu.be/VwRbvVrUXTc
動画を見てもわかると思いますが、web画面にフリーハンドで書いた絵を、自動補正して自動的に関連する画像データ候補を表示してくれる夢のようなサービスなのです。
そして、Googleのサービスということで、こちらは無料で利用できるのも嬉しいですね。
実際に本当に絵心がない私が利用をして見た画面を書きに載せておくので、是非皆さんも利用して見てください。
実際に絵心のない私が利用してみた
そうだ、まず簡単に書ける犬を書いてみよう
そう、これが私の書ける犬ですが、
簡単にこんな完成度の高い犬に自動変換してくれます。機械学習のすごいところは正面の顔だけではなく横を向いている犬の画像にも置き換えることが可能です。
変な犬を量産するだけで、こんな可愛いイラストを作成することができます。
まとめ
今回はAiを活用した、Googleの新サービスを紹介しました。
機械学習のAPIが公開されたなど、機械学習のニュースはよく耳にすることがありますが、実際に活用されているサービスを耳にすることが珍しく、今後このような便利なサービスが増えることが待ち遠しいですね。
]]>
開発会社で仕事をしていると、普段個人的には絶対に使用しないであろう、イラストやアイコンを多く使用します。
そんな私は、絵を描くセンスが０なので、いつも似たようなアイコンを活用しており、自分でも少し飽きてきているのですが、今回は、googleが新しくリリースした新サービスは、そんな私には非常に便利であろうサービスだったので簡単に紹介をしていければと思います。
Google新サービス「AutoDraw」
AutoDrawってどんなサービスなの？
「AutoDraw」はGoogleが4月11日(米国時間)「Fast Drawing for Everyone」で発表した、機械学習（Ai）を活用した、お絵かきツールです。
お絵かきツールなんて簡単に書きましたけど、機械学習が入っているので、どんなに絵が下手な人で大体のものは思い通りの絵に仕上げることができるんです。
https://youtu.be/VwRbvVrUXTc
動画を見てもわかると思いますが、web画面にフリーハンドで書いた絵を、自動補正して自動的に関連する画像データ候補を表示してくれる夢のようなサービスなのです。
そして、Googleのサービスということで、こちらは無料で利用できるのも嬉しいですね。
実際に本当に絵心がない私が利用をして見た画面を書きに載せておくので、是非皆さんも利用して見てください。
実際に絵心のない私が利用してみた
そうだ、まず簡単に書ける犬を書いてみよう
そう、これが私の書ける犬ですが、
簡単にこんな完成度の高い犬に自動変換してくれます。機械学習のすごいところは正面の顔だけではなく横を向いている犬の画像にも置き換えることが可能です。
変な犬を量産するだけで、こんな可愛いイラストを作成することができます。
まとめ
今回はAiを活用した、Googleの新サービスを紹介しました。
機械学習のAPIが公開されたなど、機械学習のニュースはよく耳にすることがありますが、実際に活用されているサービスを耳にすることが珍しく、今後このような便利なサービスが増えることが待ち遠しいですね。
]]>
今回はmacbookなどノートパソコンが水濡れした時の対処について記載致します。
水濡れした際の対処法としては以下の流れになります。
電気を落とす - 電源類を全て切り離す -
Macが水濡れしたときに一番初めに行わなければいけないことは電気を絶つことです。
水に濡れた状態で電気を通してしまうと、これらの機器が「ショート」してしまいます。
水濡れした後はすぎに電源を切ること、完全に乾燥してから電源を入れること、これらは厳守しましょう。
水気を取る - ティッシュなどで可能な限り水気を拭き取る -
Macのキーボードに何らかの水分をこぼした場合は、とにかく素早く拭き取りましょう。
キーボードの下には、ロジックボードがありこちらに水分が入ってしまうと致命傷となることが多いようです。
よって、キーボードカバーなどすぐに水分が入らない対策をしておくと効果的です。
乾かす - キーボードを下側にして、2–3日置く -
乾かす時はキーボードを下に向けて放置しましょう。
ドライヤーを使用して乾かす方法もあるようですが、熱風は基盤にダメージを与えることがあるようなので使用するのであれば冷風で乾かしましょう。
その後、自然乾燥に1~2日、時間を空けると良いようです。
iPhoneなど、スマートフォンでは乾燥剤とジップロックを使用した対策法がありますがこちらを行うと早く復旧するかもしれません。
電源を入れる - 完璧に乾燥したのを確認し、動作テストを行う -
電源を落とし、水気をシッカリと拭き取り、十二分に乾燥させたのを確認して初めて電源を入れることになります。
乾燥しているかどうかを見極めるのは困難ですが、あまりにも早い段階で起動させるとショートする恐れがあるので十二分に時間を空けましょう。
以上が復旧に対しての大まかな流れとなります。
私の使用しているmacbookは上記の対処で問題なく（運よく？）起動し、現在も問題なく稼働しております。
まとめ
残念なことに、水濡れによる故障はAppleCareのサポート対象外です。
選択肢としては、買い換えるか修理に出すかだと思われますがいずれにせよ高額な出費となります。
水濡れに対する記事を読んでいる方は事後だとは思いますが、以後二度とこういった事態を起こさないために、キーボードカバーやスタンドを用いて事前対策をできる限りしておくべきでしょう。
]]>
今回はmacbookなどノートパソコンが水濡れした時の対処について記載致します。
水濡れした際の対処法としては以下の流れになります。
電気を落とす - 電源類を全て切り離す -
Macが水濡れしたときに一番初めに行わなければいけないことは電気を絶つことです。
水に濡れた状態で電気を通してしまうと、これらの機器が「ショート」してしまいます。
水濡れした後はすぎに電源を切ること、完全に乾燥してから電源を入れること、これらは厳守しましょう。
水気を取る - ティッシュなどで可能な限り水気を拭き取る -
Macのキーボードに何らかの水分をこぼした場合は、とにかく素早く拭き取りましょう。
キーボードの下には、ロジックボードがありこちらに水分が入ってしまうと致命傷となることが多いようです。
よって、キーボードカバーなどすぐに水分が入らない対策をしておくと効果的です。
乾かす - キーボードを下側にして、2–3日置く -
乾かす時はキーボードを下に向けて放置しましょう。
ドライヤーを使用して乾かす方法もあるようですが、熱風は基盤にダメージを与えることがあるようなので使用するのであれば冷風で乾かしましょう。
その後、自然乾燥に1~2日、時間を空けると良いようです。
iPhoneなど、スマートフォンでは乾燥剤とジップロックを使用した対策法がありますがこちらを行うと早く復旧するかもしれません。
電源を入れる - 完璧に乾燥したのを確認し、動作テストを行う -
電源を落とし、水気をシッカリと拭き取り、十二分に乾燥させたのを確認して初めて電源を入れることになります。
乾燥しているかどうかを見極めるのは困難ですが、あまりにも早い段階で起動させるとショートする恐れがあるので十二分に時間を空けましょう。
以上が復旧に対しての大まかな流れとなります。
私の使用しているmacbookは上記の対処で問題なく（運よく？）起動し、現在も問題なく稼働しております。
まとめ
残念なことに、水濡れによる故障はAppleCareのサポート対象外です。
選択肢としては、買い換えるか修理に出すかだと思われますがいずれにせよ高額な出費となります。
水濡れに対する記事を読んでいる方は事後だとは思いますが、以後二度とこういった事態を起こさないために、キーボードカバーやスタンドを用いて事前対策をできる限りしておくべきでしょう。
]]>
環境
今回はCAKEPHP３系で行います。
準備
はじめに、サンプルで３つのテーブルを用意します。
postsテーブル：id、name、status、type、seq、created、modified
categoriesテーブル：id、seq、created、modified
categories_postsテーブル：category_id、post_id
ケース別サンプルコード
postに条件を課して一覧を取得する
ページングなしの場合
この場合、find()を使用した一般的なコードは次のようになるでしょう。
[crayon-662bdc3ce1645445708513/]contain()でcategoriesテーブルを結合して、さらにその中で条件や順序を指定しています。where()では複数の条件を指定しています。並列の条件はANDで繋がり、ORの中の条件はORで繋がります。また、LIKE検索する場合はキーワードの前後に%をつけます。order()で順序を指定しています。
この時に実行されるSQLは次のようになります。
[crayon-662bdc3ce1650064433799/][crayon-662bdc3ce1655917702090/]
ページングありの場合
この場合、paginate()を使用した一般的なコードは次のようになるでしょう。
[crayon-662bdc3ce165a004749487/]基本的な構造はページングなしの場合と同じです。
この時に実行されるSQLは次のようになります。
[crayon-662bdc3ce1661496026631/][crayon-662bdc3ce1665825863361/]ページングありの場合、postsテーブルの取得にLIMITがついています。この数はlimitを指定してあげることで変更が可能です。
特定のcategoryに属するpostを取得する
ページングなしの場合
この場合、find()を使用した一般的なコードは次のようになるでしょう。
[crayon-662bdc3ce166a975771823/]leftJoin()でcategoriesテーブルをLEFT JOINしてwhere()でpostが属するcategoryを指定しています。
この時に実行されるSQLは次のようになります。
[crayon-662bdc3ce1670874786838/]
ページングありの場合
この場合、paginate()を使用した一般的なコードは次のようになるでしょう。
[crayon-662bdc3ce1675919311708/]基本的な構造はページングなしの場合と同じです。
この時に実行されるSQLは次のようになります。
[crayon-662bdc3ce167a427441841/]
結び
私がCAKEPHPを使用しているときよくあるのは、公式のドキュメントでなかなか見つけられないメソッドがあったりして、いろいろとググって発見することです。今回はこれまでいろいろと調べてわかった検索の方法をまとめて掲載しました。
実際の開発ではもっと多くのテーブルが結合したり、条件が複雑だったりすることもありますが、基本的には今回掲載したものを組み合わせて大部分は対応可能かなと思います。
]]>環境
今回はCAKEPHP３系で行います。
準備
はじめに、サンプルで３つのテーブルを用意します。
postsテーブル：id、name、status、type、seq、created、modified
categoriesテーブル：id、seq、created、modified
categories_postsテーブル：category_id、post_id
ケース別サンプルコード
postに条件を課して一覧を取得する
ページングなしの場合
この場合、find()を使用した一般的なコードは次のようになるでしょう。
[crayon-662bdc3ce1645445708513/]contain()でcategoriesテーブルを結合して、さらにその中で条件や順序を指定しています。where()では複数の条件を指定しています。並列の条件はANDで繋がり、ORの中の条件はORで繋がります。また、LIKE検索する場合はキーワードの前後に%をつけます。order()で順序を指定しています。
この時に実行されるSQLは次のようになります。
[crayon-662bdc3ce1650064433799/][crayon-662bdc3ce1655917702090/]
ページングありの場合
この場合、paginate()を使用した一般的なコードは次のようになるでしょう。
[crayon-662bdc3ce165a004749487/]基本的な構造はページングなしの場合と同じです。
この時に実行されるSQLは次のようになります。
[crayon-662bdc3ce1661496026631/][crayon-662bdc3ce1665825863361/]ページングありの場合、postsテーブルの取得にLIMITがついています。この数はlimitを指定してあげることで変更が可能です。
特定のcategoryに属するpostを取得する
ページングなしの場合
この場合、find()を使用した一般的なコードは次のようになるでしょう。
[crayon-662bdc3ce166a975771823/]leftJoin()でcategoriesテーブルをLEFT JOINしてwhere()でpostが属するcategoryを指定しています。
この時に実行されるSQLは次のようになります。
[crayon-662bdc3ce1670874786838/]
ページングありの場合
この場合、paginate()を使用した一般的なコードは次のようになるでしょう。
[crayon-662bdc3ce1675919311708/]基本的な構造はページングなしの場合と同じです。
この時に実行されるSQLは次のようになります。
[crayon-662bdc3ce167a427441841/]
結び
私がCAKEPHPを使用しているときよくあるのは、公式のドキュメントでなかなか見つけられないメソッドがあったりして、いろいろとググって発見することです。今回はこれまでいろいろと調べてわかった検索の方法をまとめて掲載しました。
実際の開発ではもっと多くのテーブルが結合したり、条件が複雑だったりすることもありますが、基本的には今回掲載したものを組み合わせて大部分は対応可能かなと思います。
]]>
そもそもなんで画像を圧縮しないといけないの？
普段我々が使用しているWebサービスは、サーバー（主にレンタルサーバー）上にて運用されていて、そのサーバーには容量制限というのがあります。
サーバーの詳細に関しては割愛しますが、所謂レンタルルームのようなもので、月額支払う金額に応じて部屋の大きさが異なり、使用している間は荷物を入れたり出したり自由にできる空間と思っていただければと思います。
つまり、たくさんの情報（画像や動画etc.）をいっぱい載せたり画像のサイズが大きいと、容量がいっぱいになってしまい、
例えば
・ブラウザでのロードが重くなる
・提供しているWebサイトがうまく動かなかなくなる
・ブログなどを更新しているサイトの情報が消えてしまう etc.
なんてことが起こったりします。
そのため、容量を圧縮（=軽量化）をしなければならない場合があるのです。
画像容量軽量化オススメサイト Tiny PNG
Tiny PNGとは？
こちらの記事とは別に、知人に聞いて恐らく一番多く推奨されるであろうサイトになります。
一度に5MBの画像容量を20枚まで軽量化することができます。
画像容量の軽量化に成功するとパンダが喜びます。
Tiny PNG使い方
使い方はいたって簡単です。
＜＜ステップ１：軽量化したい画像をドラックアンドドロップ＞＞
画像容量の軽量化をしたい画像を点線で囲われた箇所に、ドラックアンドドロップ（画像を選択して、指定の箇所に移動）させるだけ。
そうすると、自動的に画像の軽量化が始まります。
軽量化が終わると、画像のようにパンダが喜びます。
パンダの横に書いてある「93％」というのが今回の画像の軽量化した割合になります。
基本的には、もともと容量の軽いものよりも容量の大きなものを軽量化するためのツールですのでもともと容量の軽い画像よりも大きなものの方が効果があります。
＜＜ステップ２：画像を保存＞＞
赤枠で囲われた「Download all」というボタンを押せばダウンロードされます。
＜＜ステップ３：完了＞＞
えっ！？もう終わり？と思われるかもしれませんが。
以上なんです。
とにかく使い安くて、簡単に軽量化できる。これがTiny PNGの魅力です。
まとめ
1. 画像の容量を軽量化するのは、サーバー上に多くの画像を載せたり、速度を遅くしないため。
2. 画像軽量化は、Tiny PNG で簡単にできる。
3. 有料版もあるが先ずは、無料のものから使ってみる。
軽量化サイトは、他にもたくさんありますが、先ずはTiny PNGで仕様に慣れてみてください。
簡単操作で、サクッサクッとサイトを運用しましょう！
]]>そもそもなんで画像を圧縮しないといけないの？
普段我々が使用しているWebサービスは、サーバー（主にレンタルサーバー）上にて運用されていて、そのサーバーには容量制限というのがあります。
サーバーの詳細に関しては割愛しますが、所謂レンタルルームのようなもので、月額支払う金額に応じて部屋の大きさが異なり、使用している間は荷物を入れたり出したり自由にできる空間と思っていただければと思います。
つまり、たくさんの情報（画像や動画etc.）をいっぱい載せたり画像のサイズが大きいと、容量がいっぱいになってしまい、
例えば
・ブラウザでのロードが重くなる
・提供しているWebサイトがうまく動かなかなくなる
・ブログなどを更新しているサイトの情報が消えてしまう etc.
なんてことが起こったりします。
そのため、容量を圧縮（=軽量化）をしなければならない場合があるのです。
画像容量軽量化オススメサイト Tiny PNG
Tiny PNGとは？
こちらの記事とは別に、知人に聞いて恐らく一番多く推奨されるであろうサイトになります。
一度に5MBの画像容量を20枚まで軽量化することができます。
画像容量の軽量化に成功するとパンダが喜びます。
Tiny PNG使い方
使い方はいたって簡単です。
＜＜ステップ１：軽量化したい画像をドラックアンドドロップ＞＞
画像容量の軽量化をしたい画像を点線で囲われた箇所に、ドラックアンドドロップ（画像を選択して、指定の箇所に移動）させるだけ。
そうすると、自動的に画像の軽量化が始まります。
軽量化が終わると、画像のようにパンダが喜びます。
パンダの横に書いてある「93％」というのが今回の画像の軽量化した割合になります。
基本的には、もともと容量の軽いものよりも容量の大きなものを軽量化するためのツールですのでもともと容量の軽い画像よりも大きなものの方が効果があります。
＜＜ステップ２：画像を保存＞＞
赤枠で囲われた「Download all」というボタンを押せばダウンロードされます。
＜＜ステップ３：完了＞＞
えっ！？もう終わり？と思われるかもしれませんが。
以上なんです。
とにかく使い安くて、簡単に軽量化できる。これがTiny PNGの魅力です。
まとめ
1. 画像の容量を軽量化するのは、サーバー上に多くの画像を載せたり、速度を遅くしないため。
2. 画像軽量化は、Tiny PNG で簡単にできる。
3. 有料版もあるが先ずは、無料のものから使ってみる。
軽量化サイトは、他にもたくさんありますが、先ずはTiny PNGで仕様に慣れてみてください。
簡単操作で、サクッサクッとサイトを運用しましょう！
]]>