パソコン – ページ 2 – 暮らしのハンドノート

2018年6月15日2018年6月15日

無料のHTML・CSSテンプレートをWordPress化する方法No.1

WordPressにテーマを認識させる素材ををダウンロードする

まず、商用OKの無料のフォルダをダウンロードして解凍しておきます。

商用OKですが、一部を抜粋すると、

アダルトサイト
法律に反するサイト
モラルに反するサイト

などのサイトにはご利用できません。必ず、利用規約も必ず読んでくださいね。

今回ダロンロードするのは、No.14です。

今回カスタマイズするのに使用するデザインのサイト名とURLは下記のとおりです。

サイト名：CoolWebWindow
URL：http://www.coolwebwindow.com

現在WordPress&サーバーをお持ちでない方は、無料で使用できるMANPをインストールして編集に使ってみましょう。

MAMPをWindws10にイントールしてサーバーにアクセスする方法

テキストエディタには、Atomを使用します。

Atomの公式ページからダウンロードして、必要であれば、日本語化したりして使ってみましょう。

まず、ダウンロードしたpub014のフォルダを解凍します。

それでは、まず、WordPressが認識できるかどうか試しにサーバーにupロードしましょう。

・Xサーバーのファイルマネージャーからログインして【ドメイン名】→【public_html】→【wp-content】→【themes】の順にアクセスします。

・MAMPの方は、【MAMP】→【htdocs】→【wordpress】→【wp-content】→【themes】の順にアクセスします。

以下の説明以降UPロードと記載した時、MAMPの方は上記の手順でフォルダやファイル移動したり作成したりしてください。

ファイルの作成などはATOMを使うと便利です。

Atomを開いて【ファイル】→【フォルダを開く】→【MAMPをインストールしたドライブ】→【MAMP】→【htdocs】→【wordpress】→【wp-content】→【themes】の順です。

以下の画像は、フォルダを作成した後の画像ですが手順としては

①任意のテーマを入力します。私はmythemeとしました。

②フォルダ作成をクリックします。

すると以下の画像のようにフォルダが作成されます。

次に【mytheme】の中に

【style.css】と【index.php】のファルを作成します。

次にstyle.cssとindex.phpのをファイル編集をします。

まず、style.cssにチェックを入れ編集をクリックします。

※MAMPの方はAtomを使って以下の画像のようにファイルを作ります。

すると以下のようにか編集画面が表示されます。

※保存する時ファイル名の文字コードはUTF-8に必ずしておいてください。

次に以下のstyle.cssに以下のコードをコピペして記述してください。

/*
Theme Name: テーマの名前
Theme URI: http://テーマのURL/
Description: テーマの説明
Author: 作った人の名前
Author URI: 作った人のURL
Version: バージョン
License: ライセンス
License URI: ライセンスのURL
*/

Theme Name: テーマの名前

Theme URI: http://テーマのURL/

Description: テーマの説明

Author: 作った人の名前

Author URI: 作った人のURL

Version: バージョン

License: ライセンス

License URI: ライセンスのURL

