「更新日」表示の削除、サイトテーマカラーの確定

投稿日:

前回のコメント欄のカスタマイズでこのサイトの完成に向けた大まかなカスタマイズは終わったと言えるので、今回からは細かなカスタマイズをやっていきます。

今までみたく一つの作業に対し一つの記事ではおそらくペラッペラの記事になってしまうと思うので、2、3個の作業をまとめてやってから記事にします。
 

んで、今回やるカスタマイズは、
●更新日を非表示に
●サイト全体のカラーを決定
ってな感じですね。
 

「更新日」の表示を削除

最初にやるのは、記事の「投稿日」と共に表示される「更新日」を削除し、非表示にすること。

以下の赤丸で囲った部分ですね。

「更新日」表示

 
私が現在使用しているWordPressテーマ『AFFINGER4』では、
○投稿日+更新日
○更新日のみ
○どちらも非表示
の3つのパターンをチェック一つで簡単に設定できるようになっているのですが、

私がやりたいのは投稿日のみの表示(更新があっても更新日は表示されない)なんですよね。

更新日が表示されてるとその時点での最新情報が載っているかのような印象を受けますが、私は最新ガンプラのレビューをする気はないので、情報の新しさは売りにしていかないんですよ。
そうなると私にとって更新日ってのはせいぜい誤字・誤情報の訂正日っくらいになってくるので、表示されてると紛らわしい気がするのでだったら消してしまおうと。
 

それでは実際の作業に移るんですが、カスタマイズ法は以前に調べてあって、「single-type1.php」から「更新日」と書かれた一文を削除するだけ

その上の <?php endif; ?> まで消すのかどうかが分からなかったので、初めてPHPの構文とやらを調べてみました。
どうやら endif ってのは閉じるときに使われるものっぽいので、ここだけ消すってのはダメそうですね。たぶん。
 

そんで日本語で更新日って書かれた一文を消してハイ完成。

「更新日」非表示

無事「更新日」の表示だけが消せました!!
 

ここまででちょうど800字、
一記事最低1000字は書くべきだと皆言っているので、やはりボリュームが足りませんでしたね。

というわけで簡単なカスタマイズを続けてもうひとつ。

 

サイトのテーマカラーを変更

次はこのサイト『ガンプラ気分(仮)』のテーマカラーを決めていきます。
カスタマイザーを使いはするものの、色を変えるだけなのでカスタマイズと呼ぶほどのもんじゃーない気もしますが。
 

まずは現時点のサイトの外観(PC表示)です。

テーマカラー:デフォルト(緑)

テーマカラーはをとりあえずで選択していました。
背景の色はエリア毎に変えることで反映箇所を視覚的に判別できるようにしてあります。
 

ではこれを何色にするかなんですが、このガンプラ気分で私が作っていくガンプラはシリーズ順を予定しています。 TV放映された順番ですね。
そのスタートとするのが『機動戦士ガンダムSEED』。 私が初めて観たガンダム作品であり、一番好きな作品。

なのでそのガンダムSEEDを象徴する色、イメージカラーとでも言うんですかね。 それをこのサイトのテーマカラーとしていきたいのです。

で、肝心のその色なんですが、自分ではなんとなく青のイメージかなーと思っていましたが、ガンダムSEEDのロゴ画像を見ると、SEEDの部分が青(水色?)になっていたので、ウチのテーマカラーもでいくことにしました。
 

AFFINGER4ではサイト全体のテーマカラーは複数のプリセットの中から選択するだけで対応箇所をまとめてカラーチェンジできるので、「青」を選択。

これだけでだいたい完了かなと思っていたけど、見た目は一部しか変わっていませんでした。
どうやら自分で手を加えた色の部分にはテーマカラーセットは反映されない様子。

仕方ないので、一つ一つ手作業で色を設定していく。
一応、「全体カラー設定」 > 「簡単設定」から自分のカスタマイズ色を無視して強制反映させることも可能ではあるんですが、今やっているのは緑→青に色味を変えるだけなので、前設定しておいた緑からカラースライダーを横移動させて青に持っていけばいいだけなのでかえって手間がかかりますね。

まぁ微調整は必要でしたが、サイトの衣替え完了~。

テーマカラー:青

青というか水色になりましたね。 純粋な青ってけっこう暗いですからね。
 

本当は今回のカスタマイズでは、緑の部分を青にすればいいかなぐらいに考えていたんですが、このサイトの完成を今月中(ビルドダイバーズ開始前)と宣言してしまっていたので、背景の色も含めたサイト内のカラー全てを今回で確定させることにしました。

背景色に関しては、各エリアで別個に色を設定できたのですが、見づらくなるだけだったので薄い水色で統一。
グラデーションの部分は悩んだんですが、他のWordPressテーマではほとんど見かけない機能だったので、ちょっと無理やりですが設定してみました。

あとは右上のアクセスカウンターも忘れずに青っぽいのに変更。 実はあんま気に入っていないのですが他に良さそうなのが無かった。
再設定の際にカウンターの数値が0になってしまうのが厄介ですね。 毎回手入力でカウンターの数値を入れねばなりません。
 

