るーみっくさーち -Rumic Search- Presents

令和最新版 個人サイトの作り方(いまさら)

このページは令和となった今から個人サイトを始めようという人、あるいは既に個人サイトを持っていて令和時代に対応しようと思っている人のために書かれたものです。 また、失われたり散逸したりしつつある個人サイト制作のノウハウをできる限り集めることも目標にしています。
(個人サイト制作の情報収集はGoogle検索が全くといっていいほど役に立ちません)

個人サイトは今となっては珍しいと言われる存在になってしまいましたが、SNSの時代でもそれなりに魅力があるように思います。 基本的にタダで始められますので、ぜひ自分だけのオリジナリティあふれるサイトを作って遊んでみましょう。

2022/08/13
文責:るーみっくさーち技術長 SimK

目次

はじめに(偉そうな前置き① 読まなくていい)

ページトップに戻る

個人サイトとは(偉そうな前置き② 読まなくていい)

ページトップに戻る

昔の個人サイトを令和時代に対応させる

もう既に個人サイトを持っているという人も、最新の情報を追って更新し続けている人は少数だと思います。 しかし、スマートフォンでの閲覧者数がPCでの閲覧者数を逆転した現在では、PC用で作られたサイトでは見辛いという状況が発生しているかもしれません。 そこで、ここでは令和の時代を生き抜くためのサイトの(出来るだけ手を抜いた)アップデート案を紹介します。

①HTTPSにしよう

今時はHTTPSに対応していないとブラウザに「安全ではありません※1」という危険だと言わんばかりの表示をされたり、Googleに冷遇されたりするという理不尽な扱いを受ける時代です。できることなら対応してしまいましょう。目立ちたくないなら好都合かもしれませんが・・・

サーバーが対応しているならURLをhttpからhttpsに書き換えるだけで特に何もせずともHTTPSになります。 宣伝(?)の為にURLをSNSで投稿したり登録したりする場合はhttps://~と書いておきましょう。

残念ながらHTTPSに対応していないという場合は、いっそのこと開き直りましょう。 下記の解説の通り、金銭のやりとりのない趣味の個人サイトレベルでのHTTPSははっきり言って過剰なレベルです。

※1 HTTPは通信内容が暗号化されずに送受信されるので、誰かが通信を傍受したり改竄したりできるということをもって「安全ではない」という意味です。 しかし、個人レベルのサイトの内容は元からWebにオープンな形で公開されているもので、傍受されて実害がでるような話はまずありません。 傍受する側も、そんなしょうもない通信を傍受するより利益が絡むような通信を傍受するでしょう。 改竄するにしても、個人サイトを設置してあるサーバーに侵入されて直接書き換えられるリスクの方が大きいです。通信改竄の心配をするより先に、堅牢なパスワードを設定しておくべきです。

②スマホに対応しよう

かつての個人サイトをスマホで閲覧すると、大抵の場合なんだか残念な縮尺の表示になります。 その場合、HTMLの<head>タグの中に

<meta name="viewport" content="user-scalable=yes, initial-scale=1">

の一文を入れましょう。 また、imgタグにはstyle="max-width:100%;"を書いておくのが推奨です。例えば、次のような形です。

<img src="hogehoge.png" style="max-width:100%;" alt="hoge">

このようにしておくと、画面幅が画像よりも狭くなった時に自動的に縮小してくれます。 フレームタグを使ったり位置や幅を固定値で指定していない限りはこれだけでまともな表示になります。

フレーム使ってるんだよ!というあなたは拙作のスクリプトを使うと上手くいくかもしれません。
配布先(解説とデモあり)
使い方は、同じく<head>タグの中に

<script src="./smartframe.js" charset="utf-8"></script>

と書くだけです。 ただし、位置や幅を固定値で指定している要素がある場合は残念ながら対応できません。

色々上手い方法を考えていますがまだ未解決です。

③SNS時代の機能を活用しよう

TwitterにURLを貼り付けた時、サムネイル画像が出る場合があるのを見た経験があるかも知れません。 あれはTwitter社に課金しないとできないというものではなく、Twitter Cardと呼ばれているものです。これは誰でも自由に設定できます。 Twitter以外であればOGP(Open Graph protocol)というものに対応しており、同じように設定できます(書き方は「Open Graph protocol」と検索すれば出てきます)。 注意事項として、Twitterではrobots.txtで拒否(いわゆる検索避け)していたりすると表示されません。 その場合、robots.txtに

