無料の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に以下のコードをコピペして記述してください。

 

 

 

 

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

 

 

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

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

 

 

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

 

 

次にダウンロードしてきたファル【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です。

 

 

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

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にログインするときの画面のようにログイン画面が表示されますので、ユーザー名パスワードを入力してログインします。

 

 

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

 

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

Twenty Seventeenの「追加CSS」はCSS初心者でもわかりやすい!ちょっと本気で説明してみた。

CSSのカスタマイズ機能が備わったTwenty Seventeen

CSS初心者でもわかりやすい、Twenty Seventeenの「追加CSS」の使い方をword press初心者の方向けに解説します。

※ウィジェットにカスタマイズしたい画像などを使って「追加CSS」を使用すると、保存をしない状態でも、表示が変わるので、リアルタイムに変更が表示されてとても便利です。

CSS初心者の方には、特にオススメです。

1.Twenty Seventeenの「追加CSS」の使い方

wordpressの「ダッュボード」→「外観」→「カスタマイズ」の順にクリックします。

すると次のように左下に追加CSSがありますので「追加CSS」をクリックします。

すると左側次の画面になりCSSがカスタマイズでるるようになります。初期状態では以下のように表示されていると思います。

CSSでは、/*○○○○○ */間に記載する文字はコメントと認識され、CSSの表示には影響ありませんので、自分のわかりやすい説明などを記入することをお勧めします。

/*=コメントの開始を表します。

*/=コメントの終了を表します。

