blogger開発講座: 5月 2017

2017年5月10日水曜日

☕コーヒーブレイク新サイト公開

まだできかけですが、公開してみました。
検索機能がまだ未作成ですが、基本と数件のサンプルは、見られるかな？
ここまで公開した作成ノウハウは、このサイトの作成途上に作成したものです。
各ページは、今度書く予定の自動作成によるページ作成で、自動作成しています。
基本データを登録ページで作成して、自動作成プログラムを実行すると、自動で、html のページとして作成されます。
まだできかけで、データも数件ですし、表示情報も、全てでは、ありません。
各コミック情報や文庫情報も、表示予定ですが、ASP 登録後できないと表示できませんので、サイト登録中です。
表示するのにID が、必要ですし、表示してると、サイト登録できないので、今は、表示してません。
これから表示処理を作成します。
何回目の作成だっけ？
今回は、メインなので、少し大きめ？
アニメの時は、3個表示だった！
今回は、1個かな？
表示処理も、公開しますね！

RSSファイルを作成する

rssファイルは、サイト情報(どんなサイトなのか)とサイト更新(更新内容)を記載して、サイト内容をネットに公開するためのファイルです。
直接サイトを閲覧しなくても、rssファイルを閲覧するだけでサイト内容や更新内容を閲覧できるファイルと言えます。
ランキングサイトなどに登録すると、更新情報としてping等で送信したりします。
ファイル形式は、xmlでrssの記載ルールに基づく記載方法で記載された物を示します。
記載形式として、RSS1.0とRSS2.0がありますが、細かい違い等を詳しく知りたい方は、ネットでお調べください。
今回は、簡単に作っていきます。
書き方としては、HTMLもXMLも同じと考えます。
順番として以下になります。
①RSS記載内容定義
②サイト情報記載
③新着サイトページ情報記載
④新着サイトページ情報記載
　　　　：
⑤終了記載
詳細
①RSS記載内容定義
以下を記載します。おまじないと思って書いてます。
意味としては、xml1.0形式で文字コードにUTF-8を使い、RSS2.0で記載するって感じの内容となります。

<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xml:lang="ja">

②サイト情報記載
以下は、私の今作成中サイトの記載です。

<channel>
<title>コミックフロンティア</title>
<link>http://comicfrt.webcrow.jp/</link>
<description>コミックまとめサイト</description>;
<language>ja</language>
<copyright>Copyright (c) 2017, [まりね]</copyright>
<lastBuildDate>Sun, 07 May 2017 16:49:01 +0300</lastBuildDate>

・開始の記載<channel>
・サイトのタイトル<title>コミックフロンティア</title>
・サイトURL<link>http://comicfrt.webcrow.jp/</link>
・サイト内容<description>コミックまとめサイト</description>;
・日本語表記設定<language>ja</language>
・サイトの権利者記載<copyright>Copyright (c) 2017, [まりね]</copyright>
・RSSの最終更新日時<lastBuildDate>Sun, 07 May 2017 16:49:01 +0300</lastBuildDate>

③新着サイトページ情報記載
以下内容を記載します。
<item>
<title>ページ(記事)タイトル</title>
<link>ページURL</link>
<description><![CDATA[概要を記載]]></description>
<pubDate>Sun, 07 May 2017 12:26:30 +0300</pubDate>
<content:encoded><![CDATA[詳細内容記載]]></content:encoded>
</item>

④③を必要ページ数(記事数)記載します。
（私の場合概要も詳細も同じ内容を記載してます。）

⑤終了記載
</channel>
</rss>

どうですか？
本当は、もっと細かい記載や画像なども記載できるのですが、そこまで凝って作成する必要を感じなかったので、最低限の記載で作成してみました。
ニュースサイト等なら画像等も有効かもしれません。
情報の展開と考えて、最低限でまとめたら、こんなレベルになりました。
私のサイトでは、この出力パターンをphpで自動出力し、rss20.xmlとしてファイルに自動出力します。
以下は、そのソースです。私のサイト専用ですので、そのまま使用する事は、できませんが、現在日時取得と日時文字列変換やファイル日時取得など、参考になる処理もあるかもしれません。参考まで！

