どうも。ひっくです。
今回はTyporaで作成した記事をブログにUPする方法をまとめます。
Typora関連記事
→第1回 はこちら Typora(Markdownエディタ)の紹介①
→第2回 はこちら Typora(Markdownエディタ)の紹介② ～画像の保存先を変更する～
→第3回 はこちら Typora(Markdownエディタ)の紹介③ ～数式を編集する～
→第4回 はこちら Typora(Markdownエディタ)の紹介④ ～シーケンス図を作成する～
→第5回 はこちら Typora(Markdownエディタ)の紹介⑤ ～フロー図を作成する～
→第6回 はこちら TyporaVer1.x リリースに伴い有料化(でもベータ版はまだまだ無料利用可能)
→第7回 はこちら Typora(Markdownエディタ)の紹介⑥ ～クラス図を作成する～
ブログUPまでの手順
これまで紹介したTyporaの記事を含め、ここ最近のブログ記事はTyporaを使用して作成しています。
手順としては以下の様な感じになります。
「Typora(Markdownエディタ)の紹介② ～画像の保存先を変更する～」に従い、
画像の保存設定を変更する。(Typoraを最初に使う1回だけすればOK)
記事を書く(普段はここから)
記事で使用した画像をUpload
記事をHTML形式でコピー＆ブログサービスへ貼り付け
記事の画像挿入先とUploadした画像URLを紐づけ
(おまけ) 表紙画像を選定
画像の保存先設定を変更
Typora(Markdownエディタ)の紹介② ～画像の保存先を変更する～ 「保管先を変えてみよう」を参考に
設定を変更し、Typoraに貼付した画像が一つのフォルダに格納されるようにしておきます。
(「記事で使用した画像をUpload」する際に、記事ごとに画像がまとまっている方が楽なため)
記事を書く
好きなテーマで記事を書きます。
記事の先頭に以下の様にCSS定義を記載しておくと、CSSを使うことも可能になります。
- CSS定義の例
使用時(Typoraの表示上はCSS適用なしで「－」表示となりますが、CSSが有効になるとこう表示されます → －)
記事で使用した画像をUpload
記事のMarkdownファイルと同じ階層にあるディレクトリ内に、記事で使用した画像が含まれています。
全て画像を選択する前に、不要な画像が含まれていないか確認してください。
(ver1.1以前では画像を貼付後、Typora上で削除してもソースとなる画像は削除されずに残るため。
Ver1.2以上のTyporaは、メニューから画像の削除でソースとなる画像も削除されるようです。)
以下では右から2番目・3番目の画像が不要なので削除します。
画像のUpload方法はそれぞれ使用されるブログサービスで確認してください。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
(参考)以下はBloggerで画像をUploadする方法です。
- 「画像を挿入」をクリック
「パソコンからアップロード」を選択
ファイルを選択 → 画像を全選択 → 開く
選択クリック
レイアウト選択 → OK
Upload完了後
※これが記事の画像挿入先と画像を紐づける元ネタとなります。
記事をHTML形式でコピー＆ブログサービスへ貼り付け
記事を全選択 → 編集 → HTMLとしてコピーを選択
ブログサービスのエディタに貼り付け
記事の画像挿入先とUploadした画像URLを紐づけ
Typoraで画像を貼付した箇所は、HTML形式にすると以下の様に表示されています。
<p><img src="Typoraで作成した記事をブログにUPするまで.assets/image-20220328210335179.png" referrerpolicy="no-referrer" alt="image-20220328210335179"></p>
この部分をUploadした画像URLに置き換えます。置き換え方は次の通り。
- まず以下のタグを用意します。「画像URL」が置換場所になります。
<div class="separator" style="clear: both;"><a href="画像URL" style="display: block; padding: 1em 0px; text-align: center;"><img alt="" border="0" data-original-height="1152" data-original-width="2048" src="画像URL" width="600"></a></div>
続いてUpload後のURL情報を、見やすい形に整形します。
エディタ(下記はサクラエディタ)に貼り付けて全て置換を選択すると
こうなります。
最初のimgタグに画像のファイル名が記載されているので、対応するファイル名を取得します。
「image-20220328210335179.png」で検索したら、以下URLが対応するものと分かりました。
「画像URL」をURL情報で置き換えたのが以下になります。
「width="600"」が画像幅になるので、必要に応じて調整しましょう。
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMMJq02vnRr7eMUSS2JLMvsjVuQyMIcrLyIA1NS7_l_kqgSL_4C-8j5mfR5kR-mCP3M3bTzVzkSGLDhhbR2KAVcq9oJy5GKY2Nl6lEjleuwHSgPZLXI5eJvdudPBnUTEeTtn-rBezOVjDc-TIe50D7dLfzu6XAw6lR-VCoqrjd0LfslZl09bSO3eE3KQ/s1600/image-20220328210335179.png" style="display: block; padding: 1em 0px; text-align: center;"><img alt="" border="0" data-original-height="1152" data-original-width="2048" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMMJq02vnRr7eMUSS2JLMvsjVuQyMIcrLyIA1NS7_l_kqgSL_4C-8j5mfR5kR-mCP3M3bTzVzkSGLDhhbR2KAVcq9oJy5GKY2Nl6lEjleuwHSgPZLXI5eJvdudPBnUTEeTtn-rBezOVjDc-TIe50D7dLfzu6XAw6lR-VCoqrjd0LfslZl09bSO3eE3KQ/s1600/image-20220328210335179.png" width="600"></a></div>
- 置き換え前
- 置き換え後
(おまけ)表紙画像を選定
ブログの先頭に表紙画像をつけておくと、目を引くことができるかと思います。
(記事と関連のある画像だとなお良し)
商用利用可・著作権フリーの画像を入手できる画像サイトから、ダウンロードして先頭に貼り付けておきましょう。
私は普段、次の画像サイトを良く利用しています。
・写真AC
まとめ
Typoraで作成した記事をブログにUPする方法について、今回は紹介しました。
ブログを書き始めた頃、Bloggerのエディタと格闘していましたが、正直使い勝手が悪く
1記事書くのに結構時間がかかっていました。
Typoraに限らず、Markdownエディタなら記事を書くのに集中できるかと思います。
普段Markdownエディタを使ってブログを書かれている方には参考にならないかと思いますが、
これからブログを書き始めよう、もっと楽にブログを書きたいと思っている方は
是非参考にしてみてください。
今回はこのへんで。ではまた！
0 件のコメント:
コメントを投稿