« ウクライナのクラッカー | トップページ | Little magic watch »

2022.11.07

ココログのスマホ表示のデザインをなんとかしたい

D041107

マイフォトのデザインをなんとかしたいの続編?

えっと、ココログのスマホ表示について、しばらく前から気になっていた点があった。

ココログのスマホ表示の画面は、背景が白でオレンジの枠のシンプルなデザインなのだが、その白い背景に白い画像を表示すると、画像が白に埋没して訳が分からなくなってしまうのだ。

D041107b

上の画像は「国税庁からSMSが来た」の記事。

ココログのスマホ表示画面に、iPhoneのメッセージアプリのスクリーンショットを貼り付けてあるのだが、背景の白とSMS画面の白い部分の境目がなく、なんだかよく分からなくなっている。

せめて画像の縁に細い線を入れられれば、ちょっとはよくなるんだろうと思うんだけど…。


で、調べてみると、ブログのサブタイトルの入力枠に、そのままStyleタグを使ってCSSをぶち込んでやれば、そのCSSはPC画面とスマホ画面の両方に効果が出るらしい。
しかも、PC画面とスマホ画面では、別のClassが設定されてるらしい事も分かった。

つまり、スマホ画面用のClassに対するCSSを、サブタイトルの入力枠に書いちゃえばいい訳だ。

スマホ画面用のClassを確認するには…

1 chrome起動
2 chrome右上の縦点点点メニュー
3 その他のツール
4 デベロッパーツール
5 画面右半分の左上のスマホ表示ボタンを押す
6 画面左半分がスマホ表示に変わり、そのソースが右半分に出る
7 ブックマークからココログ記事を表示
8 使われているClassを確認する

というふうにすればいいが、早い話がスマホ表示の本文部分には “.article-detail” というClassが使われているので、こいつでimgタグを変更するCSSを設定してやればいい。

枠線なので “border” を設定すればいいとも思うが、ここでは今設定しているPC画面に寄せて “box-shadow” を設定してみた。

D041107c

こんなふうになった。

スクリーンショットがちょっと浮き出て表示され、境目が明確になり良い感じだ。


こうなると、もう一か所変えたくなる。

blockquoteタグだ。

D041107d

↑これを、↓こう変えてみた。

D041107e

仲々いい。

満足満足。しばらくこの状態にしたい。


* * * * * * や り 方 * * * * * *

D041107f

「ブログのサブタイトル(キャッチフレーズ)」の枠内の、実際のブログのサブタイトルの次に、このタグをぶち込めばいい。

<style>.article-detail img { box-shadow: 1px 1px 3px 2px #999;} img[src$=".gif"] {box-shadow: none;} blockquote {margin: 8px; padding: 7px; box-shadow: 1px 1px 3px 2px #999;} </style>

すると、gif以外のimg(画像)と、blockquote(引用)のところに影が出る。

あとはいろいろ改造して、お好みデザインを模索してみるとよいぞ。

※ gif以外にしているのはこういうヤツ →
が浮き出ないようにするためです)

|

« ウクライナのクラッカー | トップページ | Little magic watch »

テクノロジ」カテゴリの記事