User-agent: Twitterbot
Allow: /

を追記します。なお、これが反映されるのは結構時間がかかります。

Twitterの場合、<head>タグの中に以下の内容を書きます。

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="Twitterユーザー名" /> ← 例えばcontent="@hogehoge"のように書く。任意
<meta name="twitter:title" content="タイトル" />
<meta name="twitter:description" content="ページの説明" />
<meta name="twitter:image" content="サムネイル画像へのURL(サイズは144x144以上で作る)" />

正しく表示されるかどうかはTwitter公式のCard validatorでテストできます。

なお、画像だけ表示されない場合は画像の取得が拒否されている可能性が大です。 ここで指定できる画像はいわゆる「直リンク」が可能でなければいけません。 しかし、無償の個人サイト作成サービスは直リンクを制限している場合が多々あります。 この場合、画像取得が拒否されるので画像が表示されません。

ややセコい手段ですが、bannerという名前の画像ファイルだけは直リンクが許されている場合が多いですので、bannerという名前で画像を作ってしまう手があります。 通常の200x40のサイズのバナーと併用したいという場合は、バナー用をjpg、Twitter用をpngにするなどで使い分けましょう。 ただし、バナーとは何かという解釈によっては利用規約的にどうなんだという話もあります。広義にはTwitterカードに表示する画像もバナーと言えそうな気がしますが、その点は自己責任になります。

なお、実際には直リンクで直接表示ではなく、一旦Twitter等のサーバーに保存(キャッシュ)されてから表示されます。

④バナーの直リンクを避けよう

かつては直リンクでバナーを貼るということが良くありましたが、今は全部ダウンロードの上でバナーを貼ることが推奨されています。 理由は①httpとhttpsが混在していると駄目というケースがある②リンク先が何らかのペナルティを受けると巻き添えを食う可能性がある、の2点です。

実際に、サイト自体は何ら問題がないのにバナー画像のリンク先がフィッシングサイト認定されて巻き添えになっているケースがありました。

⑤Flash製コンテンツを何とかしよう

安泰だと思われていたFlash Playerはスマートフォンの登場によって想像以上にあっさり滅亡してしましました。 しかし、既存のFlash製コンテンツをいまさらFlash以外に移植するのはあまりにも負担が大きすぎます。

そこで、sw2jsなるものを使って手抜きでFlashを使えるようにしましょう(駄目なものは駄目ですが)。 どこからダウンロードするか分かりにくいですが、このリンクで表示されるjsファイルをブラウザで保存すればOKです。

使うときはHEADタグの中に

<script type="text/javascript" src="swf2js.js"></script>

と書いておいてから、embedやobjectタグによるFlash埋め込みの代わりに下の通りに書けばOKです。hogehoge.swfの部分は使用したいswfの名前に書き換えて下さい。

<script type="text/javascript">
<!--
  swf2js.load('hogehoge.swf', {"quality": "high"});
// -->
</script>

幅と高さを指定したい場合は、以下のようにします。

<script type="text/javascript">
<!--
  swf2js.load('hogehoge.swf', {"quality": "high", "optionWidth": "幅の値", "optionHeight": "高さの値"});
// -->
</script>

なお、上の方法でFlashが使えない場合であっても、Flashを使える環境を温存している人(いるだろうか?)のためにFlash自体は置いたままにしておいて良いと思います。

以下はこのスクリプトを使ってみている例です。よろしければ参考にしてみてください。
"Rumic Search" History

おまけ:HTMLを最新に書き換える必要はあるか?

かつてはHTML4なるもので多くのサイトが作られていましたが、最近はHTML5だとか色々と新しいものが登場してきました。 では、これらに対応するために何かを書き換える必要があるのでしょうか?  答えを先に書いてしまうと、わざわざ書き換える必要はありません。今まで通り書いておけば何の問題もありません。

