aka ICT Blog

ICTについて使える情報を発信していきます. 遠回りしたり, 自分のペースで...

このブログを検索

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

   4月 29, 2018  No comments  Edit

テンプレートでは, ウィンドウがどれだけ伸縮しようと, 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%正しいコードとは言えないが, 最低でも自分はできました.

参考文献

Read More

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

   4月 29, 2018  No comments  Edit

今回は, 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>

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

参考文献

Read More

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

   4月 18, 2018  No comments  Edit

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

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

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

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

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

続き

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

参考文献

Read More

Jupyterをブラウザで手軽に試してみる.

   3月 10, 2018  No comments  Edit
こんにちは. akaです.
今回は, ちょっと紹介したいものの足がかりとして, Jupyterをブラウザで手軽に使ってみる記事を書きます.
「え, Jupyterって何?」
「Jupyterって聞いたことあるけど試せていないんだよね.」
という方々. 是非, 私と一緒に試してみましょう!

jupyterとは

プログラミングノートエディタの先駆けとなるエディタです.
私がプログラミングノートエディタと定義しているのは, 以下の機能があるエディタのことです.
  • セル単位でプログラムを実行できる.
  • セルで使用される言語に, 1つ以上のプログラミング言語 + markdown, textとして記述できる機能がある.
jupyterはPython + Markdownをサポートしており, なんとセル単位で文章を書いたり, コードを実行できる凄まじいやつです.
その便利さを実感していただくには, 実際に使ってみるほうが速いと思うので, 試してみましょう.

Jupyterをブラウザで試してみる

まずJupyterのホームページにアクセスします.
下にスクロールしていくと, 「Try it in your browser」とあるので, それをクリックします.

好きな言語を選べるのですが, 今回はPythonを選択します.

buildするので少し待ちましょう.
すると, jupyter notebookが起動します.

もうこれがエディタです!
例えば, 1番下のセルを選択して, Shift + Enterを押すと, セルが追加されます.

試しに, print(“hello world!”)と打ってShift + Enterを打つと...

なんと, プログラムが実行され, “Hello world!”が表示されました!
今度は同じセルを, print(“Hello Jupyter!”)に書き換えて, Shift + Enterを押すと...

上書きで実行して, 出力が変わっていますね. 素晴らしい.
さて, ここでMarkdownモードも使ってみましょう.
セルにテキストを入力して, 上の”Code”と書いてあるのを”Markdown”に書き換えて, Shift + Enterを押します.


テキストの挿入ができました!!

まとめ

今回は, ある記事を書きたいがために, まずJupyterを試してみるという記事を書いてみました.
自分の手元で, なんやかんやあって動かなかったり試せなかったりする人は, 是非ブラウザから試してみて便利さを実感してみて下さい!!
Read More
登録: 投稿 (Atom)

Popular Posts