htmlタグ入れ作業で時間と労力を消耗していませんか?

とは言えワタシは大したタグは使ってなく余り大きなことは言えませんが・・・!

それにしてもその都度、文章の両サイドをタグで囲むのも面倒なもの。

htmlタグ挿入にかかる時間は一つ一つはわずかな時間でも、蓄積すればかなりの時間となります。

このhtmlタグ入れ作業・・・なんとかして時間短縮労力削減をしていかなくてはなりません。

そこでマークダウン(Markdown)という書き方を取り入れてみました。

いざ試してみると文字を打ち込みながらも隣のウィンドウでプレビュー出来るので非常に便利でした。

タグを比較的楽に入れる方法としてほかには、IMEに辞書登録する方法もあります。

しかし変換できてもその都度カーソルを行ったり来たりさせなくてはならないので不便です。

注目記事(スマホを買い続けるために)サイトの読み手から書き手へ!





スポンサードリンク


マークダウンは非常に作業効率が良くなるhtmlテキストの書き方


マークダウンとは、htmlテキストを作る際にhtmlタグを先頭や末尾に書いて囲わなくてはならないところを、タグの代わりに簡単な記号を使って簡単に書いておき、後で一括して変換して作業効率アップ、楽をしてしまおうという記述方法のことです。

htmlの書き方と書いてしまいましたが、後でhtmlに変換する書き方といったほうが正しいですね。

マークダウンは「#」「 」「-」「1.」の4種類の記号を覚えればとりあえず書ける

「#」半角シャープ、「 」半角スペース、「-」半角ハイフン、「1.」半角数字と半角ピリオドなどを文の先頭に置くことで使えます。

詳細は後述します。

一部の表記はやはり囲う必要はあります。しかしほんの一部です。

マークダウン対応エディタのATOM等を使う

ATOMは過去に一度試してみたものの玄人エディタっぽくて難しい感もあり当時なぜか操作が上手くいかなかったこともあって断念したことがあります。

しかし今回再び試しに使ってみたマークダウンをhtmlに変換フォント変更パソコン間の設定同期などやりたいことが全部可能になりました。

ですので今回はATOM利用で進めます。

はじめは英語表記ですが、設定開始直後に日本語仕様に出来ますので安心して下さい。

一部英語のままですが設定さえ済んでしまえば気にならないレベルです。

マークダウン環境を構築するためのATOMインストールと設定の手順

この手順どおり行えば必要最低限のマークダウン環境を作ることができます。

ATOMのインストールと起動

Atomのサイトからインストールファイルをダウンロードします。

その後ファイルを実行してインストールを開始して、設定はそのままインストールを完了させて起動してください。

起動時に毎回出る目障りな「Welcome」タブを非表示にする

Welcomeタブ内の「Show Welcome Guide when opening Atom」のチェックを外すと次回起動時から非表示になります。

「Telemetry Consent」タブ内の「No, I don’t want to help」をクリックすると次から起動タイミングで表示しなくなります。
または「Yes,~」をクリックしてもOKです。

日本語メニューにする

メニューからHelp→WelcomeGuide→Install a Package→Open Installer→Settingsタブに移ります。

左のInstallを押しInstall Packagesを表示させたら、すぐ下の枠に「japanese-menu」を入力してPackagesを押して検索を開始し、japanese-menuのボックスが表示されたらボックス内のinstallをクリックして完了です。

htmlプレビューを見やすくする

メニューからファイル→スタイルシートをクリックしてstyles.lessを開きます。

styles.lessタブの一番下に

.markdown-preview {
  h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
  }
  h1 {
    font-size : 26px;
    margin:10px 0px;
  }
}

を追加します。

あとは、ファイル→保存をクリック、またはCtrl+Sで保存して終了です。

改行でpタグを入れるようにする

メニューからファイル→環境設定に入りSettingsタブを開きます。

左のPackagesを押しInstalled Packagesを表示させたら、下の枠にmarkdown-previewを入れCore Packagesに「markdown-preview」を表示させます。

markdown-previewボックス内のSettingsをクリックしてBreak On Single Newlineにチェックを入れて終わりです。

マークダウンの書き方

見出し h1~h6

半角シャープとスペースを使います。

半角シャープの数でh1からh6を決めることができます。

# h1
## h2
### h3
#### h4
##### h5
###### h6

段落 p

文章の前後に改行があればpタグで囲まれます。

