公益社団法人ロングライフビル推進協会

デザインコードについて

今後の適切なサイト運営のため、BELCA Webサイトのデザイン統一、ユーザビリティの向上、SEO対策※１（検索エンジン最適化）を目的とし、最低限にはなりますがデザインコードを以下に取り決めます。

各担当者においては、投稿、固定ページを作成する場合※２は、下記デザインコード等に留意して作成してください。

その他の設定やデザインについては適宜相談とします。不明な点は普及推進部まで連絡を下さい。本内容は今後も随時ブラッシュアップしてく予定です。

※１　SEO対策については下記リンク参照
https://digital-marketing.jp/seo/wordpress-headline-design-indispensable-for-seo/

※２　ニュース投稿、既存下層ページ（htmlで作ったもの）をWordpress上で作成する場合等を指す

※３　既存下層ページを作り替える場合、ディレクトリ管理の為、階層を作るようにしてください。不明な場合は普及推進部まで。

「デザインについて」へ
「下層ページ作成における設定について」へ
「メディア（画像等）の追加について」へ

デザインについて

見出しの設定

必ず各記事に見出しの設定をしてください。ページ最上部のタイトル欄は＜h2＞が設定されているため、本文中の見出しサイズは＜h3＞を基本として下さい。

小見出し等は＜h4＞を使用するなど適宜調整していただいて結構ですが、見出しだらけになるとSEO対策上、混乱を招きますので多用は禁止します。

見出し（h3）の例（大きさ、font、11111）

見出し（h4）の例（大きさ、font、11111）

フォントサイズ（外観）はデフォルト設定のまま使用してください。
また、見出しの装飾（緑の縦棒）は、下記ブロック（カスタムHTMLに記述するcss）をコピーして作成する記事にペーストして下さい。【統一書式とする】※以下により、すべての見出しブロックに適用されます。

【注意】見出し（h4）に装飾を設定したくない場合、別途class指定が必要になりますので、その際は普及推進部まで連絡下さい。

<style>
.wp-block-heading {
padding-left: .5em;
padding-top: .3em;
padding-bottom: .3em;
margin-bottom: 2em;
border-left: 5px solid #15978c;/* 線 */
}
</style>

段落について

本文を記述する際は「段落」ブロックを使用してください。
フォントサイズ等はデフォルト設定のまま使用してください。ハイライトや赤字等は適宜調整してください。
※ちなみに、段落ブロック内で改行する場合のコマンドは「Shift+Enter」です。

カラーコードについて

Webサイト内で使用する色は原則以下とし、カラーコードは下記の通りです。
【ベースカラー】ホワイト　【アクセントカラー】黄色（金）またはグレー（灰）　【サブカラー】緑　

参照：https://blog.digimerce.jp/2020/11/02/10865/（カラーレイアウトについて）

緑：15978c
黄色（金）：BFBD89
グレー（灰）：fafafa


その他、色を追加する場合は過剰にならない様に配慮をお願いします。
【お願い】追加で使用した色のカラーコードは普及推進部までご報告下さい。ほかのページで使用する場合に統一します。

スライダー（スライドショー）をページに挿入する場合

①使用する画像を準備して下さい。縦横サイズを統一するとはみ出し等が無く表示されます。
②使用する画像をメディアライブラリにアップロードしてください。（※ディレクトリ管理の為フォルダで仕分けして下さい。必要であれば別途説明します。）
③「スライダー」の作成ページで作成してください。リンク等の設定は他のデータを参照してください。
④固定ページにスライダーを挿入する場合、「XO Slider」ブロックを使います。
⑤キャプションを入れる場合、cssで細かな配置設定が必要になりますので、最終段階で普及推進部まで連絡下さい。

表の挿入について

本文中に表を挿入する場合、「テーブル」ブロックを使用してください。

テーブルの色やフォント調整にはcssでの設定が必要になります。

アニメーション効果について

必要な場合は「フェードイン」を使用して下さい。このブロックに適用されています。

使用する場合は、以下の通り設定してください。

①まず、作成ページ内で、「カスタムHTML」ブロックに下記css・ｊQueryをペーストしてください。

<script>
jQuery(function () {
// aimation呼び出し
if (jQuery(‘.js-scroll-trigger’).length) {
scrollAnimation();
}

// aimation関数
function scrollAnimation() {
jQuery(window).scroll(function () {
jQuery(“.js-scroll-trigger”).each(function () {
let position = jQuery(this).offset().top,
scroll = jQuery(window).scrollTop(),
windowHeight = jQuery(window).height();

if (scroll > position – windowHeight + 200) {
jQuery(this).addClass(‘is-active’);
}
});
});
}
jQuery(window).trigger(‘scroll’);
});
</script>

<style>
/* アニメーションスタイル / / —————————- / / アニメーションさせる要素に　u-fade-type-up js-scroll-trigger　を付与する / / アニメーション前 */
.u-fade-type-up{
transform: translateY(120px);
opacity: 0;
}
/* トリガー発火でis-activeを付与 */
.u-fade-type-up.is-active{
transition: 1.5s;
transform: translateY(0);
opacity: 1;
}
</style>

②フェードインを適用したいブロックを選択し、画面右に出るブロックの設定バー内【高度な設定】→【追加CSSクラス】に以下を貼り付けてください。

u-fade-type-up js-scroll-trigger is-style-default

下層ページ作成における設定について

下層ページを作成する際は以下を必ず設定してください。不明な場合は普及推進部までお願いします。

参考：https://gmotech.jp/semlabo/seo/blog/permalink/

パーマリンクの設定について

設定は画面右に出るの固定ページ設定バーの【URL】をクリックし、パーマリンク欄に英語（アルファベット小文字）で入力してください（下図参照）。

【重要】設定する際は、ページの内容が端的にわかる単語としてください。

＜参考図＞パーマリンクとページ属性の設定方法

ページ属性（階層）の設定について

既存下層ページの作り替えを行う際は、各ページのディレクトリ管理のため、親子階層を必ず設定してください。

【重要】階層を設定する際は、全体のディレクトリ構成を普及推進部まで事前に教えてください。管理上、必要な情報ですのでよろしくお願いします。


設定は画面右に出るの固定ページ設定バーの【ページ属性】で行ないます（上図参照）。
※親ページは先にに公開されている必要があります（パスワード付限定公開でも設定は可）。

設定方法がわからない場合、普及推進部まで連絡下さい。

【重要】下層ページを作り替えた際のリダイレクト設定について

下層ページをWordpressで作り替えてリリースする際には、リダイレクト設定（既存ページからの自動遷移）をする必要がありますので、作業完了しましたら普及推進部まで連絡をください。

メディア（画像等）の追加について

投稿や固定ページを作成する際、画像やPDF等を使用する場合には、Wordpress上の「メディア」にデータが追加されますが、データ管理のため当方でフォルダ分けをしますので、予めご了承ください。

以上

普及推進部

ページ上部へ