小林紗絵 – インクループ株式会社｜神奈川県相模原市 ホームページ制作、WEBマーケティング https://incloop.com インクループ株式会社は、お客様の顧客獲得をマーケティングを活用して支援する会社です。 データ分析、市場調査に基づく企画立案、コンテンツ制作、運用を通じてお客様の目標を実現します。 Thu, 19 Nov 2020 00:59:16 +0000 ja hourly 1 https://wordpress.org/?v=4.9.19 印象に残るデザインを簡単に！5分で作るおしゃれなワードアート https://incloop.com/design_wordart/ Thu, 01 Aug 2019 06:30:33 +0000 https://incloop.com/?p=19805

こんにちは！ 皆さんは印象に残るWebサイトといえばどのようなものを思い浮かべますか？ 以前ご紹介した2019 […]]]>

こんにちは！
皆さんは印象に残るWebサイトといえばどのようなものを思い浮かべますか？
以前ご紹介した2019Webデザインにもある、動画、アニメーションをつける等
目を引くものが良さそうですね！

こんにちは！前回、前々回とHTML、CSSの基本をテンプレート付きで解説しました。今回はブレイクタイムということで、2019年のWebデザインのトレンドをご紹介したいと思...
2019Webデザイン｜知っておきたい最新トレンド3選 - incloop.com

今回は他サイトと差をつけられるおしゃれなデザイン制作ツールをご紹介！
5分でできるので、ぜひトライしてくださいね^^

制作ツールサイトへアクセス

①https://wordart.com/へアクセス。

好きな文字の入力から

②次のページでImportをクリック


③ダイアログ内にあるInput your text here部分にテキスト入力
※基本は英字となりますが、⑥で日本語用のフォントを自身で追加するとVisualizeで反映されるようになります


④入力後、Import wordsをクリック

形、フォント、レイアウトを選択

⑤つづいて「SHAPES」のタブをクリック。左端のメニューもしくは絵の中から探し好きな形をクリック。


⑥「FONTS」のタブをクリックし、好きなフォントをクリック。


⑦「LAYOUT」のタブをクリックし、好きな文字の配置をクリック。
Densityで密度を調整できます。


⑧「STYLE」のタブをクリックし、任意で詳細を調整。


Words colors：shapeはデフォルトの色、Customで好きな色を選択。選択時はCustom横の3色部分から。
Color emphasis：色の強調。
Background color：全体の背景色。
Background image：選んだ形の背景色。
Animation speed：右側の完成形の文字にマウスを載せたときのアニメーションスピード。
Rollover text color：マウスを載せたときの文字色、文字背景。

完成した作品を印刷もしくは保存

⑨赤い「Visualize」ボタンを押して完成！
完成後に印刷する場合は、右上のPrintを。データをダウンロードする場合は、DOWNLOADを。
ダウンロードデータはStandard PNG、Standard JPEGのみ選択できます。
有料会員になるとその他のデータで保存、また様々な機能が使えるようになるので、必要に応じて登録してみてください。

いかがでしたか？
イラストソフトを使わなくてもここまで特徴のあるデザインができます。
トップ画像に大きく、画像の一部に可愛く。ぜひアクセントとして使ってみてくださいね！

 

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

]]> 【はじめてのHTMLとCSS】CSSで中央寄せにする方法｜最初に作るHTML 入門編④ https://incloop.com/html_css_beginner_iv/ Thu, 11 Jul 2019 07:35:58 +0000 https://incloop.com/?p=19636

こんにちは！ 少し間が空きましたが、入門編①～③まではマスターしましたか？ 今回は入門編④。要素を真ん中に寄せ […]]]>

こんにちは！
少し間が空きましたが、入門編①～③まではマスターしましたか？
今回は入門編④。要素を真ん中に寄せていきましょう！

こんにちは！前回は2019年のトレンドデザインをご紹介しました。今回は入門編IIの続きで、表の作成をしていきます。例えば、お問い合わせフォームや料金プランの表など...
【はじめてのHTMLとCSS】最初に作るHTML 入門編③～コピペできるテンプレート付 - incloop.com

はじめに

要素と聞いてもすぐにピンとこないかもしれませんね。
前回入門編③の最後で例としてpタグのお話をしました。
<p>から</p>に囲まれたものをp要素と呼びます。

つづいて、要素は2種類あります。インライン要素とブロック要素と呼ばれます。
各要素で適用されるcssが異なりますが、順を追って見ていけば大丈夫。

