まさか CSSと再戦することになろうとは…
きっかけは、まあ友人のリツイートで こんなもの を見てしまったことでした。過去の記事でも「自分のキャラクターがどんな人なのか」を散々書き散らかした私に、なんてものを見せるのでしょう(笑)。
というわけで早速作ってみたら、これがやはり思った通りなかなか格好良くて、そのままお蔵入りさせるのはあまりにも勿体無い。しかし、ここでさすがに私もちょっとだけ遠い目になりました。載せるのであれば、このブログに載せるのが最適ですが、事態はそう簡単ではないからです…。
2018年1月17日 追記
ええと、まずキャラクター紹介画像の使用を一旦止めました。
基本的に一次創作(自分が作った作品のキャラクター)だけがターゲットだったようで…。PSO2は著作物利用ガイドラインを見る限り、画像のトリミングとかにも割と寛容で「(C)SEGA」を全画像に添えて、公式ページへのリンクを貼っていれば大丈夫そうな気はするんですけども、公開をして良いのは「非営利目的のホームページ」に限定されており、一方 charasuji(β)は営利目的もありなので抵触する…という主張は筋が通ってもいるかなと思いました。
最終的に、charasuji(β)が公式にこう言っていることを考えると、公開は控えざるを得ないですね。このサービス…何年も前から私が作ったり書き溜めたりしてるオリジナル世界の情報整理には良さげに見えてます。
CSSの理解が進んだお陰で修正はあっという間でした(笑)。紹介画像自体は良い出来のものだけにちょっと惜しいんだけど、この辺は難しいですね。
で…紹介画像は仕方ないとしても、紹介自体はあってもいいかなあ…などと思い、こちらのブログの形式に則った出し方に変更し、もう少し情報量を増やして再掲示しています。
率直に言って、「そう簡単ではない」という事態にしたのは全面的に私の責任です。忍者ブログは自分のブログページのデザインを、CSS(カスケード・スタイル・シート)の形で記述しているので、その動作を知っていれば、かなり好き勝手にデザインを作ることが可能になっています。
しかし、自由度が高い＝自分で考えなければならないことが非常に多いということでもあり、中途半端な知識で特攻すると割と玉砕します。それでも、私は1週間近く時間を掛けて、デザインが気に入っていたのだけどページ対応していなかったテンプレートを、無理やりページ対応させるという大改修を過去にしています。
※ページ対応ただ、これはページ対応したプレーンなテンプレートを読み込み、配色や背景などを自分の好きな…このページの月を背景にした黒基調のカラーリングに変更する…ということをしています。実はやっちゃ駄目なことかもしれないんですけど、お願い見逃して…という感じで…。
忍者ブログは複数のページでブログサイトを構成することが可能です。本ブログの場合、上にあるメニューバーから通常のブログだけでなく、動画配信・関連情報・用語集などのブログではない通常のWEBテキストページも用意しており、それらを見ることが出来るのは、それらをページとして保存し見ることが出来るようにしているからなのです。
(ちなみに自己紹介とアルバムは、単純な過去のブログ記事へのリンクです)
ともあれ、表示にトラブルが起きること無く運用できていました。で、このキャラクター紹介画像を作った時、どうやってブログに載せようか思案したんですね。一番手っ取り早いのは、自己紹介のブログ記事に追加するか、これ専用のブログ記事を書いて そこへのリンクを貼ることです。
ただねー。せっかくだから、どの記事からでも参照できるところに置きたいなあとも思ったんですね。しかし、このテンプレートは「ブログ記事」「プラグイン(アクセスカウンターとかね)」という 2ライン構成のものであり、そのままだとキャラクター紹介画像をどこに配置するのか非常に悩ましくなってしまいます。
やはり 3ライン構成に変更し、新たなラインをキャラクター紹介のためだけに割いたほうが良いんじゃないかなあ…と考えました。しかし、それは現在800ピクセル幅のPC版ブログ記事を横に伸ばすということを意味します。WEBサイトっていうのは横に伸びると見づらくなります。もちろん一気に表示できる幅のウィンドウが確保できれば問題ないのですけどね。少し思案した結果、昨今の平均的な環境ならもう少し横幅をとっても大丈夫じゃないかなという思い直すことにしました。
あとは…今使っているテンプレート(CSS)で、3ラインが表示できるように改造するだけです。
……簡単に書きましたが、これが難作業だったわけですね。これをどうやって実現するか考えた結果、プラグインの「フリーエリア」というのを使ってキャラクター紹介の画像を並べるようにすれば良いかなあという結論に達しました。そうすれば、プラグインの設定で表示内容を記述できるので、かなりやりやすいのです。
しかし、今のプラグインに追加しても、記事右側に増えるだけです。良くしたもので、忍者ブログはプラグインを5つまでグループとして持つことが出来るようになっています。ずっと使っていた記事の右側は「プラグイン1」だったので、「プラグイン2」を記事の左側に置けるようにすれば良い理屈です。プラグインは追加したあとの設定変更で、任意のグループに移せるので問題ありません。
今使っているテンプレートは以下のような構成でページが作られています。
・タイトル
・メニューバー
・メイン (ブログ記事部分＋プラグイン1)
・フッター
そこでメインを「プラグイン2＋ブログ記事部分＋プラグイン1」と並ぶように書き換えます。これにより横幅が伸びるので、タイトル・メニューバー・フッターのwidth設定もその長さに合わせます。今回は 400ピクセル増やすという変更をしています。
またタイトルは右寄せだったのですが、横幅が広がったことに伴いセンタリングに変更しました。右寄せのほうがちょっとスタイリッシュな印象にはなりますが、この方がタイトルは見てもらえるかなと思います。
テンプレートにはプラグイン2用の設定も書いていますが、display: none;となっている(つまり非表示)ので、それを削除し、幅やマージンを設定します。あとはプラグイン1と同じ要領で、プラグイン2を書き出す処理を入れてあげればOK。……と解析するのに結構時間がかかりました(笑)。
メイン部分の記述はよくよく見ると、ブログ記事部分について書いた後、プラグイン1について書いています。順番に横に並べるイメージです。なので、プラグイン2をその最初に書くことで、右に続けて ブログ記事部分とプラグイン1が並ぶという塩梅です。
プラグイン2の表示については、プラグイン1を表示する部分をそっくりそのままコピペし、plugin1 とかなってるものを片っ端から plugin2 に直しました。ただし数字が付いていない plugin_～とかなってるのは変更しません。忍者ブログのCSSマニュアルによると、そこは固定で変えちゃ駄目なものでした。
あとはプラグイン追加で「フリーエリア」を追加し、その設定変更で表示位置をプラグイン2に変更すれば、それがページの左側に載ってくれるという仕掛けです。CSSっていうのは、そういうのをフレキシブルに書けるのがウリなんだけど、よくまあこういう仕様考えつきましたねー。
しかし、まだ苦労はあったのです…。
キャラクター紹介画像をまずは単純に並べて、実寸画像へのリンクにしたまでは良かったのですが、やけに眩しいんです。それもそのはずで、このブログは黒基調なのに、キャラクター紹介画像はその半分ほどが真っ白なんです。さすがに目に優しくないですね。
なので、GIMP使って、白い部分を少し灰色よりに修正しました。まだ眩しいかもしれないけれど、やり過ぎると逆に暗くて見づらくなってしまうので、まずはこれぐらいで。
…と思ったら、セリフが色によってはとっても読みづらくなってしまったのです。
再び GIMPを使って字色を少し調整したのですが、これがまたえらく苦労してしまいました。単純に私が GIMPを使いこなせていないのが原因なんですけどね…。
白い部分を色調の変更で緩やかに灰色に変更したのに加えて、以下のことをやりました。備忘のためにここに書き残しておきます。
(1)読みづらくなった台詞部分を範囲選択して別レイヤにコピペ。
(2)背景色をスポイトで吸って色コードを確認。
(3)ペーストして選択状態のままで、その色コードを透明色に変換。
(4)コピペした部分を「レイヤ固定」で確定。
(5)改めて字だけになったレイヤで、その字を範囲選択。
(6)色調の変化で見やすくなるように色を調整。
GIMPも強力なレタッチツールなのですが、なんでも出来る＝なんでも自分で考えなければならないということでもあり、無知なままだと無用の長物になっちゃいますよね。使い方で今回私はすっかり苦労してしまいました。
とまあ、そんな感じで1日がかりの仕事になりましたが、ブログの構成変更は完了しました。字ばっかりで何段かゴチャッとした印象になってる気もしますが、キャラクター紹介をこんな風に載せるのは前々からやりたいなあと思っていたので、ひとまず満足です。
