個人サイトの作り方|作成全過程記録

初めに

本記事は、小渕リツ子が運営している個人サイトの作成過程を備忘録代わり&個人サイトおすすめ用に記録するものである。

対象ホームページ

ホームページ概要

  • サーバー:スターサーバー
  • 言及システム:HTML/WordPress

ものすごく簡単な用語解説(確証なし)

  • HTML:ホームページのデータファイルの形式の一つ。絵をかいてjpg形式にしてインターネットに画像をアップロードするように、情報を入れて中身を作った後にhtml形式にしてアップロードする。専用の書き方があり、それを覚える必要がある。
  • WordPress:ものすごく機能が豊富なブログサービス。はてなブログやFC2,amebaブログなどはいわゆる「ブログ記事」を載せる専用の形式しか存在しないが、WordPressはそのほかに「固定ページ」を作る機能があって、それのおかげで、固定ページでイラストや小説を載せ、ブログページでブログ記事を更新する、ということができる。また、RSS配信も自動でついてくるなど、便利なサービスである。筆者のブログページはwordpressを使用している。固定ページサンプル→免責事項

①個人サイトの作り方についての記事・書籍を読む

私はツイッターで見かけた素敵な絵を描かれる方が「個人サイトいいよ」という記事ののちに簡単な作り方の記事を上げてくださっており、それを読んだのがきっかけで個人サイトを整備しようという気持ちになった。しかし、詳細な作り方はわからなかったため、インターネットの集合知に頼って作り方を調べることにした。

参考サイト

最初の挫折ポイントとして、「『地味でシンプルな作成ハウツー記事』が存在しないOR検索除けをしておりグーグル検索では見つかりにくい」というものがある。私は正直、「どんどんpvを稼ごう!」というようながつがつした記事特有の書き方が苦手である。やたら長いタイトルとかも。しかし、SEO対策など、検索に引っ掛かりやすくするためにはこのような手段をとるのが王道のようで、たいていの親切なハウツー記事は、親切だからこそ、このような文体になる。
複数窓で記事をあっちこっち行くのが手間で、またそのようながつがつしたタイトルを見るのもげんなりするため、書籍を購入することにした。

参考書籍

  • 個人サイトを作ろう! テンプレートですぐできる!すぐに身につく!HTML&CSS

こちらは、上記のサイト「do」の管理人さんが執筆したもので、内容としては、「do」において記事化されているものが、より基礎から、親切に、がつがつした文体を脱いで、まとめて書かれている。私はこの本をもとにほぼすべての工程を終えた。HTMLやCSSのやや複雑なコマンドは検索をして補完する形をとった。こちらのいいところは、pv数を稼ぐのが目的ではない「個人サイト」を作成することを前提に書かれているため、ビジネス寄りながつがつした文体がないことである。索引も存在し、目次も豊富であるため、わからないところはすぐに引ける辞書的な役割も果たしてくれる。

②レンタルサーバーを選ぶ・契約する

ホームページの中身は、データファイルである。「個人サイト」自体は究極サーバーを借りずとも作成できるのであるが、その場合、自分のPCないしUSBなどの外部メモリを使用しなければ見ることはできない。すなわち、インターネットの海に流すことができないのである。

ここが挫折ポイント2となるだろう。サーバーを借りる、借りなければ公開できない、というのが、pixivやTwitterなどのプラットフォームに慣れていると感覚的に納得しにくい。しかし、まあpixivもTwitterもアカウントを作成しなければ作品を発表できないわけで、そのアカウントづくり、と考えてみることにした。

では、契約するレンタルサーバーを選ぼう。ここ挫折ポイント3だ。なぜならさまざまなレンタルサーバーサイトの印象が「がつがつしている」だからだ。「がつがつしてるって何?全然普通じゃん」って思っている人はまじで個人サイト作ったりコーディングしたりする適性が高いと思うので読み飛ばしてください。
そういうがつがつしたものを練り歩くのが嫌だったので、わたしは最初のきっかけとなった記事の書き手さんが使用しているスターサーバーのライトプランに契約した。大胆にも複数年契約である(そのほうが月額比でやすくなるので)。しかし、その後もうちょっと考慮しといたほうがよかったなってことがあったので、ここに書いておく。

スターサーバーライトプランの概要

  • 容量(どのくらいのデータを上げられるか):160GB
  • ドメイン(違うURL母体のサイトをどのぐらい作れるか):50個
  • 無料ドメイン(スターサーバーオリジナルの無料ドメインをどれだけ使えるか):3個
  • wordpress使用:可
  • MySQL5データベース(wordpressをいくつのドメインに対して使えるか):1個

プラン一覧|レンタルサーバー【スターサーバー】

太字の部分について簡単に解説していく。

ドメイン数・無料ドメイン数