index.phpにはダウンロードしてきたsample.htmlのファイルの中身を今回は使用しますので以下のコードをindex.phpとして記述してください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="css/common.css" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<title>あなたのサイト名などお書きください</title>
</head>
<body>
<div id="top">
   <div id="headWrap">
      <div id="header">
         <h1><a href="index.html"><img src="images/logo.gif" alt="" /></a></h1>
         <div id="pr">
            <p>サイトの説明文やキーワードを入れてください。SEO対策にもなります。</p>
         </div>
         <div id="gnavi">
            <ul>
               <li>お電話からのご予約は<br /><span class="tel">0120-000-000</span></li>
               <li><a href="index.html"><img src="images/btn_access.gif" alt="お問い合わせ" class="rollover" /></a></li>
            </ul>
         </div>
      </div><!-- /#header -->
   </div><!-- /#headWrap -->
   <div id="menu">
      <ul>
         <li class="home"><a href="index.html">ホーム</a></li>
         <li><a href="sample.html">新着情報</a></li>
         <li><a href="index.html">サービス・設備</a></li>
         <li><a href="index.html">客室・料金</a></li>
         <li><a href="index.html">料理</a></li>
         <li><a href="index.html">アクセス</a></li>
      </ul>
   </div><!-- /#menu -->
   <div id="contents">
      <div id="topicPath">
         <a href="index.html">HOME</a> > サンプルページ
      </div><!-- /#topicPath -->
      <div id="main">
         <h2>制作者より</h2>
         <h3>テンプレートについて</h3>
         <p>
            このページはアイキャッチ画像がないタイプになります。
         </p>
         <p>
            <a href="index.html">&raquo; インデックスページに戻る</a>
         </p>
      </div><!-- /#main -->
      <div id="sub">
         <div class="section">
            <h2>サービス</h2>
            <ul>
               <li><a href="index.html">インターネット</a></li>
               <li><a href="index.html">温泉</a></li>
               <li><a href="index.html">ラウンジ</a></li>
            </ul>
         </div><!-- /.section -->
         <div class="section">
            <h2>ビューティ</h2>
            <ul>
               <li><a href="index.html">マッサージ</a></li>
               <li><a href="index.html">エステ</a></li>
            </ul>
         </div><!-- /.section -->
      </div><!-- /#sub -->
      <div id="pageTop">
         <a href="#top">ページのトップへ戻る</a>
      </div><!-- /#pageTop -->
   </div><!-- /#contents -->
   <div id="footer">
      <div id="footMenu">
         <ul>
            <li><a href="index.html">会社概要</a></li>
            <li><a href="index.html">採用情報</a></li>
            <li><a href="index.html">お問い合わせ</a></li>
            <li><a href="index.html">プライバシーポリシー</a></li>
         </ul>
      </div><!-- /#footerMenu -->
      <div class="copyright">Copyright &copy; 2011 YOUR SITE NAME All Rights Reserved.</div>
   </div><!-- /#footer -->
</div><!-- /#top -->
</body>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>あなたのサイト名などお書きください</title>

</head>

<body>

<p>サイトの説明文やキーワードを入れてください。SEO対策にもなります。</p>

</div>

<ul>

<li>お電話からのご予約は<br /><span class="tel">0120-000-000</span></li>

</ul>

</div>

</div>

</div>

<ul>

</ul>

</div>

<a href="index.html">HOME</a> > サンプルページ

</div>

<h2>制作者より</h2>

<h3>テンプレートについて</h3>

<p>

このページはアイキャッチ画像がないタイプになります。

</p>

<p>

<a href="index.html">» インデックスページに戻る</a>

</p>

</div>

<ul>

<li><a href="index.html">インターネット</a></li>

</ul>

</div>

<h2>ビューティ</h2>

<ul>

<li><a href="index.html">マッサージ</a></li>

</ul>

</div>

</div>

<a href="#top">ページのトップへ戻る</a>

</div>

</div>

<ul>

<li><a href="index.html">お問い合わせ</a></li>

<li><a href="index.html">プライバシーポリシー</a></li>

</ul>

</div>

</div>

</div>

</body>

wordpressの管理画面から外観→テーマをクリックすると以下の画像のようにテーマとして認識されますので一旦有効化しておきます。

画像を表示したい時はscreenshot.pngとして画像をテーマの中に置くことにより自動的に認識されるようになります。

