どうも、きゃんでぃです。先に前置きするのですがマジで自分のための備忘録なので伝える能力ゼロです。もういっそサーバー立ち上げからPC画面収録してHP制作RTA動画作ろうかなって感じです。

〜以下デジャヴ〜

何らかの手段でこのサイトがダメになってしまった時、どうやって作ったっけ…と宇宙猫にならないように、自分のためにもこのサイトを作った時のあれこれを記録したいと思います。

今後色々追加したり変更したり…という部分はあるかもしれませんが、私が行った大まかな手順はこの3工程です。

そんで、①の前準備の中にぎゅぎゅっとやるべきことが詰まってる感じです。③に関してはどうせwebなんてちまちまとマイナーアップデートしていくものだし、公開直後からいじりたいところが発生するに決まっているのでそのように書きました。

前提として、一度wordpressで失敗をしていること、基礎的なhtmlとcssのプログラミング知識があることでスムーズに進んだ部分がありますので、たぶん完全なる初心者の方に向いたやり方ではないです。

今回は②〜③について書いておこうと思います。

②本制作・公開

前回までの過程で慎重に外堀を埋めることができたのでいよいよ作り込みに入ります。

1.TOPページを整える

TOPページの画像を差し替える、ヘッダーを差し替える、色を変える、パーツを配置する…

元のサイトから限りなく近づけつつ、さらに調整する感じで進めました。ほぼブロックをフィーリングで動かしているだけなので技術的な要素はあんまりありません。

ざっくりと上からの要素はこんなかんじ。

★のついた②③⑤⑥が外部ツールを使ったり別ページへのリンクをはっつける箇所。

ここまで親切にカバーできる能力がわたしにはなかった。前回の記事にも書いたけどここは下準備段階で作っちゃっていた。テンプレートパーツを適当にうにゃうにゃしたらできるよ。

ヘッダー直下のエリアはこんな感じにブロックで分けられています。入れ子構造を理解してないといけない。ぶっちゃけ言葉で説明しても伝わらない気がしています。

1.赤枠で囲んだ箇所がまず大きなグループにされているブロックで、この2つが横並びでカラム配置されている。
2.左側はロゴ画像とアクセスカウンター（Acces Countの文字とアクセス数の数字を2つ横組みにしてある）の2グループを縦組みにしてある。

以下アクセスカウンターについて。★1該当ですね。

アクセスカウンターはこちらのサービスにしました。

シンプルにカウンターのある文化だけを楽しみたいのがひとつと、手間を増やしたくないこと、なによりテキストで貼れることが理由です。（どうしてもダサダサの画像になるのイヤだった）

普通にカスタムHTMLのブロックにコピペしたコードをのせるだけなので楽です。ただ、カスタムHTML内にほかのテキストなどを入れると高さのズレが出たりしたので、別ブロックにして横並びにするほうが崩れないかなって感じです。

3.右ブロックはイラストと背景に分かれており、中央揃えでグループ化されている。

背景がま〜るいのはブロック自体に角丸をつけているから。ぶっちゃけ元々のテーマにあるものの画像を差し替えて調整しているだけです。

こっちはブロックの構成的にはさっきより入り組んでない！横2コ組みのグループが縦に並んでるだけ！

ここに関しては、先に下段を説明するとバナーとしてあらかじめ作っておいた画像を角丸設定で配置してそれぞれリンクしてるだけです。Skeb案内に関しても投稿記事を最初に作ってます。

下準備の段階で固定ページ類のレイアウトを変更しているので、投稿ページもそれにならってレイアウトされているはずですので。

上段は、以前作っていたサイトは手動でテキストを打ち込んでいました。要するに更新したことをお知らせするためのひとことみたいな役割です。これをなんか…いい具合にシステム化したかったのですが。

半日ラグは発生してしまうものの、CGIのてがろぐ（簡単に言えば自作Twitterみたいなもの）をサイトと別に作り、RSSでテキストを読み込ませることとしました。

てがろぐ導入については、色々と込み入った話になりそうなので別記事にしよっかな…。

要約するとこのサイトのドメイン(renderingpl)にサブドメインを作り、そちらにてがろぐを設置して、そのてがろぐからRSSを取得している感じです。サーバはおなじ。

なんか他にいい方法ないかなーとは思っています。

RSSのプラグイン一度入れたけどなんかずっと変なエラー出るし、サイト内部にphpを書き換えたり加えたりやるにしてもサイトが成立する最低条件はすでに満たしていてそんなに手間をかけるほど重要な部分ではない。なにより知識不足でサイト全体に影響するエラーを出したりしたくなく…（前それでやらかしたのでね）

妥協でデフォルトで入っているRSS用ブロックを設置したのですが、望んだような見栄えにならなかった（本来右のテキストは全文表示したいし、最新1件だけをリンクのないただのテキストで流したかった）から、いまだ悩んでる部分です。

さんざん下準備段階で慎重に選んだスライダー。これを使う時が来た。

MetaSliderの使い方はマジで各位で勝手に調べて欲しいんですけど（下準備の段階で仮設置したり操作感を覚えてるはずなのでね）、これはまあ、スライドと文章のブロックを縦組みにした一塊をカラムにしています。

カラムブロックの設定をすることでレスポンシブがうまくはたらいて、PCなどの横長画面では横並び、スマホなどの縦長画面では縦並びに勝手になってくれるわけですね。

今更なんだけどカラムと横並び・縦並びの使い分けは慣れてくるとだんだん効率良くなってきます。あと私の場合仮組みしてPCとスマホとiPadそれぞれ問題ないか確認してる。

ここに関してはクエリループを理解できるか否かです。私もめっちゃ苦労した。

まず手っ取り早いのはテーマ側がデフォルトで用意しているものを書き換えていくことでしょう。今回のJaxonも、最初から投稿一覧部分のパーツが入っています。なんなら消そうとすると「やめておきなよ〜」って警告すら出てくる。なのでそのままタイトルを変え、レイアウトをいじる。これだけでいい。

私の場合この段階でSkeb記事があるので、それが1件反映されていればよい。実際は前回のサイトの分の記事を同時にお引越しさせたので5件以上そろった状態で確認できました。ちゃんと最新順3件ならんでたのでヨシ。（最古順とかもえらべるからそこは各々やって）

すまん、マジでこればかりは「wordpress クエリループ」とかで調べて。このあとブログ用の固定ページも作ってるわけなんですが、「ブログらしいブログのページ」を作るならさらに避けて通れない道です。私はその道を勘で突き進んでいる。

ここでの手間はクエリループを理解しながら崩れない理想のレイアウトを作ること・ブログ用の固定ページというめちゃめんどい作業を経てからリンクを置くことにあたるかな。

特筆することが、ない。これもねえ、テーマのデフォルト箇所を捏ねただけです。自分のやりたいようにやったらええんや。私の場合、扱えるソフトなどスキル面も併記しておきたくてそのようにしました。で、プロフィールページ自体は別に作ってリンク。

ここも特筆することがない。なぜならコピーライトのみだから。

2.残りのページをつくる

いるか？この内容…。勘だぜ？

うん、私はここは、思い出さなくてもいいや…。なんか勘で作ろう！

・「固定ページ」を新規作成し、「新規テンプレート」内で作ってしまおう

・ページ名はわかりやすくしとこう

くらいじゃない？

うまいことやりましょう。和解しろ。

③細部を詰める

…気に食わない部分はどんどん、やっていけ！

終わり。以上。投げやりになっちゃった。まじでRTA動画作った方がはやいまである。

忘れた頃に見返して自分にキレそうだな♪

それでは。