2016-03-31

BloggerのCSSの設定して見出しやコードを見やすくする話

Markdownで記事を書けるようになったが


StackEditでMarkdownからHTMLに
変換はうまくいってたものの、
厄介な現象にぶち当たった。

hタグの大きさ

<h1>から数が大きくなるにつれ
文字が小さくなるものだと
過信していました。

実際は結構バラバラで、
<h2>が妙に小さかったりしました。

埋め込んだコードが見づらい

いわゆる<pre><code>タグで
囲まれたコードの部分の背景が
他の箇所とおなじ色で見にくかったり、
長いコードが改行されずに、
レイアウトの端を突き抜けてたり。

CSSの設定


もうやってられん。
ちょっとググったところ、
CSSをいじると良さそうなので
いろいろいじってみました。

見出しを綺麗に

こんな感じで、それぞれのタグの
文字サイズを相対的に指定しました。

.post-body h1 {
  font-size: 2.0em;
}

.post-body h2 {
  font-size: 1.5em;
}

.post-body h3 {
  font-size: 1.25em;
}

.post-body h4 {
  font-size: 1.0em;
}

.post-bodyと指定することで、
ブログの記事の部分だけにこの設定が
有効になるようにして、他の部分への
影響を最小限にしています。

コードの部分

ごめんなさい、まんまコピペです。

pre {
  padding: 1em;
  margin-left: 20px;
  color: #666666;
  background-color: #eeeeee;
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: -pre-wrap;     /* Opera 4-6 */
  white-space: -o-pre-wrap;   /* Opera 7 */
  white-space: pre-wrap;      /* CSS3 */
  word-wrap: break-word;      /* IE 5.5+ */
}

code {
  font-family: monospace;
  font-weight: normal;
  line-height: 150%;
  text-align: left;
  margin-bottom: 10px;
}

はみ出さないように改行する部分は
ブラウザ差分があって指定が面倒…。

でも、全体的に意外と簡単。
もっとCSSは難しいのかと思ってました。

もうすぐ4月になるので立ち止まっていろいろ考えてみる

3月も終わりです


あっという間でした。
今年度も無事に(?)終わります。

思い起こせば色々ありました

  • 禁酒したけど、あまり意味がなかった
  • 初めてdyson製品買った
  • スロークッカーをハックしてローストビーフ作った
  • ゴルフ7で初めてエキゾースト警告灯が点いた
  • いろいろ勉強会行った
  • フィリップのフードプロセッサー買った
  • 娘氏の保育園受かった
  • Android N previewきた
  • ブログ引っ越した

相変わらず下らないことしてるなぁ

ライフワークなので仕方ないか。
社会人になって、結婚して、
子供ができて、だんだんオッサン感が増してきたけど、
いろいろ馬鹿なことしたいなぁ。

4月


公私ともに変化が大きい4月。
むしろ変化を楽しむくらいで駆け抜けたい。

人間は安定を好む

人間は安定を好むようで、
安定していると安心して、
逆に変化を嫌う傾向にある、
みたいな話を今日聞いた。

たしかに。
人一倍安定好きだわ。
でもちょっとずつ変らないと
ダメなんだよなぁ。頑張ろ。

そんなこんなで


今日は安定のウイング号で帰ります。

keikyu

来年度もよろしくお願いします。

はてなブログからBloggerに引っ越してきた唯一の理由

はてなブログとは


皆さんご存知のはてなブログ。
無料でブログが書けて、
はてな記法もなかなか素晴らしいものでした。

とくに、HTMLのリンクは
カードのようにサムネイルの画像と
サマリの文書が埋め込またような
オシャレなものを簡単に作れました。