先ほど、style.cssファイルを作った同じ階層に今度は【top.php】というファイルを作りダウンロードしたindex.tmlのファイルの中身をそのまま記述します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="css/common.css" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<title>あなたのサイト名などお書きください</title>
</head>
<body>
<div id="top">
   <div id="headWrap">
      <div id="header">
         <h1><a href="index.html"><img src="images/logo.gif" alt="" /></a></h1>
         <div id="pr">
            <p>サイトの説明文やキーワードを入れてください。SEO対策にもなります。</p>
         </div>
         <div id="gnavi">
            <ul>
               <li>お電話からのご予約は<br /><span class="tel">0120-000-000</span></li>
               <li><a href="index.html"><img src="images/btn_access.gif" alt="お問い合わせ" class="rollover" /></a></li>
            </ul>
         </div>
      </div><!-- /#header -->
   </div><!-- /#headWrap -->
   <div id="menu">
      <ul>
         <li class="home"><a href="index.html">ホーム</a></li>
         <li><a href="sample.html">新着情報</a></li>
         <li><a href="index.html">サービス・設備</a></li>
         <li><a href="index.html">客室・料金</a></li>
         <li><a href="index.html">料理</a></li>
         <li><a href="index.html">アクセス</a></li>
      </ul>
   </div><!-- /#menu -->
   <div id="icatch"><img src="images/icatch.jpg" alt="" /></div>
   <div id="contents">
      <div id="main">
         <h2>制作者より</h2>
         <h3>テンプレートについて</h3>
         <p>
            ホテルなどのサービス業に最適なCSSデザインテンプレートです。
         </p>
         <p>
            Webページを制作するにあたって、いろいろなサイトを参考に見たりするのですが、｢開放感｣をイメージしているホテルのサイトが多いと感じました。デザイン的に言えば、ヘッダー背景やメニューバーを画面全体に表示することで、開放感を表現しています。そのあたりも参考にしました。
         </p>
         <p>
            また、リゾートホテルや旅行向けホテルはリッチ感を出すために、どんな配色でも｢深い｣色を使っているのが特徴的だと思いました。
         </p>
         <p>
            完全幅固定タイプです。<br />
            全体的な横幅は787px、メインコンテンツ部分547px（余白除く）、サブコンテンツ部分200px（余白除く）です。サブコンテンツ部分はメニューやバナー等を配置することを想定し、幅を広く取りました。<br />
         </p>
         <p>
            <a href="sample.html">&raquo; イメージ画像を削除したタイプのサンプルはこちらから。</a>
         </p>
         <h3>画像について</h3>
         <p>
            画像はCoolWebWindow作です。色の変更などの編集も可能です。ご自由にお使いください。
         </p>
         <h3>ページ上部への戻りリンクについて</h3>
         <p>
            ページ上部への戻りは、JavaScriptを用いて、なめらかにスクロールしながら移動するようにしております。
         </p>
         <h3>画像のロールオーバーについて</h3>
         <p>
            ヘッダーの「お問い合わせ」のボタンは、JavaScriptにてロールオーバーをしてます。ロールオーバーをしたい画像がありましたら、imgタグに「.rollover」というクラスを指定してください。また、ロールオーバー用の画像は、ロールオーバーしない画像名に「_on」を付けた名前にしてください。
         </p>
         <h3>カスタマイズについて</h3>
         <p>
            カスタマイズはご自由になさってください。<br />
            制限はありません。
         </p>
         <p>
            その他、不具合などございましたら<br />
            <a href="http://www.coolwebwindow.com/" target="_blank">CoolWebWindow</a>にお知らせください。<br />
         </p>
         <h2>サンプルタグについて</h2>
         <p>
            以下、サンプルタグになります。ご利用の際は参考にしてみてください。
         </p>
         <h2>INFORMATION</h2>
         <dl class="information">
            <dt><span>2009-04-28</span></dt>
            <dd>
               <div>
                  ○○新聞に取材を受けました。<br />
               </div>
            </dd>
            <dt><span>2009-04-24</span></dt>
            <dd>
               <div>
                  休業のお知らせ。誠に勝手ながら5月2日から6日まで長期休暇日とさせていただきます。ご了承ください。
               </div>
            </dd>
         </dl>
         <h2>タグサンプル</h2>
         <h3>h3タグ</h3>
         <h4>h4タグ</h4>
         <h5>h5タグ</h5>
         <h6>h6タグ</h6>
         <p>
            <em>強調（em）</em>
            <strong>より強い強調（strong）</strong>
            <ins>追加（ins）</ins>
            <del>削除（del）</del>
            <br />
            <a href="#">テキストアンカー</a>
         </p>
         <h3>リスト</h3>
         <h4>普通のリスト</h4>
         <ul>
            <li>普通のリスト1</li>
            <li>普通のリスト2</li>
            <li>普通のリスト3</li>
         </ul>
         <h4>番号付きリスト</h4>
         <ol>
            <li>番号付きリスト1</li>
            <li>番号付きリスト2</li>
            <li>番号付きリスト3<br />li要素の中はブロックレベルのタグを使用することが出来ます。例えば、&lt;p&gt;タグも記述することが出来ます。<br /></li>
         </ol>
         <h4>定義リスト</h4>
         <dl>
            <dt>定義リスト1</dt>
            <dd>定義した用語の説明</dd>
            <dt>定義リスト2</dt>
            <dd>定義した用語の説明</dd>
            <dt>定義リスト3</dt>
            <dd>定義した用語の説明<br />dd要素の中はブロックレベルのタグを使用することが出来ます。例えば、&lt;p&gt;タグも記述することが出来ます。しかし、dt要素にはインライン要素しか記述することができません。</dd>
         </dl>
         <h3>テーブル</h3>
         <table summary="">
            <tr><th>見出し1</th><th>見出し2</th><th>見出し3</th><th>見出し4</th><th>見出し5</th></tr>
            <tr><td>セル1</td><td>セル2</td><td>セル3</td><td>セル4</td><td>セル5</td></tr>
            <tr><td>セル1</td><td>セル2</td><td>セル3</td><td>セル4</td><td>セル5</td></tr>
            <tr><td>セル1</td><td>セル2</td><td>セル3</td><td>セル4</td><td>セル5</td></tr>
         </table>
      </div><!-- /#main -->
      <div id="sub">
         <div class="section">
            <h2>サービス</h2>
            <ul>
               <li><a href="index.html">インターネット</a></li>
               <li><a href="index.html">温泉</a></li>
               <li><a href="index.html">ラウンジ</a></li>
            </ul>
         </div><!-- /.section -->
         <div class="section">
            <h2>ビューティ</h2>
            <ul>
               <li><a href="index.html">マッサージ</a></li>
               <li><a href="index.html">エステ</a></li>
            </ul>
         </div><!-- /.section -->
      </div><!-- /#sub -->
      <div id="pageTop">
         <a href="#top">ページのトップへ戻る</a>
      </div><!-- /#pageTop -->
   </div><!-- /#contents -->
   <div id="footer">
      <div id="footMenu">
         <ul>
            <li><a href="index.html">会社概要</a></li>
            <li><a href="index.html">採用情報</a></li>
            <li><a href="index.html">お問い合わせ</a></li>
            <li><a href="index.html">プライバシーポリシー</a></li>
         </ul>
      </div><!-- /#footerMenu -->
      <div class="copyright">Copyright &copy; 2011 YOUR SITE NAME All Rights Reserved.</div>
   </div><!-- /#footer -->
