サイト構築に関するあれやこれやの思い出話やメモ等。
はじめに
最初に「ホームページ」なるものを作ったのは確か1996年頃でしたか……。
WaybackMachineに1999年世紀末の記録がしっかり残っておりました。
手書きHTMLのホームページから日記CGIの時代を経て、ウェブログもといブログサービスとCMSの時代へ。かつてはCMSとしてMovableTypeもよく使われていましたが、MTが企業向け有料展開に特化していったため、現在は普通のブログ構築といえば完全にWordPress一強。更にはSNSに押される形でブログサービスを畳む事業者も続々。かく言う自分自身も常にリソース自体は確保していたものの、普段使いはmixi時代以降、イラストはpixiv等のサービス、発信は完全にSNS中心になってしまい……というところまでが前置き。
なんやかやSNSは情報を垂れ流すにはいいのですが、纏めるには相性が悪い。自転車関連のあれやこれや纏めておきたいという欲求と、ついったが怪しくなってきたこともあって昔とった杵柄で久々にやるかあ、という流れ。この「ころなるーぷ」というサイト、確認するとドメイン取ってサイト名決めてCMS設定だけしたのが2006年という筋金入りの放置モノです。熟成し過ぎ。
というわけで、久々に構築した内容などなど。
環境
本業ではAzure系の技術者でもあるのでAzure AppServiceでさらっと作るのも考えましたが、敢えてさくらのレンタルサーバで。ちなみに法人化する前の創業以来のお付き合いです。
サーバ環境も時代とともに変わって今やクラウド全盛の時代ですが、良くも悪くも使い勝手が変わらない安心感があります。とはいえ、ファイルマネージャーのアップロード制限が25MBなのはどうなんだ。FTPソフトなんて何年かぶりに使いましたよ。
CMS
ほぼ選択肢無くWordPressを選択。新しいものや変わり種に飛びつくのもいいのですが、リソースかけ続ける気が無いのであれば定番がベターです。新しいものは死亡率も高い。拡張プラグインもトラブル時のハウツー量も桁違い。前例がないはそれなりに怖いものなのです。
以下、プラグインなどのカスタム内容。
WordPressテーマ
WordPressには「テーマ」という有り難い機能があります。かつてはほぼCSSで見た目を変えるだけというようなものでしたが、現代のテーマはそれ自体がプラグインの集合体。「SEO対策」「高速化対応」「アフィリエイト対応」といった売り文句が踊ります。アフィはどうでもいいんですがカスタムテーマは正直今更作りとうない。
色々触ってはみたものの、ここも定番は正義ということでCocoonを選択。
適用した瞬間「いかがでしたかブログ」「アフィブログ」「まとめサイト」臭が避けられない、どっかで見たような見た目になるという、国内無料テーマの中ではおそらく最高の使用率を誇ります。有料で良いものもあるのですが、アフィやるわけでもないのにいきなり諭吉さん繰り出すのもちょっと、というところ。欠点としては多機能すぎて、プラグインと干渉しやすい。後述しますが結構苦労させられました。
メジャーなテーマはさらにスキンの形でCSS変更が適用可能なので見た目の変化にもよろしいです。うちは開き直ってデフォルトで使ってますが。
好み的にはLuxeritasの方が合いそうだったので、また試してはみようかと。
地図表示
地図表示にはWordPressプラグインのLeaflet MAPを採用しています。
Javascriptの地図表示ライブラリであるLeafletをWordPressのショートコードで実装するためのプラグインで、マーカー表示からKMLやGPXの表示まで普通にこなせる。GPXが走行データや高低差表示持ってればその表示も可能なスグレモノ。
自転車メインで考えていたので地図は避けて通れない。King of MapのGoogleマップさんは色々制約があり、関連プラグインもビジネス用途メインのものが多く個人ブログでは使いづらい。結局GoogleMAP系は諦めてこちらへ。地図は国土地理院のデータなんかも使えますが、普通にOpenStreetMAPで表示してます。
ただ、Cocoonとの相性がそこまで良くないらしく、Class書き換えが機能不全を起こしコード埋めても表示されたりされなかったりでだいぶ苦労させられました。ページ頭で読み込んだ後、最後で読み込むと表示されたり、ロード順に問題があるのは間違いなさそうなんですが。
試行錯誤した結果「ショートコードで地図を読み込んだ後にサイト内リンクが貼ってあると表示される」という謎挙動が再現性100%だったため、これで回避してます。
キャッシュ
Cocoonテーマを採用しているので、作者推奨のWP Fastest Cacheを採用。ページキャッシュ関連機能のみをオンにしています。
WordPressにおいてこのキャッシュシステムは昔っから必須でありながら数多のトラブルの原因になる厄介な要素。ブラウザキャッシュやページキャッシュ等様々な要素があり、さらに複合プラグインやテーマ等各所でこれを実装します。無計画に放り込むと待ってるのはページが真っ白、スクリプトが動かないというトラブルの嵐。
はい、久々にやらかしてプラグインと設定全調整しました……。
フォント
タイトル
タイトルロゴのフォントはフリーフォントのアンニャントロマンです。
「○○アドベンチャー」とかがめっちゃ似合いそうな書体。隣り合う文字のどこかのツラを合わせて並べてバランスとるといい感じになるんじゃないかと。とはいえ、この辺のビジュアル系スキルは死んでるのでもうちょっと頑張りたいところ。
フリーフォントも今や百花繚乱でステキなのが山ほどありますね。
本文
さくらのレンタルサーバを利用しているのですが、サーバ機能でWordPressをインストールすると標準で「TS Webfonts for SAKURA RS」というWebフォントプラグインがついてきます。みんな大好きモリサワ書体33種が使える大盤振る舞い。
かつては商業用ウェブサイト制作時にデザイナーが「こんな見出しフォントは許されん！」と全部画像化してしまって「お客さんが更新できんだろ！」「元ファイルつければいいじゃん！」「だから編集ソフトやフォント持ってるわけないだろうが！！」と拳で語りあったものですが、よい時代になったものです。新ゴですよ新ゴ。
締め
仕事以外では永らくやってませんでしたが、久々にやるとそこそこ楽しいもので。
変更などに応じて適宜記載は追加します。