下記を参考にするとわかりやすいですよ！
【各要素について】http://www.htmq.com/htmlkihon/005.shtml
【CSSプロパティ（目的別）】http://www.htmq.com/style/

一旦ここまでを頭に入れて、実際に動かしていきましょう！

中央寄せに使用するcss

◆margin: 0 auto;
◆text-align: center;
◆display: block;

最適な方法で寄せてみよう！

①まずはlesson_003をコピーしてフォルダ名、ファイル名をlesson_004へ変更し、必要なhtml、cssをコピー＆ペースト。また、imgフォルダにタテ、ヨコ400pxの画像を用意。サイズは自由です。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>レッスン4｜htmlとcss</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/reset.css" rel="stylesheet" type="text/css">
</head>

<body>

<img src="img/img_0711.jpg">
<p>カワセミ</p>

</body>
</html>

@charset "utf-8";

body{
	background-color: #fff;
}

②画像、テキストの動きから確認。
初期状態では左側にありますね。style.cssにtext-align: centerを追加すると、文字のみ中央に。

p{
	text-align: center;
}

③…画像が中央に寄らない！理由はインライン要素だから。
インラインをブロックに、ブロックをインラインに変えることができるため、ブロック要素にすればOK！display: block;でブロック要素に、margin: 0 auto;で中央に。

img{
	display: block;
	margin: 0 auto;
}

④別解ですが、文字と同じようにimg要素をpタグで囲んで適用すると同じく中央寄せに。
最適な方法は文字ならtext-align。画像は両方可能、おすすめはブロック要素と覚えましょう！

<p><img src="img/img_0711.jpg"></p>

ステップアップ問題！

⑤別にボックスを用意。どのcssを使えば中央寄せになるでしょう？

div{
	width: 100px;
	height: 100px;
	background-color: #FFCC00;
}

⑥うーん…文字でも画像でもないからtext-alignではないかも？ではmargin: 0 auto;に！

div{
	width: 100px;
	height: 100px;
	background-color: #FFCC00;
	margin: 0 auto;
}

⑦完成！こちらの最適な方法はmargin: 0 auto;でしたね。
元が③のようにインライン要素ではないため、display: block;は不要です。

中央に寄せる方法は他にもたくさん

◆position:absolute;　【難易度：★★★】
◆display:flex;　【難易度：★★☆】
※この他に細かい設定が必要になります。

慣れてくると、それぞれよく使うスタイルです。
中央寄せの方法としてはもちろん、特にposition:absoluteは自由に配置できる魅力があります。
その分、基準を設けてその場所から〇%、〇pxなどの設定が必要になります。
はじめはトリッキー、慣れれば強い味方の便利なcssですから少しずつ使ってみてくださいね！

いかがでしたか？今回は要素の中央寄せについてご紹介しました。
これまでに作成したlessonのレイアウトを整えてみてくださいね！

 

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

]]> 【はじめてのHTMLとCSS】最初に作るHTML 入門編③～コピペできるテンプレート付 https://incloop.com/html_css_beginner_iii/ Thu, 13 Jun 2019 23:50:46 +0000 https://incloop.com/?p=19517

こんにちは！ 前回は2019年のトレンドデザインをご紹介しました。 今回は入門編IIの続きで、表の作成をしてい […]]]>

こんにちは！
前回は2019年のトレンドデザインをご紹介しました。
今回は入門編IIの続きで、表の作成をしていきます。

こんにちは！前回は入門編Ⅰとして、HTMLとCSSの簡単な意味と使い方をご紹介しました。HTMLは文字を入力、CSSはHTMLを装飾するファイルと覚えると楽かもしれません。コピ...
【はじめてのHTMLとCSS】最初に作るHTML 入門編② ～コピペできるテンプレート付 - incloop.com

例えば、お問い合わせフォームや料金プランの表など使い方はさまざま。
ベーシックなタイプのもので練習していきましょう！
※お問い合わせフォームの動作には別途PHPの知識が必要になりますが、ここでは省きます。

便利なcssを先に読み込もう

①reset.cssの名称でファイルを作成

②作成後、下記をコピー&ペーストして、cssフォルダに保存

/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.clearfix::after{
  display: block;
  clear: both;
  content: "";
}

テーブルの骨組み！HTMLから入力

③今回使う新しいHTMLはこちら。
■<table>：テーブル作成用のタグ
■<tr>：テーブルの横一行を表すタグ
■<th>：テーブルの見出しタグ
■<td>：テーブルに記載する内容のタグ

