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

2015年4月6日月曜日

StackEditとBloggerの連携

StackEditとBloggerの連携について.

何度かStackEditでMarkdown記述→Bloggerに投稿の流れを試しましたが,いろいろ問題が出たのでそのまとめでも.
内容については以下.(この記事はStackEdit→Bloggerで書いてます.)

  1. StackEditの始め方
  2. StackEditの記述をBloggerに投稿
  3. Bloggerとのテンプレートのすり合わせ

まずは1. StackEditの始め方から.

StackEditは基本的にブラウザで使用します.(というかこれ以外知らない)
まずはStackEditのサイトにアクセス.

StackEditのトップ

こんな感じの画面になるはず.
最初はHello!か何かの記事がデフォルトで表示されていると思うので,右上のフォルダ(ディレクトリ)アイコンからNew Documentを選択.
このとき,Please consider sponsoring StackEdit for $5/year (or sign in if you're already a sponsor).とか出ますが,無料で使えるので気にせずOKを.

すると,さっきのようにごちゃごちゃしていない,きれいな状態のページが出るはず.
ここにMarkdown形式で記述していきます.
記述方法に関しては他のサイトを参照してください.

右上の部分に記事のタイトルが,画面の左にMarkdownで記述するエディタが,画面の右にMarkdownのHTML上での実際の記事が映し出されます.

次に,2.StackEditの記述をBloggerに投稿します.

投稿は簡単で,画面左上のシャープマーク#を押し,出てくるリストの中から,Publish (Export to the web)を選択します.

Publishの画面

こんな画面が出てくるので,Blog URLに自分のBlogger URLを記入.
Update existing post IDは空でいいです.
FormatはHTMLを選びましょう.

さっきと同じ,スポンサーになってください的なメッセージが出るけど,そのままOKを押せば大丈夫です.

すると,Bloggerの認証を求められるので,流れのまま認証してください.

これで簡単にBloggerでMarkdownで書いた記事が更新……できない!

厳密には更新できているんですが,数式やらが表示できません.
試しに,
$$\frac{a}{b}$$$
と書いて更新してみましょう.
StackEdit上では数式が表示されているんですが,Bloggerではまったく表示されていません.
また,見出しのオサレな背景↓

見出し

も表示できていません.

これは,記事のスタイルがBloggerのCSSスタイルになってしまっているから.
なのでStackEditのMarkdown用CSSをlinkしましょう.

Blogger編集画面のテンプレートから,HTMLの編集を選択.
上のほうに<head>~</head>で囲まれた部分があるので,その中に,

<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>

を追加しましょう.
これで変更を保存すると,BloggerでもMarkdownのようなオサレな表示ができるようになります.

ただし,条件付きで.

このテンプレートをそのまま使うと,Bloggerの方で設定した背景色やら見出し文字の大きさやらが崩れてしまいます.

これを防ぐには,3.Bloggerとのテンプレートのすり合わせをする必要が.

実はBloggerで設定したCSSと,linkしたCSSが競合してしまっています.
なので,Markdownのスタイルシートであるhttps://stackedit.io/res-min/themes/base.cssを拾ってきて,自前で書き換える必要があります.

これが一番面倒.

とりあえず今回は,linkを外して,拾ってきたCSSファイルの見出しに関する部分と背景色に関する部分だけ削除することにしました.

削除したものが以下.いくらなんでも長いので開けるときは注意してください.
<style>~</style><link>の行の代わりに置いてください.
これでMarkdownのオサレな記述がBloggerでも問題なく表示できるはず.

以上,本文でした.

以下,スタイル部分の中身です.

2011年8月26日金曜日

picasaアドレス変更?

いつもbloggerに画像を上げる時にはgoogleのサービスであるpicasaを使っていたんですけど
どうやら現在、一部を除いてブログに画像が表示されていません。

クリックでもリンク先へ飛べないので調べたところ、どうやら画像のアドレスが変わっているようです。
さすがに全部の画像を貼り直すのはとても面倒なので他の方法を考えたんですけど、
残念ながら手作業でリンク先を変更するしかないようです。

調べても引っ掛からなかったから他の人はこんな現象起こってないのかなぁ。
最近Androidケータイに変えてそこから一度更新したので、
それが悪さをしたんじゃないかと思う反面、アドレスの先頭が変わってるので単なる変更の可能性も……。

特にgoogleからのアナウンスはないみたいですね。
と言っても訳後でないと読めませんけど(笑)


すぐに戻すにはちょっと時間が足りないのでぼちぼちって感じですねー。
電験の終わる9/4日以降かな?


夏休みはいろいろする予定だったんだけど遊んで終わっちゃいそうだなぁー……。
そして電験の得点率が6割を越しませんorz
一教科受かればそれでいいんだけどなー。


ここでgalaxy SII tips。
galaxy SIIではホームボタンと電源ボタンでスクリーンショットが撮れます。
これはiPhoneと同じみたいですね。
初期から入っている操作なのでアプリのダウンロードの必要はありません。
操作は、ホームボタンを先に押し、すかさず押したまま電源ボタンを押すことで撮ることができます。

ちょっとしたポップアップが出るので撮れたかどうか確認できます。
画像はギャラリー内に。
でもあんまり使う機会がなさそうってのもあるんだよなぁ。

以上、今回も携帯からの投稿でした。

2011年5月14日土曜日

blogger不具合

今朝ニュースで見ましたが、bloggerに不具合が起こってた模様ですね。
昨日あたりに軽く見に来ようと思ったらサービスが停止中だったので……。

どうやら近日中に投稿された記事が一時的に見れないようになっているようです。
データは残っているらしいので近いうちに復旧するんだろうなぁ。

まあどっちにしろ最近投稿していないのであんまり関係ありませんが(笑)

2011年3月11日金曜日

bloggerテンプレート

やっぱりhtml/css/javascriptとかが少しわかってくると
次にやりたいのはテンプレートの作成ですよね。

でもbloggerの新テンプレートだと環境変数等がフクザツで解りにくいので、
旧テンプでテストしてみました。

テスト用のブログ

元のテンプはRoundersです。作成者はblogger(公式)。


こういうブログ系列は扱ったことがないので変数がまったくあぼんでした。
あと、普段はちょっとcssとか齧るくらいなのでstyleの指定って
divでしかほとんどしないんですよね。
でもこのような場合は主にclass分け、id指定が絡んでくるのでかなりの難関でした。
テンプ作ってる人って結構すごいんだと実感(笑)


もとのテンプと比較すればわかるように
・全体の幅の拡大
・タイトルの背景色と文字色の変更
・好みでなかったちょっとしたデザイン(ドット線とか)の変更
・全体のレイアウトの調整
に手を加えました。


一番の難題はコメントフォームの属性が用意されていなくて、
自分で新たに作成しなくてはならなかったこと。

もともとある属性をいじるだけなら簡単だったんですけど、
属性の追加となるとちゃんとわかっていないと出来ないんですよね…。
マークアップ言語舐めてました。プログラミング言語とは違った難しさ。
オブジェクト指向(?)な雰囲気あるよね。たぶん。


横枠が不振な位置にあるのは仕様です。
あの部分は画像なんだけど特に新しいの作るわけでもなく横幅を増やしたので
画像が足りてないんですね。
これは全部のレイアウトが決まってからのお話。

あとはガジェットの追加とか、不必要な部分の排除をすればプロトタイプは完成かな。
それから「同日に投稿された記事が繋がらないように」なれば完璧なんだけどなぁ。

なかなか上手くいきません。
以上。

2011年3月9日水曜日

javascript test2


ボタンを押すことによってリンク先が変化する。

javascript test



javascriptがbloggerで使えるかどうかのテスト。
CSSのdisplay:blockやjavascriptのgetElementByIdも
問題なく使えるようです。

2011年1月5日水曜日

レイアウト変更

今回のレイアウト変更で、
著者等の情報部分を全て英語表記に。
pagerもOlder、Home、Newerの表記に。
フィードを無効化してフッター付近をシンプルに。
他には右側のガジェットを選別しました。

あとはヘッダーより上のnavbarも消そうかと思いましたが、
Google的には利用を推奨する様なのでそのまま残存させるというカタチに。

背景等のデザイン変更もやっていきたいところではありますが、
ちょっと素材不足の感じがあるのでまだ先となりそうです。


ちなみにHome付近の表記変更はデザイン設定の「htmlの編集」から、
「ウィジェットのテンプレートを展開」チェックを入れて編集します。

ctrl+F等で、<a></a>で囲まれているhomepagetitleをHomeに、
同じくnewerpagetitleをNewerに変更することで表記の変更ができます。


htmlがサポートされているのでちょっと試験運用してみました。
なかなか使いやすそうです。

blog作成のあいさつ


geek...?の名の通りそこまで詳しくない技術情報メインです。

まずはhtmlもCSSも使えるようだしデザインの変更でも一緒やってみますか!
(なんて言って変更されるのはずいぶん後の予定)

知り合いを招致するか否か迷うところはある。
流れのままで良いだろうかー

作成の理由は、GoogleMailを久しぶりに覗いてみて一元管理が出来そうだったからかなー。
mailとToDoとBlogの一元管理は結構楽だったりするのかもしれない。
今まで10件近くブログとかHPとか作ってるからこのまま放置という可能性も無きにしも非ず(笑

こんな感じでGeekを名乗るに相応しくない「ゆるーい」口調でのあいさつです。

以上!