ドメインとは、「〇〇〇.com」の〇〇〇の部分の文字列のことを言う。ホームページのデータを入れるフォルダーの名前と考えるとわかりやすいと思う。インターネットの海にサーバーに乗って漕ぎ出し、ドメインという形で場所をとって、そのフォルダーの中にホームページのデータを入れるとインターネットにホームページを公開できるという仕組みだと私はとらえている。
自分のパソコンやUSBであれば、フォルダーの名前は勝手につけられるが、それは自分がパソコン・USBを買っており、ほかに使う人がいないからである。多くの人が自分のデータを公開するインターネットでは、ドメインの名前はかぶってはいけないし、場所を借りるにもお金がかかる。
スターサーバーのライトプランのドメイン:50個というのは、利用者がそれぞれ借りたドメインを50個までなら置くスペースを確保できますよ、ということだ。ドメインを50個くれるということではないことに注意されたい。

で、ドメインを取得する話である。これは、ほかの人が使ってない文字列であれば年額50~1000円くらいで契約できる。ここ挫折ポイント5。サーバーも借りたのにまた契約か…となるのである。そこで、私は無料ドメインを使用することにした。

スターサーバーは「ネットオウルのドメイン」というものを提供している。そこでドメインを借りると、「好きな文字列.指定の文字列.jp」という形でドメインをとることができる。

https://nitonzepo.sometime.jp/

https://kozeniand.folder.jp/

この場合、「nitonzepo」「kozeniand」が好きな文字列、「sometime」「folder」が指定の文字列である。スターサーバーライトプランでは、このような形で無料ドメインを3個まで取得できる。

違うサイトを作りたい場合は別のドメインをとらなくてはならないのか?

上記で、私は創作サイトと同人サイトで別のドメインをとっていることがわかるだろう。これは当時なんとなく違うURL文字列のほうがいいと思ってそのようにしたのだが、ホームページファイルをアップロードする場所が分けられるという利点があり、やはり別のドメインをとってよかった、と思っている。
ドメイン名をフォルダー名ととらえなおすと、同じドメインに複数のサイトのファイルが存在することで、やや混乱する可能性がある。
ただ、上記の内容はあくまでこのような形で無料ドメインを使用する場合に限る。契約をして独自ドメインを取得すると、サブドメインというものが設定できるため、1つのドメインを契約して、サブドメインを使うことで、複数のサイトを運営できる。

サブドメイン

独自ドメインを取得すること、サブドメインに関する利点はdoの以下の記事にまとまっている。サブドメインに関するところを引用する。

サブドメインを使えば別のサイトも運用できる

独自ドメインを取得すると、そのドメインのサブドメインも利用できるようになります。

サブドメインとは、例えば「sample.com」というドメインを取得した場合、「aaa.sample.com」とか「bbb.sample.com」のように、本来のドメインの前にさらに好きな文字列を付け足したもののことです

当サイトでは「gt-gt.org」という独自ドメインのサブドメイン、「do.gt-gt.org」を利用しています。さらに、EASELデモサイトは「easel.gt-gt.org」、WordPressサイト制作支援メディアACTでは「wp.gt-gt.org」というサブドメインを利用しています。

 ドメインが異なるサイトをいくつも運営していると、サイトごとに別のサーバーを利用しているように見えますが、実はこれらのサイトは全て同じサーバーで運営しています。ひとつのサーバーに対していくつものサブドメインを関連づけることができるのも、独自ドメインの魅力です。

運営しているサイトごとにサブドメインを割り振れば、それぞれのサイトが独立しているように見えて、オンリーワン感が強まるのでおススメです。

独自ドメインを個人の創作・同人サイトで使うメリットとオススメ取得サービス

このように、ドメイン名は制作者にかかわる独自のものにして、サブドメイン名をサイト名にする、という手法があるようである。

スターサーバーライトプランだと、実質無料で作れるサイトは3個まで

上述の通り、スターサーバーライトプランで取得できる無料ドメインは3個であり、それらのドメインにサブドメインを作ることはできないため、URLが異なるサイトは3個までしか作れない。ジャンルごとにサイトを分けたい人などは、独自ドメインの取得を考えてみてもいいだろう。

MySQL5の数=Wordpressが使用できるドメイン数

wordpressが使えるし、ドメインも複数個とれるんだから、すべてのサイトでwordpressが使えるのかな、と思うとそうではない。詳しくないのでここは特に私独自のとらえ方だが、この、MySQL5データベースの数は、すなわち、wordpressが使用できるドメインの数である。したがって、スターサーバーライトプランでは、一つのドメインにしかwordpressを使用できない。
はじめ、すべてのサイトをwordpressで作る気満々でネットオウルのドメインを取得してしまった私は、ここが挫折ポイント6となった。創作サイトと同人サイトのどちらをwordpressにするか悩んだ末、HTMLを勉強し、そこではカバーできなかったブログだけwordpressを使用するため、創作サイトのドメインにwordpressをインストールし、リンクを両方のサイトにつなげるという形をとった。

これは確証がないが、もしかしたら独自ドメインを取得してサブドメインでサイトを分ける使用にすれば、すべてのサイトでWordpressを使用できるのかもしれない。やっている方がいたら教えてほしい。