<tr>タグは使い慣れるまで迷うことがあるかもしれません。
簡単な覚え方としては、見出しや内容を横一列で表示させたいと思ったら、
<tr></tr>のなかにすべて入れる！と考えてみるといいでしょう。
例えば、縦3列にする場合は<tr>タグの中に3つの<td>や<th>が入ることになります。

下記HTMLをコピー&ペーストで同じレイアウトになります。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>レッスン3｜htmlとcss</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/reset.css" rel="stylesheet" type="text/css">
</head>

<body>

<table>
  <tr>
    <th>体験レッスン</th>
    <th>初級レッスン</th>
    <th>中級レッスン</th>
  </tr>
  <tr>
    <td>¥0</td>
    <td class="popular">¥5,000</td>
    <td>¥8,000</td>
  </tr>
  <tr>
    <td>申し込み</td>
    <td>申し込み</td>
    <td>申し込み</td>
  </tr>
</table>

</body>
</html>

CSSで見た目を整える

入門編Iのcssを思い出し、色や文字を整えていきましょう！

下記HTMLをコピー&ペーストで同じレイアウトになります。

@charset "utf-8";

body{
	background-color: #adff2f;
}
body table{
	border: solid 1px;
	text-align: center;
	width: 500px;
}
body table tr{
	border-bottom: solid 1px;
}
body table tr th,
body table tr td{
	border-right: solid 1px;
	border-bottom: solid 1px;
	padding: 10px 0;
}

あれ？CSSが反映されない

今皆さんが使っているブラウザはどれでしょうか。
IE、Edge、Chrome、FireFoxなどお使いのブラウザにより表示のされ方が少し異なる場合があります。
新しく導入されるCSSを使うときには、ベンダープレフィックスと呼ばれる各ブラウザに適用させるための
記述をCSSに加えることで、同じように対応させる方法があります。

このような記事を参考にしてみてくださいね。
ベンダープレフィックス：http://www.htmq.com/csskihon/603.shtml

これまでに解説してきた基本のHTML、CSSではブラウザによる差の出ないものを使用しています。
反映されない場合は、ファイルの読み込み方や開始タグと終了タグと呼ばれる部分が抜けているかもしれません。（例）pタグの場合は　<p>が開始タグ　</p>終了タグ

 

以上です!
テーブルレイアウトを使って、1回目、2回目よりデザインの幅が広がりましたね。
少しずつですが、できることを増やしていきましょう！

 

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

]]> 2019Webデザイン｜知っておきたい最新トレンド3選 https://incloop.com/2019webdesign/ Fri, 31 May 2019 02:02:18 +0000 https://incloop.com/?p=19389

こんにちは！ 前回、前々回とHTML、CSSの基本をテンプレート付きで解説しました。 今回はブレイクタイムとい […]]]>

こんにちは！
前回、前々回とHTML、CSSの基本をテンプレート付きで解説しました。
今回はブレイクタイムということで、
2019年のWebデザインのトレンドをご紹介したいと思います。

トレンドデザイン ―アシンメトリー

https://cheesetart.com/

まずはアシンメトリー（左右非対称）なサイトから！

こちらはチーズタルト専門店「ベイク」のWebサイトです。
縦書きの文言や斜めの切り口でわけられた記事背景、アニメーションがとても印象的ですね。
最新トレンドが複数盛り込まれているデザインです。

レイアウトを意図的にずらすことで自然と注目してほしい部分、
「商品」や「伝えたいこと」に目線を誘導できますし、
色、画像の工夫によりメリハリをもたせることで、ユーザーにもわかりやすいサイトになるでしょう。

伝わる、トレンドを両立したアシンメトリーで、
分野問わず魅力的なWebサイトに仕上げていきましょう。

トレンドデザイン ―動画

https://borderless.teamlab.art/jp

つづいて動画、アニメーションサイト。

こちらはデジタルコンテンツの制作会社「チームラボ」の作品のひとつ、
お台場にあるデジタルアートのWebサイトです。
その場にいるかのようなスリル、必要なイメージを与える表現方法としては1番でしょう。

動画内容を見ると、3種類の場面が一定の時間で切り替わっています。
これによりユーザーも楽しみながら最後まで見ることができるほか、
適切な数であればもっと知りたい！という次の行動にもつながるでしょう。

サービスやアイテムを印象に残る形で伝えたい場合に、
ぜひ取り入れたいデザインですね。

トレンドデザイン ―シンプル