</div><!-- /#top -->
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>あなたのサイト名などお書きください</title>

</head>

<body>

<p>サイトの説明文やキーワードを入れてください。SEO対策にもなります。</p>

</div>

<ul>

<li>お電話からのご予約は<br /><span class="tel">0120-000-000</span></li>

</ul>

</div>

</div>

</div>

<ul>

</ul>

</div>

<h2>制作者より</h2>

<h3>テンプレートについて</h3>

<p>

ホテルなどのサービス業に最適なCSSデザインテンプレートです。

</p>

<p>

Webページを制作するにあたって、いろいろなサイトを参考に見たりするのですが、｢開放感｣をイメージしているホテルのサイトが多いと感じました。デザイン的に言えば、ヘッダー背景やメニューバーを画面全体に表示することで、開放感を表現しています。そのあたりも参考にしました。

</p>

<p>

また、リゾートホテルや旅行向けホテルはリッチ感を出すために、どんな配色でも｢深い｣色を使っているのが特徴的だと思いました。

</p>

<p>

完全幅固定タイプです。<br />

全体的な横幅は787px、メインコンテンツ部分547px（余白除く）、サブコンテンツ部分200px（余白除く）です。サブコンテンツ部分はメニューやバナー等を配置することを想定し、幅を広く取りました。<br />

</p>

<p>

<a href="sample.html">» イメージ画像を削除したタイプのサンプルはこちらから。</a>

</p>

<h3>画像について</h3>

<p>

画像はCoolWebWindow作です。色の変更などの編集も可能です。ご自由にお使いください。

</p>

<h3>ページ上部への戻りリンクについて</h3>

<p>

ページ上部への戻りは、JavaScriptを用いて、なめらかにスクロールしながら移動するようにしております。

</p>

<h3>画像のロールオーバーについて</h3>

<p>

ヘッダーの「お問い合わせ」のボタンは、JavaScriptにてロールオーバーをしてます。ロールオーバーをしたい画像がありましたら、imgタグに「.rollover」というクラスを指定してください。また、ロールオーバー用の画像は、ロールオーバーしない画像名に「_on」を付けた名前にしてください。

</p>

<h3>カスタマイズについて</h3>

<p>

カスタマイズはご自由になさってください。<br />

制限はありません。

</p>

<p>

その他、不具合などございましたら<br />

<a href="http://www.coolwebwindow.com/" target="_blank">CoolWebWindow</a>にお知らせください。<br />

</p>

<h2>サンプルタグについて</h2>

<p>

以下、サンプルタグになります。ご利用の際は参考にしてみてください。

</p>

<h2>INFORMATION</h2>

<dd>

<div>