その他考慮すべき点

  • 成人向け表現の規制の度合い
  • 同人表現の規制の度合い
  • SSL設定(https://にできるかどうか)
  • .htaccess(リダイレクト機能)が使えるか
  • cgi(てがろぐなどのシステム)が使えるか

予算に合わせて好きなものを選ぶといいと思う。

気になっているレンタルサーバーサービス

  • 同人・創作サイト専用レンタルサーバー「WitchServer」

    二次創作・R18制限に関して規制がない。これはサーバー単位で規制はしないというもので、実際訴えられたからといってこれを盾にできるわけではないのだが、こういった明言がなされているサーバーは少ない。また、サブドメインが無制限というところから、無料で複数個URLの異なるサイトが作れるのだと考えられる。データベース(MariaDB)数も無制限というところから、wordpressも複数ドメインに読み込めるのだろうか?5GBという容量が値段の割にかなり少ないため、その点ちょっと予算との兼ね合いがある。

  • やや割高だがサービス充実「さくらのレンタルサーバ」スタンダードプラン

    年齢制限表現に関する規制の明言がある。WordPressのデータベースも50個ということで、複数のサイトでWordPressが使え、またモリサワのwebフォントが使用できる。しかし、無料独自ドメインが2つのみであり、異なるURLのサイトは2(+1)つしか作れない。月額換算420円~など、やや高額であるところも難点だ。ちなみに、さくらサーバのスタンダードプラン月額換算128円~だと、WordPressが使えない。悩みどころである。

  • その他参考サイト

わたしはサーバーをあんま考えずに契約してしまったのだが(しかも複数年)、結構大事なので慎重に選ぼう。

③サイトを作ってみる:使うシステムを選ぶ

まあWordPressを使うかHTMLを使うかをきめる、ということである。

筆者の管理するサイトは、以下のような形になっている。

  • 創作サイト:基本HTML/ブログのみwordpress
  • 同人サイト:HTML

全部HTMLorWordPressにしないのはなぜ?

なぜ統一しないのか、という点については、以下の理由がある。

  • wordpressが複数ドメインで使えなかったから
  • wordpressが少し使いにくいから
  • ブログをHTMLで作成するのが難しかったから
  • HTMLだと、ページごとにデザインを変えられるから

一つ目に関してはすでに述べたので言及しない。

WordPressは使いにくい?

便利なサービスであるのだが、便利だからこそコマコマとしたところが気になってしまう。以下のような点が気になる。

  • 英語での使用が前提となっていることが多く、翻訳調であったり、翻訳機能を使う必要がある。
  • サイトデザインを決定する「テーマ」が膨大かつ、おしゃれすぎており、個人サイトのようなこじんまりとしたものに向いているものが少ない。
  • それぞれの機能に関する有料プランへの広告が頻繁に来る。

のようなものである。おしゃれで洗練されたサイトを作りたければ向いているのだと思う。ここで本記事を通して使う謎用語を使うが、wordpressは全体的にテンションががつがつしているような気がして、気後れする部分が大きい。

ブログをHTMLで作れなかった

厳密に言うと、ブログ記事自体を作成するのは結構簡単にできるのだが、「カテゴリ別」「月別」アーカイブの作り方がわからなかった…。WordPress他ブログサービスでは、多分その記事に記載されているカテゴリーのリンクをポンと押せば同じカテゴリーの記事が並ぶのだが、あれってどうやるんだろう…「ブログ HTML 作り方」で検索してもめぼしい記事が出てこないので、私の旅は続く…。

ページごとにデザインが変えられるHTML

おそらく、WordPressでは基本的に一つのサイトで一つのデザインを使うことが前提とされている。だから、このページはこのテーマ、このページはこのテーマ、と変えるのは難しい。不可能ではないらしいが、たぶん王道の使い方として想定はされていないだろう。
しかし、HTMLでは、それぞれのファイルに記載された内容を反映するだけなので、別のCSSと連携させたデータをアップロードすれば、デザインが違うページを同じサイトに共存させることができる。

例:創作サイトの基本デザイン

 

例:創作サイトの新刊告知ページ

こういうところはHTMLの利点といえる。いいとこどり、というか、できないところ補い、という形で、わたしはHTMLとWordPressの両方を使用している。

④サイトを作る:作り方を読む(再)

作り方を読む。私は大体冒頭に示した書籍を頭から読んだ。

⑤サイトを作る:テンプレートを探す

各サイトの仕様テンプレートは以下の通り

  • 創作サイト:上記書籍の特典テンプレ―ト「BASIC」
  • 同人サイト:peta2
  • ブログ:write → Adventurous
  • booknook告知サイト:Simple slider

だいたい「do」に頼りっきりである。HTMLファイルの中にどこをいじったらどう変化するかという説明が逐一書かれていて使いやすいイメージ。上記書籍は特典テンプレートに沿った解説も載っていたので、それに従っていじっていた。

こんなテンプレートのまとめサイトが存在する。選んでみても楽しいかも。

⑥サイトを作る:中身をつくる

HTMLファイルを編集してひたすらコンテンツを作る。創作サイトのコンテンツは以下の通り。

  • 創作サイト「にとんぜぽ」
    • トップページ
      • メインビジュアル
      • サイトタイトル・概要・注意事項
      • 更新履歴
      • 展示物内容
      • リンク
      • 自己紹介
      • サイドバー:サイトマップ
    • イラストページ
      • 創作絵
      • キャラ化の絵
      • TRPGの立ち絵
    • 読み物ページ
      • 嘘日記
      • 書き物:小説・手書き日記
    • プライバシーポリシー
    • 問い合わせ

使用ソフト・導入プログラム

  • VScode

    HTML/CSS/js/htaccessが編集できるソフト。無料。追加プラグインでプレビュー機能あり。

  • fuwaimg

    本サイトで画像が画面遷移せず拡大表示できるのはこれのおかげ。もう少し大きくなってほしい。

  • いいねボタン改

    ぽちっと押せるハートボタン。告知ページの部数アンケートもこれ。

  • MailForm01

    おたより箱に使用。

  • てがろぐ

    寝言に使用。スキンはskin-minimal

⑦サイトを作る:その他もろもろ

  • ファビコンを設定する
  • RSS配信をする
  • サイトドメインのメールアドレスを作ってメールフォームを機能させる
  • サーチに登録してリンクを貼る

使用プログラム

⑧サイトを公開する

サーバーサービスから一つずつアップロードもできるが、FTPクライアントソフトを使用することで一気にアップロードできるので、それを使用することにした。

使用プログラム

⑨WordPressのこまごましたもの

主にHTMLについて話したが、WordPressのこまごましたことについても話す。

使用プラグイン

  • AddToAny Share Buttons (シェアボタン)


    これ。シェアボタンを設置できる。

  • Classic Editor

    なんか編集するのに便利。

  • Easy Table of Contents


    これ。目次を挿入できる。

  • FooBox Image Lightbox


    これ。画面遷移せず拡大表示できる。

  • まろやかWEB拍手 for WordPress


    これ。画面遷移せずお礼イラスト表示や定型文、メッセージ送信ができる。

  • SEO SIMPLE PACK


    こんな風にTwitterカードを表示できるもの。

  • Simple Author Box


    これ。私はこれをサイドバーウィジェットの先頭に置くことで、スマホから見ると記事を読んだ直後、パソコンからだと右上という見やすい位置にこれが表示されるようになり、それぞれのサイトに飛びやすくなるか?と思って設置した。

  • Simple Blog Card

    こんな風になるやつ。埋め込みできないサイトもこういう感じにできるし、デザインが統一されていい。
    ちなみに、WordPressの記事を普通に埋め込むと以下のようになる。

個人サイト運営日記|微調整編

  • WordPress Popular Posts


    これ。人気記事を表示できる。

  • WP Dark Mode


    これ。ダークモードにできる。

  • Yet Another Related Posts Plugin (YARPP)


    これ。各記事の下に、タグやカテゴリやタイトルから検出された関連記事が記載される。

その他微調整

タグの文字の大きさを統一した


これに関する話。記事数に応じて文字が大きくなったり小さくなったりするのが嫌だったので、文字サイズを調整した。

こうすると全部同じサイズになる。

免責事項を書いた

固定ページ機能を使って免責事項を書いた。

あとはここに書いてある。気になる人は読んでみてください。

個人サイトを作るうえでの心意気

個人サイト、どうにかこうにか作れるものである。しかし、どうにかこうにか作るために、大切なことがある。

わからないことが多いことを受け入れる

わからないことが多い。新しいゲームの説明書を読まずともいくらか操作できていた生活を送っていると、個人的にはやる作業の多さよりこれがきついんじゃないかと思われる。挫折ポイントの根幹である。しかし、やってこなかったことはわからないことが前提だ。これを受け入れて、観念してチャレンジする心意気を持っておく必要がある。

調べる・読む・やってみる

書籍を読む。検索をする。気に入る記事が出るまで検索ワードを変える。読む。やってみる。うまくいかない。もう一度読む。やってみる。このPDCAサイクルをぐるぐるぐるぐる回すこと。たいてい一度ではうまくいかない。HTMLのコマンド入力はもちろん、慣れないうちは検索して目当ての記事を出すのも難しい。とにかくdo do doである。doさんのサイトタイトルの由来が少しうかがえてしまうほど、doだらけの営みである。とにかく、うまくいかないということは何かが間違っているということなので、参考資料を探し、読み、やるということが重要だ。

個人サイト作りをやってよかったこと

新しいことに安価でチャレンジできた

自分語りをすると、ずっと勉強をし続けていて、そういう進路を進んでおり、部活動やサークルなども小学校時代から慣れ親しんだ分野で、絵も物心ついた時からずっと描いており、冗談抜きで15年以上、自動車免許取得以外で「まったくやったことがないこと」にチャレンジしたことがなかった。そして、大人になると何をやるにも金がかかる。新しいことを始めるには、精神的にも金銭的にもハードルが高くなっていく。
その点、個人サイト作りは未知でかつ安価に新しいチャレンジができる。教室へ行くなんて言ったらサーバーレンタル代の比ではないだろう。そういう意味でお得な趣味である。

戦いの中で成長できるが、それが数字に表れない

自分の学びの度合いによって、できることがどんどん増える。私のサイトもとりあえずここを安息地点としているが、アニメーションを追加したり、もっとおしゃれなレイアウトにしたりなど、自分が学べばやれることは増える。
これのいいポイントは、それが数字に即時に表れないことだ。例えば、絵であれば人気のジャンルにはまる、絵がうまくなる、作品を熟読して独自の感性で絵が描けるようになる、などの成長が、結構数字に出がちである。それが張り合いになることもあるが、手段と目的がごっちゃになってしまうこともある。しかし、例えば今、私のサイトでアニメーション機能が実装されたとしても、それが原因でアクセス数が即時に増えることはないだろう。そういう、「どこまでも自己満足」という範囲が保たれており、「たのしいからやるんだ」という範囲で遊ぶことができる

あたたかい反応を大切にできるようになった

個人サイトに来るというのは、意思が必要だ。ログインしたら自動的に作品が流れてくるわけではない。わざわざサーチをめぐり、もしくはブックマークをし、「このサイトに行くぞ」という気持ちがないと来ない。ツイッターのようにアカウントが見られるわけではないのに、より「人」を感じることができる。そしてTwitterに足をのばした時も、いいねを数字ではなく、人として認識できるようになる。いつもありがとう、みんな…。

自身の中の評価軸が増えた

いままでTwitterが評価軸の主軸であったが、そこにもう一つ太い軸として個人サイトが追加された。Twitterはすべてではない。当たり前かもしれないが、理屈として知っていても実感するのは難しい。Twitterで評価されなくても、おもしろがってくれる人がいる、その逆もある。そういうことで、自分のアウトプットを多面的にとらえることができるようになる。

ひとり遊びが上手になってきた

個人サイトは、ひとり遊びに最適な場所である。今まで、amebaからTwitterへと、とにかく、人とつながるSNSをやってきた。私のインターネット生活は、他者とつながるのが前提であり、他者からの反応が欲しくてやるものだった。絵を自分のために描くより、リクエストをもらって描くほうが好きだったし、すごくひとり遊びが苦手だったのだと思う。個人サイトを作ることを通して、「自分が楽しいからやる」という感情を獲得し、絵を描くテンションも変わってきた。自分のために、いろいろやっていくぞ!

個人サイトのススメ

誰も私を見ていないんじゃないか、SNSで簡単にみられるから見てるだけじゃないのか、自分には価値があるのだろうか、そんな風に考えてSNS疲れをしている人がいたら、もしよかったら個人サイトを作ってみてほしい。あなたの作品にたどり着くハードルを少し上げることで、それでも来てくれる人の存在をとても大事に抱きしめられるようになるかもしれない。そして、人の目を気にせず自己開示をできる場所を手に入れることで、自分も大事にできるかもしれない。私は大事にできるようになりました。

個人サイトを持っている方へ

世の中にはたくさんのハウツー記事が存在する。しかし、それぞれの文体が自分に合わないなどで、個人サイト作りに興味がありながらも、一歩を踏み出せない人たちがいるかもしれない。もしよければ、あなたがどうやって、何を参考にして、個人サイトを作ったのか、書いてみるというのはいかがでしょうか。あなたのサイトを好んでみている方は、あなたの文体が性に合っているだろうから、あなたの文体なら、個人サイトの作り方を知ることができるかもしれません。私は、好きな作家さんのハウツー記事がきっかけでした。そんな風に、誰かのきっかけになるかもしれません。

リンクOKです

この記事に関して、誹謗中傷目的でない限り、リンクの規制はありません。個人サイトなので個別記事にリンクを貼ってもいいものか悩む場合があるかもと思って記載します。何かの参考になれば幸いです。

感想・訂正などありましたらweb拍手などからご連絡ください。

こんなサイトができます

以下、私のサイトを貼って、この記事を終わろうと思います。

【宣伝】嘘日記再販しています。

よろしくお願いいたします。

参考資料

 

22

RSS情報収集を始めた&サイトでRSS情報配信を開始した

2022/10/15追記

RSSを使用した情報収集を始めました。
RSS…そんな単語を読んだことはあり、なんかWi-Fiのアイコンが斜めになったみたいなマークも見たことがあるものの、実際どんなものかわかっていない…。

Wi-Fiを斜めにしたようなアイコン

自分に関係があるものと正直思っていなかったのだが、使ってみると色々便利なことが分かった。また、このブログは個人サイトを運営している方を勝手に仲間だと思い応援しているのだが、個人サイトを運営している方も知っていて損はない概念だな~と思ったので、辞書等を引用しながら使ってみた所感を述べてみる。筆者はwebデザインの専門家ではなく、サイト作成を初めて3か月の人間であるので、この記事を読んで、正確さが担保された情報がほしいと思った場合は各自調べてみてほしい。

RSSとは

ホームページやブログなどの更新情報や要約、見出しなどのメタデータ(属性情報)を構造化して記述するためのXML(インターネット上のコンテンツを記述する言語の一つ)ベースのフォーマット。RSSリーダーを利用すれば、ニュースサイトやブログの更新状況を自動的に確認し、複数のニュースサイトへのアクセスや愛読している多くのブログを閲覧しなくても、更新されたサイトだけを効率よく探し出す。

『情報・知識 imidas』,「RSS[インターネット]」,手嶋彩子(2008.3)https://japanknowledge.com/lib/display/?lid=50010A-124-0046

まあだいだい以上の引用記述がすべてだ。わたしは、更新情報を通知する元のデータだと捉えている。

何ができるのか

RSSはデータであるので、そのままでは専門的な知識のないわたしには読むことができない。そこで、RSSリーダーサービスを利用すると、好きなサイトのRSS情報を収集し、それを読み取った結果がコンピュータのための記述言語ではなく日本語で読めるようになる。
RSSリーダーサービスとは、RSSという更新情報データを収集し、そのサービスが対応している言語で一覧表示してくれるサービスである。これによって、はてなブログ、noteなど複数のサービスで購読しているサイト(ブログ)の更新情報を、サイトの境界をまたいで一気に確認することができるようになる。わたしの理解を図解すると以下のようになる。

現在、代表的なところだとはてなブログ、noteなど、人によって使用している公開プラットフォームが異なっており、それぞれのサービスに熱心にログインしない限り、更新を見逃しがちである。また、フォローしていることを認知されたくない、となってくると、フォローもしにくく、より更新情報が分かりにくくなってしまう。でも更新したら絶対見たい!という方のわがままをおおよそ叶えてくれるサービスである。

私が使っているRSSリーダーサービス

現在使用しているのはfeedlyinoreaderである。どちらも現在無料サービスの範囲内で使用している。

2つ使用していることにそんなに意味はない。まずはじめに検索して話題に出る数が多かったfeedlyを使用してみたのだが、こちらは完全英語サービスで、もう少し調べたらinoreaderが日本語対応しており比較的情報取得頻度が高いということでinoreaderも使用し始めてみた、という流れである。使用してみて、どちらか使いやすい方を継続したいと思っている。

feedlyとinoreaderの上記以外の差は、feedlyは複数サイトを登録したとき、はじめからそれぞれの更新情報を更新日付順に並び変えてくれるのだが、inoreaderは完全に受信した順に並んでしまう。

例えば、10/1と10/10に更新情報があるサイトAと10/2と10/11に更新情報があるサイトBを、サイトA→サイトBの順に登録した場合、それぞれのサービスで表示される一覧情報は以下のようになる。

feedly

10/11 サイトB
10/10 サイトA
10/2  サイトB
10/1  サイトA

inoreader

10/11 サイトB
10/2  サイトB

10/10 サイトA
10/1  サイトA

すなわち、inoreaderは厳密には並び替え機能はなく、純粋に受信順に情報を一覧化すると考えられる。
一度登録してしまえば、あとはそれぞれのサイトがそれぞれ更新され、それぞれの受信順に一覧化されるので、時間がたてばfeedlyのような時系列順の並びになるのだが、やはり使い始めはやりにくいところがある。

他にはreeder5というリーダーサービスも興味深かったが、パソコン版がmac版のみでwindows版がないのであきらめた。

自分のサーバーを使用して利用する「tiny tiny RSS」というサービスも気になったが、こちらはスマホアプリ版がandroid版しかないのであきらめた。

feedly,inoreaderの使い方

では、どうやってRSS情報を取得するの?ということだが、やり方はいたって簡単である。それぞれのサービスの「RSSフィードを追加」という部分から、好きなサイトのURLを登録する、というだけ。それらのサービスがRSSを配信していれば、URLを入れるだけで情報を収集してくれる。いじってみた感じ、以下のサイトはRSS情報が収集可能である。

  • はてなブログ
  • note
  • てがろぐ使用ページ
  • その他ブログサービス
  • (おおよその)WordPressを使用して作られたサイト

【追記】
WordPressは取得できるときと取得できないときがあるらしい。RSSフィードページ自体は存在しているのですが、そこに更新情報が追加されているかどうかがサイトによって異なる。

RSS情報がないサイトもある…

上記のサービスではそれぞれの利用者がわざわざRSS情報配信の設定をせずとも、自動でRSS情報が配信されている。しかし、RSS情報を配信していないサイトも存在する。例えばわたしのサイト、すなわちHTMLベタ打ちサイトはRSSは自動では配信されず、自分で設定し、更新したら逐一登録する必要がある。このように、RSS情報配信が自動搭載されていないサービスでサイトを作成している場合は、そのサイトのRSS情報は上記の簡単な方法では読み込むことができない。調べたところ、どうにか設定をする方法もあるらしいのだが、難しくて現在はチャレンジできていない。ちなみに、feedlyもinoreaderも、有料プランにするとRSS情報を配信していないサイトからも情報収集が可能になる。「わがままをおおよそ叶えてくれるサービス」という由縁はここにある。

実際どんな感じに表示されるのか

feedlyの使用画面
inoreaderの使用画面

更新情報の配列の具合を見るために自分のサイトを登録したフォルダの画面を表示する。RSS情報はそれぞれフォルダ分けできるので、以下のようにフォルダ分けしている

  • 公式:気になるコンテンツの公式サイト・公式アカウント
  • 呟き:好きなサイトのてがろぐページ・ショートブログ
  • 個人サイト:好きなサイト
  • 健康:健康に関するブログ・ショートブログ

自分のサイトでRSS情報を配信するようにした

前述の通り、htmlベタ打ちサイトではRSS情報を別に登録しないとRSS情報が配信されない。わたしのサイトもこれまではRSS情報を配信していなかったが、10月分からRSS情報を配信した。配信の種別は以下のとおりである。気になるコンテンツのURLをRSSリーダーに登録していただけると、更新情報が届くようになる。

それぞれの更新情報は被らないようになっている。すべて見たい場合は…お手数だが…すべて登録してください…。

追記:お知らせページ作りました

それぞれのサイトにRSSに関するお知らせページ作りました!もし登録したよって方いたらボタンをポチっと押してください。

そもそもなんでRSS情報収集をしようと思ったのか

以下の記事を読んで、RSSを使用した情報収集について知ったからである。

コロンビアさまによるサイト「nemui」

Twitterとのいい距離感のつかみ方をいつも悩んでいる。そんな時にこの記事に出会い、「TwitterをやめるかはともかくとしてこのRSS情報収集って便利そうだな…」となったため、調べて初めてみた。上記時にはオタクがTwitterから離れるためのさまざまなTIPSがあり、また単純に管理人さんの記事はそれぞれ面白いので、もし興味があったら参照していただきたい。リンクフリーということでリンクを貼っているが、「○○のリンクから来ました」というようなことは伝えないでいただくようお願いします。

RSS情報配信しよう&RSSで情報収集しよう!

個人サイトをやっている方々へ、一度RSSリーダーを使用して自分のサイトがRSS配信に対応しているかどうか確かめてみてほしい。そして、もし対応していなければ、よければ対応してほしい。あなたの更新情報が分かりたくて、なんどもURLをRSSリーダーに読み込み有料プランへの誘導をされている人がいるかもしれないから…。

そして、いろいろサービスがあって、Twitterでの更新通知を見逃すといつの間にか読めてない記事がある!という方へ、こういうサービスがあるので、よかったら使ってみるといいのではないでしょうか!

8

個人サイト運営日記|微調整編

公開時から割とちまちまといじったのでその記録をちょっと書いておく。ハウツー記事として書いたつもりはないので、特段詳しいやり方は記載していないが、サイト本体を作ったはいいものの、なんか気に入らない、どういう調整のしかたがあるのだ?という方がいたら、そのアイデアリストとして使っていただければ幸いである。あと、結構頑張ったので、こんな感じに頑張っているんだね…と見守ってほしい。

ブログのみwordpressを使用しているのだが、ぱっと見わかりにくいのでwordpressの調整のもの、HTML調整のものは分かるようにした。

創作サイト:にとんぜぽ

よろずりんくに登録した

いまでも活発に動いているサーチエンジンであるよろずりんくに登録した。これ以降コメントなどをもらえることが増えたため、結構効果的だったのではないかと思っている。その他サーチエンジンにも登録しているが、アクセス解析を見る限りよろずりんくからのアクセスが一番多く、登録だけでなく探す目的としてこのサーチエンジンを使っている人も多いのだろうということが窺える。これから個人サイトを作る方は是非登録先候補として考えてみて欲しい。

ブログテーマを変えた【wordpress】

以前にも言ったとおり、ブログだけはアーカイブ表示、カテゴリ別表示が簡単であるためwordpressを使っているのだが、これまで使っているテーマがどうにも記事の横幅が長いのが気になっており、追加CSSでpadding編集なども行ってみたがレスポンシブ対応への労力のことも考え、いろいろ試した挙句今のブログテーマにした。リンクの色がサイト本体と同じであるため、よかったかもしれない。なんかどうにも日本語のブログ記事の横幅って気になっちゃうんだよな…私だけかな…?あとパソコンから表示の場合絶対サイドバーがあってほしい…amebloの感覚なのかな?記事の横幅に関わるwordpressの調整のしかた知ってる人いたら教えてほしい…ほんとはもうちょっと別のテーマの感じの方が気に入っていたりするので…。

ブログの画像をクリック表示できるようにした【wordpress】

lightboxプラグインをwordpressに実装し、いままで全体像が表示されなかった画像も、クリックしたら全体像が表示されるようにした。そもそも、画像を挿入した後にリンクをメディアファイルに指定する習慣がなかったため、これまでギャラリー表示で登録していたブログ記事の画像は見えてる部分しか表示されなかったのだな…反省。たぶん、普通にリンク繋げると画面が遷移して画像が全体表示されるところ、このプラグインを入れると画面遷移なしで(本サイトみたいに)全体像が出る、という感じなんだと思う。

ブログのヘッダー画像追加【wordpress】

ブログのヘッダー画像を追加した。2パターンあり、ランダムに表示される設定である。このブログは創作サイトのブログでもあり同人サイトのブログでもあるので、両側面の画像を用意した。

addtoanyシェアボタン外観調整・ツイートしたときの文言追加【wordpress】

AddtoAnyプラグインでシェアボタンを設置している。外観がどうにも気に入らなかったのだが、設定画面で背景色とアイコンの色を変えられることを知り、リンクの色と揃えて黄緑色にした。

また、記事をツイートでシェアしたときに自動でサイト名と私の名前が入るともし共有されたときにエゴサがしやすくていいな…と思ったので、文言を追加した。

AddtoAnyの設定画面の追加ジャバスクリプトのところに以下の文言を追加している。

a2a_config.templates.twitter = "${title} |にとんぜぽ ${link}   by 小渕リツ子";
ツイートするとこんな感じになる

ブログのURL文字列(パーマリンク)を変更した【wordpress】

URLの文字列を今まで手で直していたり諦めて日本語表記のままにしていたりしたのだが、手直しは面倒だし日本語表記のままだとamazonのリンクみたいに膨大な長さになるので、サイトに更新情報とリンクを載せるときにやりにくいな~と苦悩していたところ、wordpressの設定画面で変更できることが分かった。カテゴリー名/月/日付になるようにした。

追記:このとき、カテゴリ設定でカテゴリーのスラッグ(URLにした時の文字列)を半角で指定しないとまたamazonのリンクみたいになってしまうので、きちんと設定する。

上記のパーマリンク設定だと個別記事を最後まで読んだときに「前の記事」「次の記事」が出て来なくなったので数字ベース設定に変えました;;

ツイッターカードのためのプラグインを変更した【wordpress】

パーマリンクを変更したからか、今使っているテーマとの相性が良くないのか、ALLinSEOプラグインだと個別記事からツイッターカードのためのメタタグが消えてしまったのでSEOSIMPLEPACKプラグインに変更した。日本語なのでこっちの方がやりやすいかもしれない。しかし、ALLinSEOで使えていた目次機能がなくなってしまったため、今回の記事から目次がなくなってしまった。ツイッターカードとは、ツイッターでリンクを貼った時にそのサイトの概要や画像が表示される機能である。

寝言にいいねボタン実装&ボタンの概観を星にした【HTML&CSS】

にししふぁくとりーで配布されているひとりツイッターことてがろぐ、本サイトでは寝言。の一つ一つの投稿にいいねボタンを付けられるようにした。たぶん上限も一人一回になっている…と思う。

そして最大のポイントはそのボタンの形を何とか星形にしたこと!!!いいねボタンのHTMLから辿ったgoogle fontsのライブラリから星を指定して、CSS編集で色を黄色にし、かつてのツイッターのふぁぼボタンを生成することに成功した。

わたしのスマホから見ると星が上半分しか見えなかったり小っちゃかったり、いろいろあるのだが…とりあえず成功した。

いいねボタンを受け入れられない悲しきツイッタラーの画像

同人サイト:と、どこか。

画像クリックでそれぞれのページに飛べるようにした【HTML】

今までは、上記の画像をクリックするとその画像が拡大表示されるようになっており、例えば画像の二次創作のページに行くには右下のmoreボタンを押さなければならなかったが、わかりにくいし自分でも毎回画像をクリックしてしまうので、画像をクリックしてもmoreボタンをクリックしてもページ移動ができるようにした。

更新情報にブログ更新もいれるようにした&リンクを繋げた【HTML】

いままで更新情報は文字のみでリンクを繋げていなかったのだが、繋げて悪いことはないので繋げるようにした。また、ブログ更新もいれるかどうか迷ったが、自分が見る側だったらあると嬉しいので入れるようにした。

今後の目標

過去の頒布物ページを作る

嘘日記もコピー本もシールも作ったので、その成果がたどれるようにしたい。

イベント参加告知ページを作る

11月にイベントに参加するし、アンソロジーにも参加することになったので、その告知ページを作る。

リンクをもっとスマートにする

創作サイトのリンクが煩雑なのでもう少しスマートにしたい。

サイトの方にもツイートボタンを作る

作れるらしい、ということを以下の記事を見て知ったので作りたい。

【カンタン】このページをツイートするボタンを設置する方法【PHP・WordPress版あり】

こんな感じである。これは覚書程度だが、もう少し個人サイトの話が聞きたい、つくろうと思ってるけど勇気が出ないなどあったらお話聞かせてほしい!!!結局何が楽しいの?とか!!質問でも何でも、世間話でも送ってください~。

9

サイトの引っ越しが大体終わった

いろいろあってふと思い立って、サイトをjimdoから引っ越した。

サーバーをレンタルし、HTML指南書を購入し、特典のテンプレートをダウンロードして、見よう見まねでサイトを作成した。HTMLをいじるなんて中学校の技術の授業以来だったが、本を読みながらだとなんとかなるもんだ。

HTMLいじり、本があれば大体スムーズにいくし結果がすぐに反映されて修正も容易なので、PDCAサイクルをどんどん回すことができる。久しぶりに熱中できる趣味を見つけた。とても楽しい…。

ブログページだけはカテゴリ別、月別のページを作るのがあまりにも面倒だったのでwordpressを導入した。

この調子で同人サイトも作っていきたいし、同人作品もどんどん作っていきたい。

ちなみに買った本はこちら。テンプレート特典もついてるのでやりやすいです。

5