CSSを編集してページナビを整える

投稿日:

ページナビゲーションにサムネイル画像を表示させる事には成功したものの、phpファイルのみの編集だったため、ただ縦に並んだだけで不恰好。
今回は前回できなかったCSSへの編集に挑戦し、このサムネ付きページナビをキッチリ横並びにして完成させよ~って感じです。

 

前回はstyle.cssに手を出してはみたものの、何も変化無し――ネット上の「css 反映されない」という上位検索結果のまさにその通りとなったわけです。

この理由を調べてはみましたが、なんだか小難しい説明ばかりで正直解りません。ぜんぜんまったく。

そもそも対処法を教えられたところで、その原因が分かっていないのですから、数ある対処法の内、私のこのAFFINGER4の状況下ではどれを選択すればよいのか見当もつきません。

 
なのでまずは、自分がなぜ反映されない状況になっているかの原因を探るため、CSSのカスタマイズの基本的なやり方から学んでいくしかない、と結論付けました。…長丁場の予感ですね…

ほいで検索結果をザーッと見ていくと、『Simple Custom CSS』というプラグインを使うのが良い、と紹介しているサイトを数多く見かけました。

『Simple Custom CSS』…聞いたことありますね。それも何度も。

たしか私がこのWordPressを始めたばかりの頃、オススメプラグイン○選、みたいな記事を読み漁り、その中でこのプラグインの名がよく挙がっていました。
あとAFFINGER4公式でも見ましたね。

前回Jetpackの[追加CSS]機能を使った時も、カスタマイズ専用のCSS画面は便利そうだな~と思ったので、これは導入する価値ありそうですね。

 
でも、これを入れたところで私のAFFINGER4上で動いてくれるとは限りません。
そこでダメもとで、「AFFINGER4 css」で検索かけてみました。
AFFINGER4ってあんま情報出てこないんですよね…

期待は特にしていなかったんですが、これがなんとけっこー情報が出てきたんですよね!
しかも一番上は公式の「CSSが反映されない場合」のFAQ!!

それによりますと、「オリジナルテーマカスタマイザーを停止せよ」とのこと。

…でもこれって、AFFINGER4が売りとしていた機能なんじゃぁ…?

 
まぁ答えは得られましたんで、さっそく試してみます。

[AFFINGER4管理]>[オリジナルテーマカスタマイザーを使用する]からチェックを外して、サイトの表示を確認してみると…

真っ白です!!
いや、画面に何も表示されないという意味ではなく、色が白一色になってしまいました!

メニューの色、ボタンの色、背景エリアの色、おおよそ色という色はすべてまっっしろです。

おそらく、これは全部自分でCSSいじって設定する人用ですね…
「AFFINGER4は中・上級者向け」なんていうレビューを見かけましたが(公式で取り上げられてる宣伝目的のヨイショではなく)、きっとこういうところなんでしょうねぇ…

初級者はCSSには手を出さずテーマカスタマイザーでできる範囲のカスタマイズ、CSSをいじりたい人はテーマカスタマイザーには一切触れずに全て自分で一からカスタマイズ、といった感じなんでしょうかね?

 
私にはこの機能無くしてカスタマイズを続けていく事はほぼ不可能ですので、なんとか他の方法を模索してみることにしました。…というか、そうするしかありません。

ふと何気なく[追加CSS]の画面を見ていたんですが、そこにも[テーマのオリジナルCSSを使用しない]という設定項目がありました。

先のテーマカスタマイザーのと似た文面ですね。
もはや頼るべきものもない私はとにかくいろいろやってみる他ないですね、ここにチェックを入れてみました。

すると……レイアウトがぐちゃぐちゃになりました…
もう目も当てられないほどに…

 
さぁーどうしましょ?
最後の希望はプラグイン『Simple Custom CSS』なんですが、まずAFFINGER4にCSSを反映させられるようにしなけりゃ、結果は見えてるような…

