HPWS2023

パソ隊HPの構成･更新について学習

by hpws

サイト情報

タイトル　パソコン楽しみ隊
サーバー　さくらインターネット　プラン→スタンダード 容量 300GB
アドレス　https://pasotai.org/
WordPressログイン　https://pasotai.org/wp-login.php
ユーザー
　管理者　kawaguchi
　編集者　abe,gunji,konishi,miyamoto,sengoku,nisino,yamazoe
　投稿者　blog
テーマ　　hueman → Hueman Child
　要旨　https://ja.wordpress.org/themes/hueman/
　デモ　https://demo-hueman.presscustomizr.com/
　カスタマイズ　https://presscustomizr.com/hueman/
プラグイン
　Contact Form 7
　Easy FancyBox
　UpdraftPlus – Backup/Restore

カスタマイズ

追加CSS に以下を追加しています。

/*blogトップ部分*/dl.listpara dt, dl.listpara dd{ margin-bottom:2px;}dl.listpara dt {width:5.0em;}dl.listpara dd {padding-left:5.0em;}
/*追加css アイキャッチ画像を50%サイズに*/section.content div.post-thumbnail{width:50%;}section.content div.post-format{ width:50%; float:right; padding:0 0 .5em .5em;}section.content div.clear{clear:left;}

/*上書き*/
.imgright, .imgleft{width:30%!important;}
table.wauto {width:auto!important;}
div, span{font-size:13px; line-height:1.3em;}

.lh3 {line-height:3.0em!important;}
.lh25 {line-height:2.5em!important;}
.lh2 {line-height:2.0em!important;}
.lh15 {line-height:1.5em!important;}
.lh14 {line-height:1.4em!important;}/*初期設定値*/
.lh13 {line-height:1.3em!important;}
.lh12 {line-height:1.2em!important;}
.lh11 {line-height:1.1em!important;}
.lh1 {line-height:1em!important;}


　header.php <head>タグに以下を追加しています。

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel='stylesheet' href='https://pasotai.sakura.ne.jp/cdn/2.3.0/hpwg.c.css' /><script type='text/javascript' src='https://pasotai.sakura.ne.jp/cdn/2.3.0/hpwg.tab.js'></script>
<!--gallery-->
<script>window.loadCSS = window.loadCss = function(e,n,t){var r,l=window.document,a=l.createElement("link");if(n)r=n;else{var i=(l.body||l.getElementsByTagName("head")[0]).childNodes;r=i[i.length-1]}var o=l.styleSheets;a.rel="stylesheet",a.href=e,a.media="only x",r.parentNode.insertBefore(a,n?r:r.nextSibling);var d=function(e){for(var n=a.href,t=o.length;t--;)if(o[t].href===n)return e.call(a);setTimeout(function(){d(e)})};return a.onloadcssdefined=d,d(function(){a.media=t||"all"}),a};     window.onloadCSS = function(n,o){n.onload=function(){n.onload=null,o&&o.call(n)},"isApplicationInstalled"in navigator&&"onloadcssdefined"in n&&n.onloadcssdefined(o)}</script>
<script>onloadCSS(loadCss( 'https://assets.jimstatic.com/web.css.77cfc915fe222f26e0fee5315a170b55.css') , function() {this.id = 'jimdo_web_css';});</script>
<script>var jimdoData = {"tr":{"common":{"timeout":""},"form":{"badRequest":""}}};</script>
<script>(function(window) { "use strict"; var regBuff = window.__regModuleBuffer = []; var regModuleBuffer = function() { var args = [].slice.call(arguments); regBuff.push(args); }; if (!window.regModule) { window.regModule = regModuleBuffer; } })(window);</script>
<script src="https://pasotai.sakura.ne.jp/assets/gallery/web.js" async="true"></script>
<!--animate-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">

サイドバー