補足・・・” {  ” が足りなかったりして、 記途が間違っていれば下記のように表示されますので、そのときは再度確認してください。

訂正すると上記のメッセージの表示はなくなります。

それでは、実際に追加CSSに記途してみます。

まずは、下記のコードをそのままコピペしてください。

コピペが終わりましたら、保存して公開をクリックします。

2.Twenty Seventeenの追加CSSで画像に文字を重ねて表示してみる。

 

2-1.クラス名を指定する。

「ダッシュボード」→「投稿」→「新規追加」の順にクリックすると新規の投稿ができるようになりますね。

テキストモードにして下記のコードをコピペします。

 

2-2.表示したい画像を追加する

</div>の直前に画像を追加します。

投稿画面左上にある「メディア追加」から追加します。

 

一度ビジュアルモードにし、その後テキストモードに変更すると下記のように表示が変わっていると思います。

imgのクラス名の位置がかわってますね。 これでOKです。

次に画像に重ねる文字を入力します。

2-3.画像の左上に重ねる文字を入力する

まず画像の左上に表示させる文字を</div>の前に入力します。

これまでのまとめ

観光スポット

次に画像の下に重ねる文字を入力する

2-4.画像の下に重ねる文字を入力する

先ほどの2-3.のまとめの</div>の前に下記を入力します。

これまでのそうまとめ↓

最終仕上がりはこんな感じです。↓

観光スポット

つつじ寺

次回は、この記事のCSSの内容を説明します。

wordpress-popular-posts/style/wpp.cssでcssのお勉強

wordpress-popuular-postsでサイドバーに人気記事を表示しているのですが、なかなか自分の思うように表示されないので、CSSのお勉強を兼ねての備忘録です。

 

1.overflow

 

overflowプロパティは、はみ出た内容の表示方法を、どう処理するかを指定するプロパティ。

overflow:visible; 領域をはみ出して表示する
overflow:hidden; はみ出た部分を表示しない
overflow:scroll; スクロールで表示する
overflow:auto; 自動

 

2.float

 

floatプロパティは、指定された要素を左または右に寄せて配置する際に使用します。 後に続く内容は、その反対側に回り込みます。

注意:floatプロパティは、positionプロパティで static以外の値が指定されている要素には適用されない。

float:left; 指定した要素を左に寄せます。後に続く内容はその右側に回り込みます。
float:right; 指定した要素を右に寄せます。後に続く内容はその左側に回り込みます。
float:none; 初期値。フロートの指定はなし。
float:inherit; 親要素のフロートの値を継承する。

 

3.clear

 

clearプロパティは、floatプロパティで左寄せ、 または右寄せを指定された要素に対する回り込みを解除する際に使用する。

clear:left; 左寄せされた要素に対する回り込みを解除する。
clear:right; 右寄せされた要素に対する回り込みを解除する。
clear:both; 左寄せ・右寄せされた全ての要素に対する回り込みを解除する。
clear:none; 初期値。回り込みを解除しない。

 

4.display

 

displayとは、要素の表示形式を指定するプロパティで、主にblock、inline、inline-block、noneの4つで他にも、list-item、run-in、tableなど色々とありますが今回使うのは、block、inline、inline-blockなので、この要素についてまとめます。

 display block inline inline-block
並び 下に置かれる要素 横に並ぶ要素 横に並ぶ要素
幅・高さの指定 できる できない。(文字の大きさ・長さなどで決まる) できる
余白の設定 marginとpaddingを指定できる ・左右のmarginとpaddingは指定できる

・上下のmarginは指定できない。

・上下のpaddingを指定すると表示がかぶってしまう。

marginとpaddingを指定できる
text-align 要素の中身に適応される。 親ブロックに付けることで指定できる。 親ブロックに付けることで指定できる。
vertical-align 指定できない 指定できる 指定できる

 

4-1.wordpress-popuular-postsのウィジェットを使って表示するのによく使われるhtmlタグ

要素 開始タグ 終了タグ 用途
ブロックレベル要素のタグ <div> </div> <DIV>~</DIV>で囲んだ範囲をひとかたまりとして定義する。 align属性で位置を指定したり、スタイルシートを適用するのに用います。
<p> </p> <P>~</P>で囲まれた部分がひとつの段落であることを表します。
<ul> </ul> 順序のないリストを表示するタグでリスト項目は<li>タグで指定します。
<ol> </ol> 順序のあるリストを表示する際に使用します。 リストの各項目は<li>タグを用いて記述します。
<li> </li> リストの項目を記述する際に使用します。 リスト表示したい項目に<li>タグをつけて<ul>~</ul> または<ol>~</ol>の間に記述します。
<h1>~<h6> </h1>~</h6> 見出しを付けるタグで<h1>が最上位の見出しで<h6>が最下位の見出し(小見出し)となります。

 

5.marginとpadding

 

marginは、borderを境に外側の余白を指定するプロパティです。

paddingは、borderを境に内側の余白を指定するプロパティです。

5-1.marginの指定の仕方

marginとは上下左右のマージンを一括で指定するプロパティです。上下左右を異なるマージン幅にすることができ、その場合は、スペースで区切って複数の値を指定します。負の値を指定することもでき、複数の領域を重ねて表示させるような表現も可能です。

主に使われる指定方法は次のように、個別で4タイプショートハンドで4タイプがあります。それぞれの値は、半角スペースで区切って記述します。

長さ(初期値は0)数値+単位(px, %, pt, emなど)で指定します。Auto自動でマージンを指定します。

個別 margin-top: ○px; borderより外側に上の余白を指定
margin-right: ○px; borderより外側に右の余白を指定
margin-bottom: ○px; borderより外側に下の余白を指定
margin-left: ○px; borderより外側に左の余白を指定
ショートハンド margin: ○px; borderより外側に「上下左右」共通に余白を指定
margin: ○px ○px; borderより外側に「上下」「左右」の順に余白を指定
margin: ○px ○px ○px; borderより外側に「上」「左右」「下」の順に余白を指定
margin: ○px ○px ○px ○px; borderより外側に「上」「右」「下」「左」の順に余白を指定(時計回り)

※ブロックボックスが上下に並ぶ場合は、隣接する垂直方向のマージンが相殺されます。

上下に隣接する要素のmargin同じ場合、相殺されてしまい、20pxの場合40pxではなく20pxになります。

margin: 20px 0px 20px 0px;だと上と下にそれぞれに20pxの余白を設定の場合は20pxの空白がブラウザで表示されます。(20px+20px=40px)にはなりません。

margin: 20px 0px 40px 0px;だと値の大きい40pxの空白がブラウザの表示となります。

 

5-1-1.ブラウザのデフォルトの余白を取り除く方法

一般的なブラウザでは、リストの周囲に適度な余白が設定されていますので、ブラウザで設定されている余白を取り除きたい場合は、ul要素(またはol要素)に対して次のスタイルを設定します。

  • ul要素に設定する場合 … 1em 程度
  • ol要素に設定する場合 … 1.5em2em 程度が目安

5-2.paddingの指定の仕方

paddingとは上下左右のパディングをまとめて指定するプロパティです。

幅(初期値は0)数値+単位(px, %, pt, emなど)で指定します。パーセンテージによる指定の場合、幅は包含ブロック(親要素など)の大きさ比例します。

paddingには負の値やautoを指定することはできません。

個別 padding-top: ○px; borderより内側に上の余白を指定
padding-right: ○px; borderより内側に右の余白を指定
padding-bottom: ○px; borderより内側に下の余白を指定
padding-left: ○px; borderより内側に左の余白を指定
ショートハンド padding: ○px; borderより内側に「上下左右」共通に余白を指定
padding: ○px ○px; borderより内側に「上下」「左右」の順に余白を指定
padding: ○px ○px ○px; borderより内側に「上」「左右」「下」の順に余白を指定
padding: ○px ○px ○px ○px; borderより内側に「上」「右」「下」「左」の順に余白を指定(時計回り)

 

6.border

 

6-1.ボーダーのスタイルを指定する

borderプロパティでは、ボーダーのスタイル・太さ・色について上下左右バラバラの指定をすることはできません。 上下左右のボーダーを異なったものにする場合には、 border-top、 border-bottom、border-left、 border-right、 または、 border-style、 border-width、 border-color、 で指定します。

borderスタイルの値 borderスタイルの内容
border: none ボーダーは表示されません。表のセルなどのボーダーが重なり合う場合は他の値が優先されます。これが初期値です。
border: hidden ボーダーは表示されません。表のセルなどのボーダーが重なり合う場合はこの値が優先されます。
border: solid 1本線で表示されます。
border: double 2本線で表示されます。
border: dashed 破線で表示されます。
border: dotted 点線で表示されます。
border: groove 立体的に窪んだ線で表示されます。
border: ridge 立体的に隆起した線で表示されます。
border: inset 上と左のボーダーが暗く、下と右のボーダーが明るく表示され、ボーダーで囲まれた領域全体が立体的に窪んだように表示されます。上下左右の一部だけに指定しても立体感は出ません。
border: outset 上と左のボーダーが明るく、下と右のボーダーが暗く表示され、ボーダーで囲まれた領域全体が立体的に隆起したように表示されます。上下左右の一部だけに指定しても立体感は出ません。

※補足・・・border-radiusプロパティでは、角を丸くしたりできます。

6-2.borderの太さと色を指定する

borderの太さの指定は、数値やキーワードを使って指定します。

キーワードで指定した場合はブラウザにより表示が異なります。

borderの色は、#000fffなどの記述やカラーネームで色指定をします。

数値 px 1ピクセルを1とする単位で、実際に表示されるサイズはモニタの解像度により変化します。
em フォントの高さを1とする単位です
ex 小文字の「x」の高さを1とする単位です。
キーワード thin 細い
medium 普通
thick 太い

 

6-2-1.wordpressの段落で見出し3を指定した場合のcssの記途例

6-2-2.wordpressで投稿記事に反映させたい場合の記途例

 

html側(投稿記事のテキストに記入)

css側

ブラウザでの実際の表示

反映させたい文字をここに記入

↑これをブラウザで表示する際に重要なことに気がつきました。

cssを追加するのにSimple Custom CSSを使っていたのですが・・どうやら、このカスタムcssで、うまく読み込めていなかったことを発見 💡 !!

Twenty Seventeenにある追加cssで無事解決しました 🙂

WordPress Ping Optimizerの設定方法

WordPressをインストールしてすぐにプラグインのインストールをしておくことをお勧めするのが、WordPress Ping Optimizerです。

WordPressのデフォルト設定では、記事を更新するたびにPingが送信されてしまいます。

何度もPing送信をするとGoogleなどにスパム判定される恐れもあります。それを回避するのに役立つのが、WordPress Ping Optimizerです。WordPress Ping Optimizerは、投稿記事の初回だけPingを送信し、その後のping送信はStopしてくれるプラグインです。

 

1.Ping送信とは

 
ブログから新しい記事の更新を「記事タイトル」や「概要」・「URL」などの記事情報を、登録している「PINGサーバー」に送信してくれる機能を指します。

 

2.WordPress Ping Optimizerのイントール方法

 
Word pressのダシュボードから「プラグイン」→「新規追加」をクリックします。

次にキーワードにWordPress Ping Optimizerと入力します。

次に、WordPress Ping Optimizerを「今すぐインストール」をクリックします。インストールが終わりましたら、有効化をします。

 

3.WordPress Ping Optimizerの設定

 
ダッシュボードの「設定」→「WordPress Ping Optimizer」をクリックします。

するとWordPress Ping Optimizerの設定画面になります。

1ping送信先リストです。

現在、WordPressに設定しているping送信先が表示されます。

2Enable pinging(ping送信を有効にする)にチェックが入っているか確認して下さい。

3Save Settings(設定を保存する)で完了

3-1.現在登録しているping送信先

 

 
現在のインデックス状況を調べたいときは、下記の記事を参考にして下さい。

サイトがインデックスされているか確認してGoogleにインデックスしてもらう方法