概要

以下概要と、解決ができていない不具合を記述する。
■TCDシステム
・カラムが7個以上(8個目から)になると、ヘッダー画像が読み込まれない。CSSが書き換えられなくなる(各ページのみ適用のCSS)事象が発生する。TCDが提示する不具合を調べ、サーバー容量、ワードプレスの設定など対応試みてみたが問題解決に至ってない。なので、少し見にくくなるが、カラムが多くなる場合(7個以上)になる場合は項目毎に分けず、同じカラムに数項目をまとめて対応。

■HTML
・改行を入れた構文を入力し更新すると、勝手に書き変わる事がある。発生条件が多岐に渡り問題解決に至ってない。

■CSS
CSS構文は、見にくくはあるが、TCDの「例」として挙げられている書き方にて記述。不具合については、上記の「TCDシステム」項目でも述べているが、カラムが7個以上になると、ヘッダー画像が読み込まれない不具合と同時に、CSSが書き換えられなくなる。

行間

行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間行間

下層ページの行間は以下で統一
■CSS
.post_content p { line-height:1.6; }

キャッチフレーズの行間とボールド

キャッチフレーズ
キャッチフレーズ

■HTML
TCDのシステム「ページビルダー」の「キャッチコピー」から入れている。文字サイズ、文字色、フォント、中央寄せもそこから設定。フォントサイズとフォントウェイトのみCSSで装飾。

■CSS
h4.pb_catchcopy.pb_font_family_type2 { line-height:2.2rem; font-family:inherit; font-weight:bold; }

中見出し

上記の赤バーが中見出し

■HTML
<p class=”style_h2″>中見出し</p>