サイドバーの編集は､[外観]-[ウィジェット]-[メイン]で設定
　検索:検索　[ウィジェット]-[検索]
　カスタムHTML:トピックス　任意にトピックスを編集
　カスタムHTML:お知らせ　任意にお知らせを編集
　最近の投稿:最近のブログ　[ウィジェット]-[最近の投稿] 5件表示
　カスタムHTML:更新履歴　任意に更新履歴を編集

投稿(ブログ)

投稿は｢ブログ見本｣を使うのが便利で簡単
｢ブログ見本｣の利用方法を示します。

  1. [プロックを追加]-[すべて表示]-[再利用可能]タブ-[ブログ見本]をクリック
  2. ここで必ず､ブロック-[ブログ見本]の状態で[オプション]-[通常のブロックに変換]をクリック
  3. 以降､通常のブロック編集が行えます。

カテゴリー設定　　適切にカテゴリーを設定
アイキャッチ画像　サイズは 600x300px (縦横比は必ず 1:2)

再利用可能(再利用ブロック)の登録

再利用ブロックとは､ブロックの組み合わせを登録しておく機能です。再利用ブロックの登録手順を示します。

  1. [投稿]または[固定ページ]から､登録範囲を選択して[ブロックをコピー]
  2. [オプション]メニューから[再利用ブロックを管理]をクリック
  3. [新規追加]をクリック
  4. [タイトルを追加]し､コピーしてあるブロックを貼り付け
  5. [公開]をクリックして保存。
    以後､[プロックを追加]-[すべて表示]-[再利用可能]タブから利用できます。

[ブロックを追加]で再利用ブロックを追加した後は､全体が[再利用ブロック]と言うブロックになります。このブロックを更新すると､使用中のすべての場所に変更を適用されます。従って､[通常のブロックに変換]を必ず実施してください。

固定ページ

パソ隊ホームページは以前のHTML版からそのまま移行しているので、ブロックは基本[カスタム HTML]になっています。
hpwg.c.cssをダウンロードしてクラスを把握しておいてください。
各ページの更新担当の方は､一般のブロックへ変換を試みてください。
(手順→複製ページを作って試し､完成したら複製し､本ページへ貼り付け)
但し､[カスタム HTML]でなければ記述できない部分があります。(タブ､ギャラリー等)

ホーム

[ホーム]のブロックはすべて[カスタム HTML]

市民ICT講座

[市民ICT講座]も現在すべて[カスタム HTML]。｢Formメール｣利用

マンツーマン相談

[カスタム HTML][段落][クラシック]の組み合わせ

メールマガジン

[メールマガジン]は､すべて一般的なブロック(見出し､段落､整形済みテキスト)に変換済み。但し､メルマガ 登録フォームの実装は[カスタム HTML]
毎月の更新は｢パソ隊メルマガ バックナンバーご紹介｣で､前月度のメルマガ内容(整形済みテキスト)

ちょいネットカフェ

[ちょいネットカフェ]も現在すべて[カスタム HTML]

脳活パソコン､スマホ連続講座

[脳活パソコン､スマホ連続講座]も現在すべて[カスタム HTML]。｢タブ｣利用

中学校パソコン教育支援

[中学校パソコン教育支援]も現在すべて[カスタム HTML]。｢タブ｣利用

あびこ子どもまつり

[あびこ子どもまつり]も現在すべて[カスタム HTML]。｢タブ｣利用

市民のチカラまつり

[市民のチカラまつり]も現在すべて[カスタム HTML]。｢タブ｣利用

我孫子12景めぐり

[見出し][段落][カスタム HTML]の組み合わせ。｢ギャラリー｣利用

パソ隊サロン

[見出し][段落][カスタム HTML]の組み合わせ。｢タブ｣利用

ワーキンググループ

[見出し][段落][クラシック][カスタム HTML]の組み合わせ。｢ギャラリー｣､｢タブ｣利用

研修会

[見出し][段落][カスタム HTML]の組み合わせ。｢タブ｣利用