とりあえず、「AFFINGER4 css」での検索結果には、AFFINGER4のカスタマイズ記事を書かれておられるサイト様がけっこー出てきております。
この中からどうにか希望の光を見つけ出さねば!

こっからはも~ひたすら読みまくるだけですよ。良さそうなものはブックマークに入れまくって…
今では20サイト以上ブクマさせてもらいました。

その中から、今の私にとって重要な情報と思われる記事が載っていたサイトを2つにまで絞りこめました。

1つはCSSの編集方法をスクショ付きで細かく解説してくれている初心者向けのサイト。
もう1つもCSSでのカスタマイズなのですが、こちらは件の『Simple Custom CSS』を使用した方法。
そして最も重要なのは、このどちらもが子テーマを使い、テーマカスタマイザーも使用している、という点。私と同じ環境のはずです。

公式の説明とは噛み合いませんが、できている人がいるというのであれば私にも希望はあるはず!

 
『Simple Custom CSS』を利用する事でCSSの編集を反映させられる、との見方が強いのですが、まずは1つ目のサイトにあったスクショ付きの解説を見ながら、改めてCSSのカスタマイズをやってみることにしました。
このまま別の方法で成功させたとしても、前回私が何故失敗したのか解らずじまいですからね。

解説があったといっても、特に難しいものではなく、せいぜい
"@import url('../affinger4/style.css');"の下へ追記
とあるぐらいでした。

前回この辺にも挿入したような…?とは思いつつも、念のため。

その結果、なんとCSSが反映されました!!!

あ、あれー? 前回はなんか間違っていたのかな??

もしかしたら前回は"@import~"の上に挿入してしまっていたかも( ゚艸゚;)

 
さて、なんかできてしまいました。
ページナビの完成形を見てみると、参考サイト様の出来どおりの横並びに!

ウィンドウサイズを縮めてみても、自動でサムネイルが縮小されたり、リンクのタイトルの位置が変わってくれたりして、表示崩れは見当たりません。

…まぁ、あくまで私の好みで言わせてもらうと、最新・最古の記事の表示時のホームへのリンクボタンがちょっとイマイチかな…
ここに関しては前回も書きましたが、自分好みとなるようにコードに修正いれるべきですね。

すぐに手を出してみようかとも思ったんですが、コードのどこがどうなっているかもよく分からないですし、私の技量ではきっとこの程度にまた何日もかかってしまうことでしょう。

今回の目的であるサムネイル付きページナビを横並びでの設置はもう達成できています。
機能として問題が無いのであれば、些細なデザイン面でのカスタマイズは後回しでもかまわないかな、と。
早いとこ本公開まで漕ぎつけたいですしね。ガンダムのTVシリーズが終わってしまい、じわじわとモチベが下がってきてるんですよね…

 

でわでわ、すっげーー調べた割には超アッサリと完成となりましたが、今回はこれにて。

あ、プラグインのヤツは別にいいや。
コード1個だけなら、たとえ100行とか入っていても、どっからが追記分なのかは今のところ判りますし。

そうそう、前回AFFINGER4の子テーマのstyle.cssがちゃんと元に戻せたか不安だ、みたいなこと言いましたが、今回参考させて頂いたAFFINGER4カスタマイズ記事中のスクショに、元のコードが映っていたので、無事戻せていた事が確認できました。
念のためにメモ帳に元コードをローカル保存もしておきました。

 
次回は、ちょっとまだ悩んでいるんですが、ページナビを投稿記事の上部にも付けてみようと考えています。

コードを該当箇所にコピペすればいいだけだと思うんですが、上部に付けるのには画像無しで文字リンクのみにしたいんですよね。

でも、ページナビを書き加えたら、それにも今回のCSSが反映されて、横並びのでっかいやつになっちゃうんじゃないか?とか思いますが、まーそれは次回!もう疲れた!ノシ

-ウェブサイト作成

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