https://www.apple.com/iphone/

最後に。原点回帰！シンプルなサイト。

こちらは皆さんもご存知「Apple」のサイトです。
今はさまざまな端末でサイトを見ることが増えたため、
動作や見やすさにおいても無理のない、誰もが嬉しいデザインですね。

白、グレー、黒などの色で商品や言葉を飾らずに表現しています。
シンプルな分、サービスや技術力、アイテムに注目が集まりますし、
イラストや画像の配置、配色も同様にとても重要になります。

より率直な表現で、またモバイルファーストな時代であることを
考えたときに取り入れたいデザインですね。

技術面では ―ブレイクポイント

その他に技術面から見てみましょう。
PCならデスクトップかノートパソコンか、スマホならアンドロイドかiPhoneか、
世代や機種も含めて横幅、縦幅に違いが出てきます。
「トレンドデザイン ―シンプル」でお話した通り、動作が軽く、見やすい
モバイルファーストであることはサイト運営、評価にも関わる部分となります。

こちらのサイトを参考にして、ユーザーの考えていること、
また適切なブレイクポイントを見つけてくださいね！

◇Adobeが発表したデジタルコンテンツの消費トレンド
https://mag.ibis.gs/marketing/adobe_190404/

◇レスポンシブ CSSメディアクエリ（@media）ブレイクポイントまとめ
https://www.seojuku.com/blog/responsive-mediaquery.html

最後に

Webサイトを持つ目的もゴールも人それぞれです。
扱っている商品やサービス、伝えたいことをいかにユーザーにわかりやすく、
且つ魅力的に表現していくのかが大切になります。
方法、組み合わせ方はたくさんあります。
皆さんにとっての「軸」を明確にして、多くの人に情報を届けることを
はじめてみましょう！

 

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

]]> 【はじめてのHTMLとCSS】最初に作るHTML 入門編② ～コピペできるテンプレート付 https://incloop.com/html_css_beginner_ii/ Fri, 17 May 2019 08:48:52 +0000 https://incloop.com/?p=19237

こんにちは！ 前回は入門編Ⅰとして、HTMLとCSSの簡単な意味と使い方をご紹介しました。 HTMLは文字を入 […]]]>

こんにちは！
前回は入門編Ⅰとして、HTMLとCSSの簡単な意味と使い方をご紹介しました。
HTMLは文字を入力、CSSはHTMLを装飾するファイルと覚えると楽かもしれません。

こんにちは！今回はHTMLとCSSで知っておきたい記述方法やタグの意味など、基礎知識について書いていきます！はじめての方も改めて基本を学びたい方も必見です！環境構築...
【はじめてのHTMLとCSS】最初に作るHTML 入門編①～コピペできるテンプレート付 - incloop.com

コピー&ペーストで作成したので、すこし物足りない方向けに、
今回は少し頭を使う「階層」をマスターして画像を表示する方法を解説します！

CSSの読み込み方って？

前回の内容を見て少し不思議に思ったところはありませんか？
style.cssとlesson_001.htmlの2つのファイルを作成しました。
なぜlesson_001.htmlにstyle.cssの装飾が読み込まれるのでしょうか。

すぐにわかった方は素晴らしいです！
よく「読み込んで」いただいたようですね！

画像のように<head></head>のなかに、下記の記載があります。

<link href="style.css" rel="stylesheet" type="text/css">

この記述がない場合は読み込まれず、lesson_001.htmlの内容だけ表示されます。

ではここで問題です。階層初級編！

cssフォルダを新たに作成します。そこへstyle.cssを入れると。。読み込まれなくなりました。
htmlファイルににstyle.cssを再度読み込ませる方法を考えてください！

—–

ここから解答です
答えは、「cssフォルダの中にあるstyle.css」という表記に変更する、です。

①lesson_001フォルダをコピーしてlesson_002とし、htmlを書き換えていきましょう！

②lesson_002.htmlとリネーム後、cssフォルダを作成しstyle.cssを入れる。

③つづいてlesson_002.htmlの<link href=””>部分を

<link href="css/style.css" rel="stylesheet" type="text/css">

もしくは

<link href="./css/style.css" rel="stylesheet" type="text/css">

に上書き。これでOK！

もう一つ問題です。階層上級編！

lesson_001のフォルダと同じ場所（階層）にstyle.cssを移動した場合に、
再度読み込ませる方法を考えてください。

—–
ここから解答です
答えは、階層表記を付け加える、です。