会員の広場

[会員の広場]のブロックはすべて[カスタム HTML]

HTML記述の解説

アイコンフォント

アイコンフォントは､｢Font Awesome(フォントアッサム)v4.7.0｣を用いています。コードを示します。
<i class=”fa fa-flag x-large trend fa-fw “></i>
fa-flagは､アイコンフォントの種類です。
　フォントの種類⇒ Icons
x-largeは、サイズです。
　fa-lg､fa-2x､fa-3x､fa-4x､fa-5x
trendは､色です。
　red､white､whiteopacity､gray､black､muted､primary､success､info､warning､danger

区切り

[段落]または[カスタムHTML]で専用の区切りを用いる。
<p><span class=”divider”></span></p>

タブ機能

タブ機能のHTMLコードを示します。

<!--tabのリスト-->
<ul class="nav nav-pills nav-tabs">
<li><a class="nav-link active" href="#tabs1" data-toggle="tab">タブ1</a></li>
<li><a class="nav-link" href="#tabs2" data-toggle="tab">タブ2</a></li>
<li><a class="nav-link" href="#tabs3" data-toggle="tab">タブ3</a></li>
</ul>

<!--tab-content スタート-->
<div class="tab-content mt1"><!--tab-content-->
<div id="tabs1" class="tab-pane active"><!--start tab-pane-->
<!--↓これ以降にtabs1(タブ1)本文-->

<p>ここにタブ1の内容を記述</p>
<p>ここにタブ1の内容を記述</p>
<p>ここにタブ1の内容を記述</p>

<!--↑tabs1(タブ1)本文ここまで-->
<!--tab-paneの終わりと次のスタート-->
</div><!--end tab-pane-->
<div id="tabs2" class="tab-pane"><!--next start tab-pane-->
<!--↓これ以降にtabs2(タブ2)本文-->

<p>ここにタブ2の内容を記述</p>
<p>ここにタブ2の内容を記述</p>
<p>ここにタブ2の内容を記述</p>
<p>ここにタブ2の内容を記述</p>

<!--↑tabs2(タブ2)本文ここまで-->
<!--tab-paneの終わりと次のスタート-->
</div><!--end tab-pane-->
<div id="tabs3" class="tab-pane"><!--next start tab-pane-->
<!--↓これ以降にtabs3(タブ3)本文-->

<p>ここにタブ3の内容を記述</p>
<p>ここにタブ3の内容を記述</p>
<p>ここにタブ3の内容を記述</p>
<p>ここにタブ3の内容を記述</p>
<p>ここにタブ3の内容を記述</p>

<!--↑tabs3(タブ3)本文ここまで-->
<!--tab-paneの終わり-->
<!--tab-content エンド-->
</div><!--end tab-pane-->
</div><!--tab-content end-->
<div class="clearfix"></div>

写真ギャラリー

写真ギャラリー機能のHTMLコードを示します。

