どうも。つじけ（tsujikenzo）です。今回は「GoogleドキュメントからWordpressに投稿しよう‐後半‐」についてお送りします。
前回のおさらい
前回は、このシリーズの概要と作業に入る前の確認事項をお伝えしました。
今日は実際に記事を書いていきます。※今回ご紹介する方法は、WordPressのCocoonテーマを使った方法です。お使いのテーマにより、結果が異なる場合がありますので、ご了承ください。
Googleドキュメントによる記述と書式設定
今回は「Googleドキュメントで下書きをするだけでWordpressに投稿できる」というお話ですが、下記にまとめた記述方法と書式設定は、そのままWordpressに反映することができます。
太字 | 取り消し線 | イタリック | 下線 |
配置（テキストのみ） | 見出し | ハイパーリンク | 箇条書き（番号付き含む） |
区切り線 | 表 | グラフ | 画像挿入 |
左がドキュメントの作業画面、右がUPしたブログです。
ドキュメントに記述した通りに、ブログにUPできています。（見出しや表に色が付いていますが、これはお使いのテーマのCSSをカスタマイズすることで自由に設定可能です。）
特に貼り付けた画像がそのままUPされていること、画像はWordPressのメディアライブラリに追加されていることが非常に作業短縮に繋がっています。（メディアライブラリから代替テキストなどのSEO対策も可能です）
ドキュメントの共有
記述と書式設定がそのままブログに反映されるということは、ドキュメントにHTMLタグやMarkdownを記入しなくていいいということですので、このまま社内マニュアルとして共有することも可能です。（後述しますが、特殊な表記をする時に少しHTMLタグを直書きすることがあります。）
反映されないものもある
残念ながら反映されない書式設定などもあります。
・文字色
・フォントとサイズ
・背景色
・画像の配置
・[脚注][描画]の挿入はアドオンが動かなくなります
これらはWordPressのエディタから編集する必要がありますが、「Googleドキュメントで下書きをするだけでWordpressに投稿できる」というテーマなので「諦める、もしくはHTMLタグをドキュメントに直接書く」という選択をしてみたいと思います。
便利なMarkdown記法も、反映されるものと反映されないものがあります。
反映されない書式設定について
ドキュメントで設定した書式設定や、Markdown記法が反映されないものについては、HTMLタグをドキュメントに書くという手段が取れます。私が必要だと感じたのは以下の3つです。
- 画像の中央寄せ
- 引用
- ソースコードのシンタックスハイライト
この3つはブログの可視性を上げる為に必要かと思いましたので、HTMLタグを書くことで反映させます。
それぞれの設定についてみていきましょう。
辞書登録
さまざまな辞書ツールがありますので、お気に入りのものを使っていいと思いますが、今回は一番安定しているWindows標準のMicrosoft IMEユーザー辞書ツールを使います。
タスクバーの[IMEアイコン]を右クリックしてメニューから[単語の登録]をクリックします。
[単語]に<center></center>、よみにせんたと入力して[登録]をクリックします。※よみの文字はお好きな文字で構いません。
同様に、<blockquote><cite></cite></blockquote>でいんよ、<pre></pre>でぷれ、と登録します。
使い方
画像の中央寄せ
ブログ記事内でキャプチャなどの画像を付けるときは、キャプチャソフトからのコピペでOKなことは前回お伝えしました。
なので、貼り付けたい行でまず「せんた」と入力して、HTMLタグを挿入します。
HTMLタグの中にカーソルを合わせて、
ペーストします。
引用
[引用]も同様に、行内で「いんよ」と入力し、HTMLタグを入力します。引用は2か所入力することができます。
①引用文
②引用元
ちょっと見づらいですが、このようにタグ内に記述します。
結果はこのように表示されます。
コード
ソースコードの表示も同様です。行内で「ぷれ」と入力し、HTMLタグを入力します。
HTMLタグの間にコードを貼り付けます。改行せずにコードの先頭と末尾にHTMLタグが来るようにします。
このようにシンタックスハイライトがつきます。
コード表示の問題点
これで問題なくコードの表示ができますが、2点注意事項があります。
- HTMLソースの表記ができない
- 改段落ではなく、改行しなければならない
コードをテキストとして表示する方法に、<pre></pre>方式と<code></code>方式と<pre><code></pre></code>方式の3種類がありますが、今回のアドオンではどれもHTMLソースの表記ができません。
なのでもしHTMLソースをブログで紹介したい場合には、ブラウザの[エディタ]に直接貼り付けるか、<の文字を<に変換したコードを貼り付ける必要があります。ちなみに&のエスケープ文字は&&です。
preタグはPreformatted Text（整形済み）テキストの略で、あらかじめマークアップを行う前に整形してあるテキストのことです。ソース中のスペースや改行などをそのまま等幅フォントで表示します。
なので、コード内に改行があると、<p>か<br>タグに変換※され、このように、改行が挿入されてしまいます。
[Private|Public] Sub プロシージャ名(引数リスト)'処理
End Sub
※裏を取っていません。私の想像です。
なので、コードを貼り付けたときに、改行を[Shit+Enter]の改行に変更する必要があります。現在は手作業で行ってますが、これを自動化できないかずっと考えています。。。
[Private|Public] Sub プロシージャ名(引数リスト)
'処理
End Subまとめ
さて、「GoogleドキュメントからWordpressに投稿しよう-後半-」ということで、具体的に書き方をまとめました。
アドオンの不具合とは「画像の中央寄せ」が反映されなくなったことと、「引用」「コードソース」の<や’’’（バックティック3連）のMarkdown Extraが反映されなくなったことでした。（以前はMarkdown記法も反映されていたのでもっと速かったです💦）
これはPHPをいじれば解決する気がしますが、今回は手を出しませんでした。
Jetpackで使えるMarkdown記法としてこちらのサイトを参考にさせていただきました。もっと高度な書き方ができると思います。
引き続きブログを頑張って書いていきたいと思います。