今回の場合、階層がひとつ上になるという考え方をします。
そのため、表記は「../」を追加しますので、下記のようになります。

<link href="../style.css" rel="stylesheet" type="text/css">

下の階層は「./ファイル名」もしくは「ファイル名」。上の階層は「../ファイル名」。
2階層上なら「../../ファイル名」となりますし、フォルダ内のファイルなら「./フォルダ名/ファイル名」と指定します。
またこの表記を相対パスと呼びますので、ぜひ覚えてください！

新しいHTML、imgが登場

それではお待ちかね、画像（img）の表示です！
トップページといえば、目を引く素敵な画像がありますよね。
webサイトに近づけるにはやっぱり画像を置きたい。。ので、さっそく入れていきましょう！
これまでの階層の内容を思い出してくださいね！

①階層初級編のつづきで、lesson_002フォルダ内にimgフォルダを作成。


②imgフォルダ内に使いたい画像を入れる。
今回は1920×600サイズを使用し、img_0516とつけます。


③lesson_001.htmlの<body></body>のなかに<img src=””>と記載。さて表記は。。

<img src="img/img_0516.jpg">

※表示されない場合は拡張子をチェックしてください。
フォルダの表示タブにある「ファイル名拡張子」にチェックをつけると簡単に確認できます。

④完成！！

⑤コードをまとめましたので、こちらを使ってくださいね！

【HTML】

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>レッスン2｜htmlとcss</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>

<p>さっそくはじめていきましょう！</p>
<img src="img/img_0516.jpg">

</body>
</html>

【CSS】

@charset "utf-8";

body{
	background-color: #adff2f;
}
p{
	color: #000000;
	font-family: 'Yu Gothic';
	font-size: 20px;
}

以上です！お疲れさまでした。
階層の考え方はFTPソフトを使ったりWordpressのサイト制作にも必要となる部分なので、
実際に手を動かして覚えていってくださいね！では！

 

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

]]> 【はじめてのHTMLとCSS】最初に作るHTML 入門編①～コピペできるテンプレート付 https://incloop.com/html_css_biginner/ Fri, 10 May 2019 03:28:12 +0000 https://incloop.com/?p=19164

こんにちは！今回はHTMLとCSSで知っておきたい記述方法やタグの意味など、 基礎知識について書いていきます！ […]]]>

こんにちは！今回はHTMLとCSSで知っておきたい記述方法やタグの意味など、
基礎知識について書いていきます！
はじめての方も改めて基本を学びたい方も必見です！

環境構築にはxamppがあると便利です。インストールする場合は、下記記事を参考にしてくださいね。
※インストールしなくても今回の内容は確認できます。

はじめまして、網干と申します。本日は表題の通り、XAMPPで仮想環境を構築してwordpressをインストールする方法を掲載します。※本記事ではセキュリティの設定を考慮して...
XAMPPで仮想環境を構築してwordpressをインストールする方法 - incloop.com

まずはフォルダ&ファイルを準備

①デスクトップでもどこでも構いませんのでフォルダを適当にフォルダを作ってください。（※以下の例では、xamppのhtdocs内にフォルダを作成）

②テキストエディタでhtmlファイルを作成。ファイル名に.htmlとつけてhtmlファイルとして保存。

③以下の基本コードをコピー&ペースト。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
</body>

</html>

④cssファイルを②と同様の方法で作成(ファイル名に.cssとつけることに注意)。
以下の基本コードをコピー&ペースト。

@charset "utf-8";

html、cssの記述について解説

⑤基本のhtmlタグについては下記の通りです。

■<!DOCTYPE html>：テキストがhtmlであることをブラウザに説明するための宣言。
■<html lang=”ja”>：このhtmlが日本語を扱うことをブラウザに説明するための宣言。
■<head>：metaタグやtitleタグの記載、必要ファイルを読み込む部分。
■<meta>：このhtmlの文字コードはUTF-8だとブラウザに説明するための宣言。
■<title>：サイトタイトル。タブに表示されます。
■<body>：ページに表示される部分。
■<h1>：見出しです。h1～h6まであります。
■<p>：文章を入力するときに使います。

⑥今回使う基本のcssプロパティについては下記の通りです。

●background-color：背景色
●color：文字色
●font-family：文字フォント
●font-size：文字サイズ

解説の記述を使ってデザイン

⑦lesson_001.htmlに下記をコピー&ペースト。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>レッスン1|htmlとcss</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

<p>さっそくはじめていきましょう！</p>

</body>
</html>

