y.okano blog: Blogger

ラベル Blogger の投稿を表示しています。すべての投稿を表示

2013年9月24日火曜日

Blogger に投稿した画像が全て消えた

ブログに投稿していた過去の画像がすべて消える現象が発生しました。

４月から毎日ブログを書き続けて半年近く経つのですが、
それまでのすべての画像が表示されなくなってしまいました。
原因は今のところ不明です。

画像ファイル自体は、Blogger上に残っているようなので、

すべて手入力で修正することも可能ではあるのですが、

だいぶ時間が掛かりそうな上に、また消えてしまうかもしれません。

もし、解決できなかった場合は別のブログサービスへの移行も考えています。

プログラミングなどの HowTo を検索していらっしゃった方には、

ご迷惑をおかけして大変申し訳ありません。

過去の画像については、対策が見つかり次第、修正いたしますので今しばらくお待ちください。

もしほかのサービスに移行する際も、改めてご連絡いたしますのでよろしくお願いいたします。

2013年9月12日木曜日

Blogger で Google Web Fonts を使う

Blogger で PrettyPrint を使ったソースコード表示を指定たのですが、フォントが少し読みづらかったので Google Web Fonts からフォントを探して導入しました。

まず Google Fonts を開きます
http://www.google.com/fonts

ソースコードに向いてそうなフォントを探します。
"code" で検索すると "Source Code Pro" というフォントがあったのでこれにします。

"Add to Collection" ボタンでコレクションに追加します。
"Use" ボタンを押します。

表示された HTML の <link> タグをブログの HTML に貼り付けます。
ブログ設定画面の "テンプレート" > "HTMLの編集" ボタンで HTML が開けます。
<head> タグの中に挿入しておきます。

最後に CSS の font-family をスタイルにコピペすれば OK です。
以下のやり方に従っていれば、HTMLの中に prettyprint のスタイルが定義されているのでそこに挿入します。

それ以外の場合は、ブログ設定画面から
テンプレート > カスタマイズ > 上級者向け > CSS を追加
で、直接スタイルを定義すればOKです。

2013年4月26日金曜日

prettyprint で overflow:auto; を指定しても改行されてしまう

ブログへソースコードを載せるときには Google Code Prettify を使っています。

google code - google-code-prettify
http://code.google.com/p/google-code-prettify/

さらに CSS で overflow:auto; を指定すれば、
コードがはみ出しても横スクロールできると多くのサイトで書いてあります。
しかし、Blogger で overflow:auto; を指定してもコードが改行されずに困っていました。

overflow: auto; にしても勝手に改行される

結局、Blogger がデフォルトで word-wrap: break-word; を指定していることが原因でした。

改めて word-wrap: normal; を指定することで、
勝手に改行されずにスクロールできるようになりました。

word-wrap: normal; を指定すると改行されなくなった

ちなみに、試行錯誤した結果、テンプレートの HTML へ以下のコードを追加するが一番だとわかりました。

<head> タグの中へ以下を追加

<script src='https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=default'/>
<style>
pre.prettyprint {
overflow: auto;
word-wrap: normal;
}
</style>

これが一番楽

参考

mig-ration - overflow:auto で横スクロールバーが表示されない件（解決）

http://mig-ration.blogspot.jp/2007/04/overflowauto-resolved.html