HTML4の時代でも「見た目とロジックは分離しろ」「fontタグは使うなCSSでやれ」「CSSも別のファイルに分けろ」等々色々言われていましたが、令和の時代でも別に完全廃止されていませんし全く問題なく使えます。 商売をするつもりならまだしも、個人サイトでそこまで気にする必要はありません。昔のスタイルを堂々と使いましょう。 最新のやり方に変えるためだけに労力をかけて過去のページを書き換える必要は全くありません。

機会があれば最新の書き方に更新していくという程度の心構えでいましょう。

ページトップに戻る

今から個人サイトを作る

今から手打ちのHTMLで個人サイトを作ろうとすると、Googleでまともな情報が出てこないという問題で心が折られます。 そういうわけで、昔から存在している個人サイトが作れるWebサービスと、作り方などを解説したサイトへのリンク等をここで紹介しておきます。

手打ちHTMLの置けるWebサービス

容量が1GBとか500MBとか書かれていますが、巨大画像を置かなければあまり心配する必要はありません。 どうしても大きいサイズの画像を置きたいということであれば、いっそSNSを画像置き場にしてリンクだけを置く手もあります。

以下には昔から存在している代表的なものを書いていますが、今なら探せばもうちょっといい場所があるかも知れません。

なお、かつてあったgeocitiesやinfoseekは時代の流れに逆らえず、サービス終了に追い込まれています。 これによってかなりの数の個人サイトが失われたように思います。

HTMLとCSSの書き方

手打ちする場合は大まかなレイアウト(構成・構造)をHTMLで書き、見た目をCSS(スタイルシート)で指定するのが一般的です。 その書き方をちゃんと説明しているサイトはなぜか検索上位に出てきません。個人サイト全盛期によく利用されていたのは以下のサイトです。

また、以下はFirefoxブラウザを作っているMozillaが公式に出しているドキュメント群です。全てが網羅された正式かつ正確な説明ですが内容は難しいので、上記で分からないものをピンポイントで調べるのに使うと良いでしょう。

テンプレート&素材サイト

個人サイトを色々修飾したりするための素材集サイトというのもあります。今でも残っているものがありますので活用しましょう。以下はその例です。 また、テンプレートを使えば最初から全部HTMLを書くのと比べてかなり楽になります。テンプレートをベースに改造していくのもアリです。 FOOL LOVERSのページ下部には素材サイトのリンク集の場所が掲載されていたりしますので大変役立ちます。

なお、昔の素材サイトが閉鎖された後、無関係な第三者が同じアドレスを取得して乗っ取っているケースもたまにあります。 不自然なコンテンツがある場合は利用を控えた方が賢明かもしれません。

どうしてもHTMLは無理そうな場合

どうしても手打ちのHTMLは無理そうだ、そこまで根気が続きそうにない、という人は、ある程度型を決めて作りやすくしているサービスを使う手もあります。 自由度は落ちてしまいますが、かつてのホームページビルダーのような雰囲気で使えると思います。

WordPressは使うのに色々設定が必要です。タダで使おうと思うと大変かもしれません。

このサイトは手打ちHTMLを前提に解説しますので、これらを使う場合は各々の使い方の解説を別で探してください。

ページトップに戻る

令和時代の手打ちHTML

以下は、令和の時代に新たに手打ちHTMLを書く場合のノウハウなどです。

①令和時代のHTMLテンプレ

令和時代のHTMLテンプレとしては以下の物を使いましょう。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>ページタイトル</title>
	<meta http-equiv="Content-Script-Type" content="text/javascript">
	<meta http-equiv="Content-Style-Type" content="text/css">
	<meta name="viewport" content="user-scalable=yes, initial-scale=1">
</head>
<body>
	ほげほげ
</body>
</html>

ダウンロード:template.html

かつての時代との違うのは3ヶ所です。

<!DOCTYPE html>

HTML4の時代は長かったですがこれだけでOKになっています。 ただし、フレームを使う時は以前の長い記述が要ります。

<meta charset="utf-8"/>

これは以前からあるものですが、ページの文字コードは指定するのがお行儀のいいやり方です。 普通に作ったらshift-jisかutf-8になります。メモ帳なら保存時に指定できます。 指定を間違えると盛大に文字化けします。 今時であればutf-8で書く方が色んな文字が自由に使えていいと思います。

