ようこそ諸君、我輩はボロボロ皇帝。
この記事で、
レイアウトについて馬鹿みたいに悩んでいた我輩であるが、
ようやくひと通り弄ってまだ若干やり残しはあるもののもうこれでいいや(^o^)という風に落ち着いた。
そこで、htmlやcssコードで、気に入ったが考えた結果没にしたもの、逆に使ってるコード、レイアウト変更をするにあたって役立つだろうことなど、我輩が知ったことを備忘録も兼ねて載せていこうと思う。
調べた経緯だとか適当な我輩の説明だとかクソどうでもいいことも載せている。
そんなことはどうでもいいから本題はよ！という諸君は、■～■ここまで■だけを見ると近道できるようになっているので安心してくれ。
①サイドバーをモバイル表示でも右固定にする方法
これは結局没にしたやつだ。
理由としてはやはりスマホユーザーからすれば見づらいことこの上ないんだろうな、と思ったからである。タブレットしかない人間だからスマホで見るPC表示がどんなもんか理解できていないが、Google先生が言うんだから*1間違いないだろう。
だが我輩はこのサイドバー絶対右固定の方法を探し出そうと一人でネットという海を奔走した。没になったからと言って切り捨てるには惜しいのだ。
■というわけで方法はこれである。
<meta name="viewport" content="width=1200">
これをhead内に記述すればいい。
■ここまで■
これは、
ちっさい画面でも有無を言わさず横解像度1200pxとして表示しますよ(^o^)
と言う意味である。
ややこしいのだが、この世のモバイル端末は液晶画面の解像度はどんどん上がっていっているのに、実際に表示されている解像度は大分低い(ということを最近我輩も知った)。
4Kテレビで2K(フルHD)映像、もしくは、2Kで地デジ(1440×1080)を見ているようなというか(あれは技術追いついてないだけだが)。まあ小さい画面だから広く細かく見えるように表示しても見えづらくて意味が無いという意味での配慮だろうな多分。
ちなみに我輩のタブレットの物理的な液晶解像度は1920×1200であるが、表示上(論理値)は1280×800になっている。
ここで↓
IPアドレスや画面解像度など確認くん - instant tools
確認可能であるから気になる諸君はどうぞ。
そういえば、スマホじゃないからスマホから見たときの表示状態を確認取れないぞ、うおーん(；ω；)と哀れにもガラケーであることを嘆いていた我輩だが、無事確認が取れた。
やはり持つべきものは根気である。
その方法をここに載せる↓※Androidユーザーのみ有効
②Android横幅解像度変更方法
■まず開発者モードを有効にする。
※設定→システム→ビルド番号を5回タップすればデキるアレだ。とりあえずビルド番号めっちゃタップしたらいいぐらいの認識でOKだ。
そうすると、開発者モードの中に最小幅というのがある。
これで横幅pxの論理値を変更可能なのだ！！(dp＝画面表示用の仮想pxみたいなもん)
■ここまで■
今まで開発者モードを有効にしていたものの、デバッグモード以外使用していないという全く使いこなせていない状況だったのでそんな機能があることすら知らなかった。
これのおかげで無事我輩はスマホユーザーの見える世界を疑似体験することができたのだ。
そのことでChromeブラウザ、Edge、Firefox等の、検証、要素の検査などの類で見ることが可能なスマホサイズでのプレビューも、正しい、全く問題ない、信じてよしということがわかった。ということはレイアウトを整えるまで、我輩はスマホユーザー諸君に相当見苦しい状態を晒していたんだな…。恥ずかしい限りである。
③モバイル表示で生まれる変な余白を消す
⚠注意⚠これは単純に背景画像消しているだけである。
我輩は背景をCSSで、色が徐々に変わる感じのグラデーションにしており、背景画像を使用していない。
だが閲覧する画面サイズ(表示解像度)によって、右辺りに白い無駄な余白が生まれることが判明。
見た目に悪いしクソ邪魔である。なので一体これがなんなのかChromeの検証で確認するとbodyタグ内のbackgroundだという事が判明。
要らん！！
ということで消した。
■CSSに
.body, html{
background: none;
}
を追加するか、
CSS記述場所が別に用意されていない場合は、
HTML内で
<style type="text/css">
.body, html{
background: none;
}
</style>
を追加すれば消える。これだけである。
■ここまで■
④CSSの条件分岐みたいなやつ
この方法をなんと呼ぶのか、我輩は正式名称を知らん。
が、おーこうやったら条件指定して条件に当てはまる場合にのみスタイル反映させられるのかぁ、とためになったのでこれも載せておく。
例えば、
表示する端末によってブログやサイトのパーツサイズを変えたい場合などだ。
端末が違う＝その端末の表示解像度が異なることを考えていかなくてはいけない。
※先ほどから解像度引きずりまくりの内容で申し訳ない。
■記述例↓
@media screen and (max-width: 1004px) { /*条件：表示解像度が1004pxまでの端末なら*/
.header-image-only #blog-title #blog-title-inner {
background-size: cover; /*ブログタイトルの画像を*/
height: 170px; /*高さ170pxで調整する*/
}
}
@media screen and (max-width: 420px) { /*意味：表示解像度が420pxまでの端末なら*/
.header-image-only #blog-title #blog-title-inner {
background-size: cover; /*ブログタイトルの画像を*/
height: 80px; /*高さ80pxで調整する*/
}
}
■ここまで■
とまあこんな感じである。
このように条件指定できることをレイアウト弄ってて知ったのだが、色々と応用できそうである。
ちなみにブログタイトル画像を単純に端末問わずサイズぴったりで表示したい場合は
background-size: contain;
こうなる。
我輩の場合こうするとちょっと小さくなりすぎて気にくわないので面倒だが調整している。本来はモバイルサイズの時にはサイドバーからプロフィール画像を無くして(display:noneで)、ヘッダー部にプロフィール画像を持ってきたいるのだが(意地でもGIF見てほしいから)レイアウトを考えるのが面倒であるため今度にしようと思っている。そんなこと言ってたらそのうち忘れそうだがそのときはそのときだ。
とまあこんなものだろうか。
あとは、
おまけ
のようなモノだが、
・画像クリックで吹き出しが出るやつ
現在我輩のプロフィール画像は、タップすると吹き出しが出るようになっている。
我輩のブログ、諸君は既にお気づきであろうが記事以外の部分(特にヘッダー)に大分文字が多く非常にウザいので、徐々に文字を減らそうとしている。消すというわけではない。というか吐き出すために作ったブログなので嘔吐物の証でもあるそれらは絶対消さぬが、レイアウト自体をどうにかしようと。
そのためにひとまずプロフィール部分をどうにかした。タップしたら吹き出しでウザいもんが表示される仕組みである。ウザいなりの控えめ感だ。ぜひタップしてくれ。
■その吹き出しを作成するにあたってだが、
ここをがっつり使わせてもらった。
我輩の場合はサイドバー内のプロフィール部分なので、プロフィールの文字を各部分にJavascriptだとかを書いている。
以下我輩の場合、という例。
これをプロフィール部分に↓
<img class="wagahaiboroside" width="90" src="画像のURL" onclick="showborosyoukaiside()">
<div class="guha"><font size="2">プロフィール欄に表示すること</font></div>
<span class="borosyoukaiside0" id="makehukidasiside">吹き出しで言いたいこと</span>
<script type="text/javascript">function showborosyoukaiside(){var wObjballoon = document.getElementById("makehukidasiside");if (wObjballoon.className == "borosyoukaiside0"){wObjballoon.className = "borosyoukaiside";}else{wObjballoon.className = "borosyoukaiside0";}}</script>
以下をCSS記述場所に↓
.wagahaiboroside {
border-radius: 50%;
background-position: left top; /*この辺は
GIF好きが高じてアイコンに命与えた＆おすすめGIFアーティスト A.L.Crego氏 - ボロボロ皇帝のボロ切れと塊
でやり方を載せているが、アイコンをGIF画像にして丸くするという奴だ。
*/
float:right; /*右寄せ*/
position : relative;
cursor : pointer;
}
.borosyoukaiside0 {
display: none; /* 要素を非表示 */
}
.borosyoukaiside {
position: absolute; /* 親要素を基準 */
display: block; /* 要素をインラインとして表示 */
padding: 2px; /* テキストの前後の余白 */
background-color: rgba(127, 70, 0, 0.86); /* 背景色（透明度） */
width:330px; /* 吹き出し全体の幅 */
float:right;
right : 15%; /* 表示位置 */
font-size: 80%; /* 文字サイズ */
color:#fff;
z-index: 100;
}
.borosyoukaiside:after{
border-left: 20px solid rgba(127, 70, 0, 0.86); /* 吹き出し口の幅・色 */
border-top: 5px solid transparent; /* 吹き出し口の高さ１／２ */
border-bottom: 30px solid transparent; /* 吹き出し口の高さ１／２ */
right: -20px; /* 吹き出し口の位置調整 */
top: 5%; /* 吹き出し口の縦位置 */
content: ""; /* コンテンツの挿入 */
position: absolute; /* 親要素を基準 */
}
.guha{
right:20%;
}
■ここまで■
吹き出し作成用のサイトを見れば分かるとは思うが、念のため関係性がわかりやすいようにclass部分はそれぞれ色づけしておいた。
※class名に関してはそのまま吹き出し作成サイトを引用してもいいだろうが、我輩は自分がわかりやすいようにというのと、プロフィールのGIF画像との兼ね合いでそのまま引用もしづらいので変更した。
これで最後であるが、
・バカ重いSNSシェアボタンを軽量化
についてだ。
レイアウトに至った経緯は軽量化も兼ねてだったので、SNSシェアボタンを変更した。
主にデフォルト風を目指して見つけては試したのだが、
なぜかこのように↓
横幅MAXの主張の激しいシェアボタンができあがってしまう状態であった。
そこでデフォルト風を諦めて色々調べていたら、一番コードもシンプルでデザインも綺麗だったのが↓
ここに載っているものであった。
もしSNSボタンを変更したいと思っている諸君がいればおすすめである。
そういやPocketってなんだろうな。馴染みが無いので今度消そうと思っている。
以上！
ただの備忘録がまたバカみたいに長くなってしまった。
クソ眠いので寝よう。と思う。※現在3/17水曜、時刻午前2時
これは土曜に上げる予定だ。では諸君、未来で会おう。
*1:ここでGoogle先生のいうモバイルファーストだかモバイルフレンドリーだか言う、モバイル端末で表示するにふさわしいでござるかと確認が取れるので気になる諸君はどうぞ→Mobile-Friendly Test - Google Search Console
