2019年5月12日(日)
[設計] ブログとホームページ #■子猫の手

　子猫の手は、『ブログ』と『ホームページ』を作成するWebアプリです。ブラウザが利用できる環境であれば、デバイスを問わず、どこでもご利用いただけます。FacebookなどのSNS [Social Networking Service]が煩わしい方々にお勧めしています。



■ブログ

・１ブログ単位に、角丸の外枠で区切って表示します。
.box {
  padding      :2px;
  border-radius:8px;
  border-top   :solid 1px 指定カラー明;
  border-left  :solid 1px 指定カラー明;
  border-right :solid 2px 指定カラー暗;
  border-bottom:solid 2px 指定カラー暗;
  background   :指定カラー箱;
}
・日付で、ニュース、本日関連のブログ、過去のブログの３つに区別します。
・トップページに、ニュース、本日関連のブログを表示します。本日関連のブログが無い場合は、過去のブログを１～５件表示します。
・［すべて］または各［分類］で、表示できます。
・［５件区切り］［タイトル全件］［カレンダー］で、表示できます。


【日付】

・太字、指定カラー濃
・単日、開始日～終了日、終了日未定
・入力方法：ボタン、直接、カレンダー（祝日明記）
・ボタン入力では、月(1～末日)、上旬(1～10)、中旬(11～20)、下旬(21～末日)の指定可能


【タイトル】

・太字
・タイトル未入力の場合は、自動的に無題


【分類】

・指定カラー淡、#分類名で表示
・既存分類の選択
・新規分類の入力
・分類未指定の場合は、自動的にその他
・分類の名称、表示順の変更可


【本文】

・アドレスの自動リンク（一行に、http://または" target="_blank">https://からアドレスのみを記述。常に、新しいウインドウで開く。）" target="_blank">http://またはhttps://からアドレスのみを記述。常に、新しいウインドウで開く。）


【画像】

・JPEG、PNG、GIF
・16,613,376画素以下
・スライド利用 ON/OFF
・回転補正あり
・サムネールの自動作成
img {
  border-style:none;
  vertical-align:middle;
}



■ホームページ

・コンテンツは８種類で、コンテンツを積み重ねて、ページを作成します。
・コンテンツの上下に余白4pxを設けて、見やすくしています。（つまり、コンテンツ間は8pxとなります。）
padding:4px 0px;・・・marginではありません。

・各コンテンツに、IDが振られており、ページ内リンクを#line*で利用できます。ページタイトル行は#line0で、これを指定すると［トップページ］［フォルダ（一階層）］のリンクが表示エリアの上部に隠れます。

-- 第一階層のページ --
<div>サイトタイトル</div>
<div>［トップページ］［フォルダ１］［フォルダ２］［フォルダ３］</div>
<div id="line0">ページタイトル</div>
<hr>
<div id="line1">コンテンツ１</div>
<div id="line2">コンテンツ２</div>
<div id="line3">コンテンツ３</div>
<div id="line3">コンテンツ４</div>
<div id="line3">コンテンツ５</div>
<hr><hr>
<div>byNetworkCommunicationNote</div>
<br><br><br>
--


【見出し】

・18pt、指定カラー濃
.headline {
  padding:4px 0px;
  font-size:18pt;
  color:指定カラー１;
}


【メモ】

・12pt、黒色または白色
・アドレスの自動リンク（一行に、http://または" target="_blank">https://からアドレスのみを記述。常に、新しいウインドウで開く。）" target="_blank">http://またはhttps://からアドレスのみを記述。常に、新しいウインドウで開く。）


【水平線】

・<hr>のみ（簡易に作成するため）


【画像ファイル】

・JPEG、PNG、GIF
・16,613,376画素以下
・スライド利用 ON/OFF
・回転補正あり
・サムネールの自動作成
・タイトル：指定カラー２（淡）
・表示幅の狭いスマホなどの場合、画像のサムネールの長辺は、スマホの最大表示幅になります。


【PDFファイル】

・画像ファイル以外は、PDFファイルのみとしています。


【リンク】

・タイトル、アドレス（タイトルが空白の場合は、アドレス表示）
・新しいウインドウで開く ON/OFF


【フォルダ】

・階層構造


【HTMLタグ】

・JavaScript可
・PHP不可