ギャラリー・レビューページの完成とカテゴリー設定

投稿日:2018年2月8日

はいどうもこんにちは、『ガンプラ気分(仮)』の管理人 crim です。

このブログに最初の記事を投稿したのが去年の2月26日だったので、(仮)のままもうすぐ1年が経とうとしています(-_-;)

先日、ついに初のガンプラレビュー記事、「HG エールストライクガンダム 【レビュー】」を投稿することができました。

HG エールストライクガンダム 【レビュー】

  HG(ハイグレード) 『エールストライクガンダム』 の素組みレビューです。 ●センサー部にハイキューパーツ製「センサー用偏光シール ミラージュ」を使用 ●アンテナ、翼先端部の安全基準フラッグの切除 ...

続きを見る

[ブログカード]機能を初使用。 なんだかいっぱしのブログっぽいネ!

初投稿だったという事を抜きにしてもちょっとひどい出来なので、色々と反省点はあったのですが、言いたいことは大体レビュー記事の後書きに書いてしまったので、もう何も言うまい。

 

さて、いつまでも悔やんでいてもしょうがないので、サイト本公開に向けて今は前進あるのみ。

今回は、レビュー記事を書いたことで設定できるようになった項を完成させておこうと思います。

具体的に言うと、長らく空っぽだった「ギャラリー」ページと、「レビュー」ページですね。
これらはガンプラの記事を置いておく場所として設置していたので、やーっとその中身を用意できたわけです。
 

が、その前に、前回ガンプラレビュー記事を投稿しようとした際にちょーっと悩むことになった「カテゴリー」の設定について書いておこうと思います。
 

カテゴリー設定

「カテゴリー」ってのは記事を分類する機能ですね。

この記事にはいつも通り「ウェブサイト作成」カテゴリーが付けられています。
これは当サイトの作成・構築に関する記事。 公開に向けた準備を綴った、まぁただの備忘録ってやつですね。 現時点でのメインコンテンツ(笑)
 

んで、これを当然ガンプラ記事にもつけなければいけないわけなんですが(カテゴリー未設定は不可)、まーー悩みましたよ。

ガンプラってのはザッと、スケール(1/144)、グレード(HG)、シリーズ(ガンダムSEED)ぐらいには最低でも分けられますよね。

他の方のガンプラブログを見ても、カテゴリー設定はお世辞にも整っているとは言えない。
これに関しては上記の理由からも仕方ない部分だとも思うんですけどね。

分けようと思えばもっと細かく分けられるけど、細かくしすぎるとグチャグチャするだけ。
かといって分け方が大雑把だと、検索ユーザーにとって不便になる。

難っかしいですよね。 それぞれのカテゴライズに需要がありますから。
SEEDのキットを見に来た人もいれば、HGで探しにきた人もいるだろうし…
 

悩んだんですが、結局正解なんて無いのでしょうから、自分の好きなように付けときました。 とりあえずは。

ネットでブログの作り方とか調べても、カテゴリーは後々増えていくものなんで、ごちゃごちゃになって然るべきものって割り切ってしまってるみたいですし。

どーーしても気に入らなくなったら再設定すればいいでしょう。 パーマリンクの変更は良くないことらしいので、最悪の場合ですね。

仮に今きっちりガンプラを分類できたとしても、今後どんなジャンルのガンプラが出てくるかなんて予想もつきませんからね。

ビルドナンタラで過去シリーズのキットが流用されたり、「すーぱーふみな」とかもはや『ガンプラ』というくくりで良いのかすら…(;^ω^)
 