<html>
<head>
<title>一般RSS作成</title>
<meta http-equiv=" Content Type" content="text/html;charset=UTF-8">
</head>
<body>
<h1>
一般RSS作成</h1>
<?php
function codecnv($str){
//  print  $str." <br> " ; 
 $encoding = mb_detect_encoding($str,$detect_order, true);  $str=mb_convert_encoding($str,"UTF-8",$encoding);
 
 return $str;
}

function getkazu($str,$c){
// return getkazusub($str,$c,0);
 $b=explode($c,$str);
 return count($b)-1;
}

function getcsv($handle){
 $str="" ;
 do{
  $str = $str.fgets($handle);
  $cun = getkazu($str,"\"") ;
 }while( ($cun%2)!=0 );
 $str=str_replace( array("<br>","<br>"), '<br />',$str);
 return explode(",",$str) ;
}

function  getautho(){
 $tb=list_files("../autho/");
 for($i=0;$i<count($tb);$i++){
  $list[$i][0]=0;
  $list[$i][1] = filemtime("../autho/".$tb[$i]);
  $list[$i][2] = "../autho/".$tb[$i];
 }
 return $list;
}

function getcomic($list){
 $cunt=count($list);
 $tb= list_dirs("../comic/");
 for($i=0;$i<count($tb);$i++){
  $list[$cunt+$i][0]=1;
  $list[$cunt+$i][1] = filemtime("../comic/".$tb[$i]."/comicInfo.csv");
  $list[$cunt+$i][2] = "../comic/".$tb[$i]."/comicInfo.csv";
 }
 return $list;
}

function getbook($list){
 $cunt=count($list);
 $tb= list_dirs("../book/");
 for($i=0;$i<count($tb);$i++){
  $list[$cunt+$i][0]=2;
  $list[$cunt+$i][1] = filemtime("../book/".$tb[$i]."/bookInfo.csv");
  $list[$cunt+$i][2] = "../book/".$tb[$i]."/bookInfo.csv";
 }
 return $list;
}

