無料のHTML・CSSテンプレートをWordPress化する方法No.1WordPressにテーマを認識させる素材ををダウンロードするまず、商用OKの無料のフォルダをダウンロードして解凍しておきます。商用OKですが、一部を抜粋すると、アダルトサイト法律に反するサイトモラルに反するサイトなどのサイトにはご利用できません。利用規約も必ず読んでくださいね。今回ダロンロードするのは、No.14です。今回カスタマイズするのに使用するデザインのサイト名とURLは下記のとおりです。サイト名:CoolWebWindowURL: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】の順です。以下の画像は、フォルダを作成した後の画像ですが手順としては1任意のテーマを入力します。私はmythemeとしました。2フォルダ作成をクリックします。すると以下の画像のようにフォルダが作成されます。次に【mytheme】の中に【style.css】と【index.php】のファルを作成します。次にstyle.cssとindex.phpのをファイル編集をします。style.cssにチェックを入れ編集をクリックします。※MAMPの方はAtomを使って以下の画像のようにファイルを作ります。すると以下のようにか編集画面が表示されます。※保存する時ファイル名の文字コードはUTF-8に必ずしておいてください。次に以下のstyle.cssに以下のコードをコピペして記述してください。ライセンスのURL*/index.phpにはダウンロードしてきたsample.htmlのファイルの中身を今回は使用しますので以下のコードをindex.phpとして記述してください。<p>サイトの説明文やキーワードを入れてください。SEO対策にもなります。このページはアイキャッチ画像がないタイプになります。id="pr"><p>サイトの説明文やキーワードを入れてください。SEO対策にもなります。id="main"><h2>制作者より</h2><h3>テンプレートについて</h3><p>このページはアイキャッチ画像がないタイプになります。--></body>wordpressの管理画面から外観→テーマをクリックすると以下の画像のようにテーマとして認識されますので一旦有効化しておきます。画像を表示したい時はscreenshot.pngとして画像をテーマの中に置くことにより自動的に認識されるようになります。先ほど、style.cssファイルを作った同じ階層に今度は【top.php】というファイルを作りダウンロードしたindex.tmlのファイルの中身をそのまま記述します。<p>サイトの説明文やキーワードを入れてください。SEO対策にもなります。ホテルなどのサービス業に最適なCSSデザインテンプレートです。Webページを制作するにあたって、いろいろなサイトを参考に見たりするのですが、「開放感」をイメージしているホテルのサイトが多いと感じました。デザイン的に言えば、ヘッダー背景やメニューバーを画面全体に表示することで、開放感を表現しています。そのあたりも参考にしました。リゾートホテルや旅行向けホテルはリッチ感を出すために、どんな配色でも「深い」色を使っているのが特徴的だと思いました。完全幅固定タイプです。全体的な横幅は787px、メインコンテンツ部分547px(余白除く)、サブコンテンツ部分200px(余白除く)です。サブコンテンツ部分はメニューやバナー等を配置することを想定し、幅を広く取りました。イメージ画像を削除したタイプのサンプルはこちらから。画像はCoolWebWindow作です。色の変更などの編集も可能です。ご自由にお使いください。ページ上部への戻りは、JavaScriptを用いて、なめらかにスクロールしながら移動するようにしております。ヘッダーの「お問い合わせ」のボタンは、JavaScriptにてロールオーバーをしてます。ロールオーバーをしたい画像がありましたら、imgタグに「.rollover」というクラスを指定してください。ロールオーバー用の画像は、ロールオーバーしない画像名に「_on」を付けた名前にしてください。カスタマイズはご自由になさってください。target="_blank">CoolWebWindow</a>にお知らせください。以下、サンプルタグになります。ご利用の際は参考にしてみてください。○○新聞に取材を受けました。誠に勝手ながら5月2日から6日まで長期休暇日とさせていただきます。/>li要素の中はブロックレベルのタグを使用することが出来ます。&lt;p&gt;タグも記述することが出来ます。/>dd要素の中はブロックレベルのタグを使用することが出来ます。&lt;p&gt;タグも記述することが出来ます。dt要素にはインライン要素しか記述することができません。id="pr"><p>サイトの説明文やキーワードを入れてください。SEO対策にもなります。id="main"><h2>制作者より</h2><h3>テンプレートについて</h3><p>ホテルなどのサービス業に最適なCSSデザインテンプレートです。</p><p>Webページを制作するにあたって、いろいろなサイトを参考に見たりするのですが、「開放感」をイメージしているホテルのサイトが多いと感じました。デザイン的に言えば、ヘッダー背景やメニューバーを画面全体に表示することで、開放感を表現しています。そのあたりも参考にしました。</p><p>また、リゾートホテルや旅行向けホテルはリッチ感を出すために、どんな配色でも「深い」色を使っているのが特徴的だと思いました。</p><p>完全幅固定タイプです。/>全体的な横幅は787px、メインコンテンツ部分547px(余白除く)、サブコンテンツ部分200px(余白除く)です。サブコンテンツ部分はメニューやバナー等を配置することを想定し、幅を広く取りました。イメージ画像を削除したタイプのサンプルはこちらから。</a></p><h3>画像について</h3><p>画像はCoolWebWindow作です。色の変更などの編集も可能です。ご自由にお使いください。</p><h3>ページ上部への戻りリンクについて</h3><p>ページ上部への戻りは、JavaScriptを用いて、なめらかにスクロールしながら移動するようにしております。</p><h3>画像のロールオーバーについて</h3><p>ヘッダーの「お問い合わせ」のボタンは、JavaScriptにてロールオーバーをしてます。ロールオーバーをしたい画像がありましたら、imgタグに「.rollover」というクラスを指定してください。ロールオーバー用の画像は、ロールオーバーしない画像名に「_on」を付けた名前にしてください。</p><h3>カスタマイズについて</h3><p>カスタマイズはご自由になさってください。/>制限はありません。target="_blank">CoolWebWindow</a>にお知らせください。/></p><h2>サンプルタグについて</h2><p>以下、サンプルタグになります。ご利用の際は参考にしてみてください。class="information"><dt><span>2009-04-28</span></dt><dd><div>○○新聞に取材を受けました。/></div></dd><dt><span>2009-04-24</span></dt><dd><div>休業のお知らせ。誠に勝手ながら5月2日から6日まで長期休暇日とさせていただきます。/>li要素の中はブロックレベルのタグを使用することが出来ます。&lt;p&gt;タグも記述することが出来ます。/>dd要素の中はブロックレベルのタグを使用することが出来ます。&lt;p&gt;タグも記述することが出来ます。dt要素にはインライン要素しか記述することができません。--></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です。Seventeen】初心者の方向けに通常の見出し&テキストの長さに合わせて自動で可変するサンプルを作ってみました。HTML,CSS初心者の方は🔰マークのところを読んでくださいね。その他の方はスルーしたください。以下のようにタイトルにしたいテキストを<h2>~</h2>などで囲みます。以下に記載のCSSは全て見出しの部分はh2で記述しています。置き換えて使用してください。始まるcssにはhtmlも記述していますので参考にしてください。fontサイズは、現在18px~20pxで指定していますのでご自分のサイトのレイアウトに応じて指定し直してください。#205a97;}立体感のあるシンプルでカラフルなライン縦ラインにはgoogleで使われている色も入れて下には影を入れて立体感を出してみました。gray;}パステルカラーの可愛らしいラインパステルカラーで上下にラインを入れて少し可愛らしく仕上げてみました。gray;}テキストの長さに合ってラインが可変するサンプルあり◯でアクセントを付けてみましたパステル系の◯に濃いアンダーラインを引いてみまた。これは、中見出しくらいがいいでしょう!見出し11と見出し12はテキストの長さに合わせてラインが可変します。50%;}可愛らしいパステルカラーと濃いアンダーラインでシンプルに見出し14と見出し15はテキストの長さに合わせてラインが可変します。#205a97;}左右に縦ライン&unicodeの絵文字を使ってみました見出し17と見出し18はテキストの長さに合わせてラインが可変します。inline-block;をCSで指定すると以下のように自動で枠が広がっていくのですがこれはfukidashi1のサンプルです。改行はしてないのでピッタリと枠内に納まってますね改行すると下のように右側に空白ができてしまいます。これはfukidashi1のサンプルです。bold;}labelに文字を表示するそこで試したのが”label”に文字を表示させることです。ありがとうございました。するとこれは通常と同じ表示なのですがこれはfukidashi2のサンプルです。改行してないので枠内に綺麗に納まってますね改行した時以下のように、右側にあった空白がなくなっていました。これはfikidashi2のサンプルです。ここで改行しましたが文字と枠の隙間がなくピッタリ!綺麗に納まりました。50%;}もっとわかりやすく表示すると↓こんな感じです。↓これはfukidashi1のサンプルです。改行はしてないのでピッタリと枠内に納まってますねExcelWordPowerPointこれはfukidashi2のサンプルです。【WordPress】初心者向け1記事に装飾枠を付けるサンプルこの記事のサンプルは、このページのみcssを反映させてますので、https://暮らしのハンドノート.comからダイレクトにアクセスされた方にはサンプル画像が表示されません。サンプル画像が見えない時は、ここをクリックして下さい。Seventeenの追加cssを使うと全体的にcssが反映してしまいますね。一部の記事にcssを反映させたい時は、カスタムフィールドにcssを記述しましょう。カスタムフィールドの作成方法は、WordPressのカスタムフィールドを使用し投稿する方法で説明していますので参考にして下さい。※box名が重複した場合はbox名のみ重複しないbox名を使って下さい。class="box10">BOXの中に入れる文字</div>box10を使用したい任意のbox名(数値)に変更するだけです。(直線)を使っています。詳細はbox10の中に記述しています。center}このFontAwesomeのアイコンを使うには少しだけ準備する必要があります。rel="stylesheet">WordPressの[ダッシュボード]⇒[外観]⇒[テーマの編集]⇒右側のバーの[header.php]の<head>〜</head>の中に貼り付けます。inline-block;を使います。center}画像と吹き出し枠を横に並べる画像と枠や文字などを横に並べるにはalign属性を使います。画像に記述する時は下コードを参考にして下さい。【align=”left】で画像に回り込みを指定して表示しています。可愛い3匹のワンちゃんですね。clear="all">left、right、allのいずれかを指定。画像が左側にあるときの回り込み解除は、値にleftを指定します。画像が右側にあるときの回り込みを解除は、値にrightを指定します。both;"></div>を使います。border-radiusを使って●を作って少し可愛げに右下には少し影を付けて立体感をだしてアレンジしてみました。こちら表示は左marginを330pxで指定して表示しています。歩く姿がかわいい!アヒルの赤ちゃんですね。アヒルの赤ちゃんですね。class="fukidashi1">ヨチヨチと歩く姿がかわいい!アヒルの赤ちゃんですね。↓OneDriveは携帯電話、タブレット、コンピューターを使えばどのデバイスからでもアクセスでき更新もできるのでとても便利です。Pageであれば表示可能です。OneDriveの登録がない方は、OneDriveを無料で新規登録しましょう。OneDriveにアクセスして「OneDriveに移動」します。OneDriveにファイルをアップロードするPCなどの各デバイスからアップロードする。OneDriveからご自分がアップロードしたいフォルダをクリックして開きます。ここでは「ドキュメント」をクリックします。次に、OneDriveからExcelのファイルをアップロードします。画面上部にある「アップロード」をクリックし「ファイル」を選択します。次にご自身がPCなどに保存している「フォルダ」から「ファイル」をクリックし表示されてる画面右下にある「開く」ボタンをクリックします。その他にも下記の通りOneDriveにアップロードしたり、保存する方法もあります。1.Excelを保存する時にExcelの「名前を付けて保存する」の画面からOneDriveに直接保存する。2.お使いのデバイスにOneDriveアプリがある場合は直接OneDriveに保存する。3.お使いのデバイスからOneDriveにドラッグする。OneDriveから埋め込みコードを取得する次にアップロードしたファイル右上にある「◯をクリック」すると◯の部分にチェックマークが入りますのでその後「</>埋め込み」をクリックします。すると、下画像のように緑点線内に埋め込みを生成する画面が表示されますので「生成」ボタンをクリックします。次に、埋め込み生成されたコードをクリックすると下画面のようにコードの背景色が青色に変わります。青色に変わったのを確認し、ショートコードの「Ctrl+C」を使ってコピーするか、埋め込みコードが書かれているところで右クリックし、表示されたメニューの中からコピーをクリックします。中から編集したいページの「編集」をクリックし投稿したいページを表示します。WordPress投稿画面右上にある「テキスト」をクリックし「Ctrl+C」で貼り付けます。数値の部分を好みの大きさになるように変更します。投稿画面の「テキスト」や「html」のタブをクリックして埋め込みコードを貼り付ければOKです。←htmlが記入できるところ❢と覚えておくと良いでしょう。OneDrive経由で表示する時のまとめ1.OneDriveに表示したいファイルをアップロードするか保存する。2.表示したいファイルの右上にある◯をクリックしチェックをONにする。3.OneDrive上部にあるメニューバーから「</>埋め込み」をクリックし、「生成」ボタンをクリックし、コードをコピーする。4.ブログやWebページのhtml形式ノページに貼り付ける。今回は、Excelをhtml形式で保存したファイルを「ドメイン名/関数一覧表.html」というアドレスにアクセスしてExcelを表示させる方法をご紹介します。2018/5/22追記します。フレンドリーではありませんと怒られてしまったので、ファイルの横幅を短くし修正したものに変更しましたので現在のアドレスは「ドメイン名/excel1.html」になっています。←文字にリンクをして表示ができます。※Excelの詳しい保存方法は、前回の記事「初心者でも簡単Excelの表を色付けしたままWordPressの記事に投稿する方法」の「2.Excelファイルをhtml形式にして保存する」で説明していますのでご覧になってください。それでき、まず・・・Xサーバーのログインからファイルマネジャーをクリックします。次にユーザー名とパスワードを入力しログインをクリックします。するとドメインを登録しているファイルが一覧で表示されますので、アップロードするドメインのファイルをクリックします。いうページが開き、ドメインをとったファイル名が表示されます。すると下の画像のようにファイルの中にpubric.htmlというファイルがあります。これがWordPressがインストールされているファイルになりますので「pubric.html」をクリックします。次に表示された画面の右上にパス名が「ドメイン名pubric_html」となっているのが確認できると思います。次にファイル選択をクリックします。すると一覧で表示されるのでアップロードするファイルをクリッします。関数一覧表.html」をクリックします。すると下の画像のようにファイルを選択の横に関数一覧.htmlと表示されているのが分かると思います。次に、このファイルを保存した時文字コードを「UTF-8」で保存していますので文字コードを「UTF-8」にします。その後「アップロード」のボタンをクリックします。これでサーバーにアップロードが完了できました。後は、WordPressなどの投稿記事に画像や文字を入力しリンクを「ドメイン名/ファイル名」に設定すればOKです。下の画像のようにExcelをwebページとして保存した時にfilesのフォルダーとhtmlのファイルが同時にできた場合は、xサーバーのpubric_htmlの中に(pubric_htmlを開いた状態で)1.「Excelデータベース関数・・・・files」の名前のファルダを作ります。2.作ったfileフォルダの中にpcなどのデバイスからフォルダの中身を全てアップロードします。3.htmlファイルは、pubric_htmlを開いた状態でアップロードします。4.関連付けるリンクは「ドメイン名.com/Excel・・・・.html」ファイル名にします。参考例・・・私のドメインはhttps://暮らしのハンドノート.comですので、下の画像をそままアップロードした場合は、「https://暮らしのハンドノート.com/Excelデータベース関数バージョン適用対象表.html」となりこれをリンク先に設定します。補足:Excelを「.xls」や「.xlsx」のファイル形式のままアップロードするには、XサーバーでMINE設定をする必要があります。以降のバージョンでは自動的に登録されますがXサーバーはLinuxの為xサーバーのMINE設定が必要になります。MIne設定をすることによりサーバー側で新しいファイル形式が認識されるようになります。MINE設定とは、インターネットで使用される拡張子とファイルの種類を関連づけるもので、サーバーとファイルを関連付ける役目を果たします。表示方法は、サーバーにアップロードした時と同じになりますが、これはかなり簡単です。出来上がりの表示はこんな感じです。←文字を入力しリンク先を設定しています。wordPressの「ダッシュボード」→「メディア」→「新規追加」の順にクリックすると「ドロップするかファイルを選択する」ようになってますので今回は複数のファイルをまとめてアップロードしたいので、「ドロップ」します。アイコンの付いたhtmlファイル1つです。フォルダをダブルクリックして、開きます。すると下のようなファイルがありますので「.xml」以外のファイルを全て選択し、WordPressにアップロードします。アイコンが付いたhtmlのファイルもアップロードします。アイコンのファイルが変わり<>表示されていますので「編集」をクリックします。すると、アップロードしたファィルのURLが下の画像のように表示されますので、このURLをコピーし投稿記事のリンク先に設定します。投稿記事のみに全てのソースコードをコピペして投稿するこの記事を使った場合は下の表のようになりますがCSSを<style>~</style>で囲ってhtmlの中に入力しているので、どうやら非推進のようです。○この表示方法は前回投稿していますのでご覧になってください。CSSを使用していて、cssの反映が上手くできなかったこともあり、Excelのcssを反映させるたびに追加cssなどを使っても・・と思い個別にcssが設定できないか検索してたところNaifixさんの「WordPressで記事ごとに個別のCSSを設定する方法3選」という記事に出会いました。その記事の中からプラグインを使わずカスタムフィールドを利用する方法をそのまま使わさせて頂きました。以下のコードを追記します。いう名前のカスタムフィールドに書かれた値を出力しますよ」というものだそうです。カスタムフィールドを表示するWordPressの「投稿」画面上に表示されている「表示オプション」をクリックし、「カスタムフィールド」にチェックをいれます。すると投稿画面下にカスタムフィールドが使用できるようになっていますので「新規追加」をクリックします。次に名前の欄に「article_css」と入力し、値の欄にCSSを入力する準備ができましたので次はCSSをこの値の欄に入れる為の準備をします。※Excelの詳しい保存方法は、前回の記事「初心者でも簡単Excelの表を色付けしたままWordPressの記事に投稿する方法」の「2.Excelファイルをhtml形式にして保存する」で説明していますのでご覧になってください。cssとhtmlの整理をするまず、webページしとて保存したfilesフォルダを開くと4つのファイルができています。今から使うのは「sheet001.html」と「stylesheet.css」のファイルです。『sheet001.html』のファイルをダブルクリックで開くとwebページが開きますのでwebページ上で「右クリック」し、「フレームのソースを表示」をクリックします。下の画像のようにこのフレームのソースが表示されますのでショートカットキーの「Ctrl+A」で全て選択し「Ctrl+C」でコピーします。このソースをWordPressの画面に戻り投稿記事の「テキスト」に全て貼り付けます。※TeraPadやメモ帳などに貼り付けて必要なソースだけをWordPressに貼り付けてもいいでしょう。次に、少し下の方にいくと、</style>があります。その直前に「-->」がありましたらこの前にカーソルをあわせて不足しているCSSのコードを貼れる準備をします。</style>はCSSコードの終わを示します。次に、filesフォルダの中にある「stylesheet.css」のファイルをダブルクリックで開きます。するとメモ帳などで開かれますので、これもショートカットキーの「Ctrl+A」で全て選択し「Ctrl+C」でコピーします。次にWordPressの投稿画面に戻り下画面の位置「-->」の直前にカーソルをあわせた状態でCSSをショートコードの「Ctrl+V」で貼り付けます。ExcelのcssをカスタムフィールドにコピペするCSSとして必要なのは<style>~</style>の間です。先程wordpressの投稿記事に貼り付けた中からこの部分を切り取りカスタムフィールドに貼り付けます。現在wordpressの投稿記事にあるのは下記コードですね。CSSとして必要なのは、このコードの中で14~274行目になります。必要なコードをコピーし、切り取りしカスタムフィールドに貼り付けしてみましょう。xmlns:v="urn:schemas-microsoft-com:vml"xmlns:o="urn:schemas-microsoft-com:office:office"xmlns:x="urn:schemas-microsoft-com:office:excel"。