<!--gallery-->
<article class="imgauto block">
  <div id="gallery0101">
    <a rel="lightbox[0101]" href="javascript:" data-href="https://pasotai.org/wp-content/uploads/gallery01.jpg" data-title="" class="md-2 gap1">
      <img src="https://pasotai.org/wp-content/uploads/gallery01-320x320.jpg"  data-orig-width="1366" data-orig-height="768" title=""></a>
    <a rel="lightbox[0101]" href="javascript:" data-href="https://pasotai.org/wp-content/uploads/gallery02.jpg" data-title="" class="md-2 gap1">
      <img src="https://pasotai.org/wp-content/uploads/gallery02-320x320.jpg" data-orig-width="1366" data-orig-height="768" title=""></a>
    <a rel="lightbox[0101]" href="javascript:" data-href="https://pasotai.org/wp-content/uploads/gallery03.jpg" data-title="" class="md-2 gap1">
      <img src="https://pasotai.org/wp-content/uploads/gallery03-320x320.jpg" data-orig-width="1366" data-orig-height="768" title=""></a>
    <a rel="lightbox[0101]" href="javascript:" data-href="https://pasotai.org/wp-content/uploads/gallery04.jpg" data-title="" class="md-2 gap1">
      <img src="https://pasotai.org/wp-content/uploads/gallery04-320x320.jpg" data-orig-width="1366" data-orig-height="768" title=""></a>
    <a rel="lightbox[0101]" href="javascript:" data-href="https://pasotai.org/wp-content/uploads/gallery05.jpg" data-title="" class="md-2 gap1">
      <img src="https://pasotai.org/wp-content/uploads/gallery05-320x320.jpg" data-orig-width="1366" data-orig-height="768" title=""></a>
    <a rel="lightbox[0101]" href="javascript:" data-href="https://pasotai.org/wp-content/uploads/gallery06.jpg" data-title="" class="md-2 gap1">
      <img src="https://pasotai.org/wp-content/uploads/gallery06-320x320.jpg" data-orig-width="1366" data-orig-height="768" title=""></a>
  </div>
  <script id="0101">window.regModule("module_gallery", {"view":"1","countImages":12,"variant":"default","selector":"#gallery0101", "imageCount":18,"enlargeable":"1","multiUpload":true,"autostart":1,"pause":"4" ,"showSliderThumbnails":1,"coolSize":"2","coolPadding":"3","stackCount":"3" ,"stackPadding":"3","options":{"pinterest":"0"},"id":0101});</script>
</article>

<div class="clearfix"></div>

高度な設定の解説

HTMLアンカー

ページ内リンクの飛び先のIDを設定します。
リンク先としてこのIDを指定します。
例 HTMLアンカー:jp1　リンク:#jp1

追加CSSクラス

ブロックに､CSSクラスを設定することが出来ます。複数クラスの設定可

hbottom anidown d1

見出しH2

hleft mt1

見出しH3

開催実績過去一年の掲載
各日の記事は[段落]。全ての段落を[グループ]化して､グループにクラスを設定します。
date

2023/05/05 第2回テーマ「ワードを始めよう」
1.いろいろな文字の入力練習
2.ワードをはじめる 画面の説明 起動と終了
3.新規文章を作る

2023/04/07 第1回 PC操作
文字入力､エクスプローラーなど､PC操作について

2023/03/03 第11回 マイアルバム作成
立体的な画像作成､テキストボックス､改ページ､セクションの区切り

テーブル
tbl1 w100

日にち2023年 7/14, 8/11, 9/8
時 間1回目 9時20分～10時20分
2回目10時40分～11時40分
場 所けやきプラザ（主に6階講師控室）
費 用一人 60分 1,200円
申し込み〇〇 04-xxxx-xxxx あるいは
申し込みフォームからお申し込み下さい。

画像へ文章を回り込ませる

画像の配置を[左寄せ]又は[右寄せ]にして､オプション-[後に挿入]､段落が挿入されるので文章を入力します。

ある夜、ごくたちの悪い酒場に、なかば茫然ぼうぜんとして腰かけていると、その部屋の主な家具をになっているジン酒かラム酒の大樽おおだるの上に、なんだか黒い物がじっとしているのに、とつぜん注意をひかれた。私はそれまで数分間その大樽のてっぺんのところをじっと見ていたので、いま私を驚かせたことは、自分がもっと早くその物に気がつかなかったという事実なのであった。私は近づいて行って、それに手を触れてみた。それは一匹の黒猫――非常に大きな猫――で、プルートォくらいの大きさは十分あり、一つの点をのぞいて、あらゆる点で彼にとてもよく似ていた。
画像例 https://pasotai.org/wp-content/uploads/マンツーマン相談チラシ2023.jpg
ドキュメント例 https://pasotai.org/wp-content/uploads/マンツーマン相談チラシ2023.pdf