function putrss($ltb){
 $dataList = array();
 $arrcunt = 0 ;

$dataList[$arrcunt++] = codecnv("<?xml version=\"1.0\" encoding=\"utf-8\"?>");

$dataList[$arrcunt++] = codecnv("<rss version=\"2.0\" xmlns:dc=\"http://purl.org/dc/elements/1.1/\" xmlns:sy=\"http://purl.org/rss/1.0/modules/syndication/\" xmlns:content=\"http://purl.org/rss/1.0/modules/content/\" xml:lang=\"ja\">");

$dataList[$arrcunt++] = codecnv("<channel>");

//------------------------------------------
 $dataList[$arrcunt++] = codecnv("<title>コミックフロンティア</title>\n");
 $dataList[$arrcunt++] = codecnv("<link>http://comicfrt.webcrow.jp/</link>\n");
 $dataList[$arrcunt++] = codecnv("<description>コミックまとめサイト</description>\n");
 $dataList[$arrcunt++] = codecnv("<language>ja</language>\n");
 $dataList[$arrcunt++] = codecnv("<copyright>Copyright (c) 2017, [まりね]</copyright>\n");
 $dataList[$arrcunt++] = codecnv("<lastbuilddate>".date('D, d M Y H:i:s O')."</lastBuildDate>\n");
 $syokugyou=array("漫画家","小説家","イラストレーター");
 for( $i = 0 ; $i <count($ltb)  ; $i++ ){
  $tb=ReadCsv($ltb[$i][2]);
  $date=date('D, d M Y H:i:s O',$ltb[$i][1]);
  if($ltb[$i][0]==0){
   $k_t="著者：".$tb[0][0]."(".$tb[0][1].")".$syokugyou[$tb[0][2]];
   $story=$tb[0][4];
   $ps=explode("/",$ltb[$i][2]) ;
   $fn=explode(".",$ps[2]) ;
   $fname="m_".$fn[0];
  }
  else if($ltb[$i][0]==1){
   $k_t="漫画：".$tb[0][0]."(".$tb[0][1].")";
   $story=$tb[0][8];
   $ps=explode("/",$ltb[$i][2]) ;
   $fname="c_".$ps[2];
  }
  else{
   $k_t="文庫：".$tb[0][0]."(".$tb[0][1].")";
   $story=$tb[0][10];
   $ps=explode("/",$ltb[$i][2]) ;
   $fname="b_".$ps[2];
  }
  $story=str_replace("\"",'',$story);
  $story=str_replace("\n",'<br />',$story);
  $dataList[$arrcunt++] = codecnv("<item>\n");
  $dataList[$arrcunt++] = codecnv("<title>".$k_t."</title>\n");
  $dataList[$arrcunt++] = codecnv("<link>http://comicfrt.webcrow.jp/".$fname.".html</link>\n");
  $dataList[$arrcunt++] = codecnv("<description><![CDATA[".$story."]]></description>\n");
  $dataList[$arrcunt++] = codecnv("<pubdate>".$date."</pubDate>\n");
  $dataList[$arrcunt++] = codecnv("<content:encoded><![CDATA[".$story."]]></content:encoded>\n");
  $dataList[$arrcunt++] = codecnv("</item>\n");
//print "make_rss 31"."<br>";
 }
//------------------------------------------
 $ft="</channel>\n</rss>\n";
 $dataList[$arrcunt++] = codecnv($ft);
 $file = fopen("rss20.xml","w") ;
 for( $i = 0 ; $i < $arrcunt ; $i++ ){
  fwrite( $file,$dataList[$i]) ;
 }
 fclose($file) ;
}

$list= getautho();
 $list= getcomic($list);
 $list=getbook($list);
 $list=tbsort($list);
 listwrite($list);
 putrss($list);
 print "make_rss end"."<br>";
?>
</body>
</html>

これで、pingと合わせてブログランキング更新情報送信が、可能になります。

2017年5月8日月曜日

☕コーヒーブレイク登録サイト修正

ここ何日か、登録サイトの修正してました。
著者とコミックだけの予定が、保存パラメーターの追加やらなんやらしてたら、文庫まで登録するようになってしまいました。
アニメとの併用サイトなので、原作を見ると、コミックだけではなく文庫が多いんです。
コミックも、原作が文庫だったりするのもありますしね！
あ！原作の入力パラメーターを追加しなくっちゃ！
て感じです。
なかなかデータ作成が進みません！
まだ数件しか入れられてません！
パラメーターが増えるたびにデータを直接修正する作業が必要なので、大量に入力すると、作業が大変なので、入力を控えながら進めてます。
本日は、rss ファイルを作りました。
まだ仮になのですが、現在作成されたデータファイルを検索して、必要な情報を抽出し、ファイル日付と時間を取得し、rss ファイルとして、ファイル出力します。もちろん自動です。
更新のたびに手作りしてられませんかりね！
rss ファイルは、サイト作成には、絶対に必要です。
ネット検索されることや、ランキング登録した際のping送信などの必要ファイルです。
ネットに自動作成サイトとかもありますが、サイトの形式とかにより、全然役にたたないとかありますので、自分で作るのが、一番安心です。
簡単ですしね！
基本的な記載方法は、html とそんなにかわりません。
形式名としては、xml ですが、html と同じ感じで作成できます。
基本的な記載とサイト説明部分と更新ページ記載を書くだけ！
私のようにデータをベースにサイトを作成していれば、自動精製も可能です。
次回は、rss ファイル作成を書きましょう！
私の場合は、rss 作成時に、一覧ファイルを作成してます。
これを利用して、起動トップ画面の更新リストを表示します。
データの追加日付が、ページ更新日付となり表示されます。
現在トップ画面作成中！
では、次回は、rss ファイル作成で！

