aka ICT Blog

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

このブログを検索
ラベル blog の投稿を表示しています。 すべての投稿を表示
ラベル blog の投稿を表示しています。 すべての投稿を表示

Blogger テンプレート 公式ドキュメント リンク

   10月 13, 2018  No comments  Edit

Bloggerのテンプレートですが, めっちゃいじりたかったのです. 時間がなかったので後回しにしてましたw

幸い, 少し時間が抽出できたのでドキュメントをあさってきたのですが, 英語だと何故かエディタをすすめられて, だいぶ遠回りしましたw Adobe Dreamweaverとか, Template Toasterとか.

Bloggerのテンプレートの属性値がいまいちわからなかったので 「いや, タグの意味とか…」とか思ったのですが, ちゃんと公式のDocumentがあったんですね. Bloggerのヘルプから見れました

これを見ながら, 少しずつ変えていこうと思います.

Read More

ブログ(blogger)でhighlight.jsを使ってコードを綺麗に表示してみた話

   5月 18, 2018  No comments  Edit

自分はブログごとに, 「Syntax Highlighter」とか使って, コードを綺麗にしてました . だけどこれは設定がとても大変.
(しかも, その時cdnjsという, サービスを知らなかったので, アップロードで入れてました. 知っていたらそれでいいやって妥協してたのに.)

めんどくさくない方法無いかなと探していたら, 「highlight.js」を導入している方が多かったので, それをblogに導入してみた話.

highlight.js とは

もうとっくに色んな人が解説しているので, 一言で.

  • 速い

自分はこれだけの理由で導入しました. もっと利点を知りたいなら「コードのハイライト表示 JS ライブラリ ３種」など見ればいいかと

highlight.jsの導入(cdnjs経由)

まぁ, cdnjs経由の方法しか書かないんですが…(他の方法はめんどくさい. )

公式のGetting Startを見るのが良いかも.

やり方は簡単で, headタグ( <head> ~ </head>)の中(~の部分)に以下のコードを貼り付ければ良いだけです.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

私の場合はこんな感じ.

<head>

~~~~ 色々あって ~~~~

<link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>
</head>

ちなみに, bloggerのテンプレートに記述する場合は, xmlにするので上のやつと若干違います(閉じタグがない)

テーマの変え方.

「これ以外のテーマ無いのぉ?..テーマ変えたいんだけど.」って思う方多いと思います. 実はテーマ多いです.

「highlight.js demo」の左側のStylesの下がテーマになっているので, クリックして気に入ったテーマを探して下さい.


気に入ったテーマがあれば,

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">

の一番後ろのdefault.min.cssを<テーマ名>.min.cssに変えてみると, テーマが変わります.

テーマ名は全部小文字にして, 空白(" “)はマイナス(”-")に書き換える必要があります.
例えば「Arduino Light」を選ぶ場合は,

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/arduino-light.min.css">

と書きます.

まぁもちろん, こっちから探すべきなんだろうが.

ちなみに, 私はgithubにしてます. github大好き.

defaultの言語以外をhighlightしたい場合.

やりたいならこっちから言語を検索して, scriptタグを追記する形ではなかろうか. たぶん.

例えばapple scriptを入れたいなら, こっちから"applescript"を検索して, "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/applescript.min.js"が見つかるので,

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<!--ここから-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/applescript.min.js"></script> 
<!--ここまで追加-->
<script>hljs.initHighlightingOnLoad();</script>

かな.

バージョンについて

今回は, highlight.jsは9.12.0を使っています. これは指定できて, urlが書いてある場所の数字を変えるか, またはcdnjsでバージョンを指定してあげれば変えられます.

本当は最新版が良いのですが, latestとかない(updateでページが動かなくなったりしたら困るかららしい)ので, バージョンは手動で選択する必要がありますね.
自動アップデートは諦めるべきか…

ちなみに

めんどくさがりでない方は, highlight.jsの導入はcdn経由でなく, アップロードで設定したほうが良いです.

なぜなら, このcdnというサービスは, ブログを開くたびにインターネットを通じて, 他のパソコン様からデータを貰っているからです. つまり,

  • その偉いパソコン様が故障してしまったり,
  • みんなが一気にデータがほしいと言ったら, 自分が後回しになったり

などの理由で, 見た目が変わらなかったりします.
まぁ, cdnのようなサービスは, そういうのも見越してある程度対策していたりするので, 自分は結局cdnを使いますが…
そんなの事になっても大丈夫という方のみ使って下さい.

参考文献

Read More

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
登録: 投稿 (Atom)

Popular Posts