<meta name="viewport" content="user-scalable=yes, initial-scale=1">

スマートフォンでまともな倍率の表示にするために必要です。 なお、幅固定のレイアウトにしてしまうと不細工になりますので、幅を固定しなくても破綻しない画面構成にするのがおすすめです。

また、かつてのようなフレームデザインの流儀でスマートフォン対応のページを作りたい場合、拙作のスクリプトを使うと上手くいくかもしれません。
配布先(解説とデモあり)
使い方は、同じく<head>タグの中に

<script src="./smartframe.js" charset="utf-8"></script>

と書くだけです。 フレームを使わずに全ページに共通のメニューを作るのは案外難しい(面倒くさい)ですから、このスクリプトを使う前提でフレームベースで作るのも良いかもしれません。 フレームの使用は非推奨とか言われていますが気にしたら負けです。

見た目の指定は別のCSSに分けなさいというお題目がありますが、個人サイトではあまり気にしなくていいです。style=""の属性も堂々と使いましょう。

個人サイト全盛期には検索結果に表示されたくないという意味で、検索避けという技がありました。 この技は今でも問題なく使えますので、検索結果に表示されたくなければ設定しておきましょう。

<head>タグの中に以下を書く

<meta content="noindex,nofollow,noarchive" name="robots">

サイトの一番上の階層にrobots.txtというものを置いて、以下の内容を記載

User-agent: *
Disallow: /

②令和時代の画像表示

IEが幅を利かせていた時代は最新機能を使うと何かとおかしな挙動が発生しましたが、今はChrome系独占状態なので気にする必要はありません。最新機能を遠慮なく使いましょう。

imgタグにはstyle="max-width:100%;"を書いておくのが推奨です。例えば、次のような形です。

<img src="hogehoge.png" style="max-width:100%;" alt="hoge">
hoge

このようにしておくと、画面幅が画像よりも狭くなった時に自動的に縮小してくれます。 なお、検索結果に適切に表示して欲しいと願うのであれば、imgタグにはalt属性(画像の説明)を書いておく方が好ましいです。そんなの気にしないという人は書かなくても問題ないです。

③令和時代のレイアウト調整

昔であればposition:absoluteにして座標指定する場合がありましたが、今時は画面サイズが色々あるという前提に立ってマージンを使って調整するのが良い方法です。 例えば、画像を並べた時に隙間がなくて窮屈だなと思ったら、imgタグをdivタグで囲んでdivタグにmargin:4px;のように指定してあげると隙間を開けられます。

<div style="margin:4px;"><img src="hogehoge.png" style="max-width:100%;"></div>
<div style="margin:4px;"><img src="hogehoge.png" style="max-width:100%;"></div>

なお、わざわざdivタグで囲むのは面倒な目に遭わないためのおまじないです。 ここで直接imgタグにマージンを指定したりすると何やら変なことになります(HTMLの仕様上は正しい挙動ですが)。 基本的にマージンを指定する時はdivタグで囲んでおくのが安全です。 マージン指定でレイアウトが変になった時もとりあえずdivタグで囲んでそっちにマージンを指定すると多くの場合直ります。

何回も指定するのが面倒になった時はスタイルシートの出番ですが、別ファイルで用意するのが面倒ならheadタグの中に書いてしまいましょう。 別ファイルにするのが推奨なのでしょうが、個人サイトレベルなら気にしなくて良いでしょう。 必要になったときに分ければいいだけです。

<style type="text/css">
<!--
img{
  max-width:100%;
}
//-->
</style>

④令和時代の文章調整

昔は複数の<br>タグで文章に隙間を空けるというのが定番のやり方でした。 今でもそのやり方はできますが、せっかく新しく始めるなら新しいやり方をしましょう。

その新しい(本当は昔からある正しい)やり方は<p>タグを文章の段落ごとに使うことです。 こうすると段落毎に適度な隙間が空くようになります。 もっと広げたい場合はどうするのでしょう? 答えはmarginを使います。例えばmargin-bottom:2em;のように書けば2行分空けられます。以下は例です。

<p style="margin-bottom:2em;">
初めの段落
</p>
<p>
2行空けて次の段落
</p>