2017年5月4日木曜日

html（javascript) からphp関数を使う！（php スクリプト作成)

言語には、それぞれ利点があります。サイト表示中には、javascript しか使えません。

ファイルに出力させたり、ファイル検索やフォルダー検索させたかったり、php しかできない処理をさせたい！って思った事ありませんか？

私もあります。

実は、簡単にできます。

たとえphpで作ったサイトであっても、表示後は、html です。内部のphp 関数を呼ぶ事も実行する事も、できません！

そこで、外部にphp 関数ファイルを作成して、外部で実行します。

1ファイルに1処理しか作れませんが、結構使えます。

こんなphpのファイルを作りました。

<?php
$dir=$_REQUEST['path' ];
$files = scandir($dir);
foreach($files as $file){
print $file."\n";
}
?>

これを実行すると、指定フォルダーのファイルとフォルダー名が、全て表示されます。
以下で直接実行できます。

http://サイトの場所/作成ファイル名.php?dir=フォルダー名/

これを、javascript で実行します。実行の仕方は、ファイル読み込み処理と同じです。
var data = new XMLHttpRequest();
data.open("GET","作成ファイル名.php?dir=フォルダー名/", false);
data.send(null);
で実行できます。
画面に表示されてた内容は、以下で取得できます。
data.responseText
私の作ったjavascript のcsv読み込み処理のファイル名に同じ指定をすると、結果が配列に入れられて返ってきます。
前にも書いた事がありますが、php は、外部から読み込み処理を実行すると、実行した結果を返します。
この使い方を覚えると、html から使えるphp スクリプトが作成できます。

2017年5月3日水曜日

サイトをデザインする

デザインするなんて書きましたが、私には、デザインのセンスは、ありません。
しなし、ありきたりのサイトから、ちょっとアップさせるくらいは、できます。
簡単な方法として、画像を付けるとかですね。
でも、サイトに合う画像と合う大きさ（拡大縮小は、可能）が、なかなかありません。なるべく著作権フリーの画像を使いましょう！
後は、グラデーションですね！
サイトの背景にグラデーションを付ける方法などがあります。
これは、とても難しいのですが、簡単にできます。
あるサイト（私のこのサイトのその他ツールにリンクがあります）で、簡単な操作で、スタイルシートデータを出してくれるので、スタイルシートにいれて、付けたい所に定義するだけ！
実際のイメージも見れるから、大変便利です。
後は、ボタンイメージです。
画像を使いボタンイメージを変更する方法と、グラデーションボタンを使え方法があります。
これも、グラデーションボタン作成サイトがあるので、その他ツールからご覧ください。
これの便利な所は、input のボタンでも、<a> でもボタンで表示されるので、大変便利です。
それらを使った私のサイトは、こんな感じです。

タイトル背景にグラデーションを使いボタンもグラデーションボタンにしてみまさた。
少しイメージが変わります。
コミックサイトですので、これ以上は、コミックのイメージがあるので、サイトは、凝らない方向で行きます。
参考になりましたか？

2017年5月2日火曜日

ping送信プログラム公開（携帯送信可能）

何回か、公開しましたが、現在の私の最新pingプログラムです。
これまでは、毎回サイトに合わせてプログラムを修正してサイト専用にメンテナンスが必要でした。
今回は、アニメフロンティア別館用に作成した際に、もう少し楽にしたいと思い、少し修正しました。
基本は、一緒です。
送信サイト名とサイトRSS URL と送信先URLを別ファイルにしました。
ping.csvをping送信プログラムの場所に入れて送信するだけ！
ping.csvは、以下の内容で作成します。
サイト名
サイトRSS URL
送信先URL
送信先URL
送信先URL
　　：
転送先は、何件でも書いただけ送信します。
pingは、サイトから送信する必要が無いので、今まで送信できなくて、外部サイトを登録して送信してた方でも、携帯にphp 環境を入れれば携帯からでも送信できます。
私も、最初は、携帯から送信してました。
今は、サイトの更新をサイトでやるので、その際に一緒にやってます。
以下ソース