無番号リスト ul

半角ハイフンと半角スペースを使います。

半角ハイフンの代わりに半角プラス、半角アスタリスクでもOKです。

– リスト
 – リスト
– リスト
 – リスト
 * リスト
 + リスト
   – リスト
– リスト

番号リスト ol

半角数字と半角ピリオドと半角スペースを使います。

数字が間違っていたり無番号リストの表記でも連番として解釈してくれるようです。

1. リスト
2. リスト
3. リスト
 1. リスト
 4. リスト
 3. リスト
   – リスト
– リスト

文字 em、強調 strong

半角アスタリスクまたは半角アンダースコアを使います。

ワタシの環境では半角ピリオドは認識しませんでした。

*文字*
**強調**
_文字_
__強調__

改行 br

半角スペース2個を使います。

引用 blockquote

半角グレーターザンを使います。

行をまたいでも空白行の前まで認識するようです。

>引用
引用

ハイパーリンク a

[リンク先名](http://test.com)

の形で使います。

画像 alt属性

[alt属性内容文](http://test.com/image.jpg)

の形で使います。

コード code

先頭にタブ1つ、または半角スペース4つを置きます。

マークダウンで書いた文章の簡単なプレビュー方法

メニューのパッケージ→Markdown Preview→Toggle Previewを選ぶだけです。

Ctrl+Shift+Mでも一発で別タブでhtmlのように表示することができます。

表示がおかしいところがあれば、マークダウン記述が間違っていることが分かるので瞬間的に修正することができます。

しかもリアルタイムで再描画してくれます。

htmlに変換して保存する方法

プレビュー画面で右クリックして「htmlをコピー」するを選ぶだけでクリップボードにコピーされます。

WordPressに貼り付けるだけならこの方法でOKでしょう。

同じく右クリックメニューに「htmlを保存…」もあるのですが、こちらを選ぶとファイルが生成されますしWordPressやサイト作成ツールに貼り付ける際に不必要な余計なタグが入ってしまいます。

じつは「htmlをコピー」する方法でも、hタグにid属性が勝手に付与されてしまいます。

hタグにid属性が付いてても問題はありませんが気になる方は削除しましょう。

まとめ

備忘録用にまとめたものですが、あなたのhtml作成作業に役立てばさいわいです。

マークダウンの記述方法もピックアップして紹介しましたが、ほかにもさまざまな記述方法がありますのでgoogle検索をしてみてくださいね。

今のところ、フォントカラーやフォントサイズ変更についてはWordPress管理画面でちまちまやってます。

なおATOMは機能を追加することのできるプラグイン(パッケージやテーマ)が豊富です。

プラグインでフォントをきれいにしたり、GitHubのサイトからアクセストークンを取得して同期プラグインに登録すれば、あなたが持っている各パソコンにインストールされているATOMの設定を同期するようなこともできるので便利です。

同期プラグインを導入すれば、サーバに設定を保存(いつでも保存や復元が可能)できるので、所有パソコンが1台だとしても導入しておきたいところです。

 

ところで・・・最近は記事(コンテンツ、ページ)をまとめる際、マインドマップツールXMindを使っています。

記事を書く際には

  1. XMindにとりあえずどんどん情報(殴り書き、単語、コピペ、意味不明な言葉)をぶち込み続ける
  2. 本文内の見出しを決める
  3. 本文情報(殴り書き、単語、コピペ、意味不明な言葉)から文章に変更
  4. 冒頭を、本文の内容を要約、本文の内容につながる注意喚起したものなどで作成
  5. まとめを、本文の内容を要約(再度)、注意喚起を回収したものなどで作成
  6. テキストファイルとしてエクスポート機能でテキスト出力
  7. ATOMで開き、htmlプレビューを確認後htmlコードをクリップボードに取得
  8. WordPressまたはサイト作成ツールに貼り付け
  9. フォントのサイズと色を変更、アイキャッチとコンテンツの画像を追加
  10. 目次タグ、広告ショートコードを追加
  11. スマホで確認

と、慣れもあるものの作業フロー(流れ)を決めておくことによってさらに記事作成時間を短縮することができます。

暇をみて別エントリーでXMind使用方法を紹介します。書きました。

参考⇒「XMindでマークダウン記法を使って記事作ると逆に時間がかかる!?」

注目記事(スマホを買い続けるために)サイトの読み手から書き手へ!




スポンサードリンク