○○新聞に取材を受けました。<br />

</div>

</dd>

<dd>

<div>

休業のお知らせ。誠に勝手ながら5月2日から6日まで長期休暇日とさせていただきます。ご了承ください。

</div>

</dd>

</dl>

<h2>タグサンプル</h2>

<p>

<strong>より強い強調（strong）</strong>

<br />

<a href="#">テキストアンカー</a>

</p>

<h4>普通のリスト</h4>

<ul>

<li>普通のリスト1</li>

<li>普通のリスト2</li>

<li>普通のリスト3</li>

</ul>

<h4>番号付きリスト</h4>

<ol>

<li>番号付きリスト1</li>

<li>番号付きリスト2</li>

<li>番号付きリスト3<br />li要素の中はブロックレベルのタグを使用することが出来ます。例えば、<p>タグも記述することが出来ます。<br /></li>

</ol>

<h4>定義リスト</h4>

<dl>

<dt>定義リスト1</dt>

<dd>定義した用語の説明</dd>

<dt>定義リスト2</dt>

<dd>定義した用語の説明</dd>

<dt>定義リスト3</dt>

<dd>定義した用語の説明<br />dd要素の中はブロックレベルのタグを使用することが出来ます。例えば、<p>タグも記述することが出来ます。しかし、dt要素にはインライン要素しか記述することができません。</dd>

</dl>

</table>

</div>

<ul>

<li><a href="index.html">インターネット</a></li>

</ul>

</div>

<h2>ビューティ</h2>

<ul>

<li><a href="index.html">マッサージ</a></li>

</ul>

</div>

</div>

<a href="#top">ページのトップへ戻る</a>

</div>

</div>

<ul>

<li><a href="index.html">お問い合わせ</a></li>

<li><a href="index.html">プライバシーポリシー</a></li>

</ul>

</div>

</div>

</div>

</body>

</html>

次にダウンロードしてきたファル【pub014】の中から【CSS】・【images】・【js】のフォルダをUPロードしますのでまず、CSS・images・isのフォルダを作りその中にファイルをUPロードするか、FFFTPのソフトを使うと以下の画像のようにフォルダ毎upロードできます。

※【pub014】→【src】の順に開くとcss・images・jsのフォルダがあります。

以下の画像は、imagesとjsのフォルダはアップロード済みでcssのフォルダをアップロードする前の画像になります。

MAMPを使用されて方のatomの最終的なフォルダとファイル構成は以下の画像の通りです。

※今回は、Wordpressに認識してもらえるんだな!!という確認のためそのままサーバーを扱いましたが、次回からは、MAMPとAtomを使ってローカル環境で作業する方法をとり最後に出来上がったデータをサーバーにアップロードする方法をとりますので、MAMPとAtomが使用できるようにダウンロードしておいてくださいね。※もちろん直接サーバーにアップロードするのもOKです。

2018年6月15日2018年6月15日

MAMPにWordPressをインストールする(Win10)

環境:Windows10 home 64bit

MAMPにWordPressをインストールする。

MAMPにデータベースを作成する

MAMPにWordPressのデータベースを関連付けるためにMySQLを使用します。

MANPを起動してOpen start page をクリックします。

次にToolsの中にあるphpMyAdminをクリックします。

次に以下のようにdatabaseをクリックして

wordpress_testという名前のデータベースを作りCreateをクリックすると

wordPressという名前のフォルダができます。

WordPressをダウンロードする

WordPress日本語版でダウンロードします

次にダウンロードしたフォルダをディスクトップなどにすべて展開し解凍します。

MAMPにWordPressのフォルダを移動してインストールする

ダウンロードして解凍したWordPressのフォルダをドラッグアンドドロップでMAMPのフォルダに移動します。

MAMPをイントールしたドライブのMAMP→htdocs内に

Cドライブにインストールした場合・・【C\MAMP\htdocs】
Dドライブにインストールした場合・・【D\MAMP\hhdocs】

以下のようにアドレスバーにlocalhostと入力すると先ほどMAMPで作成したデータベース名【Wordpress/】が表示されるのでクリックします。

さぁ、いよいよwordpressのインストール開始です!

さあ、始めましょう!をクリックします。

以下のように

データベース名・・wordpress

ユーザー名・・root

パスワード・・root

と入力し送信ボタンをクリックします

次にインストール実行をクリックします。