⑧style.cssに下記をコピー&ペースト。カラーを変えたいときはこちらから選んでくださいね。

body{
	background-color: #adff2f;
}
p{
	color: #000000;
	font-family: 'Yu Gothic';
	font-size: 20px;
}

⑨作成したHTMLファイルをブラウザにドラッグ＆ドロップしてみてください。

以下の画像のようになりましたか？

以上となります。

今回はWebサイト制作の第一歩として重要な骨組み部分を解説しました。
HTMLにはタグに意味があり、SEO対策にも関わる部分なので適切なタグか考えながら制作を進めてみてくださいね！

またcssはご紹介したほかにもたくさんの種類があります。
自分のイメージするデザインを再現するにはどれがベストか..今後もブログに書いていきますのでぜひ読んでください！
では！

 

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

]]> WordPressの子テーマの作り方！3つのファイルですぐにできる♪カスタマイズ後編 https://incloop.com/wordpress_theme_customize_02/ Thu, 25 Apr 2019 23:57:32 +0000 https://incloop.com/?p=19132

こんにちは！ 前回は「STINGER8」というシンプルなテーマをダウンロードしましたね。 今回はつづきとして、 […]]]>

こんにちは！
前回は「STINGER8」というシンプルなテーマをダウンロードしましたね。

こんにちは！小林です。今回、次回とWordpressに慣れてきたときに知っておきたい、テーマを使用したカスタマイズ方法について解説していきます。はじめにまず今回は肩慣...
Wordpressのテーマをアップロードする方法♪カスタマイズ前編 - incloop.com

今回はつづきとして、同テーマを使用したオリジナルテーマの作成に必要となる「子テーマの作成」について解説していきます。

さっそくフォルダ&ファイルの作成から！

①themesフォルダ（私の場合はレンタルサーバーではないため下記の場所となります）内に
新しくフォルダを作成し「stinger8-child」の名称で保存。

②つづいて、作成したフォルダ内にstyle.css、functions.php、single.phpの3つのファイルを作成。

必要なコードをコピー&ペースト

③作成した各ファイルに必要コードを記入。まずはstyle.cssには下記をコピー&ペースト。
※親テーマにも記載のあるコードに赤枠の部分が追加される内容となります

@charset "UTF-8";
/*---------------------------------------------------------
Theme Name: STINGER8-child
Template: STINGER8
Theme URI: wp-fun.com
Description:
Author: ENJI
Author URI: wp-fun.com/about
Tags: custom-header, custom-menu
Text Domain: stinger8
Version: 20171207
---------------------------------------------------------*/

④次にfunctions.phpに下記をコピー&ペースト。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

⑤最後にこちらは任意ですが、親テーマと同様にcss、images、jsフォルダを作成。
また、今後カスタマイズしたいファイルを親テーマからコピーもしくは同名称で作成して追加。

⑥後ほど外観>テーマで表示される際に分かりやすいよう、テーマのスクリーンショットを追加。

うまくできているか..確認！

⑦管理画面の外観>テーマから作成した「STINGER8-child」を有効化。

⑧以上完成です！

 

注意点として、親テーマはテーマが更新された際に内容が上書きとなるため、編集は子テーマ！と覚えてくださいね。今回の手順をマスターしてオリジナルのテーマ作成にぜひ挑戦を！では！

 

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

]]> WordPressのテーマをアップロードする方法♪カスタマイズ前編 https://incloop.com/wordpress_theme_customize/ Thu, 07 Mar 2019 21:00:14 +0000 https://incloop.com/?p=18703

こんにちは！小林です。 今回、次回とWordpressに慣れてきたときに知っておきたい、テーマを使用した カス […]]]>

こんにちは！小林です。
今回、次回とWordpressに慣れてきたときに知っておきたい、テーマを使用した
カスタマイズ方法について解説していきます。

はじめに

まず今回は肩慣らしということで、外部サイトから好きなテーマをダウンロードして有効化するまで
の手順についてご紹介します。
どちらかといえば管理画面の外観からテーマを検索、インストールすることが多いのではないでしょうか。

テーマの名称は知っているけど、管理画面で検索したときにでてこない..など困ったときにも便利なので、
ぜひ一読して覚えてくださいね！

テーマをダウンロード♪

①好きなテーマをサイトから直接ダウンロード。
※今回はSTINGER8（http://wp-fun.com/dl/）にします。とてもシンプルでブログを書くのにぴったりです