ちなみに、1つめのmargin-bottomをやめて、2つめの<p>タグにmargin-top:2em;と書いても同じです。

⑤令和時代のテーブル

PCでは大して気にする必要はありませんが、画面が狭いスマートフォンはテーブルと非常に相性が悪いです。 列数はせいぜい2~3列にしておきましょう。

どうしても大きな表になってしまう場合は、表全体をdivで囲み、そのdivにstyle="overflow-x:auto;white-space:nowrap;"を指定しておく手があります。

<div style="overflow-x:auto;white-space:nowrap;">
<table border=1>
<thead>
<tr><th>項目1</th><th>項目2</th><th>項目3</th><th>項目4</th><th>項目5</th><th>項目6</th><th>項目7</th><th>項目8</th></tr>
</thead>
<tbody>
<tr><td>サンプル</td><td>サンプル</td><td>サンプル</td><td>サンプル</td><td>サンプル</td><td>サンプル</td><td>サンプル</td><td>サンプル</td></tr>
</tbody>
</table>
</div>
項目1項目2項目3項目4項目5項目6項目7項目8
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル

別のケースとして、複数のコンテンツのリストがあって、縦に並べていたら長くなって仕方ないからテーブルにしているという話もあると思います。 その場合はテーブルではなく、並べたい要素を個別にdivタグで囲んでdisplay:inline-blockを指定しましょう(必要に応じてwidthも指定)。 このようにすれば、画面幅が許す限り横方向に並べ、あふれたら下の方に並べるという挙動が簡単にできます。 なお、cssのfloatでも同じことができますが、扱いが面倒なので使いやすい方を使っておけばいいと思います。

コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ

⑥スマートフォンだけ違うCSSを適用する

正確には画面サイズが狭い場合にCSSを上書き適用するものです。 広い画面の時は広い画面用のレイアウトを、狭い画面の時は狭い画面用のレイアウトを適用でき、どちらで見ても見苦しくないページにできます。

p{
  margin: 10px; /* ←ベースの設定 */
}

@media screen and (max-width: 767px) {
p{
  margin: 10px; /* ←画面幅が767px以下の場合だけ上書き適用 */
}
}

⑦最終手段:スマートフォンだけ違うHTMLを表示する

PCとスマートフォンのページの差がCSSでどうにかできるレベルじゃねぇ! という場合はスマートフォン用のページを用意するのが正攻法ですが、一旦そうしてしまうと全ページをPC用とスマートフォン用に分けなければならず、更新の手間が二倍になるという地獄が発生します。 そこで、本当にどうしようもない部分だけに限定して、PCだけ表示するdivタグとスマートフォンだけ表示するdivタグを作ってしまい、それぞれにPC用とスマホ用を書くことにしましょう。

div.pcDiv{
  display: block; /* ←ベースの設定 */
}
div.mobileDiv{
  display: none; /* ←ベースの設定 */
}

@media screen and (max-width: 767px) {
div.pcDiv{
  display: none; /* ←スマホ用(画面幅が767px以下)の設定 */
}
div.mobileDiv{
  display: block; /* ←スマホ用(画面幅が767px以下)の設定 */
}
}
<div class="pcDiv">PCの時はこっちが表示される</div>
<div class="mobileDiv">スマホの時はこっちが表示される</div>

これをやるとGoogleさんとかが正しくページ内容を認識してくれないのでは? と思うかもしれません。確かにその通り、あまり正しく認識してくれなくなるでしょう。その意味で最終手段です。 しかし趣味の個人サイトでそこまで気にする必要があるのかという気はします。本格的にやりたくなったらその時に考えれば良いでしょう。

⑧背景を透かしにする

画像を背景に使うと、文字と被った時に見辛いという問題が多々生じます。そんなときは透明度を設定して透かしのようにしましょう。 画像編集ソフトで半透明にしても構いませんが、CSSでも半透明というものが簡単に使える良い時代になりましたので活用しましょう。

background-image: url("画像パス");
background-color:rgba(255,255,255,透明度0.0~1.0);
background-blend-mode:lighten;

で簡単に半透明にできます。 昔のブラウザは対応していませんが、今時は半強制的にブラウザの更新をさせられる時代ですので、気にする必要はありません。

ページトップに戻る