Embedded Files
Google Analytics でアクセス数が計測できる今、アクセスカウンターを設置する意味はありませんが、遊びとしては面白いのかなと思います。
ひょっとするとHP作成のモチベーションになる？かもしれません。
最初のアクセスカウンター以外は画像です
コードのピンク色の部分・画像は、お好みで変えてください
① counter.html コード
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<span class="welcome">
ようこそ！
</span><br>
<span class="welcome2">
○○○○○ ホームページ へ
</span>
<div class="visitors">
あなたは <?
var splitedVisitors = ('' + visitors).split('');
splitedVisitors.forEach(function(num) {
output._=('<span class="frame">' + num + '</span>');
});
?> 番目の訪問者です
</div>
<div class="image">
<!-- Googleフォトの画像アドレス -->
<img src="https://lh3.googleusercontent.com/pw/AP1GczNOpRJFNZO5PZWIMtzWo3RU7DQHegbR2WGyHU2BkvTZu1ZJATEdTUeyEKKownXhf8zUs1ukNRgMlDK3w1DtPsdMlspZq7mJPtf7nXtJ3ykcZ0JEmrrHixdQmx3ArzM-2OxLjgy7Epe_yY_aY_2nMZjlkA=w300-h125-s-no-gm?authuser=0">
</div>
</body>
</html>
<style>
body{
font-family: sans-serif; /* serifにすれば明朝体 */
padding: 10px 5px; /* 余白上下・左右 */
background: #eaffea; /* 背景色 */
border: none; /* 外枠 */
animation-name: fade;
animation-duration: 3.0s; /* フェード時間 */
}
@keyframes fade{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
/* ようこそ！ */
.welcome{
font-size: 16px;
color: #0c0c0c;
padding-left: 10px;
}
/* ○○○○○ ホームページ へ */
.welcome2{
font-size: 16px;
color: #0c0c0c;
padding-left: 40px;
}
/* カウンター */
.frame{
color: white;
font-size: 16px;
font-weight: 400; /* boldで太字 */
background-color: dimgray;
padding: 0 4px; /* 文字間隔 */
}
/* あなたは〜訪問者です */
.visitors{
font-size: 16px;
color: black;
text-align: center;
margin-top: 10px;
margin-bottom: 15px;
background: yellow;
}
/* 画像 */
.image{
text-align: center;
}
</style>
② counter.html コード
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<span class="welcome">
ようこそ！
</span><br>
<span class="welcome2">
○○○○○ ホームページ へ
</span>
<div class="visitors">
あなたは <?
var splitedVisitors = ('' + visitors).split('');
splitedVisitors.forEach(function(num) {
output._=('<span class="frame">' + num + '</span>');
});
?> 番目の訪問者です
</div>
</body>
</html>
<style>
body{
font-family: sans-serif; /* serifにすれば明朝体 */
padding: 10px 5px; /* 余白上下・左右 */
background: white; /* 背景色 */
border: 1px solid dimgray; /* 外枠 */
animation-name: fade;
animation-duration: 3.0s; /* フェード時間 */
}
@keyframes fade{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
/* ようこそ！ */
.welcome{
font-size: 16px;
color: #0c0c0c;
padding-left: 10px;
}
/* ○○○○○ ホームページ へ */
.welcome2{
font-size: 16px;
color: #0c0c0c;
padding-left: 40px;
}
/* カウンター */
.frame{
color: white;
font-size: 16px;
font-weight: 400; /* boldで太字 */
background-color: crimson;
padding: 0 4px; /* 文字間隔 */
}
/* あなたは〜訪問者です */
.visitors{
font-size: 16px;
color: black;
text-align: center;
margin-top: 10px;
background: #ffefff;
}
</style>
③ counter.html コード
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div class="visitors">
あなたは <?
var splitedVisitors = ('' + visitors).split('');
splitedVisitors.forEach(function(num) {
output._=('<span class="frame">' + num + '</span>');
});
?> 番目の訪問者です
</div>
</body>
</html>
<style>
body{
font-family: sans-serif; /* serifにすれば明朝体 */
padding: 0px 0px; /* 余白上下・左右 */
background: blue; /* 背景色 */
border: none; /* 外枠 */
animation-name: fade;
animation-duration: 3.0s; /* フェード時間 */
}
@keyframes fade{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
/* カウンター */
.frame{
color: white;
font-size: 16px;
font-weight: 400; /* boldで太字 */
background-color: black;
padding: 0 4px; /* 文字間隔 */
}
/* あなたは〜訪問者です */
.visitors{
font-size: 16px;
color: black;
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
background: yellow;
}
</style>
④ counter.html コード
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div class="visitors">
あなたは <?
var splitedVisitors = ('' + visitors).split('');
splitedVisitors.forEach(function(num) {
output._=('<span class="frame">' + num + '</span>');
});
?> 番目の訪問です
</div>
</body>
</html>
<style>
body{
font-family: serif; /* sans-serifにすればブロック体 */
padding: 0px 0px; /* 余白上下・左右 */
background: white; /* 背景色 */
border: none; /* 外枠 */
animation-name: fade;
animation-duration: 3.0s; /* フェード時間 */
}
@keyframes fade{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
/* カウンター */
.frame{
color: blue;
font-size: 22px;
font-weight: bold; /* 400で標準 */
background-color: white;
padding: 0 3px; /* 文字間隔 */
}
/* あなたは〜訪問です */
.visitors{
font-size: 16px;
color: black;
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
background: white;
}
</style>
⑤ counter.html コード
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div class="visitors">
アクセス数 <?
var splitedVisitors = ('' + visitors).split('');
splitedVisitors.forEach(function(num) {
output._=('<span class="frame">' + num + '</span>');
});
?>
</div>
</body>
</html>
<style>
body{
font-family: serif; /* sans-serifにすればブロック体 */
padding: 0px 0px; /* 余白上下・左右 */
background: white; /* 背景色 */
border: 1px solid dimgray; /* 外枠 */
animation-name: fade;
animation-duration: 3.0s; /* フェード時間 */
}
@keyframes fade{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
/* カウンター */
.frame{
color: blue;
font-size: 18px;
font-weight: bold; /* 400で標準 */
background-color: white;
padding: 0 3px; /* 文字間隔 */
}
/* アクセス数 */
.visitors{
font-size: 16px;
color: black;
text-align: center;
padding: 10px;
background: white;
}
</style>
⑥ counter.html コード
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div class="visitors">
<?
var splitedVisitors = ('' + visitors).split('');
splitedVisitors.forEach(function(num) {
output._=('<span class="frame">' + num + '</span>');
});
?>
</div>
</body>
</html>
<style>
body{
font-family: serif; /* sans-serifにすればブロック体 */
padding: 0px 0px; /* 余白上下・左右 */
background: white; /* 背景色 */
border: 0px solid dimgray; /* 外枠 */
animation-name: fade;
animation-duration: 3.0s; /* フェード時間 */
}
@keyframes fade{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
/* カウンター */
.frame{
color: white;
font-size: 18px;
font-weight: bold; /* 400で標準 */
background-color: blue; /* 背景色 */
padding: 1px 6px; /* 文字余白、上下・左右*/
border: 2px solid red; /* 枠線 */
}
/* アクセス数 */
.visitors{
}
</style>
コード.gs（①〜⑤共通）
function doGet() {
addVisitor();
const indexHtml = HtmlService.createTemplateFromFile('counter.html');
indexHtml.visitors = getVisitors();
return indexHtml.evaluate()
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0];
function getVisitorsRange() {
return sheet.getRange(1, 1); // データ（いいね数）を入れるセル番地
}
function getVisitors() {
return getVisitorsRange().getValue();
}
function addVisitor() {
var currentVisitors = getVisitors();
getVisitorsRange().setValue(Number(currentVisitors) + 1);
}
アクセスカウンターお手軽作成
上の「アクセスカウンターのコピーを作成」ボタンをクリック ➡
スプレッドシートが開く➡ 拡張機能 ➡ Apps Script ➡（counter.html には②をコピーしてありますので、上記お好きな counter.html に差し替えて）➡ デプロイ ➡
コピーしたURLをGoogleサイトの「埋め込む」 ➡ 「URL」にペースト
デプロイの説明画像は、こちら
スプレッドシートを開く➡ 拡張機能 ➡ Apps Script ➡ ＋（ファイルを追加） ➡ HTML ➡ 無題をcounterに変更 （counter.html）➡
コード.gsに上記 「コード.gs（①〜⑤共通）」をペースト ➡ counter.html に上記（お好みの）「counter.htmlコード」をペースト ➡
デプロイ ➡ 新しいデプロイ ➡ デプロイの種類（左上歯車アイコン）クリックからウェブアプリを選択 ➡ アクセスできるユーザーを、「自分のみ」から「全員」に変更 ➡ デプロイボタン ➡ アクセスを承認 ➡ 承認後ウェブアプリURLをコピー ➡ 完了 ➡
コピーしたURLをGoogleサイトの「埋め込む」➡「URL」にペースト
Google Sites
Report abuse