ちょっと話が逸れてきたか(^^;

カテゴリーをあまりにも多く設定してしまうと、今後の管理も面倒くさくなってきそうなので、カテゴリーの「階層化」(親子関係)を使ってみることにしました。

こいつは名前の通り、親カテゴリーと設定したものの下に子カテゴリーを設定し、カテゴリーに階層構造を持たせられるという機能。 カテゴリーとタグの最たる違いではないでしょうか。
 

レビューページの完成

それではいよいよ「レビュー」ページを仕上げてしまいましょう。

このページは……紆余曲折ありまして、ガンプラの完成品レビューのアーカイブ(一覧)ページとなることになりました。
正直、別に無くてもいいかなー…なんて思わなくもないですが( ´△`;)

当サイトは完成後、ガンプラの製作記をつけていこうと考えていますので、その製作記と完成品レビューとの区別をしとこうかな、と。
 

さっき設定したカテゴリーの内、「レビュー」カテゴリーをそのまま表示する形ですね。 かんたん。
こういったブログ管理用のカテゴリーが必要になってくる、ってのもカテゴリーがごちゃつく要因ですよね(^^;
 

これで「レビュー」ページはカテゴリーアーカイブページとなったわけですが、これにより今まで設置していた固定ページとしての「レビュー」ページが不要になりました。

カテゴリー設定時にパーマリンクがどちらも "revier" なので先に固定ページを削除しておく必要があるのかとも思いましたが、カテゴリーとしての「レビュー」は "category/review" となり区別されるようなので、今は混在してしまっている状態ですね。
 

あとはリンクの張り替えという地味な作業。
グローバル(ヘッダー)・フッター・サイドメニューを張り替えて完了。

今までグローバルメニューは固定ページへのリンクのみでしたが(「ホーム」ボタン除く)、今回アーカイブページが含まれたことで、サイドバーにメニュー代わりとして設置していた「固定ページ」ウィジェットが使えなくなったため、バッサリ削除しました。

いや~すっきりした!
サイドバーメニューはどうしようか決めきれず、今まで「固定ページ」ウィジェットと「STINGERサイドバーメニュー」ウィジェットの2つを意味無く並べてたんですよね。
それが消去法により「STINGERサイドバーメニュー」の1つに絞られた!
優柔不断にはこういうのはありがたい。
 

1つ気になるのは、削除した旧「レビュー」ページへ張っていた記事内リンクですね。 全部リンクエラー起こすはずなので。

これには『Broken Link Checker』プラグインが役立ってくれるはず。 …たぶん。

重いプラグインと聞いていたので、リンクチェックの周期を週1にしてしまってるので、検出はまだ先かな。

さっき[リンクエラー]をチェックしてみたら、今回の件とは別のエラーが8件も出ていたので修正作業に追われましたが、その話はまー次の記事にでも。
 

ギャラリーページの完成

最後は「ギャラリー」ページを完成させます。

このページも先程作った「レビュー」ページと同じく、ガンプラ完成品の一覧ページには違いないのですが、こっちは画像リンクを並べて視覚的に分かりやすくリスト表示した物にしたいのです。

アーカイブページですと、いわゆるブログ形式とでも言うのでしょうか、投稿日時順になってしまうんですよね。
キットの発売日順ならともかく、製作者の製作順なんてどうでもいいですよね??

なので、このページが当サイトのメインコンテンツとなる予定です。
製作記もやっていく予定ですが、私は基本パチ組みなので、まず需要はないかと思いますし…
 

まっ、とりあえず作ってみましょうか。

まずはクリックされるための画像リンク用のアイコン画像ですね。
今後どんどん増えていくことを考えると、何のキットかが判別できるくらいの最小限の大きさにしておきたいところです。

考えたところで最適なサイズが分かるわけでもなし、テキトーに前のレビュー時に撮った HG エールストライクガンダム の写真の中から、真正面の顔が写っている物をチョイス。

HG エールストライクガンダム 正面

三脚無しで撮影したため、よーく見るとやっぱり傾いてる…(ll゚д゚)

レビュー記事の時は結果的に40枚ほどの写真を載せることになったので、正直1枚1枚修整なんてしてらんなかったんですが、ここが当サイトのメインコンテンツとなるのであれば、このたった1枚くらいはシャンとしときたいですね。

写真の傾き修整とトリミング

ちょっと上記写真では傾きがわずかなので、傾き修整の練習として、私が過去に撮った写真の中から、よく傾いた(?)写真を練習台として使ってみます。

よく傾いたストライクガンダム

こんなのでも私はへーきでブログに載せてましたよ。
 

はい、ではこの子を回転ー。

5度回転

たった5°回転させただけなんですが、だいぶ傾いたように見えますね。 元がそんだけひん曲がってたってことか…(-_-;)

画像サイズは四角形でないといけないので、足らなくなった角が黒色で補正されてますね。
これにより元画像より画像サイズは大きくなっています。
 

このままでは補正かけたのがバレバレでなんだか恥ずかしいので、せめて黒い角を白に変えてみましょう。

背景色を白に

ん、なかなか良くなりましたね。

この時使っていた背景紙が確かグレーだったので、完全には馴染みませんね。
 

背景紙の色に合わせて毎回背景色を設定しなおすとか面倒くせえので、いっそはみでた部分を切り取ってしまいましょう。 「トリミング」とかいうやつですね。 …たぶん

トリミング後

元々の画像と比べるとやや小さくなってしまいましたが、傾いた写真よりかは全然マシになりましたね!

 

それでは寄り道してしまいましたが、本命のギャラリーページアイコン用画像作りを再開です。
 

やることは同じなので、回転→トリミング→リサイズしたのがこちら!

HG エールストライクガンダム アイコン

んー…、どうですかね? とりあえず「HG エールストライクガンダム」(素組み)というのが一目で分かれば良いのですが…

背負ったエールの翼まで収めようとして、けっこう横長の画像になってしまいましたが、まーそのへんは後々いじっていけばいいでしょう。
次のガンプラレビューはサイト完成後と決めているので、とーぶん先のことになるでしょうし。

 

さてさて、これでどーにかギャラリー用の画像が用意できたので、こいつに「カスタムURL」を付けて1×1の表に押し込んで…

ギャラリーページ

とりまこんな感じで。

1つしか無いのでかなり寂しいですが…。
 

んじゃ、これにて「ギャラリー」ページは完成ってことで。(`・д・´)ゞ

 


 

こっからの記事は諸々のブログカスタマイズの話。 完全に自分用ですね、いつも通り。

いやーこういうの書くの久しぶり。 4ヶ月ぶりっくらい?
 

AFFINGER4をver20171227βへアップデート

兎にも角にもまずはこのWordPressテーマのアップデート。

このブログで前にAFFINGERアップデートを記事に書いていたのは、「Akismetがブログへのコメントを自動的にスパムフォルダーへ振り分けてしまっていた」(11月7日)の時でした。
ver20171012β ですね。
 

それからも一応は毎月記事を書いていましたが、ガンプラ関連の記事ばかりでブログカスタマイズについては触れてこなかったのですが、ちゃんと裏でアップデートは行なっておりました。

ただ、これまでのアプデが特に私に影響のあるものではなかったので、別段記事に書くほどではなかった、って話。

今回のアプデ(といってもアプデしたのはひと月前なのですが)には少し使えそうな物が含まれていたので、久しぶりに書き残しておこうかなと思った次第。

 

せっかくなので、その間のアップデートも書いておきましょうか。
といっても公式から引用させていただくだけですが。

相変わらず公式のマニュアルはとっ散らかったままで、ユーザーからの要望で作られたアップデート履歴のページも9月で止まったまま。
こんぐらいは自分でまとめていった方が便利そう。
 

ver20171101

  1. カテゴリ一覧の1カラムにするの追加
  2. 「まとめ」専用タグデザイン設定の追加
  3. サイドメニューのタイトルの追加
  4. アフィリエイトランキングの「バナーサイズを大きくする」の追加
  5. アフィリエイトランキングのサイドバー表示方法の変更
  6. ランキング管理作成によるランキングアイコンの色分け
  7. アフィリエイトランキングのアイコン非表示設定
  8. 抜粋表示設定の変更
  9. 固定記事のタイトル非表示設定
  10. おすすめ記事から「先頭固定記事」の除外
  11. CSS調整 他

私が注目していたのは、2. 「まとめ」専用タグデザイン設定の追加 だったのですが、 h4タグ用だったんですよね。

ずっと見出しのデザインを自由に使い分けたいと思っていたので、これには期待してたんですが…

マニュアルによるとh3~h5で反映させられるとありますが、やり方も分からないし、デザイン的な使い分けをするには文のどこからでも使えるh2が理想だったので、残念です。

そもそも2種類目のh4を用意されても、2回目のh4を使う機会なんてあるんですかね?
私はアフィリエイターじゃないんでよく分からんです…
 

ver20171114

  1. iPhoneXレイアウトへの対応
  2. サイドメニューの「第一階層」の文字サイズの変更設定追加
  3. 文字サイズ「%指定」クイックボタンの追加

こちらは11月2回目のアップデート。
iPhoneⅩに急遽合わせる形になったっぽいですね。 お疲れ様ですm(_ _)m

ウチのサイトに影響するようなものは無し。
 

ver20171223

  1. ポラロイド風デザイン
  2. クリップメモ
  3. マイボックス
  4. メモボックス2
  5. 見出しボックス(ReNEW)
  6. こんな方におすすめ
  7. 目次(ReNEW)
  8. h2・h3タグのデザイン追加
  9. その他

これが2月8日現在の最新版。

今まで(ほぼ)毎月アップデートがありましたが、1ヶ月以上更新が止まったのは私が知る限り初めてだ。
今までが至れり尽くせりだったので、何も不満はありませんけどね。
 

今回用意されているのは「記事作成」がもっと楽しくなるようなパーツ だそうです。
色やサイズ、アイコンをその度に変えれる らしい。

なんだか画期的で魅力的なフレーズですが、この機能を使いこなすには「ショートコード」なるものを扱う必要があるようだ。

…使ったことないですねぇ、ショートコード。

マニュアルを読むかぎり、難しくはなさそうですが、面倒くさそうですね(^^;
これじゃーちょっと私は使わないかなー…

なんて思ってたら、どうやら一部の機能はカスタマイザーからデフォルトのカラーを設定しておけるみたいです!

記事内で毎回変えるほどのことはできませんが、固定デザインの装飾パーツと考えればこれだけでも充分有用なんじゃないでしょうか。

実はさっきから使っている  ver2017xxxx  の見出しに使ってるのもコレなんですよね。
 

少し前にhタグが自由に使えなくて残念だ、なんて書きましたが、こっちならただの装飾なのでhタグを気にせず使えるのは利点ですね!
これは多用することになりそう…ってかもう「HG エールストライクガンダム 【レビュー】」で「まとめ専用タグデザイン」風に使ってますけどね((´∀`*))

 

その他ブログカスタマイズ

あとちょっと!

残りはホントに大したモンじゃーないんですが…
 

「記事エリア背景色」を白(デフォルト)に

今現在もこのサイトはサイト内の各エリアを色分けしてあるんですが、これはカスタマイズ時にどこがどう作用するのかを視覚的に分かりやすくするためにしているだけで、これが完成形ってわけではないのです。

ガンプラの写真を本格的に載せるにあたって、その背景だけでも白に戻しとかんとなーと思ったので戻した。 そんだけ! 
 

「マウスオーバー色」を設定

ふと自分のサイトを見ていたとき、本来マウスオーバー時にリンクテキストは色が変わるはずなんですが、一部マウスオーバーでも色が変わらないリンクテキストがあったため、改めて設定しなおしました。

すっごいちっちゃな変更ですが、自分的にはかなり良くなったんじゃないかと思ってます。 地味に。

 

はーいおわりおわり! 疲れた(;´д`)

6000字かー…
さぼってた期間が長かったせいか書くの遅くなったなぁ…。 1日じゃ書き切れん。
 

今回はとりあえず「ギャラリー」、「レビュー」ページが完成した、それだけでもう大進歩ですよもう。

このままサイト完成まで突っ走りたいですね。
 

止まるんじゃねぇぞ……

 

ってばっちゃが言ってた。

-ウェブサイト作成

Copyright© ガンプラ気分 , 2019 All Rights Reserved.