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)

 

 

にほんブログ村 IT技術ブログへ

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

 
にほんブログ村 IT技術ブログへ

パソコンに詳しい息子に頼んで自作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秒程とかなり短くなり、サクサクと動いています。

WP【Twenty Seventeen】初心者でも簡単にできる!タイトル見出しサンプル集22選

WordPress【Twenty Seventeen】初心者の方向けに通常の見出し&テキストの長さに合わせて自動で可変するサンプルを作ってみました。

HTML,CSS初心者の方は🔰マークのところを読んでくださいね。
 

その他の方はスルーしたください。
 

🔰 ビジュアルモードの場合

見出しにしたいテキスト内にカーソルを合わせて以下のように投稿画面の段落から見出しを選択するだけ!!
 

🔰 テキストモードの場合

以下のようにタイトルにしたいテキストを<h2>~</h2>などで囲みます。

<h2>タイトル</h2>
<h3>タイトル</h3>
<h4>タイトル</h4>
<h5>タイトル</h5>
<h6>タイトル</h6>

 

🔰 CSSをコピペする時の注意事項

以下に記載のCSSは全て見出しの部分はh2で記述しています。
1 .entry content {h2  から始まるcssは、h2 を ご自身が使用したい h1~h6 に置き換えて使用してください。
2 .midashi で始まるcssにはhtmlも記述していますので参考にしてください。
3 fontサイズは、現在18px~20pxで指定していますのでご自分のサイトのレイアウトに応じて指定し直してください。

 

↓CSSにLet’s go!↓

シンプルなボーダーライン

 

ごくごくシンプルなラインですが、どんなサイトでも合いそうですね

見出し1のSampleです


↓h2タグを使用しない場合↓

見出し2のSampleです


↓h2タグを使用しない場合↓

見出し3のSampleです


↓h2タグを使用しない場合↓

立体感のあるシンプルでカラフルなライン

 

縦ラインにはgoogleで使われている色も入れて下には影を入れて立体感を出してみました。

見出し4のSampleです


↓h2タグを使用しない場合↓

見出し5のSampleです


↓h2タグを使用しない場合↓

見出し6のSampleです


↓h2タグを使用しない場合↓

見出し7のSampleです


↓h2タグを使用しない場合↓

パステルカラーの可愛らしいライン

 

パステルカラーで上下にラインを入れて少し可愛らしく仕上げてみました。

見出し8のSampleです


↓h2タグを使用しない場合↓

見出し9のSampleです


↓h2タグを使用しない場合↓

見出し10のSampleです


↓h2タグを使用しない場合↓

テキストの長さに合ってラインが可変するサンプルあり

◯でアクセントを付けてみました

パステル系の◯に濃いアンダーラインを引いてみまた。これは、中見出しくらいがいいでしょう!

見出し11と見出し12はテキストの長さに合わせてラインが可変します。

見出し11のSampleです


↓h2タグを使用しない場合↓

見出し12のSampleです


↓h2タグを使用しない場合↓

見出し13のSampleです


↓h2タグを使用しない場合↓

可愛らしいパステルカラーと濃いアンダーラインでシンプルに

見出し14と見出し15はテキストの長さに合わせてラインが可変します。

見出し14のSampleです


↓h2タグを使用しない場合↓

見出し15のSampleです


↓h2タグを使用しない場合↓

見出し16のSampleです


↓h2タグを使用しない場合↓

左右に縦ライン&unicodeの絵文字を使ってみました

見出し17と見出し18はテキストの長さに合わせてラインが可変します。

✔見出し17のSampleです


↓h2タグを使用しない場合↓

🗂見出し18のSampleです


↓h2タグを使用しない場合↓

🍎見出し19のSampleです


↓h2タグを使用しない場合↓

アクセントの◯やラインが薄く消えていくグラデーション

 

見出し20のSampleです


↓h2タグを使用しない場合↓

見出し21のSampleです


↓h2タグを使用しない場合↓

 

見出し22のSampleです


↓h2タグを使用しない場合↓

にほんブログ村 IT技術ブログ WordPressへにほんブログ村 IT技術ブログへ

🍹役にたったら共有してね🍹

【WordPress】改行しても囲い枠内にピッタリ文字が納まった時のまとめ!

display:inline-block;でテキストの長さに合わせる

一行に連続した文字を入力した場合以下のようにdisplay: inline-block;をCSで指定すると以下のように自動で枠が広がっていくのですが

 

これはfukidashi1のサンプルです。改行はしてないのでピッタリと枠内に納まってますね

 

改行すると下のように右側に空白ができてしまいます。

これはfukidashi1のサンプルです。
ここで改行してます。
右に余白ができてしまいますね

 

labelに文字を表示する

 

そこで試したのが”label”に文字を表示させることです。
これは以前アコーディオンみたいなのを作っていた時に文字と枠の間に空白ができないのが記憶の片隅に残っていてこれは試す価値ありだな!!・・・と思い試してみました!
参考にさせて頂いたサイトは、[CSS]可変するレイアウト幅の最大値を制限する簡単な方法 です。ありがとうございました。

 

するとこれは通常と同じ表示なのですが

 

改行した時以下のように、右側にあった空白がなくなっていました。

 

もっとわかりやすく表示すると

↓こんな感じです。↓

これはfukidashi1のサンプルです。改行はしてないのでピッタリと枠内に納まってますね

 

Excel
Word
PowerPoint

 

 

 

文字数が少ないとわかりやすいですね!

にほんブログ村 IT技術ブログ WordPressへにほんブログ村 IT技術ブログへ