Wordpress tweenteen_ten コンテンツレイアウト tips

WordPress tweenteen_ten を使った「ITツールの使い方」用コンテンツレイアウトのtips

コンテンツの横幅は640px

コンテンツを横3分割するには

<div class="subDivLeft">
1. 初期画面
<a href="xxxx">
<img class="imgW200" class="xxxx" /></a>
</div>

画像を表示する

<img  src="/wp/wp-content/uploads/2017/06/simpleLogin01.png" alt="ログイン処理（書き下し版）01" />

画像をクリックして拡大画像を別タブに表示する

<a href="http://fksekiguchi.sakura.ne.jp/wp/wp-content/uploads/2017/06/simpleLogin01.png" TARGET="_blank">
<img  class="xxx.png" alt="xxxxxx" /></a>

リンク先のページ名を角Rの付いたボタン形状で表示し、aタグでリンクを貼る

<a  class="btnInText" href="http://fksekiguchi.sakura.ne.jp/wp/others/link4outsidecssinjsp">JSPで外部cssをlink指定する</a>

コンテンツにソースコードを挿入、一部の行をマーキング、行番号の表示をしない
```
〔code language="HTML" highlight="3, 7-15, 19-22, 27-29" gutter="false"〕
```
くわしくはWordPressのコンテンツにプログラムコードを書き込むまたはWordPress内でHTMLソースなどを表示を参照ください。
floatレイアウトをキャンセルする
```
<div class="clearW600"></div>
```

簡易ホルダー構造記入

Object
　┃
Throwable
　┣━Error
　┗━Exception
　　　　┗━RuntimeException

現在のカスタムCSSは（201707/19）

/*
カスタム CSS
*/
.pictureLeft {
	margin: 0 10px 10px 0;
	float: left;
	display: inline;
}

.imgTitle {
	text-align: center;
}

img.waku {
	border: 1px solid #dddddd;
}

.imgW300 {
	padding: 5px;
	border-width: 2px;
	border-style: solid;
	border-color: black;
	width: 300px;
}

/* add 2017/0612 */
.subDivLeft {
	margin-right: 10px;
	float: left;
}

.imgW640, .imgW310, .imgW200 {
	margin-top: -1.5em;
/* aタグ1行分を引き上げる */
	border-width: 2px;
	border-style: solid;
	border-color: black;
	text-align: left;
}

.imgW640 {
	width: 640px;
}

.imgW310 {
	width: 310px;
}

.imgW200 {
	width: 200px;
}

.imgCommLeft {
	margin-top: -25px;
	text-align: left;
	font-size: small;
	font-weight: lighter;
	width: 200px;
}

.clearW600 {
	width: 600px;
	height: 10px;
	clear: both;
}

.FloatClear {
	width: 640px;
	height: 0;
	clear: both;
}

button.btnInText {
	border: solid 2px;
	border-radius: 5px;
	border-color: ##4f4f4f;
	background-color: #efefef;
	color: #6f6f6f;
	margin: 0 .3em;
	padding: 0 .2em;
	text-decoration: none;
}

a.btnInText {
	border: solid 2px;
	border-radius: 5px;
	border-color: ##4f4f4f;
	background-color: #efefef;
	color: #6f6f6f;
	margin: 0 .3em;
	padding: 0 .2em;
	text-decoration: none;
}

a.dispbk {
	margin-bottom: -1em;
	display: block;
	width: 12em;
	text-align: center;
}

table, th, td {
	border: 1px solid;
	width: auto;
	padding: 1px;
	font-size: small;
}

.mgnTopUP {
	margin-top: -1.5em;
/* aタグ1行分を引き上げる */
}

.tab1 {
	padding-left: 20px;
	width: 620px;
	float: left;
}

.tab2 {
	padding-left: 40px;
	width: 600px;
	float: left;
}

.tab3 {
	padding-left: 80px;
	width: 560px;
	float: left;
}

箇条書き

項目タイトル

タイトルに対する説明。もし、タイトルと同じ行に説明を書きたいのであればclass指定にmgnTopUPを追加します。

<div>項目タイトル</div><div class="tab3">ここに説明</div>

WordPress tweenteen_ten コンテンツレイアウト tips

カテゴリー