Bloggerの記事の横幅を動的に変更する.

テンプレートでは, ウィンドウがどれだけ伸縮しようと, Bloggerの横幅のサイズは固定でした.
それが嫌だったので, 横幅を見ているウィンドウサイズに合わせて動的に(可変的に?)変更するようにしました.
ちなみに, その用語をfluid/liquidレイアウトというらしいです.

BloggerをFluid/Liquidレイアウトにする方法

こちら

に

.content-outer, .content-fauxcolumn-outer, .region-inner {
        min-width: 1000px; /*$(content.width)*/
        max-width: 1280px; /*$(content.width)*/
        _width: 100%; /*$(content.width)*/
      }

引用元 : Blogger: make your blog fluid (fit any screen resolution)

と書いてあったので, ちょっと変更して,

レイアウト -> カスタム -> 上級者向け -> CSSの追加

で, その中に追加した.

 .content-outer, .content-fauxcolumn-outer, .region-inner {
     min-width: 900px !important;;/*$(content.width)*/
     max-width: $(content.width);
     _width: 100% !important; ;/*$(content.width)*/
 }

テンプレートによっては, cssのクラスやタグが違うので, これが100%正しいコードとは言えないが, 最低でも自分はできました.

参考文献

• Blogger: make your blog fluid (fit any screen resolution)

Read More

Bloggerにアップロードした画像がぼやけてるわけ

今回は, Bloggerにアップロードした画像がぼやけたりしたので, 何故ぼやけるのだろうかと調べたお話です.

bloggerにアップした画像がぼやけるわけ 結論

簡単に言えば解像度の問題でした. (当たり前だろってツッコミはなしで.
bloggerから画像をimportする際には, こんな感じのコードが出る.

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaTL8vIuvvWAP1tD0uhU6sTmr5ukROvTcNqcoim1RKvvVHQqCI-ERRitqjCERnJA_AHD2gvn5Ie4IgKij0xl7DYcwPUGqw2WLQft6wrbJRNpy1xsTZUAu2res1v2GjuLz0EAOsKEfFXK8d/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2018-04-28+23.20.01.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaTL8vIuvvWAP1tD0uhU6sTmr5ukROvTcNqcoim1RKvvVHQqCI-ERRitqjCERnJA_AHD2gvn5Ie4IgKij0xl7DYcwPUGqw2WLQft6wrbJRNpy1xsTZUAu2res1v2GjuLz0EAOsKEfFXK8d/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2018-04-28+23.20.01.jpg" width="640" height="316" data-original-width="1600" data-original-height="790" /></a>

実際の画像はこちら.

これ, クリックしないで見ていると分かるが, 相当ぼやけてる.

元の画像はこんなにぼやけてないのに…

なので, ggってみたらこちらの方より

The s320 is your resolution and it determines the quality depending on the size of the image. Notice how the link has a value of s1600, so when you click on the image it appears bigger and in better quality. An image with the width of 320px will look fine with s320. An image with the width of 800px will look awful with s320.

引用元 : HOW TO FIX BLURRY IMAGES ON BLOGGER

と書いてあった.
これだけ引用しただけじゃわからないと思うけど, 要はURLの中にs320とか書いてあるからそこで解像度が分かるらしい.
※ 赤色の部分

<img border=“0” src=“https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaTL8vIuvvWAP1tD0uhU6sTmr5ukROvTcNqcoim1RKvvVHQqCI-ERRitqjCERnJA_AHD2gvn5Ie4IgKij0xl7DYcwPUGqw2WLQft6wrbJRNpy1xsTZUAu2res1v2GjuLz0EAOsKEfFXK8d/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%2B2018-04-28%2B23.20.01.jpg” width=“640” height=“316” data-original-width=“1600” data-original-height=“790” />

赤色の部分の値を高くすれば, 解像度が上がる. ちなみにs<数字>であればなんでも表示されるので, s700なり指定すれば良い.
ちなみに, 自分はs1000にしている.

<a href=“https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaTL8vIuvvWAP1tD0uhU6sTmr5ukROvTcNqcoim1RKvvVHQqCI-ERRitqjCERnJA_AHD2gvn5Ie4IgKij0xl7DYcwPUGqw2WLQft6wrbJRNpy1xsTZUAu2res1v2GjuLz0EAOsKEfFXK8d/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2018-04-28+23.20.01.jpg” imageanchor=“1” ><img border=“0” src=“https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaTL8vIuvvWAP1tD0uhU6sTmr5ukROvTcNqcoim1RKvvVHQqCI-ERRitqjCERnJA_AHD2gvn5Ie4IgKij0xl7DYcwPUGqw2WLQft6wrbJRNpy1xsTZUAu2res1v2GjuLz0EAOsKEfFXK8d/s1000/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%2B2018-04-28%2B23.20.01.jpg” width=“640” height=“316” data-original-width=“1600” data-original-height=“790” /></a>

圧倒的に文字が見やすくなった.

参考文献

• HOW TO FIX BLURRY IMAGES ON BLOGGER

Read More

Bloggerに目次を付けてみた話

Bloggerに目次を付けてみる. こんな感じ

参考文献

• Bloggerで目次と見出し番号を自動生成させるカスタマイズ方法

Read More

オーディナルとカーディナルを調べた話

オーディナルナンバーとカーディナルナンバーを調べてみたので, そのメモを書いていきます.

っ数学抜きで行きます. (筆者は数学が得意でないので.

もっと厳密に知りたい方は, こちらを見ればいいかもしれません
更に言えば, 英語のwikiほうがすごい書かれてます.

• Ordinal number
• Cardinal number

オーディナルナンバーとカーディナルナンバーの違い.

オーディナルナンバーは, 英語ではordinal number といいます. ordinal なので順序(position)が関係しています.
カーディナルナンバーは, 英語ではcardinal number といいます. 濃度とも言われるらしいです. つまり, 何個(size)あるかが重要です.
英語で例えると, 「first」と「one」は全然違いますよね. 日本語にしても, 「1番目」と「1つ」という意味でだいぶ違ってくると思います. それぞれ「3人の中の1位」と, 「3個の中の1つ」とも言えますね.
まぁ, 言葉遊びみたいな感じです.

続き

・無限の時を考える(順序や実数)
・Nominal Numbers について書く

参考文献

• オーディナルの話とカーディナルの話
• MMORPGに見る順序数(Ordinal)と基数(Cardinal)
• 劇場版SAOについて質問があります。
• Ordinal number
• Cardinal number
• Cardinal, Ordinal and Nominal Numbers - Math is Fun

Read More