ユーザーブロマガは2021年10月7日(予定)をもちましてサービスを終了します

初心者でもブロマガHTML編集したい人へ
閉じる
閉じる

新しい記事を投稿しました。シェアして読者に伝えましょう

×

初心者でもブロマガHTML編集したい人へ

2013-02-14 22:56

    いちいち見たまま編集なんて

    文章を書きながらマウスでカチカチ、もしくは文章を書き上げてからマウスをカチカチなんて面倒臭い!っていう人多いと思います。
    しかしそれが嫌ならば上級者向けであるHTML編集しなければいけないんですが・・・。

    HTMLなんてわかんね('A`)

    そうなんですHTMLは勉強しなければならないんですね。
    しかもちょっと装飾して引用文を記述するだけなのに

    <blockquote><p><strong>男女格差問題へのツッコミ</strong><br>
    ;私が男女格差問題を見ていて思ったことです。<br><a href="http://ch.nicovideo.jp/tanzo/blomaga/ar110028" title="男女格差問題へのツッコミ - 鍛造の非生産的な話"http://ch.nicovideo.jp/tanzo/blomaga/ar110028</a></p></blockquote>

    とか馬鹿かとアホかと。こんなに打たなきゃならないとかHTML作ったやつ出て来い!って言いたいです。

    簡単な方法ないの?

    実はあります!
    実は前回の記事である『男女格差問題へのツッコミ』は直接HTMLを打って編集したわけではありません。当然見たまま編集をしたわけでもないです。
    先日、『ブロマガで使いたいツールとテクニック』でオフィススイートが使えますよと言いましたが、この方法でも無いです。

    Markdown

    前回の記事はMarkdownという記法を使って編集した記事なんですよ。
    Markdown(マークダウン)とはHTMLへの変換を前提とした軽量マークアップ言語です。
    簡単な記述でHTMLへ変化できるのでHTMLを覚えるのが面倒な人へ最適な記述法になっています。

    入手しよう

    Markdownの使えるエディタは様々ありますがOS毎に色々あるので、今回は色んなOSで使える様にGoogleChromeアプリであるTextDownを紹介します。

    TextDown
    シンプルなMarkdownエディタ
    https://chrome.google.com/webstore/detail/textdown/efalomlklhakojjbdfehfkgoicablooc

    左側が編集エリア、右側がリアルタイムプレビューとなっており、Markdown記法をしながらどのようなHTMLが出力されるか確認できます。






    使うのは#*[]>""!だけ

    TextDownを起動したら左側の編集エリアを全選択(Ctrl+A)して削除(DeleteまたはBS)しましょう。







    #の数が見出しレベル

    #を増やすごとに見出しレベルが下がります。







    -でリストを作る

    全角スペースには注意してください。








    連続で-もしくは*で横線









    半角スペース2つで強制改行

    半角スペースを2つ入力しないと改行しません。







    リンク

    ""で囲むのを忘れがれがちなので注意してください。







    画像表示

    前述のリンクに!を加えただけで画像が表示できます。







    >で引用が行える

    引用から抜けるには1以上の改行空白が必要です。
    改行しても引用符の直下は引用に含まれるので注意してください。






    HTML変換

    上記のようなたったこれだけの入力で簡単にHTML文書を構築することができます。





    文章を書き上げたらCtrl+Alt+Cを押しましょう。
    すると「HTML Copied」と表示されクリップボードへHTMLがコピーされます。




    あとはブロマガのHTML編集へ貼り付けるだけでHTMLが表示されます。
    結果は前回の記事を見てください。







    馴れてくると

    馴れてくるとTextDownの様なリアルタイムプレビューが無くともサクサク入力することが出来るようになります。
    画像はリアルタイムプレビューの無いテキストエディターです。
    テキストエディターの中には特定の入力に対し強調表示をしてくれて可読性を高めてくれる機能があります。








    以上です。
    長文にお付き合いいただきありがとうございました。


    広告
    コメントを書く
    コメントをするには、
    ログインして下さい。