<!DOCTYPE html>
<html>

</head>

<?php

function fsend($blog_name,$blog_url,$ping_servers) { 
//url重複回避 
$ping_servers = array_unique($ping_servers);

// weblogUpdates.pingのXMLデータ 
$content = '<?xml version="1.0" encoding="UTF-8"?>
<methodcall> 
<methodname>weblogUpdates.ping</methodName> 
<params> 
<param><value>'.$blog_name.'</value></param>
<param><value>'.$blog_url.'</value></param>
</params> 
</methodCall>
';
//print $content."xxxxx<br>";
 $headers = array( 
'Content-Type: application/xml',
'Content-Length: '.strlen($content)
);
$context = stream_context_create(
array(
'http'=>array( 
'method'=>'POST',
 'header'=>implode( "\r\n", $headers ), 
'content'=>$content
)
)
);
 foreach($ping_servers as $ping_server){ 
  $http_response_header = null; 
//  print "[".$ping_server."]<br>";
  $conn=curl_init();
curl_setopt($conn,CURLOPT_CONNECTTIMEOUT,2);// 試行待ち時間
curl_setopt($conn,CURLOPT_FOLLOWLOCATION,1);// Locationヘッダをたどる
curl_setopt($conn,CURLOPT_RETURNTRANSFER,1); // curl_exec() の返り値を文字列で返す
curl_setopt($conn,CURLOPT_HEADER,TRUE); // ヘッダの内容も出力 #
curl_setopt($conn,CURLOPT_USERAGENT,$context);// USER_AGENTを設定
curl_setopt($conn, CURLOPT_URL, $ping_server); // ping送信先URL
$res = curl_exec($conn);
curl_close($conn);
echo $ping_server,"...",$res,"<br>";
//  $response = file_get_contents($ping_server,false,$context);
// echo $ping_server,"...",$response,"<br>"; 
 };
}

print "<body>";

/*ここからメイン*/
if (($handle = fopen("ping.csv", "r")) !== false) {
 $str = fgets($handle);
 $sname= str_replace(array("\r\n", "\r", "\n"), '', $str);
 $str = fgets($handle);
 $rssurl= str_replace(array("\r\n", "\r", "\n"), '', $str);
 $sendurl=array();
 while (!feof($handle)){
  $str = fgets($handle);
  $sendurl[]= str_replace(array("\r\n", "\r", "\n"), '', $str);
  } 
  fclose($handle); 
  fsend($sname,$rssurl,$sendurl);
 } 
 print "</body>";
?>
</html>

私が、サイトを始めたころは、サイトのpingが送信できなくて、毎回ランキングでping操作してました。外部のpingサイトも無料だと、送信件数がすくなかったり！
はっきり言ってぼったくりです！
そこで、勉強して、自分で送信できるサイトもつくりました！
そこは、無料で制限なし！
でも、基本は、このソースです！
あのサイトは、私のphp とDBの勉強用のサイトです。メールの送信も勉強しました。
メールは、ブログ投稿に使えます。
いろいろ勉強すれば、いろいろ役にたちます。
では、また！(^_^)ﾉ

2017年5月1日月曜日

サイトを簡単に作る

