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

投稿日: 2017年6月13日 作成者: 関口郁夫

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

  1. コンテンツの横幅は640px

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

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

  3. 画像を表示する

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

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

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

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

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

  6. コンテンツにソースコードを挿入、一部の行をマーキング、行番号の表示をしない

    〔code language="HTML" highlight="3, 7-15, 19-22, 27-29" gutter="false"〕

    くわしくはWordPressのコンテンツにプログラムコードを書き込むまたはWordPress内でHTMLソースなどを表示を参照ください。

  7. floatレイアウトをキャンセルする

    <div class="clearW600"></div>

  8. 簡易ホルダー構造記入

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

  9. 現在のカスタム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;
    }

  10. 箇条書き

項目タイトル
タイトルに対する説明。もし、タイトルと同じ行に説明を書きたいのであればclass指定にmgnTopUPを追加します。
<div>項目タイトル</div><div class="tab3">ここに説明</div>
カテゴリー: WP 機能 パーマリンク