文章、見出しのソースコードについて
データーベース内でソースコードを確認していただき、テスト用環境内で見え方を確認してください。
基本的に文章の先頭と後ろをpタグで囲います。
改行したい時は文章と文章の間にbrを置くと改行できます。
brの連続使用は極力避けてください。文章の間隔を空ける際は別のpタグで囲って間隔をあけてください。
文字を太字にしたい時にはbタグで囲うとを太くなります。
文字を小さくしたい場合は該当箇所をsmallタグで囲うと小さくなります。
※を上付きにしたい時は※をsupタグで囲ってください。
moretitle1に入っている文言はh2扱いになります。ちなみにmoretext内で自力で囲って表示させることも可能です。
h3はmoretext内で自力で囲ってください。
h4も存在するので必要に応じてご活用ください。
画像を配置したい時はmoretext2のソースコードを使用する
画像を配置したい際は基本的に上のmoreimageを使用してください。いくつも画像を使用したい場合は、下のソースコードを使用してください。
基本的にはimg src=にはhttps://www.tokyu-dept.co.jp/以降のURL※1を貼り付けてください。
https://www.tokyu-dept.co.jp/shibuyabeautyjam/image/news/1001_shuuemura_01.webp※2の画像を貼りたい場合は
img src="/shibuyabeautyjam/image/news/1001_shuuemura_01.webp※1"
画像にキャプションを追加したい場合はmoreimageを使用した場合はmoreimagecaption内に記載すると表示されます。
※1:このURLを相対パスという。※2:このURLを絶対パスという。
公開前のURLでも確認できる（※一部例外あり）メリットがあるため、ハートコアで作成したとび先に飛ばしたい際は相対パスを使用する。ネットショッピングのサイトや外部リンクに飛ばす際は絶対パスを使用。
どちらかわからない場合やエラーが出る際には絶対パスを使用する。
moreimageを使用いない場合は下のソースコードを使用してください。
画像を縦並びしたい時はmoretext3のソースコードを流用
styleタグとdivはセットで使います。styleタグがないと作動しません。
styleタグとdivの間にpタグやh2、h3、figureタグなどを入れることも可能です。
上がfigureタグで下が2枚画像用のソースコードです。
リンク用のソースコードはmoretext4のソースコードを使用してください
リンクを飛ばす際にはpタグやdivタグの中に下記のソースコードを記載してください。
aタグに飛ばしたいURLの記述方法のルールは「画像を配置したい時はmoretext2のソースコードを使用する」の※を参照してください。
ECのとび先等で使う用。デフォルト。
ブランドページ・詳細用
外部サイトに飛ばす用
※クリックすると実際にそのソースコードを使用している記事を確認することが出来ます。
基本的にはaタグのクラス名のみを変更すれば上記の見え方になります。
<a href="https://www.vogue.co.jp/feature/ysl/2025-05-16/?utm_source=partner&utm_medium=display&utm_campaign=spon-ysl250516&utm_content=pr" class="ここを変更">デフォルト用</a>
・デフォルト→クラス名の記述なし
・ブランドページ・詳細はこちら用→c-link
・外部サイトに飛ばす用→othersite
応用編※随時更新予定
ここでは使用頻度が少ないソースコードを載せています。
簡単な線を引きたい際にはhrで線が引けます。下参照
注意点
ソースコード関連
・styleタグは大元での管理しきれなくなり、SEO的にも良くないため、常に使用するのは控えてください。
・pタグには上20px、下40pxのmargin(空白をとる指示)が入っているため、brの連続使用はなるべく控えてください。
データベースの入力関連
ご共有
何か不具合やお気づきの点があればここ（moretitle7のmoretext7）に追記して共有してくださると大変助かります。
・データベース内で特殊文字を使用すると作成した記事が保存できずに消える現象が発生します。（SBJのnewsで事例あり）