私の作り方は、特殊かもしれません。
index.html が形になりました。
これを切り分けて分解します。
切り分け方は、固定部分と可変部分です。
毎回同じになる部分と毎回変わる部分に分けるのは、分けたパーツを組み合わせて、他のページを作る為です。
ページ数の多いサイトは、一カ所修正したのを何ページも修正するのは大変です。
私のアニメサイトは、1700ページ以上あります。
共通部分の修正を全てに加えるのを手作業でやるなんて考えられません。
そこで、サイトのページをプログラムで全て自動更新するシステムを用意します。
私の場合は、データ管理をし、閲覧できるサイトなので、今回は、コミックサイトを予定してますので、トップ画面は、新規追加したコミック情報一覧にし、各ページは、著者毎のページとコミック毎のページを考えています。
予定ページ数は、2000ページ以上と考えています。
アニメですら、3000タイトル以上あり、私は、まだ1700を超えた状態です。
そんなページをいちいち作れません！
そこで、自分用のデータ管理ページを作り、データを作成して、コミックサイトを自動（半分手動）で更新します。
現在の私のアニメサイトは、アニメフロンティアは、データ作成機能付きの管理サイトで、アニメフロンティア別館がデータを利用した自動作成サイトです。
管理サイトは、全てphp で作成されていて、サイトのページとしては、1ページしかありません。最新情報の更新は、早いですが、表示が遅いのが欠点です。
html で作られたページは、表示が早いのが利点ですが、ページ作成が、普通は大変です。
そこで、私は、html ページを自動作成を考えました。
基本は、手作りなのですが、複製加工は自動化します。
私と同じようにするには、サイトをデータ化する必要があります。
サンプルとしてコミック管理サイトを紹介しました。
なんでcsvファイルで保存するかわかりますか？
データ管理するなら、DB(データベース) でもできます。しかし、DB で作ったデータは、html サイトで使うには、データを抽出したりする加工を必要とします。csvなら簡単な修正ならテキストエディタで直ぐ直せます。
いちいちsql のプログラム組んだり大変ですしね！
携帯にも保存して置けるし、便利です。
しばらくサイト作成の為のデータ作成をします。
その間に別のノウハウをポロポロと紹介します。

サイトを簡単に作る⑤イメージを実現する。

これまでに基本の構成とサイトアイコン等を用意しました。
あとは、イメージを実現するだけです。
メニューや広告！メイン画面などです。
私は、こんなのを作ってみました！

基本的にはアニメフロンティアと一緒です。
枠線のイメージ等を変えて、中身は、応用してます。
最初にあった枠線は、無しに設定しました。
各項目の青色の角丸枠は、スタイルシートに記載して、使い回しています。
個々に違ったスタイルは、タグにstyle="" で指定します。
共通で使うスタイルは、スタイルシートに記載します。
.スタイル名{
スタイル;
}
タグには、class="スタイル名"でつかえます。
ここまでのソースは、以下になります。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>コミックフロンティア</title>
    <meta name="keywords" content="コミック,漫画">
    <link rel="alternate" type="application/rss+xml" title="コミックフロンティア - RSS" href="http://comicfrt.webcrow.jp/rss/rss20.xml" />
 <link rel="apple-touch-icon" href="http://comicfrt.webcrow.jp/img/comicfrt.png" />
<script type="text/javascript" src="script.js">
</script>
<link rel="stylesheet" type="text/css" href="css/page_styles.css">
</head>
<body>
<div class="main" style="border: solid 3px #0000f0;border-radius: 20px;">
コミックフロンティア</div>
<table border="0" cellspacing="0" width='100%' 
style="border-collapse: collapse;">
<tbody>
<tr>
<td width='200px'>

<div style="padding: 8px 6px 6px 8px;">
<a href="http://comicfrt.webcrow.jp/rss/rss20.xml"><img alt="RSSを購読する" width="24" height="24" src="img/rssfeed01_011.png">RSS</a>
</div>
<div style="text-align: center;margin: 5px;">
 
<input type='button' style='margin: 3px;' class='mnu_btn' value='　Top に戻る　' onclick="window.location.href='./';">
</div>
<div class="div_waku">
<div>
<b>表示モード</b>　　
<select id='disp_type' name='disp_type' style="text-align: right;">
<option value="0" selected>コミック</option>
<option value="1">著者</option>
</select>
</div>
</div>

