いろいろ検討した結果、タイトル変えました。読んでくださった方で、もしあれ？って思われたらすみません。内容は後半を追記しただけで変わりません。
後半に追記しました・・・




こんばんは！


寒くなってきましたね。


そして・・・何気に12月なんですよねぇ。

今年は・・・キャンプしてるか家にいるかのどっちかだった気がします。


ただ最近、ようやくちょっとずつ、会社に出社するようになってきました。




ただ、コロナ禍と社屋の引っ越しが重なったのもあり、完全に新しいオフィスで毎回迷子状態（笑）

くつろぎスペースな会社のトイレから（笑）富士山みえました。　

真っ白～！！！！




ああ・・・ふもとっぱら。。。
想いを馳せます。


ぶっちゃけ通勤した日に仕事が進むかっていうとちょっと（いやかなり）微妙ですが、
しっかりON-OFFを切り替えられる日があるのは良いなぁって思います。










さて。


11月はノーキャンプ。その間に、少しだけブログを模様替えしました。
（ediさんのテンプレートをベースにしてます。ありがたや♪）


・・・とそれは本題ではなくて。


最近、とある方からちょこっとHTML＆CSS周りの質問を受けてて、その中で、



「ナチュログの新着・記事一覧のサムネイルって、選べないの？」




って聞かれたのでやってみました。






ちなみに、私。

システムエンジニアの端っこのすみっこの端くれではあるんですが、業務システム畑です。
オサレ無縁。効率重視。

「ナウでハイセンスな」Web画面とか無縁でして、
「知ったかぶれるかどうかも相当怪しい」程度。

大嘘ぶっこいてるかもしれませんのでそれは事前にお断りしておきます。


（ほんと、大嘘ついてるかもだからね！！！）






で、結論。


「しょぼい技ですけど何とかなります」



です。





では説明。




これから二つの写真を貼ります。

・浩庵キャンプ場の富士山写真


・キヨミズダイブした愛用キーボード　（リアルフォース♪）




つまり三つの写真がこの順序で登場しました。


①東京からの富士山写真
②浩庵の富士山写真
③キヨミズ・キーボード写真



しかし本記事のナチュラムのトップまたは一覧のサムネイル画像は、キーボード写真です。


普通にやると、①になりますよね。



まぁ「しょぼい技」をつかっているのです（笑）

しょぼい技：記事のサムネイル画像を好きに指定したい！！！

ナチュログの記事の代表画像ですが、このような仕様になっているみたいですね。(推測ですよ！）




ちなみにナチュログサーバー上の画像、というのは、ナチュログにアップロードした画像のことです。



この仕様に手を出すことはできませんので、「しょぼい技」とは・・・

実はこういうこと。


③キヨミズ・キーボード写真　　←　最初に貼っておいて見えなくする！
①東京からの富士山写真
②浩庵の富士山写真
③キーボード写真



ちなみに、②浩庵の富士山写真。

これは実はナチュログサーバー上の画像ではなく、
GooglePhotoにアップロードした写真で共有アルバムを作り、リンク共有をかけたものを直接貼ってます。
（ちなみに、位置情報は必ずOFFにしてくださいよ！　←超重要）

問題なく表示はされますが、ナチュログ上の写真ではありませんので、サムネイルの対象にはなりません。

(1)浩庵の富士山写真
(2)キーボード写真
(3)東京からの富士山写真


の順序で、画像を貼っても、サムネイルは（2）となります。

実際の隠し方　（その①）

隠し方は、少しテンプレートをいじる形になります。
PC版の管理画面での作業が必要です。



テンプレート（スマホテンプレートも使われている方は両方必要です）の”スタイルシート”に以下を追加してみてください。




全部半角。noneの前の●は消してください。
というのは、ナチュログさん、displ　～　noneは、NGワードで記事登録できないみたいなんです。

これは

貼り付けるのは”スタイルシート”の一番最後でOKです。





この呪文は何かっていうと、hidemeってクラスを持ったタグの下のIMGタグを隠すよ！という呪文になります。



これは一度だけ設定しておけばOK。




で、呪文の使い方。



閉じタグの</div>は絶対に必要なので必ず書いてくださいね。あとタグの文字はスペースを含めて半角です。

実際にはこんなイメージ。



スマホで投稿する場合は、タグが置き換わった［photo：X]とかいうやつを挟みます。




これを、その記事のサムネイル画像にしたい写真を、記事の冒頭でやってあげるとイケるのでございます！





imgタグの中に書いたりする方法もあるんですが、・・・・ちょっと難しい話になりますが、
記事中に埋め込んだimgタグは、投稿時に変換がかかるんですね。
変換は、スクロールのタイミングで画像を取ってきてくれるLazy対応（高速化の技術みたいなもんです）のためみたい。
なので、触らないほうが無難と判断しました。
あとは、スマホで記事を投稿する場合は・・・imgタグが見えないので、imgタグの外で操作できる方向にしました。







※実際の隠し方　（その②）※



さて、こっから本題（爆）



その①を、自己満足満載で書いて公開していたところ・・・・GRANADAさんより衝撃のコメントが！！！！！！


ええと、コメントみてください。。。汗　


・・・



(　д)　ﾟ　ﾟ



・・・まじかぁ～～～～～！！！！





いやぁ、、、、そこ、盲点でした！！！！！　(/ω＼)
お尻がまだ青かったでございます・・・　いやぁ、さすがGRANADA師匠・・・。


ちなみにコメントアウトというのは、HTMLなどを記述する際、プログラマが説明を書きたかったりするんですよね。
それを書いてあるブロックは、実行ラインとしてはシカトされます。
書き方は・・・・と思いましたが、秘奥義がなくなると困るので自粛。記事のカテゴリも下げました。


画像だけ小さく貼っておきます。





・・・ナチュログの新着も、ブログの記事一覧も、・・・一番最初に貼った星空写真になりました。。。。



うん。ひっそりとひっそりとひっそりと・・・・・超おすすめ！　（爆）





いやはや、びっくりした～～～～。
・・・私も、大嘘こいていたわけではなく、正しい手順なんですが、びっくり。
ツメが甘かったですねｗｗｗｗ。　とても大きな収穫になりました！！！！





以上おしまい！