無料の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">ヨチヨチと歩く姿がかわいい!アヒルの赤ちゃんですね。2018年5月18日VisualStudio【C言語】メニュー画面作成中のメモです【マイツール】との違いは?前回引き続き、今回はメニュー画面を作っています。最近、色作りに専念しちゃっててやっと本題ですか?って感じですよね。以前作ってたのはここまでで・・でも、今回は少しだけ進みました。マイツールの記述方法とは違いがあり、まず画面表示に座標が指定ができそうになかったことです。(記述方法は違いますが・・・)RUNという命令は、次のプログラムを実行する命令なんですが、C言語ではまだ見つけていません。ENDIF:ENDIF:*1RUN:ハンバイカンリメニュ-:RETURN:*2RUN:得意先マスタ―:RETURN:*3RUN:ザイムカンリメニュ-:RETURN:*4DPON:STOP:C言語ではgoto関数は使わない方がいい?マイツールでよく使っていた飛び先を指定する方法「GOTO」なんですが、まず、下のように記述してみました。困ったあげくに検索すると、やはりgoto関数は戻ってこれないとか色々なことが書かれていて素人は使わない方がいいようなことが沢山書かれていました。上の画像のように画面表示されました。解決方法としては、マイツールの時に使っていたCLS命令それに匹敵するのが【system(cls)】でした。出力表示のための一時停止を使って表示しました。次のメニュー画面が表示されるようになりました。今回少し手こずったのは、数字を入力しても指定の場所にいってくれなかったところでした。)文字として認識してもらえるようにシングルコーテーションを付加した結果素直に動いてもらえました。char関数は、コマンドプロンプト画面から入力された半角英数字を自動的に文字として変数の型charに格納する関数。これもフィッシングメールなので絶対リンクに触れないようにしましょう!!運転席から各窓の作動ができなくなった時の対処方法(バッテリーが完全に上がってしまった時)【重要:必ずお読みください】MUFGカードをかたるフィッシングメールにご注意ください。LINEになりすました危険なメールです。自営になっても再就職手当の申請はできます。