2017年09月04日

workflowyの記述をそのままHTMLで出力するChromeアドオン導入

経緯


自分のBlogは何か見づらい。もう少し見た目を良くしたいなあと思っていた。


他人のBlogを見ていて気づいたのだが、見やすいブログには本文中にも適度に見出しや空白が入っていることに気づいた。


少しネットで勉強してみると、ブログで見出しを入れるには、HTMLで記述すればよいという事が分かった。


Blogの下書きはworkflowyで書いているというのは以前書いたが、workflowyの階層構造をそのままBlogに適用出来ないかなと以前から思っていた。


そこで、workflowyから直接Blog向けのHTMLを出力できるツールを導入することにした。


ツールの導入


下のサイトにドンピシャのChromeアドオンがあったので導入した。


https://namaraii.com/workflowy%E3%82%92markdown-html%E3%81%B8%E5%A4%89%E6%8F%9B%E3%81%99%E3%82%8Bchrome%E6%8B%A1%E5%BC%B5-porter-for-workflowy-aad4ba38c902


テスト用文章の作成と確認


今まさにこれを書きながらテストしている。見出しに対して本文があまりに短すぎると、見た目のバランスが悪くなり余計に見づらい事が分かった。


上のリンクの様にURLを直接記述すると、本文の枠内に文字が収まらない。リンクのタイトル?を付けることで回避は可能だけど一手間かかるなあ。要勉強箇所だな。


見出しの余白、フォントサイズ調整


テスト用小見出し


今まで全く使っていなかったので分からなかったが、いざ見出しを付けてみると、フォントサイズや余白の設定が気に入らない部分があったため、急遽ネットでCSSの勉強して設定を変えてみた。今のところ、フォントサイズとpaddingの設定のみ変更してみている。今後さらに勉強しながら、より見やすくなるようちょくちょく設定弄ってみよう。


小見出しと本文の間の余白は少し大きすぎる。次回要修正だな。


seesaaブログではCSSがすぐに反映されない!?


現象


以前ブログデザイン全体を変更した時にも同様の症状になったのだが、デザインを変えても反映されない現象が起こった。以前は、Chromeのキャッシュ全体を削除したらデザインが反映されたが、デザインを変える度にそれを実行するのは非常に面倒だ。


解決策はCtrl+F5CSSをキャッシュさせない


ネットで検索してみたところ、Ctrl+F5を押す事で(ブラウザに残るキャッシュをクリアして?)強制リロードしてCSSの変更が反映出来るという記事があった。早速プレビュー画面を出した状態でCtrl+F5を試してみたところ、無事にデザインが反映された。この方法、ブログ編集画面では効果が無く、プレビュー画面では効果があった。


その後色々調べていくうちに、こちらのサイトに記載のあるように、CSSをブラウザにキャッシュさせないように、CSSのファイル名の後ろにクエリを追加する方法がある事が分かった。ただ、自分のseesaaブログのHTML内にあるCSSファイルの記述が、
<link rel="stylesheet" href="<% css.page_url(page) %>" type="text/css" />
<link rel="stylesheet" href="<% site_info.blog_url %>/css/user-common.css" type="text/css" />
と2つ書いてあったので、どちらにクエリを追加すればよいのか分からない。とりあえず、href=で始まる記述内の最後が.cssで終わってる方に追加すれば良いのかな?と思って、
<link rel="stylesheet" href="<% css.page_url(page) %>" type="text/css" />
<link rel="stylesheet" href="<% site_info.blog_url %>/css/user-common.css?ここにクエリを追加してる" type="text/css" />
上の通りの場所にクエリを追加してみた。ただ、十分なテストをしておらず、その後あまりCSS編集もしていないので、成功してるのか良く分かってない。

ラベル:lifehack WorkFlowy HTML
posted by ebit at 21:57 | Comment(0) | Lifehack | このブログの読者になる | 更新情報をチェックする

2017年06月29日

ライフハック

ライフハックという言葉を聞いた事はあったけど、
意味を知ったのは恥ずかしながら約半年前のこと。

私生活で色々悩んでて、これはなんとかせないかん!
と言う事で、片っ端から色んなハウツー本や
web記事を読んだ中で知った言葉の一つ。

いくつかのやり方を猿真似してみたけど、
結局どれもうまく行かず、
疲れ果ててしまい一度全部投げ出した。

そこで、やらなくてはいけないという
謎の焦りを一旦捨てて、
とにかくやりたいことをやろう、
自分がやってて気持ちいいことをやろう、
と思い至った。

そしたら、急にブログを再開したくなった。
何かを発信したくなった。

再開後このブログの下書きには、
その苦悩の日々の中で知った、
workflowyというツールを使っている。
思い立った時にスマホでいつでも書き始められるし、
適当に箇条書きしておいて
あとで記事にまとめるのも楽チンだ。

今後ちょくちょく
ライフハック系の話題を投稿しようと思う。
それで、ほんの少しでも、何処かの誰かに、
このブログの記事が役に立つ事があるならば嬉しい。

今日の記事は誰の役にも立っていない・・と思う。
ラベル:lifehack WorkFlowy
posted by ebit at 23:27 | Comment(0) | TrackBack(0) | Lifehack | このブログの読者になる | 更新情報をチェックする