次は、枠を横に並べる方法をします。
枠を横に並べる方法
まず、はじめに下記の画像をダウンロードしてください。
↓
サンプル画像セット ダウンロード
左下の「DOWNLOAD」を押します。
「OK」を押します。
「サンプル画像セット」をダウンロードしました。
ダウンロードした「サンプル画像セット」を解凍します。
自分のパソコンの中の「サンプル画像セット」を選択します。
右クリックをして、「すべて展開」を押します。
ここの表示は、パソコンによって違います。
右下の「展開」を押します。
「サンプル画像セット」を解凍できました。
ワードプレスの管理画面を開きます。
左上の「投稿」を押します。
左上の「新規追加」を押します。
左上の「タイトルを追加」に「枠を横に並べる方法」と入力します。
右側の「テキスト」を押します。
下記コードを「テキスト」にコピーして、貼り付けます。
<div class="float-hidari-waku"> <span class="w-title">WordPress</span> 画像１(WordPress) WordPressは、無料で使えるホームページ、ブログ作成ソフトです。 </div> <div class="float-hidari-waku"> <span class="w-title">HTML</span> 画像２(HTML) HTMLは、ホームページを作るときに使うプログラム言語です。 </div> <div class="float-hidari-waku"> <span class="w-title">CSS</span> 画像３(CSS) CSSは、HTMLの飾りつけに使うプログラム言語です。 </div>
貼り付けました。
次は、「画像１(WordPress)」の文字を消します。
左上の「メディアを追加」を押します。
左上の「ファイルをアップロード」を押します。
真ん中の「ファイルを選択」を押します。
先ほど、ダウンロードした「サンプル画像セット」を開きます。
「サンプル画像セット」の中の「WordPress」を選択します。
「開く」を押します。
①「WordPress」を選択します。
②「配置：なし」、「リンク先：なし」、「サイズ：フルサイズ」を選択します。
③右下の「投稿に挿入」を押します。
画像が挿入されました。
次は、「画像２(HTML)」の文字を消します。
左上の「メディアを追加」を押します。
左上の「ファイルをアップロード」を押します。
真ん中の「ファイルを選択」を押します。
先ほど、ダウンロードした「サンプル画像セット」を開きます。
「サンプル画像セット」の中の「HTML」を選択します。
「開く」を押します。
①「HTML」を選択します。
②「配置：なし」、「リンク先：なし」、「サイズ：フルサイズ」を選択します。
③右下の「投稿に挿入」を押します。
画像が挿入されました。
次は、「画像３(CSS)」の文字を消します。
左上の「メディアを追加」を押します。
左上の「ファイルをアップロード」を押します。
真ん中の「ファイルを選択」を押します。
先ほど、ダウンロードした「サンプル画像セット」を開きます。
「サンプル画像セット」の中の「CSS」を選択します。
「開く」を押します。
①「CSS」を選択します。
②「配置：なし」、「リンク先：なし」、「サイズ：フルサイズ」を選択します。
③右下の「投稿に挿入」を押します。
画像が挿入されました。
右側の「公開」を押します。
「OK」を押します。
右上の「変更をプレビュー」を押します。
枠が横並びに３つ表示されていることを確認します。
枠を横に２つならべるコード
/*横並び枠２*/
.float-hidari-waku2 {
float:left; /*左に回り込み*/
background-color: #e9e9e9; /* 背景色指定 */
padding: 20px; /* 余白指定 */
height: 450px; /* 高さ指定 */
width: 45%; /*枠横幅*/
border: solid 1px gray; /*枠線*/
margin-left: 3.3%; /*枠の外 左余白*/
}
/*画像変更用２*/
.float-hidari-waku2 img{
width:100%; /*画像 横幅*/
height:200px; /*画像 高さ*/
margin-top: 1em; /*画像 上側余白*/
border: solid 1px black; /*画像 枠線*/
margin-bottom: 1.2em; /*画像 下側余白*/
}
/*回り込み解除２*/
.kaijo2:after{
display:block; /*位置固定*/
clear:both; /*回り込み解除*/
content:"";
}
HTML
<div class="kaijo2"> <div class="float-hidari-waku2"> <span class="w-title">WordPress</span> 画像１ WordPressは、無料で使えるホームページ、ブログ作成ソフトです。 </div> <div class="float-hidari-waku2"> <span class="w-title">HTML</span> 画像２ HTMLは、ホームページを作るときに使うプログラム言語です。 </div> </div>
「画像１」、「画像２」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
WordPressは、無料で使えるホームページ、ブログ作成ソフトです。
HTMLは、ホームページを作るときに使うプログラム言語です。
枠を横に３つならべるコード
/*横並び枠３*/
.float-hidari-waku3 {
float:left; /*左に回り込み*/
background-color: #e9e9e9; /* 背景色指定 */
padding: 20px; /* 余白指定 */
height: 350px; /* 高さ指定 */
width: 30%; /*枠横幅*/
border: solid 1px gray; /*枠線*/
margin-left: 2.5%; /*枠の外 左余白*/
}
/*画像変更用３*/
.float-hidari-waku3 img{
width:100%; /*画像 横幅*/
height:100px; /*画像 高さ*/
margin-top: 1em; /*画像 上側余白*/
border: solid 1px black; /*画像 枠線*/
margin-bottom: 1.2em; /*画像 下側余白*/
}
/*回り込み解除３*/
.kaijo3:after{
display:block; /*位置固定*/
clear:both; /*回り込み解除*/
content:"";
}
HTML
<div class="kaijo3"> <div class="float-hidari-waku3"> <span class="w-title">WordPress</span> 画像１ WordPressは、無料で使えるホームページ、ブログ作成ソフトです。 </div> <div class="float-hidari-waku3"> <span class="w-title">HTML</span> 画像２ HTMLは、ホームページを作るときに使うプログラム言語です。 </div> <div class="float-hidari-waku3"> <span class="w-title">CSS</span> 画像３ CSSは、HTMLの飾りつけに使うプログラム言語です。 </div> </div>
「画像１」、「画像２」、「画像３」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
WordPressは、無料で使えるホームページ、ブログ作成ソフトです。
HTMLは、ホームページを作るときに使うプログラム言語です。
CSSは、HTMLの飾りつけに使うプログラム言語です。
枠を横に４つならべるコード
/*横並び枠４*/
.float-hidari-waku4 {
float:left; /*左に回り込み*/
background-color: #e9e9e9; /* 背景色指定 */
padding: 20px; /* 余白指定 */
height: 400px; /* 高さ指定 */
width: 23%; /*枠横幅*/
border: solid 1px gray; /*枠線*/
margin-left: 1.5%; /*枠の外 左余白*/
}
/*画像変更用４*/
.float-hidari-waku4 img{
width:100%; /*画像 横幅*/
height:80px; /*画像 高さ*/
margin-top: 1em; /*画像 上側余白*/
border: solid 1px black; /*画像 枠線*/
margin-bottom: 1.2em; /*画像 下側余白*/
}
/*回り込み解除４*/
.kaijo4:after{
display:block; /*位置固定*/
clear:both; /*回り込み解除*/
content:"";
}
HTML
<div class="kaijo4"> <div class="float-hidari-waku4"> <span class="w-title">WordPress</span> 画像１ WordPressは、無料で使えるホームページ、ブログ作成ソフトです。 </div> <div class="float-hidari-waku4"> <span class="w-title">HTML</span> 画像２ HTMLは、ホームページを作るときに使うプログラム言語です。 </div> <div class="float-hidari-waku4"> <span class="w-title">CSS</span> 画像３ CSSは、HTMLの飾りつけに使うプログラム言語です。 </div> <div class="float-hidari-waku4"> <span class="w-title">PHP</span> 画像４ PHPは、動的に使うプログラム言語です。 </div> </div>
「画像１」、「画像２」、「画像３」、「画像４」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
WordPressは、無料で使えるホームページ、ブログ作成ソフトです。
HTMLは、ホームページを作るときに使うプログラム言語です。
CSSは、HTMLの飾りつけに使うプログラム言語です。
PHPは、動的に使うプログラム言語です。
枠を横に２つならべるコードにURLリンクをつける
/*横並び枠５*/
.float-hidari-waku5 {
float:left; /*左に回り込み*/
background-color: #e9e9e9; /* 背景色指定 */
padding: 20px; /* 余白指定 */
height: 450px; /* 高さ指定 */
width: 45%; /*枠横幅*/
border: solid 1px gray; /*枠線*/
margin-left: 3.3%; /*枠の外 左余白*/
}
/*画像変更用５*/
.float-hidari-waku5 img{
width:100%; /*画像 横幅*/
height:200px; /*画像 高さ*/
margin-top: 1em; /*画像 上側余白*/
border: solid 1px black; /*画像 枠線*/
margin-bottom: 1.2em; /*画像 下側余白*/
}
/*回り込み解除５*/
.kaijo5:after{
display:block; /*位置固定*/
clear:both; /*回り込み解除*/
content:"";
}
/*回り込み解除５リンクの色変更*/
.kaijo5 a{
color: black !important; /*文字色*/
}
HTML
<div class="kaijo5"> <a href="URLリンク１" rel="noopener" target="_blank"> <div class="float-hidari-waku5"> <span class="w-title">WordPress</span> 画像１ WordPressは、無料で使えるホームページ、ブログ作成ソフトです。 </div> </a> <a href="URLリンク２" rel="noopener" target="_blank"> <div class="float-hidari-waku5"> <span class="w-title">HTML</span> 画像２ HTMLは、ホームページを作るときに使うプログラム言語です。 </div> </a> </div>
「画像１」、「画像２」の文字を消して、画像を入れてください。
「URLリンク１」、「URLリンク２」を消して、URLリンクを入れてください。