ブログの「検索」にアンカーを追加、著者近影(?)の写真サイズを変更してみる - WordPress

ツイッターのログをまとめただけ(だとわけがわからないので、追記部分に具体的な作業内容をメモ。後で「あれについては何をどうしたっけ?」となった時のためのメモ)

2022年12月27日(火)

自分のブログの検索用の入力フォームが携帯からだと見つけにくすぎるので直したい。メニューにリンクを追加するだけでいいと思うがいつも忘れる。

ここにメモする _〆(。。)
忘れるな自分よ...

 
検索はウィジェットで追加していたが、ウィジェット内にアンカーを埋められないので(検索フォームはHTMLを書き込んでいたと思い込んでいた)、検索のウィジェットの1つ前に、無題のウイジェット(テキスト)を作り、そこにアンカーを埋め込んだだけ。だから本当になんちゃってだが動けばいいのだー

 
間に合わせで「なんちゃってアンカー」をつけてみた。
https://novelletten.robert-schumann.com
メニューからは「検索」を選ぶ。
PCで見ると「なんのこっちゃ」ですが、携帯から(まだ見てないが)見るとたぶんきっと劇的マイナーチェンジ。劇的なのにマイナー=オタク好み?😆

2022年12月28日(水)

携帯で動作確認。メニューに新しくつけた「検索」をタップ。ちゃんと検索のフォームに飛んだ。飛んだが、この絵面(=自撮り写真もついでに表示される件)は想定外だった。
いつもうっすら思っていたが、この自撮り写真、サイズが大きすぎるかも?



 
この自撮り写真の背景は「ブレードランナー 2049」ミニクリアフォルダー

 
写真のサイズを変更してみたが、テキストを回り込ませたらモバイルでの表示があれれ?になったので、再度、画像サイズを調整し、おまじないの呪文を追加。おまじないの呪文を書き込む前と書き込んだ後のPCでの見え方と携帯での見え方の比較画像。
おまじないの呪文だいじ。
https://novelletten.robert-schumann.com/#search

PCでの表示(呪文前)

PCでの表示(呪文後)

携帯での表示(呪文前)

携帯での表示(呪文後)

 
(追記)
これだけだと、実際の作業メモとして役に立たな過ぎるので作業内容をメモ。

検索フォームはウィジェット、著者近影的なものはHTML記述用のウィジェット。
検索フォームのウィジェット内にアンカーを埋め込むことが即席ではできない。ウィジェットのテンプレートそのものを改変すればおそらくできると思うが、めんどいし、そこまでするほどのものではないので今はしない。検索フォームのウィジェットの直前にテキスト記述用の無題のウィジェットを作成(HTML記述用のウィジェットでもいい)、そこにアンカーを埋め込んだ。

携帯で開いた時の著者近影(?)の表示が大きすぎると以前から感じていたが、検索フォームに飛ぶとこの写真がもれなく表示されるのが自分でもうざい。ついでなので、この部分も修正。テキストを回り込む設定にし、表示を調整。WPのデフォルト設定を使うと、PCではそこそこうまく行くが、(使用しているテーマの問題かもしれないが)携帯ではテキストの回り込みが解除される。WPでの回り込みの設定を削除し、これ用のCSSを追加、画像のサイズも再調整。