とはいえ、基本的には色を変えるだけ。 設定箇所は多いものの作業自体は簡単でした。
多少手間だったのが、今回急遽背景まで色を確定させることになったため、背景色との兼ね合いでフッター部のメニューを設定する必要が出てきました。

こちらがカスタマイズ前のフッター部(スマホ表示)。

フッターメニュー

中央の薄いグレーで並んだテキストリンク群です。

このフッターメニューって個別に色変更できないんですよ。
カスタマイザーに設定項目はあるんですが、一番下のCopyrightのテキストまで同色になってしまうのです。

この2箇所を別の色のままにしたい私としては、フッターメニューはデフォルトカラーの薄グレーから変えることはできない。
そうなるとこの薄グレーを読みやすくするため、フッター上部は濃い目の色に設定しておかないといけないという縛りがあったんですよね。

しかし今回サイトカラーを背景まで全て確定させることにしたので、このフッターエリアの色を決めるためにも、薄グレー固定のフッターメニューの存在はネックとなります。
 

そこでフッターメニューについて再考します。
まぁ結論はすぐに出ますわな。 だってあのフッターメニュー、スマホからだとメチャクチャ押しにくいんですもの。

というわけで、フッターメニューのカスタマイズ。
実はサイト開設当初からあのメニューは要らないなと思っていたので、改善用のメニューを既に用意してありました。

フッターメニューが無くなることで、ページの一番下のメニューは実質サイドバー下部になるので、先ほどまでフッターメニューにしていた項目をそのまんまサイドバーメニューに移す。

これでフッターエリアの色の縛りが無くなったので、適当に青を配置して、完成!

新フッター&サイドバーメニュー

これはPC版の表示ですが、モバイル表示でも上手くいってるんじゃないでしょうか。 面倒くさいので確認はしてませんが。
 

モバイル表示といえば、アコーディオンメニューも色変えしとかないとですね。

カスタマイズ前のアコーディオンメニューがこちら。(スマホ表示)

アコーディオンメニュー:デフォルト(緑)

たったこれだけの画面の中に10個くらいの設定箇所がありますね。
ここにもテーマカラーセットは反映されていないので、全て手入力により配色を変更していきます。
 

特筆すべきこともないので、さっさと完成版を。

アコーディオンメニュー:青

これはPC表示ですがウィンドウサイズを(大体の)スマホサイズにしてあります。
でも万全を期すなら実機確認は必須ですね。
 

さて、これでサイトの外観は緑から青に変え終わりました。
だがまだ作業は残っています。

記事内に使用している見出しタグにもデフォルトではテーマカラーが反映されているので、ここも手作業で変更していきます。

カスタマイズ前の見出しデザインがこちら。

見出し:デフォルト(緑)

さすがにh6まではデザインしてませんけども。
 

今回サイトの配色を仮運営バージョンから本運営を想定したものに変更したので、見出しタグのデザインももう変えたいと思わなくなるような自分が気に入るデザインに完成させたいですね。

色々試したのですが、結果的に完成したのがこちら。

見出し:青

色以外ほとんど変わってませんね(笑)

h1タグ(記事タイトル)の左に付けていたアイコンを、ブログ執筆をイメージした本&ペンから、模型を想起させるニッパーへ。 なかなかいい味出してるんじゃないでしょうか。

このニッパーアイコンへの色付けにえらく時間かかりました。
透過pngだったのでそのまま色流すとニッパーの刃の部分まで青く染まってしまうんですよね…。
Photoshopを全然使いこなせません。

あとはh2、h3タグも簡単な自作のラインを足してより華やかな感じにしたかったんですが、自分の予想とは裏腹にクッソダセェもんが出来上がってしまったので即却下。
 

んじゃ、今回のカスタマイズはこんなとこですかね。

あ、あと前回やったばかりのコメント欄の展開ボタンなんですが、そこの色も青に変えておきました。
どのテーマカラーにでも合うようにとグレーにしたつもりだったんですが、今回の色変更カスタマイズのときに、カラーコードのコピペを多用することになったので、ついでにCSSの方にも貼ってみました。

カスタマイザーよりかは多少手間はかかりますが、テーマカラーとかそうそう変えるもんじゃーないですしね。
次に変えるとしたら…放映順でSEEDの次だから、00(ダブルオー)かな?
00のイメージカラーは……緑? …さっきまで緑だったよ…

 

おわりに

ほんじゃー今回はここまで!

作業自体は簡単だったんだけど、とにかく数があって時間かかっちゃいました(;´ェ`)

まーでもいつかはやらないとと思っていたフッター、サイドバーメニューやずーーっとぐちゃぐちゃだったサイトの背景色も決められたし、やった甲斐はありましたね。
 

さて、次回なんですが…

まだ本公開前にやっておきたい細々したカスタマイズがいくつか残っているのですが、今月中、いや今週中で全てをやり切るのは無理そう…

一旦ここで区切って、あとはプラモ作りながらブログカスタマイズをやっていくのか、

たとえビルドダイバーズが始まってしまっても、ブログを現時点でできるところまで仕上げてからプラモに専念するべきか…

うーん…、とりあえずあと1回はカスタマイズ記事書けると思うので、それやってからでも考えるのは遅くないか?

ま、焦ってもいいもんはできんでしょうから、だらだらいきます。

-ウェブサイト作成

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