②ダウンロードしたZIPファイルをアップロードしていきます。左メニューの外観>テーマの順に進む。

テーマをWordpressにアップロード

③つづいて、新規追加>テーマのアップロードの順に進む。


④自分のパソコンから該当のZIPファイルを選択。さらに今すぐインストールを選択。

⑤その後、切り替わった画面でテーマを有効化。

⑥反映完了です！

おまけコーナー🌠

⑦おまけその1！外観から現在インストールもしくはダウンロードされているテーマの一覧を確認できます。有効化する前にライブプレビューすることで、テーマの雰囲気を見ることができます。

⑧おまけその2！ライブプレビュー時に図のようなカスタマイズメニューも出てくるので、
テーマの使い勝手やレイアウト等を詳細に確認することができます。

いかがでしたか？今回は外部サイトからダウンロードしたテーマを反映する方法についてご紹介しました。
次回はこのシンプルなテーマを使って、自分でカスタマイズするために必要なchildについて解説しますね。

 

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

]]> 3分あればOK！Instagramのブログパーツをサイトに設置する方法 https://incloop.com/3%e5%88%86%e3%81%82%e3%82%8c%e3%81%b0ok%ef%bc%81instagram%e3%81%ae%e3%83%96%e3%83%ad%e3%82%b0%e3%83%91%e3%83%bc%e3%83%84%e3%82%92%e3%82%b5%e3%82%a4%e3%83%88%e3%81%ab%e8%a8%ad%e7%bd%ae%e3%81%99/ https://incloop.com/3%e5%88%86%e3%81%82%e3%82%8c%e3%81%b0ok%ef%bc%81instagram%e3%81%ae%e3%83%96%e3%83%ad%e3%82%b0%e3%83%91%e3%83%bc%e3%83%84%e3%82%92%e3%82%b5%e3%82%a4%e3%83%88%e3%81%ab%e8%a8%ad%e7%bd%ae%e3%81%99/#respond Thu, 17 Jan 2019 08:37:11 +0000 https://incloop.com/?p=18634

こんにちは！小林です！ 前回までプラグインの解説をしてきました。 入力して..出力して..と手順も多く大変だっ […]]]>

こんにちは！小林です！
前回までプラグインの解説をしてきました。
入力して..出力して..と手順も多く大変だったと思います。

そこで今回はラクに設置したい、しかも皆さんがよく使いそうなもので..と考えました！
よく使うものといえばスマホ！スマホといえばSNS！SNSといえばInstagram！ということで、
「InstaWidget」についてご紹介していきますね。

はじめに

「InstaWidget」は、Google Mapのようにコードを貼り付けるだけで、Instagramの情報を自身のサイトに載せることができます。
こちらのサイトでは、ユーザー登録も、ログインも不要。必要な設定をすると、自動で必要なコードを生成してくれます！

タイトル通り3分でやってみる！

①https://instawidget.net/にアクセス

②「無料インスタグラムブログパーツ作成」か「早速作ってみる」をクリック

③自分のInstagramのアカウントを入力。私は弊社で運営しているパソコン教室用のアカウントを使用。


④初期設定の見た目はこのようになります。以下ブログパーツと呼びますね。

カスタマイズしよう！

⑤各設定を解説していきます。ユーザー名を除き17項目からお好みの設定ができます！

◆ハッシュタグ：自分の好きなハッシュタグでブログパーツを作成可
◆ブログパーツ幅：全体の幅（px指定のみ可）
◆ユーザーアイコン：丸枠の画像部分、名称
◆ユーザー紹介文：相模原市中央区にある…からはじまる小文字部分
◆フォローボタン：紹介文下部のボタン
◆フォロワー：フォローボタン下部の情報
◆外枠：ブログパーツを囲う枠
◆外枠の色：ブログパーツを囲う枠の色
◆文字の色：ブログパーツ内の文字全て
※http://www.netyasun.com/home/color.html
（「カラーコード」と検索すると参考サイトが色々でてきます）
◆背景色：ブログパーツの背景色
◆写真アルバム：並んでいる写真部分
◆写真間の幅：並んでいる写真間の余白
◆写真効果：並んでいる写真にカーソルを合わせたときの効果
◆レイアウト：写真の表示レイアウト
◆シェアボタン：写真にカーソルを合わせたとき右下に出るボタン
◆写真枠：写真の枠..そのままですね！
◆新しいウィンドウで：リンクをクリックしたときに別ウィンドウで開くか