■CSS
p.style_h2 { color:#fff; font-size:1.1em; font-weight:500; background-image: linear-gradient(130deg,#dd3333 25%,#dd3333 35%,#dd3333 100%); padding:2px 2px 2px 10px; }

小見出し

小見出し

■HTML
<p class=”style_h2_02″>小見出し</p>

■CSS
p.style_h2_02 { color:#dd3333; font-size:1em; font-weight:bold; border-style:dotted; border-bottom-width:3px; padding:0px 0px 0px 2px; }

メリットボックス

技術だけじゃない!
お客様への接し方

現場で働いている現役スタッフだからこそ解る!お客様との接し方、マナー、気づかいを学べます。社交性も磨かれます。

技術だけじゃない!
お客様への接し方

現場で働いている現役スタッフだからこそ解る!お客様との接し方、マナー、気づかいを学べます。社交性も磨かれます。

技術だけじゃない!
お客様への接し方

現場で働いている現役スタッフだからこそ解る!お客様との接し方、マナー、気づかいを学べます。社交性も磨かれます。

■HTML
<div class=”merit_box”><div class=”merit_icon_title_box”><div class=”merit_icon_box”><img class=”merit_icon” src=”http://s-b-college.jp/wp/wp-content/uploads/2023/04/merit_button_02.png” /></div><div class=”merit_title_box”><p class=”merit_title”>技術だけじゃない!<br>お客様への接し方</p></div></div><div class=”merit_text_box”>
<p class=”merit_text”>現場で働いている現役スタッフだからこそ解る!お客様との接し方、マナー、気づかいを学べます。社交性も磨かれます。</p></div></div>

■CSS
.merit_box { border:1px solid #dd3333; border-radius:10px; padding:10px 20px 10px 20px; }
.merit_icon_title_box { display:flex; margin-bottom:10px; }
.merit_icon_box { width:40px; }
.merit_title { margin:16px 0px 0px 6px !important; color:#dd3333; font-size:1em; font-weight:bold; border-bottom:2px dotted #dd3333; }

プロセスボックス

SBC通信課程に入学

入学は10月。入学前にオリエンテーションがあり、学則の説明や各自必要な教材の注文などを行います。

SBC通信課程に入学

入学は10月。入学前にオリエンテーションがあり、学則の説明や各自必要な教材の注文などを行います。

■HTML※ボックス
<div class=”process_box”><div class=”process_icon_title_box”><div class=”process_icon_box”><img class=”process_icon” src=”http://s-b-college.jp/wp/wp-content/uploads/2023/03/step_icon_01.png” /></div><div class=”process_title_box”><p class=”process_title”>1年次就職アンケート</p></div></div><div class=”process_text_box”><p class=”process_text”>1年次、個別面談による担任講師との就職アンケートを実施します。アドバイスを交えながら、理想の就職先を具体的に絞っていきましょう。</p></div></div>

■HTML※三角矢印
<div class=”triangle”></div>

■CSS
.process_box { width:65%; min-width:280px; border:1px solid #dd3333; border-radius:10px; margin:0 auto; padding:10px 20px 10px 20px; }
.process_icon_title_box { display:flex; margin-bottom:10px; }
.process_icon_box { width:40px; }
.process_title_box { width:auto; }
.process_title { margin:16px 0px 0px 6px !important; color:#dd3333; font-size:1.1em; font-weight:bold; border-bottom:2px dotted #dd3333; }
.triangle { width:0; height:0; border-left:20px solid transparent; border-right:20px solid transparent; border-top:20px solid #dd3333; margin:0 auto; }

リスト星マーク

  • 開催日
    8月7日(月)
  • 開催場所
    〒323-0829 栃木県小山市東城南3丁目13-11
  • 開催時間
    10:00〜11:30
  • 参加対象
    中学生や高校生、社会人まで参加できます!
  • 個別相談OK
    個別相談承ります。お気軽にご相談ください。
  • 私服でOK
    制服でも私服でも気にせずお越しください。
  • 同伴OK
    お友達からご親族まで、同伴でご参加できます。
  • リピートOK
    何度でもご参加いただけます。
  • お車でお越しの方
    駐車場は、校舎向かい側にございますのでご利用ください。
  • 無料送迎あり
    小山駅東口のエスカレーターを下り、ロータリーへお越しください。「センスビューティーカレッジ」のロゴ入り白色送迎バスが待機しております。9:40発となっております。

■HTML
<ul class=”list”>
<li><span class=”list_title”>開催日</span><br>8月7日(月)</li>
<li><span class=”list_title”>開催場所</span><br>〒323-0829 栃木県小山市東城南3丁目13-11</li>
<li><span class=”list_title”>開催時間</span><br>10:00〜11:30</li>
<li><span class=”list_title”>参加対象</span><br>中学生や高校生、社会人まで参加できます!</li>
<li><span class=”list_title”>個別相談OK</span><br>個別相談承ります。お気軽にご相談ください。</li>
<li><span class=”list_title”>私服でOK</span><br>制服でも私服でも気にせずお越しください。</li>
<li><span class=”list_title”>同伴OK</span><br>お友達からご親族まで、同伴でご参加できます。</li>
<li><span class=”list_title”>リピートOK</span><br>何度でもご参加いただけます。</li>
<li><span class=”list_title”>お車でお越しの方</span><br>駐車場は、校舎向かい側にございますのでご利用ください。</li>
<li><span class=”list_title”>無料送迎あり</span><br>小山駅東口のエスカレーターを下り、ロータリーへお越しください。「センスビューティーカレッジ」のロゴ入り白色送迎バスが待機しております。9:40発となっております。</li>
</ul>

■CSS
.list { font-size:0.85em; }
.list li { position:relative; padding-left:1.5rem; line-height:1.1rem; list-style:none; margin-left:-15px; margin-top:15px; }
span.list_title { font-weight:bold; }
.list li:first-child { margin-top:0; }
.list li:before { content:”★”; position:absolute; color:#e0c60b; font-size:1.3rem; left:0; }

ボタン小

■HTML
<div class=”small_button”><a href=”http://www.yukari-japan.co.jp/20211208152616″ target=”_blank” rel=”noopener”><span class=”small_button_text”>掲載ページへ</span><img class=”small_button_icon” src=”http://s-b-college.jp/wp/wp-content/uploads/2023/03/induction_button_icon.png” /></a></div>

■CSS
.small_button { width:92px; padding:15px; text-align: center; box-shadow:4px 4px 0px 0px #eaeaea; position: relative; border:1px solid #dd3333; border-radius:2px; }
span.small_button_text { color:#dd3333; position:absolute; left:8px; bottom:9px; font-size:0.8em; }
img.small_button_icon { width:15px; margin-right:4px; position:absolute; right:5px; bottom:8px; }

ページ下部に配置した他ページ誘導ボタン

■HTML
<div class=”induction_button”><a href=”http://s-b-college.jp/curriculum/”><span class=”induction_button_text”>【カリキュラム】ページへ</span><img class=”induction_button_icon” src=”http://s-b-college.jp/wp/wp-content/uploads/2023/03/induction_button_icon.png” /></a></div>

■CSS
.induction_button { margin:0 auto; width:60%; min-width:250px; padding:21px 12px 26px 12px; box-shadow:5px 5px 0px 0px #dd3333; border:2px solid #dd3333; border-radius:2px; position:relative; }
span.induction_button_text { color:#dd3333; position:absolute; left:6px; bottom:16px; }
img.induction_button_icon { width:20px; margin-right:9px; position:absolute; right:6px; bottom:14px; }

PAGE TOP