[http://masarumr.blogspot.jp/:embed:cite]

例えばこんな感じ。

はてなブログの最大にして唯一の弱点


それは無料版の制約です。

広告がとにかく多い

そう、とにかく多い。
おそらくAdSenseを追加して
収益を出したい人も多いと思いますが
すでにはてな側がAdSenseを使って
広告を出しているため、ユーザーは
なかなか収益を伸ばせません。

モバイルページのカスタマイズが難しい

今日においてモバイルでのビュー数は
バカにならないものです。
そこでモバイルでも快適に見れるように
修正を加えたくても、なかなかできません。

とはいえ


BloggerもProsConsがあると思うので、
そこは様子を見てよしなに判断したいですね。

2016-03-30

BloggerをMarkdownで書いてみる話(投稿編)

Markdownで書いた記事をBloggerに投稿する


StackEditを使ってmdファイルを開く

StackEdit
StackEditはブラウザ上で動作する
マークダウン記法エディタです。
まずはここで作ったmdファイルを開いたり、
DropBoxにアップしたmdファイルを開きます。
enter image description here
こんな感じでエディタ画面とプレビュー画面が
表示される感じ。普段使いにも使えそうな感じです。
特に難しい操作はないです。

MarkdownでBloggerのProsCons


Pros

何はともあれ、Markdown教徒にとっては
Markdownですべてをこなすことはロマン。
StackEdit自体が様々なMarkdownの拡張機能に
対応しているので、本当に至れり尽くせり。
LaTeXな数式も、シーケンス図もMarkdownで書けます。

Cons

なにもしないと、BloggerへPublishをすると、
そのまま公開状態になります。
公開する前にBloggerのダッシュボードから
プレビューしたいことも有ると思います。
---
published : false
---
そんな時は、mdファイルの頭に、
上記のような記載をしておくと、
Publish後に自動で下書きとして登録されます。
enter image description here
画像の貼り付けも若干面倒ですが、
Import from Google+を使うと、
そのままBlogger側でも画像が引き継がれます。
画像を貼り付ける際は、予めGoogle Photosに
アップロードしておきましょう。

良いMarkdownライフを


どんどんブログを書きますよ!

BloggerをMarkdownで書いてみる話(準備編)

Blogger運用開始にあたって

はてなブログでははてな記法があって
それなりに便利でした。
Bloggerでは、基本的にHTMLでの
編集となっていて、若干面倒なので
Markdown記法で記事を書いてみたいと思います。
まずはその下準備として、
MacやAndroidからMarkdownで
記事を書く環境を整備してみたいと思います。

MacでMarkdown

すでにVisual Studio Codeを使っていたので、
それを使います。

Visual Studio Code

Visual Studio Code
エディタ画面を2分割にして、
記述するウィンドウとプレビューウィンドウを
同時に表示することができて便利です。
また補完機能も充実しているので、
非常に便利です。

StackEdit

StackEditに関しては今後語ります。

AndroidでMarkdown

まずはアプリを探します。

Writer Plus (Easy Writer)

Writer Plus (Easy Writer)
いろいろなサイトを見ていると、
このアプリが無料でいい感じっぽいので、
とりあえずこのアプリを試してみます。

効果を見ながら文章が書ける

いわゆるWYSIWYG的な感じで
ゆとりでも安心して文章を書けます。
Phoneだとこんな感じ。
サクサク動作で、
出先での執筆が捗ります。
Writer Plus


デバイス間のデータの共有はDropboxで

AndroidのDropboxアプリから
mdファイルを開こうとすると、
Writer Plusアプリが自動でキックされ、
そのまま編集画面に進めます。
編集して、保存をすると、
Dropbox上に再度反映されるという
素晴らしい仕組み。
無料でここまで出来るだなんて。

Bloggerの諸々の設定を完了

GoogleAnalytics

とりあえずトラッキングIDを追加。

メタ タグ

それっぽく書いてみました。

ロボットヘッダータグ

アーカイブ以外はALLで設定。

TODO

GoogleAdsenseはまだ条件を満たせていないようなので未対応。
pingはBlogger自体が投げないようなので、外部サービスを導入することを検討。

メールから投稿出来るように設定

メールから投稿するテスト。


画像も添付してみました。
シーサイドラインからの車窓。

2016-03-29