<div class="div_waku">
<table border="0" cellspacing="0" style="border-collapse: collapse;">
<tbody>
<tr>
<td><input type='button' style='margin: 3px;width:32px;' class='mnu_btn' value='あ' onclick="onClickMenu(1)"></td>
<td><input type='button' style='margin: 3px;width:32px;' class='mnu_btn' value='か' onclick="onClickMenu(2)"></td>
<td><input type='button' style='margin: 3px;width:32px;' class='mnu_btn' value='さ' onclick="onClickMenu(3)"></td>
<td><input type='button' style='margin: 3px;width:32px;' class='mnu_btn' value='た' onclick="onClickMenu(4)"></td>
<td><input type='button' style='margin: 3px;width:32px;' class='mnu_btn' value='な' onclick="onClickMenu(5)"></td>
</tr>
<tr>
<td><input type='button' style='margin: 3px;width:32px;' class='mnu_btn' value='は' onclick="onClickMenu(6)"></td>
<td><input type='button' style='margin: 3px;width:32px;' class='mnu_btn' value='ま' onclick="onClickMenu(7)"></td>
<td><input type='button' style='margin: 3px;width:32px;' class='mnu_btn' value='や' onclick="onClickMenu(8)"></td>
<td><input type='button' style='margin: 3px;width:32px;' class='mnu_btn' value='ら' onclick="onClickMenu(9)"></td>
<td><input type='button' style='margin: 3px;width:32px;' class='mnu_btn' value='わ' onclick="onClickMenu(10)"></td>
</tr>
<tr>
<td id="menu_1"></td>
<td id="menu_2"></td>
<td id="menu_3"></td>
<td id="menu_4"></td>
<td id="menu_5"></td>
</tr>
</tbody></table>
<div style='margin: 10px 0 0 0;'>
 
<b>検索</b>
<table border="0" cellspacing="0" width='100%' 
style="border-collapse: collapse;">
<tbody>
<tr><td valign="middle">
<input type='text' style='margin: 2px 0 0 0;width:150px;border: 1px #000000 double;' id='ckey' value=''>
</td><td valign="middle">

<a onclick="onClickskey()"><img src="img/btn036_05.png" width='26px' alt="検索" valign="middle"></a>
</td></tr>
</tbody></table>
</div>
</div>

<div class="div_waku">
<b>フレンドサイト</b>
<div style="text-align: center;">
<input type='button' style='margin: 3px;' class='mnu_btn' value='　アニメフロンティア　' onclick="window.location.href='http://anmfrt.webcrow.jp/';"><br>
<input type='button' style='margin: 3px;' class='mnu_btn' value='アニメフロンティア別館' onclick="window.location.href='http://anifrt.webcrow.jp/';">
</div>
</div>
<div class="div_waku">
<div style="border: solid 1px #000000;height:200px;">
広告1
</div>
</div>
<div class="div_waku">
<div style="border: solid 1px #000000;height:200px;">
広告2
</div>
</div>
<div class="div_waku">
<div style="border: solid 1px #000000;height:200px;">
広告3
</div>
</div>
<div class="div_waku">
<b>ランキング</b>
<div style="border: solid 1px #000000;height:70px;">
</div>
</div>

</td>
<td style='vertical-align:top'>

<div style="border: solid 1px #000000;height:70px;">
トップ広告エリア
</div>

</tr>
</tbody>
</table>
<div class="footer">
<div class="footer-text">
コミックの情報アップサイトです。自己責任で楽しんで下さい。</div>
<div class="footer-copyright">
Copyright © 2017.xx.xx</div>
<div class="footer-text">
管理人：まりね　相互リンク募集中</div>
<div class="footer-text">
mail:myping_marine@yahoo.co.jp</div>
</div>
</body>
</html>

スタイルシートは、以下を追加しました。
.div_waku {
border: solid 1px #0000f0;
border-radius: 10px;
padding: 5px;
margin: 0 0 3px 0;
}
青色の枠を出すスタイルです。
後は、コミックデータがある程度揃ったら作成できます。
後は、個々のページを、同じように作成する事で、複数ページにして、サイトとして完成させるのが、普通のやり方です。
しかし、私は、そんな事しません。
普通なら、コピーして中身を修正して作成を繰り返してやるのかな？
次は、手抜きな作成方法を教えます。

登録: 投稿 (Atom)