次に以下の4項目を力して検索エンジンがサイトをインデックスしないようにするにチェックを入れてWordPressをインストールをクリックします。

サイトのタイトル

ユーザー名

パスワード

メールアドレス

※これは本チャンのサイトではないのでサイト名などは気にしなくていいですが、検索エンジンにインデックスされないようにしておきましょう。

次に先ほど設定したパスワードを入力してログインボタンをクリックします。

すると通常wordpressにログインするときの画面のようにログイン画面が表示されますので、ユーザー名とパスワードを入力してログインします。

お疲れさまでした。無事ログインできましたか？

2018年6月12日2018年6月15日

MAMPをWindws10にイントールしてサーバーにアクセスする方法

MAMPは元々にMax上で簡単にWebのテストサーバーを構築することができるソフトとして有名なソフトなんですが、
Windows環境でもローカル環境にWebのテストサーバーを構築できるフリーソフトです。
これによりWordpressなどの動的ページのサイトが作れるようになります。

MAMPの特徴

Apache HTTP サーバー（Webサーバー）
PHP（プログラミング言語）
MySQL（データベース）

MAMPをイントールする

MAMPの公式ページ　にアクセスします。

①DOWNLOADをクリックします。

②もう一度DOWNLOADをクリックします。

③ダウンロードされたファイルを開くとインストールが開始されます。

④次にインストーラの画面になりますのでEnglishのままOKをクリックします(日本語の選択はありませんがインストール後に設定可能です)

⑤もう一度Nextをクリックします。

⑥I accept the agreement(私は契約に同意します)をチェックしてNextをクリックします。

⑦初期状態ではC:\MAMPとなっています。

CドライブでよければNextをクリックしてください。

⑧MAMPのままNextをクリックします。

⑨Create a desktop icon(ディスクトップにアイコンを作成する)

ディストップにMAMPのアイコンを表示する時はチェックBOXに入れたままNextをクリックします

⑩もう一度Nextをクリックします

⑪するとMAMPのインストールが始まります

⑫次にMicrosoft Visual C++2010のセットアップが始まります

⑬最後にFinishをクリックして完了です。

サーバー接続

Macではサーバーに接続が必要のようですが、Windowsでは自動でサーバーに接続します。

Stop Serversの画像で見るとわかりやすいので見比べてみてください。

下の画像はまだ接続が完了していない状態でアイコンがグレーです。

次に下のStop Serversのアイコンがグリーンになっていれば、サーバーにアクセス完了しています。

設定

MAMPを起動してPreferencesをクリックします

次にPortsのタグをクリックして以下の内容になっているか確認してください。

Apacheなど違う数値になっていたら

Set Web & MySQL ports to 80 & 3306 をクリックしてください

すると以下のようになりますのでOKボタンをクリックします。

サーバーにアクセスする

Macではサーバーにアクセスするのに Stop Serversからアクセスしてパスワードを入力すると自動で開くのですが、

Windowsでは上の画像のように Open WebStart page をクリックすると以下のように開きます。

こちらの記事もどうぞ・・

MAMPにWordPressをインストールする(Win10)

2018年6月12日2018年6月12日

Atomを日本語化して便利に使おう!オススメのプラグインも!

Atomを日本語メニューに対応にする

atom開きWelcome Giide内にあるInstall a Packageを開きます。

次にInstall a Package内のOpen Installerボタンをクリック

Settingsの中のInsrall Packagesが表示されるので、

japanese-menuと入力してPacagesをクリックするとインストールが始まります。

イントールが終わるとメニューが日本語になっています。

その他にも以下のように色々と便利なプラグインがありますので、必要に応じて使用しましょう。

①自動補完が自動表示する
php-integrator-autocomplete-plus

②ファイルパスを追加してくれる
autocomplete-paths

2018年6月11日2018年6月11日

パソコンに詳しい息子に頼んで自作PC

パソコンを組み立てるのに必要なもの

今回購入した商品は以下の通りです。
動画の編集がスムーズにできるように選定してもらいました。

OS

Microsoft Windows 10 Home Fall Creators Update適用 32bit/64bit 日本語版 (最新) |パッケージ版

M/B(マザーボード)