⑥設定後、プレビューを押して、設定した内容を画面右側で確認します。
修正後も必ずプレビューを押して次の手順に移ってくださいね！


⑦よければ画面右下の「埋め込みコードを取得」をクリック


⑧ダイアログが出るので、コードをコピー


⑨自身のブログに移動し、表示させたい部分にペースト
⑩完成！私は幅を600pxに変更しました！
@sagamiharapcinc

いかがでしたか？今回はプラグイン以外で、簡単にブログパーツを導入できる方法でした。
細かい設定をしなければ3分以内でできますので、ぜひ一度お試しください！ちなみに私は..1分でした！

 

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

]]> https://incloop.com/3%e5%88%86%e3%81%82%e3%82%8c%e3%81%b0ok%ef%bc%81instagram%e3%81%ae%e3%83%96%e3%83%ad%e3%82%b0%e3%83%91%e3%83%bc%e3%83%84%e3%82%92%e3%82%b5%e3%82%a4%e3%83%88%e3%81%ab%e8%a8%ad%e7%bd%ae%e3%81%99/feed/ 0 WordPressでよく使うプラグイン紹介！カスタム投稿（出力編） https://incloop.com/wordpress_plugin_custom_02/ https://incloop.com/wordpress_plugin_custom_02/#respond Thu, 10 Jan 2019 20:42:59 +0000 https://incloop.com/?p=18584

こんにちは！小林です！ 新年はじめてのブログですね。どうぞ今年もよろしくお願いいたします。 第2回目の「カスタ […]]]>

こんにちは！小林です！
新年はじめてのブログですね。どうぞ今年もよろしくお願いいたします。

第2回目の「カスタム投稿（入力編）」から少し間が空きましたが、
さっそく続きの出力編の解説をしていきますね！

前回のおさらい

前回プラグインの「Custom Post Type UI」で作成したのは下記の通りです。

◆投稿タイプ：voice
◆タクソノミー：tax_voice

こんにちは！前回ご紹介したアドバンスカスタムフィールドはマスターしましたか？今回もよく使う基本プラグインについて解説していきます！はじめに第2回目は「カスタム...
WordPressでよく使うプラグイン紹介！カスタム投稿（入力編） - incloop.com

まずは、出力する内容を作成しましょう！

①せっかくなので、以前お話したカスタムフィールドのフォーマットを使いましょう！
まずは、左のメニューから「カスタムフィールド」を選択


②「フィールドグループ」から「サンプルフィールド」を選択

③「フィールドグループを編集」にある「このフィールドグループを表示する条件」を「投稿タイプ」「等しい」「お客様の声」に変更

④左メニューから「お客様の声」を選択。新規追加すると、デフォルトからサンプルフィールドの入力形式に変わります。タイトル、画像（今回は100pxにしました）、説明文を入力して公開してください。

それではお待ちかねの出力！

⑤今回は固定ページに出力します。新規追加した固定ページのパーマリンクの入力箇所をsampleに変更

⑥続いてphpファイルを編集します。使っているテーマのpage.phpをコピーしてpage-sample.phpとします。※私はTwenty seventeenのフォルダにあるpage.phpを使用

⑦下記出力コードを入力します。位置としては、主にコンテンツエリア（wrap、main、contentsなどの名称）にコピー&ペーストしてください。

<?php
$args = array(
  'post_type' => 'voice', /* カスタム投稿名 */
  'posts_per_page' => 5, /* 表示する数 */
); ?>
 
<?php $my_query = new WP_Query( $args ); ?>
 
<div>
 
<?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
 
<!-- ▽ ループ開始 ▽ -->
 
  <div>
    <img src="<?php the_field('画像'); ?>" alt="<?php the_title(); ?>">
    <p><?php the_field('説明文'); ?></p>
  </div>
 
<!-- △ ループ終了 △ -->
 
<?php endwhile; ?>
 
</div>
 
<?php wp_reset_postdata(); ?>

※カスタム投稿名は、投稿タイプの「voice」です。
※ループ内の「’画像’」「’説明文’」は、カスタムフィールドで設定したフィールド名です。

※Twenty seventeenでは、mainがコンテンツエリアになります。

⑧編集後、wordpressの「お客様の声」の投稿ページからプレビューを選択

⑨完成！

いかがでしたか？他のテーマを使用している場合は、どこに出力すればいいか分からないこともあるかもしれません。解説にあるエリアを参考に、何度か試してみてくださいね！

 

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

]]> https://incloop.com/wordpress_plugin_custom_02/feed/ 0