我孫子市国際交流協会HPのリニューアル試作の様子を紹介します。
現サイト AIRA我孫子市国際交流協会
試作版の概要
タイトル AIRA 我孫子市国際交流協会
試作URL https://abi.sakura.ne.jp/aira/
テーマ X-T9 https://abi.sakura.ne.jp/x-t9/
(WordPressフルサイト編集)
プラグイン BackWPup､VK All in One Expansion Unit､VK Block Patterns､VK Blocks､Contact Form 7
メニュー ホーム､協会概要･入会案内､日本語教室､外国語会話､イベント情報､アルバム､Newsletter Abiko､リンク
ブロックの利用例
Full width Slider (スライダー)
ホーム(フロントページ)の上部(ナビの下)に全幅のスライダーを設置した。
外観-エディターｰテンプレート-フロントページ
ブロック挿入-パターン-Featured-Full width Slider
TAB(タブ)
タブの設置 https://abi.sakura.ne.jp/aira/info/
ブロック-カスタム HTML
タブ css､script
<style>
/*tab.css*/
.tab input, .tab .tabcontent {display: none;padding-top:1em;}
#tab1:checked ~ .tab1,
#tab2:checked ~ .tab2,
#tab3:checked ~ .tab3,
#tab4:checked ~ .tab4,
#tab5:checked ~ .tab5,
#tab6:checked ~ .tab6,
#tab7:checked ~ .tab7,
#tab8:checked ~ .tab8,
#tab9:checked ~ .tab9 {display: block;border-top:1px solid gray;}
.tab label {
position:relative;
top:1px;
cursor: pointer;
height:2.5;
line-height:2.5;
padding: 3px 8px 0px 8px;
display: inline-block;
text-align: center;
color: #657e29;
font-size: 13px;
}
.tab label:hover {
background:#233a73; // ThreeDLightShadow;
border-radius:4px 4px 0 0;
color: #fff; //c30;
}
.tab input:checked + label {
background: #fff; border:1px solid gray; border-bottom-style: none;
border-radius:4px 4px 0 0; -webkit-border-radius:4px 4px 0 0;
color: #c30;
border-bottom: 1px #fff solid;
cursor: default;
}
</style>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<!--tabs-->
<script type="text/javascript"> $(function() {var hash = location.hash; hash = (hash.match(/^#tab\d+$/) || [])[0]; if($(hash).length){ var tabname = hash.slice(1) ; var element = document.getElementById(tabname); element.setAttribute("checked", "checked");}});</script>
タブ html
<section class="tab">
<input type="radio" name="nav" id="tab1" checked="checked" / ><label for="tab1">タブ_TAB1</label>
<input type="radio" name="nav" id="tab2" /><label for="tab2">タブ_TAB2</label>
<input type="radio" name="nav" id="tab3" /><label for="tab3">タブ_TAB3</label>
<article class="tabcontent tab1 _border4">
<p>タブ_TAB1<br>ここに記事ここに記事</p>
</article><article class="tabcontent tab2">
<p>タブ_TAB2<br>ここに記事ここに記事<br>ここに記事ここに記事</p>
</article><article class="tabcontent tab3">
<p>タブ_TAB3<br>ここに記事ここに記事<br>ここに記事ここに記事<br>ここに記事ここに記事</p>
</article>
</section>
カレンダー
AIRAカレンダー(google calendar)
https://abi.sakura.ne.jp/aira/calendar/
地図
アクセス 我孫子市国際交流協会
https://abi.sakura.ne.jp/aira/access/
<div class="iframe mt05">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3232.8685940820337!2d140.00640597579647!3d35.87673697252483!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60189d67daa78f7b%3A0x9045b6ee15c8df01!2z5oiR5a2r5a2Q5biC5Zu96Zqb5Lqk5rWB5Y2U5Lya!5e0!3m2!1sja!2sjp!4v1735536223982!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
Font Awesome
Font Awesome Version 6 アイコンリスト
https://fontawesome.com/search?o=r&m=free
Font Awesomeを用いるいくつかの場面
ブロック-リスト
https://abi.sakura.ne.jp/aira/link/
https://abi.sakura.ne.jp/aira/newsletter/
<style>
.is-style-vk-arrow-mark li::before{content: "\f1c1"!important;}
.mt-1{margin-top:-1em!important;}
</style>
ブロック-横並び
https://abi.sakura.ne.jp/aira/privacy-policy/
ブロックｰ横並び 左にアイコン､右に段落