ASRock Intel H270チップセット搭載 ATXマザーボード H270 Pro4
【チップセット】Intel H270
【Socket】1151
【規格】ATX
【CPU】Socket 1151 新第7世代および第6世代 Intel Core i7/i5/i3/Pentium/Celeron プロセッサーに対応
【対応メモリ】スロット数×4(最大64GB) DDR4 DIMM 2400/2133 non-ECC
【グラフィック出力】HDMI /DVI-D /D-Sub
【拡張スロット】PCIe3.0(x16)×2/ PCIe3.0(x1)×2/ PCI×1/ M.2×1
【ストレージ】SATA3×6/ UltraM.2×2
【マルチGPU】AMD Quad CrossFireX
【インターフェース】USB3.0×7(Type-C x1)
【ネットワーク】GbE×1(Giga PHY Intel I219V)
【オーディオ】Realtek ALC892 7.1CH HD Audio
【OS】Microsoft Windows 10(64bit) /8.1(64bit) /7(32/64bit)
【保証期間】2年
【付属品】クイックインストールガイド、サポートディスク、I/Oパネル、SATAフラットケーブル×2、M.2ソケット用ねじ×3

CPU

Intel CPU Core i5-7600K 3.8GHz 6Mキャッシュ 4コア/4スレッド LGA1151 BX80677I57600K 【BOX】

ベースクロック:3.8GHz
キャッシュ:6M
コア/スレッド:4コア/4スレッド
メモリタイプ:DDR4/ DDR3L
メモリ速度(DDR4/DDR3L):2400/1600
グラフィック:Intel® HD Graphics 630
TDP:91
ソケット:1151

メモリー

Crucial 8GB DDR4 2666 MT/s (PC4-21300) CL19 SR x8 Unbuffered DIMM 288pin CT8G4DFS8266

ブランド：Crucial
フォームファクタ：UDIMM
容量：8GB
仕様：DDR4 PC4-21300 • CL=19 • Single Ranked • x8 based • Unbuffered • NON-ECC • DDR4-2666 • 1.2V • 1024Meg x 64

SSD

Transcend SSD 240GB 2.5インチ SATA3 6Gb/s TLC採用 3年保証 TS240GSSD220S
【製品特徴】TLC NANDフラッシュメモリ
【最大読込速度】550MB/s
【最大書込速度】450MB/s
【インターフェース】SATA III 6Gb/s
【容量】240GB
【保証期間】3年保証
※商品の仕様・外観は製造時期 / 発送のタイミングにより画像と異なる場合があるそうです。
※トランセンドのSSD220はエントリーモデルのSSDです。SATA-III 6Gb/sに準拠しており最大550MB/sの転送速度を提供し、システム起動とロード時間の高速化が期待できます。また、DevSleepモードに対応しているので消費電力を最大90%カットできます。

HDD

Seagate 内蔵ハードディスク 3.5インチ 1TB PCユーザー向け BarraCuda 正規代理店品 ST1000DM010
Seagate 新ブランドHDD : BarraCuda ST1000DM010
ノートやデスクトップPCのためのコスト効率に優れたストレージアップグレード手段
ゲーム、音楽、ムービーなどをストレージに保存
SATA 6Gb/秒のインターフェイスによりバースト時のパフォーマンスを最適化
Seagate Secureモデルではハードウェアベースのデータセキュリティを提供
Self-Encrypting Drive(SED)によりデータを保護
【インターフェイス】 SATA 6GB/s
【回転数】 7200rpm
【キャシュ】 64MB
【保証期間】2年保証

GPU(グラフィックカード)

玄人志向ビデオカード GEFORCE GTX 1060搭載 GF-GTX1060-E6GB/OC2/DF
【チップ】NVIDIA GeForce GTX1060
【メモリ】GDDR5 6GB
【コアクロック】 Standard clock:1,518MHz / Boost Clock:1,733MHz
【メモリクロック】 8,008MHz
【 I/F】 PCI-E 3.0
【出力】 DisplayPort1.4 *1 / HDMI2.0 *1 / Dual Link-DVI
【対応】DirectX 12 / HDCP /RoHS
【補助電源】 6PIN *1
【付属品】ドライバ、マニュアル
【保証期間】1年

CPUクーラー

サイズオリジナルCPUクーラー虎徹 Mark II

