新サイトの、ナビゲーターからリンクされている4-固定記事の構造と書き方
新サイトの固定ページ、4ページは訪問者の利便を考えて長文の作りになっています。掲載内容が一瞥で把握できるように、大見出し、中見出し、小見出しを採用しています。
その他、簡単なHTMLタグを使用して作成しています。
固定ページで使用しているHTML-TAG
<h2>,<h3>,<h4>,<h5> ヘッダー・タグ
<div> (division) 区域、
<table>、<tr>、<th>、<td> 表を作成するタグ
<ol>、<ul>、<li> リストを作成するタグ「会員募集について」が <h2>(大見出し)です。<h2> 以下は、<div> で区域(赤枠)が設定されています。「会員の種類・・・」がh3(中見出し)となり、その下に
新たな div(赤枠)が作成されます。同じようにして、h4 + div、h5 + div が作成されています。
<div> (division) 区域、
<table>、<tr>、<th>、<td> 表を作成するタグ
<ol>、<ul>、<li> リストを作成するタグ「会員募集について」が <h2>(大見出し)です。<h2> 以下は、<div> で区域(赤枠)が設定されています。「会員の種類・・・」がh3(中見出し)となり、その下に
新たな div(赤枠)が作成されます。同じようにして、h4 + div、h5 + div が作成されています。
各 div は左側に3%の余白を作り、区域分けを明確にしました。
「会員の種類・・・」のh3 の右に「▲」が表示されています。
これは、以下の div を表示、非表示する目印で、h3に「class=”jq-xxx”」を記入すると表示される設定です。
cidに”jq”が含まれているh3をクリックすると「jQuery(プログラム名)」が作動して下位の div を表示、非表示します。
表示、非表示を区別するため、この div に「class=”jq-item”」を加えます。
「class=”jq-item”」が付いている div は「css」で非表示に設定されているので、ページを読み込んだ時点では表示されていません。
「class=”jq-itemd”」が付与された div は常時表示されています。
<div class="jq-itemd"> --> 常に表示されている区域
<div class="jq-item"> --> 表示、非表示がクリックで切り替わる区域。
(<hx id="jq-xxxxx"> と連携して作動します)
実際のページ構造
下図は、各DIVの範囲を赤線でで囲った参考図です。
実際の記事の内容(概略)
<div class="commnt">サポートセンターについて ここから</div>
<h2 id="jq-saposen">認定NPO法人あさお市民活動サポートセンターについて</h2>
<div class="jq-item">
平成19年4月の開館時から「麻生市民交流館やまゆり」を運営していた市民組織
<table><tr><td>理事長</td><td>XXXX</td></tr>
<tr><td>副理事長</td><td>YYYY、ZZZZ、WWWW</td></tr>
<tr><td>理 事</td><td>AAA、BBB、CCC、DDD、EEE、FFF、GGG</td></tr>
<tr><td>監 事</td><td>JJJ、KKK、LLL</td></tr></table>
</div>
<div class="commnt">会員募集について ここから</div>
<h2 id="kaiinnboshuu">会員募集について</h2>
<div class="jq-itemd">
<h3 id="jq-seifuku">会員の種類は「正会員」と「賛助会員」があります</h3>
<div class="jq-item">
<h4>正会員</h4>
<div class="jq-itemd">
この法人の目的に賛同し、活動及び事業ら推進に寄与して頂ける個人及び団体
</div>
<h4>賛助会員</h4>
<div class="jq-itemd">
この法人の目的に賛同し、活動を援助して頂ける個人及び団体
<h5>個人会員</h5>
<div class="jq-itemd">
印刷室の利用が可能です
</div>
<h5>団体会員</h5>
<div class="jq-itemd">
下記の特典があります
<ul>
<li>「やまゆりニュース」「あさおふれんず」・・・</li>
<li>市民館、図書館、・・・</li>
</ul>
</div>
</div>
</div>
<h3 id="jq-shikaku">会員の資格</h3>
<div class="jq-item">
<ul class="jq-itemd">
<li>会員の資格は「会員申込書」</li>
</ul>
</div>
<h3 id="jq-kaihi">年会費</h3>
<div class="jq-item">
<ul class="jq-itemd">
<li>会費は毎年4月に更新されます。</li>
</ul>
会費
<table border="3" cellpadding="5" cellspacing="0" style="margin-top: 2px"><tr><th>会員の種類</th><th>個人・団体</th><th>1口金額(円)</th><th>応募口数</th></tr><tr><th rowspan="2">正会員</th><td>個人</td><td>2,000</td><td>1口</td></tr><tr><td>団体</td><td>3,000</td><td>1口</td></tr><tr><th rowspan="2">賛助会員</th><td>個人</td><td>2,000</td><td>1口以上</td></tr><tr><td>団体</td><td>5,000</td><td>1口以上</td></tr></table>
<a href="https://yamayuri.ne.jp/wp-content/uploads/2018/07/4daefcf4ce3205ae7ade30617863f604.pdf" download="https://yamayuri.ne.jp/wp-content/uploads/2018/07/4daefcf4ce3205ae7ade30617863f604.pdf">応募用紙 DownLoad</a>
</div>
</div>
<div class="commnt">運営スタッフ公募 ここから</div>
<h2 id="jq-uneistaff">運営スタッフ公募</h2>
<div class="jq-item">
<strong>『市民による、市民ための運営』に参加しませんか。</strong>
「空いている時間を使い地域コミュニティに貢献したい人」、・・・
<ul class="jq-itemd">
<li><span style="color:red">応募締め切り:9/25(金)</span></li>
</ul>
【応募チラシ】
<img src="http://asaoyamayuri.sakura.ne.jp/newyamayuri/wp-content/uploads/2020/09/20200807staffoubotirasi.png" alt="" width="826" height="1169" class="aligncenter size-full wp-image-3881" />
【応募用紙】
<a href="https://yamayuri.ne.jp/wp-content/uploads/2020/08/20200806staffmousikomi.pdf" download="https://yamayuri.ne.jp/wp-content/uploads/2020/08/20200806staffmousikomi.pdf">運営スタッフ・応募用紙 DownLoad</a>
</div>
<div class="commnt">情報公開 ここから</div>
<h2 id="jq-jyouhoukoukai">情報公開</h2>
<div class="jq-item">
<img src="http://asaoyamayuri.sakura.ne.jp/newyamayuri/wp-content/uploads/2018/06/bcffa4e46ed7678a766e20f9ba729120-1024x610.jpg" alt="" width="1024" height="610" class="aligncenter size-large wp-image-883" />
<ol>
<li><a href="http://yamayuri.ne.jp//wp-content/uploads/2018/05/h26jigyouhoukokusyo.pdf" target="_blank">平成26年度事業報告書</a></li>
</ol>
</div>
<div class="commnt">プライバシーポリシー ここから</div>
<h2 id="privacy">プライバシーポリシー</h2>
<div class="jq-itemd">
</div>
投稿の回復
サポートセンター記事の作成・編集は少し難しそうですが、失敗時に元に戻す機能がありますので必要時にご利用ください。
投稿・編集の画面の下の方の「リビジョン」がこの機能です。
過去の記事の保存日時を見て、戻したい日付の保存記事をクリックする。
表示された保存内容を確認して、「リビジョンを復元」をクリックして編集する前の状態に戻すことが出来ます。
コメント
Appreciate you sharing, great blog post. Really looking forward to read more. Cool. Aggy Eugenio Leffert
Greate article. Keep posting such kind of information on your blog. Jorie Haven Sterling
This is one awesome post. Thanks Again. Much obliged. Darda Thorpe Ferro
Coquettish darn pernicious foresaw therefore much amongst lingeringly shed much due antagonistically alongside so then more and about turgid. Rhonda Tobin Elfont
I am sure this post has touchd all the internet viewers, its relly reallky good article on building up new weblog. Margret Moore Xylina
I truly appreciate this blog post. Much thanks again. Cool. Donnamarie Blane Anna-Diana
Hi, this weekend is fastidious for me, since this occasion i am reading this great informative piece of writing here at my residence. Sherri Vernen Quincy
From another reader: The thing is, a good commentariat turns a blog into a community, and a topic into a conversation. Lynnette Merrill Erie
Muchos Gracias for your article post. Thanks Again. Great. Guglielma Ulrick Eveline
I am really pleased to glance at this website posts which contains lots of valuable data, thanks for providing these statistics. Illa Siffre Hennahane
Really enjoyed this post. Much thanks again. Much obliged. Brianna Thaine Rodge
I am actually happy to read this webpage posts which consists of lots of helpful information, thanks for providing these kinds of data. Lucilia Donnell Claudio
There is obviously a bundle to know about this. I feel you made certain good points in features also. Anita Vlad Leia
There is noticeably a bundle to find out about this. I assume you made certain nice factors in options also. Georgeanna Jacques Trabue
Amazing! Its actually amazing post, I have got much clear idea regarding from this post. Geneva Jarred Emmalee
A big thank you for your blog article. Really thank you! Much obliged. Vida Niels Mayberry
I conceive you have mentioned some very interesting details, thank you for the post. Aubine Tyrus Leena
Beautiful! I am so happy for your family. Wishing speedy recovery for the both of them and God bless you all. Sashenka Herculie Statis
What a information of un-ambiguity and preserveness of precious know-how regarding unexpected emotions. Kiele Dene Bathulda
I just like the helpful info you supply in your articles. Barry Wylie Marylee
That is a very good tip particularly to those new to the blogosphere. Florie Owen Moriarty
Wonderful article! We will be linking to this great content on our website. Karoly Flemming Esmaria
Unser aufrichtiges Beileid Hannes und Karoline Teufl Leanna Morty Mills
Fantastic beat ! I wish to apprentice while you amend your site, how can i subscribe for a blog web site? The account aided me a acceptable deal. I had been a little bit acquainted of this your broadcast offered bright clear concept Rosella Bill Daberath
Needed to post you one very little remark in order to say thank you over again just for the lovely methods you have discussed on this website. Hally Alberik Dodds
Having read this I believed it was really informative. I appreciate you spending some time and effort to put this information together. I once again find myself personally spending a significant amount of time both reading and leaving comments. But so what, it was still worth it! Lindsay Isador Edveh
Way cool! Some very valid points! I appreciate you writing this write-up and also the rest of the website is also really good. Danyelle Law Beata
After looking into a handful of the blog posts on your web page, I honestly appreciate your technique of blogging. I saved as a favorite it to my bookmark site list and will be checking back in the near future. Please visit my web site too and tell me what you think. Min Albrecht Allrud
Having read this I thought it was very enlightening. I appreciate you finding the time and energy to put this information together. I once again find myself personally spending a lot of time both reading and commenting. But so what, it was still worthwhile! Lanny Wilton O’Hara