Intel 775/115x/1366/2011/2011(V3) AMDユニバーサル対応
ヒートパイプ:6mm径×4本(ニッケルメッキ処理済み)
Intelソケット775/1151/1150/1155/1156/1366/2011(V3含む)
AMDソケットAM2(+)/AM3(+)/AM4/FM1/FM2(+)
LGA1151「Kabylae」LGA2011 V3、AM4「RYZEN」対応
新型スプリングスクリュー仕様「ブリッジ式リテンション」を採用
120mm PWMファンを採用、ファンの換装が簡単な「取っ手付き新型ワイヤークリップ」付属
付属品:グリス、図解入り多言語マニュアル(日本語含む)、RoHS対応の環境配慮型プロダクト
RYZEN対応、PWM仕様120mmKAZE FLEXファン搭載
スプリングスクリュー式ブリッジリテンション、グリス付属

グリス

アイネックスナノダイヤモンドグリス JP-DX1

JunPusブランドの熱伝導性能の高い炭素結晶(nano Diamond)グリス[塗布用ヘラ付] 主成分 : ナノダイヤモンド、シリコン
熱伝導率 : 16W/m・K
熱抵抗値 : 0.05℃・cm²/W
比重 : 2.7g/cm³
動作温度 : [ ピーク ] -50~250℃、[ 推奨 ] -40~240℃
カラー : グレー
内容量 : 3 g
付属品 : グリス塗布用へら
RoHS指令 : 準拠

光学ドライブ(DVDドライブ)

Asus Windows10対応 M-DISC対応最大24倍速書込 SATA接続 DVD/CDライティングソフト付き DRW-24D5MT

SATA接続内蔵型DVDディスクドライブ
DVD±R最大24倍速、DVD±R(2層)最大8倍速書き込み
長期間の保存に向くM-DISCへの書き込みに対応
非動作時に消費電力を最大50%抑える「E-Green」機能
記録データの暗号化を行える「Disc Encryption II」機能
ドラッグ&ドロップで簡単に書き込みを行える「Drag-and-Burn」機能
Windows10対応
バンドルソフト(サイバーリンク):『Power2Go 8』

電源ユニット

Thermaltake Smart 500W -STANDARD- PC電源ユニット PS624 PS-SPD-0500NPCWJP-W

PS624 日本正規代理店品保証3年
80PLUS STANDARD認定取得
350W、500W、600Wの3つの容量をラインナップ
電気信号を確実に伝達するケーブル直付けタイプを採用
負荷状況に応じてファン回転数を制御する「インテリジェントRPMコントロール」対応
パワフルな+12V シングルレーン設計

PCケース

Scytheオリジナル強冷却ATXミドルタワーケース「旋風」SCY-CFS3-BK
搭載電源:なし(別途ATX電源をご用意ください)
M/B対応:ATX/Micro-ATX/Mini-ITX(CPUクーラーは高さ155mmまで)
各種I/O:USB3.0×1 /USB2.0×2 / HDオーディオin/out各1個
搭載ファン仕様:12cm 25mm厚ファン(3Pinもしくは4Pinペリフェラル接続)
回転数:1000rpm±10%、風量:30CFM、ノイズ:20dBA
付属品:レール、ネジセット(ミリネジは付属しません)日本語マニュアル
保証1年間、RoHS対応の環境配慮型プロダクト

モニター

ASUS ゲーミングモニター24型フルHDディスプレイ VX248H
コントラスト比:10,000,000 :1 (ASCRオフ時1,000:1)
上下角度調整(チルト) : 上20°~下5°
スピーカー : 2W + 2W (ステレオ)
フリッカーフリー、ケンジントンセキュリティースロット搭載

【入出力端子】
デジタル入力 : HDMI 1.3 X 2
アナログ入力 : D-Sub 15ピン×1
オーディオ入力 : HDMI x 2、ステレオミニジャック x 1
オーディオ出力 : ステレオミニジャック x 1

【主な付属品】
HDMIケーブルx1、D-Sub 15ピンケーブル x 1、オーディオケーブル x 1、ACアダプター×1、電源ケーブル x 1、日本語クイックスタートガイド x 1、保証書 x 1

【保証期間】3年

その他

マイナスドライバー
プラスドライバー
ニッパー
静電気防止手袋
結束バンド
カッターナイフ

パソコンの組み立て方

組み立時に動画を撮影してたのですが、バッテリー充電切れで最後まで撮影できなかったので今回動画のUPは断念しました。

パソコンの組み立て方は、パソコン工房さんを参考に組み立ててみてはいかがですか？

インストールドライブ

今回、SSDにWindows10をインストールしHDDにその他ソフトをインストールして使用しています。

PCのログイン画面が表示されるまでの起動時間は、約15秒程とかなり短くなり、サクサクと動いています。