ヒガサラblog

サラリーマン向けに、仕事を効率良く進めていくための方法についてご紹介しています。プログラミングから対人スキルまでを幅広く掲載中。

ヒガサラblog

エクセルでブログ執筆!見出し&ボックスデザインのHTML記述を効率化!

f:id:yshgs_elec:20201017230039j:plain

もっとブログを書くスピードを上げたい。

 

この記事は、こんな悩みを抱えている人のためのものです。

 

私がブログを始めた当初は、すべてのHTMLを手作業で入力していたため、ひとつの記事作成に何時間もかかっていました。

しかし、得意のエクセルを使って効率化することで、記事執筆の時間を大幅に短縮することに成功しています。

 

というわけで、この記事では、私がブログ記事執筆の際に使っている、エクセルシートの内容紹介そのエクセルシートの作り方説明を行っていきます。

 

特にブログ初心者の方にとっては役立つ情報だと思います。

ぜひ最後までごらんください。

 

※この記事の内容は、あくまで私の記事執筆に適した形になっています。

詳細な中身については、あなたの執筆状況に応じて変更してください。

 

それではさっそくやっていきます!

 

ブログ執筆の効率化エクセルのご紹介

 さっそくですが、私が使っているエクセルシートは以下のようなものです。

f:id:yshgs_elec:20201017214323j:plain

基本的な構成としては以下の通りです。

■見出しのHTMLに関して

〇A列に見出しで用いるタグを選択する。 

〇B列でA列のタグに対応させる見出しを記述する。

〇C列にそれらの情報を反映させたHTML文を自動記述する。

 

■ボックスデザインのHTMLに関して

〇E2セルで使用したいボックスデザイン名を選択する。

〇E4セル以降にボックスの中に記述したい文章を記述する。

〇F列にそれらの情報を反映させたHTML文を自動記述する。

 

とはいえこれだけでは、なかなかイメージがわかないでしょうから、次はこの状態から、自動化マクロを作動させてみましょう。

まずは見出し作成から。

画面左側の【見出し作成ボタン】を押すと以下のようになります。

f:id:yshgs_elec:20201017215232j:plain


このように、A列、B列の情報を反映させたHTML文が自動で記述され、さらに作成されたHTML文をコピーまでしてくれています。

この状態でブログ執筆作業に移り、Ctrl + V で張り付けるだけです。

 

実際に張り付けた際のプレビュー画面は以下のようになっています。

きちんとエクセルで入力した情報が反映されていますね。

f:id:yshgs_elec:20201017215734j:plain

というわけで、ここまでが見出し作成の自動化作業を行ってくれるものでした。

 

次に【BOX作成ボタン】を押してみましょう。

ボタンを押すと以下のようになります。

f:id:yshgs_elec:20201017220128j:plain

 ここでも先ほどと同様に、E列で入力された情報を反映させるHTMLをF列に記述し、記述されたHTML文を自動でコピーするという作業を行っています。

 

この状態でブログ執筆に移り、先ほどと同様に張り付けてみましょう。

プレビューで確認すると以下のようになっています。

きちんとエクセルで設定した通りの文章が記述されていますね。

本文1

本文2

 ※ボックスデザインの設定はCSSに記述していないと反映されませんので、初心者さんはCSSの編集から始めましょう。

 

というわけで、以上が私が使っているブログ執筆を効率化してくれるエクセルシートのご紹介でした。

 

 

ブログ執筆の効率化エクセルの作り方 

ここからは、

「このシートを使ってみたい!」

というブロガーさんに向けて、このエクセルシートの作り方をご紹介していきます。

エクセルシートを整える

まずは以下の画像を参考に情報を入力場所を整えましょう。

※今回紹介する自動化コードはこの状態でないときちんと動きませんので、セルの位置はそのまま再現してください。

文字やセルの色はなんでも構いません。

f:id:yshgs_elec:20201017221039j:plain

 

タグ、Boxデザインを選択式にする

エクセルシートが整ったら次は、いくつかのセルを選択式にしていきましょう。

まずはA列のタグからです。

基本的な手順は以下の通りです。

f:id:yshgs_elec:20201017222300j:plain

①データタブを選択

②A2セル以降を選択

③データの入力規則を選択

 

すると以下のような画面が現れるはずです。

f:id:yshgs_elec:20201017222432j:plain

④入力地の種類をリストに変更

⑤元の値に h2,h3,h4 を入力

⑥OKボタンで閉じる

 

これでA列のセルが以下の画像のようにリスト選択式になっています。

f:id:yshgs_elec:20201017222635j:plain

 

これで毎回h2,h3などと入力する必要はなく、マウスで選択するだけなので非常に楽になりますよね。

 

また、Boxデザインの方も基本的にはやり方は同じです。

先ほど、h2,h3,h4と設定した場所だけ、あなたがCSSで設定しているボックスデザインの名前に変更するだけでOKです。

きちんと設定できればここも以下のように選択式にすることができます。

f:id:yshgs_elec:20201017222908j:plain

 

これで、情報を入力するときの効率化作業が完了しました。

 

VBAコードを記述する

 次は、入力した情報をHTML形式に変換してくれるVBAコードを記述していきます。

※私と同じようにエクセルシートを作っている人はそのままコピーしちゃってください。セルの位置を変更している人はそれに応じてコードを書き換えましょう。

 

まずは見出しのHTMLを記述してくれるコードです。

(いつもはVBAコードを紹介するときは、コード用のデザインを使用してるんですが、今回はコードの中に<>タグがあるんで、バグってうまく表示できませんでした。)

見にくくて申し訳ありませんが、コピーは普通にできますので、ご了承ください。

 

Sub make_midashi()
Dim i As Integer
Dim h_tag As String
Dim midashi As String

'古いデータを削除
Range(Cells(2, 3), Cells(100, 3)).Select
Selection.ClearContents

'新しいデータを作成
i = 0
Do Until Cells(2 + i, 1) = ""
h_tag = Cells(2 + i, 1)
midashi = Cells(2 + i, 2)
Cells(2 + i * 3, 3) = "<" & h_tag & ">" & midashi & "</" & h_tag & ">"
Cells(2 + i * 3 + 1, 3) = "<p>本文1</p>"
Cells(2 + i * 3 + 2, 3) = "<p>本文2</p>"
i = i + 1
Loop

'作成されたHTMLをコピー
Range(Cells(2, 3), Cells(2 + (i - 1) * 3 + 2, 3)).Select
Selection.Copy

End Sub 

 

次にボックスデザインのHTMLを記述してくれるコードです。

Sub make_box()
Dim i As Integer
Dim box_name As String
Dim honbun As String

'古いデータを削除
Range(Cells(2, 6), Cells(100, 6)).Select
Selection.ClearContents

'新しいデータを作成
box_name = """" & Cells(2, 5) & """"
Cells(2, 6) = "<div class=" & box_name & ">"
i = 0
Do Until Cells(4 + i, 5) = ""
honbun = Cells(4 + i, 5)
Cells(3 + i, 6) = "<p>" & honbun & "</p>"
i = i + 1
Loop
Cells(3 + i, 6) = "</div>"

'作成されたHTMLをコピー
Range(Cells(2, 6), Cells(3 + i, 6)).Select
Selection.Copy

End Sub

 

というわけで、コードの記述が終わりました。

 

VBA実行ボタンを作成する

 あとは先ほど記述したVBAコードを簡単に実行できるように、実行ボタンを作成していきます。

実行ボタンの作成方法については以下の記事をご確認ください。

www.higashisalary.com

 

私の最終形は以下のような形にしています。

f:id:yshgs_elec:20201017214323j:plain

 

ここまでできたら、あとは見出しやボックスデザインの情報を入力して、ボタンを押すだけで、面倒なHTML記述作業が一瞬で完了するようになっています。

 

終わりに

というわけで今回は、私が使っている、ブログの執筆作業を効率化してくれるエクセルシートをご紹介しました。

一度作っておくと、今後の作業効率は格段にあがるはずです。

ぜひ参考にしていただければ幸いです。

 

このように、このブログでは、エクセル(VBA)を中心に、様々な業務効率化スキルを紹介しています。

■業務の生産性を上げたい。

■早く帰って子供と遊びたい。

こんな人はぜひ他の記事も読んでみてください。

 

また、VBAを使ってこんなことがしたいんだけど、やり方がわからない、という悩みを抱えているかたは、お気軽にコメント欄から質問してください。

私にわかる範囲であればご協力いたしますので。(もちろん無料です。)

 

最後に・・・

この記事が役に立ったという方はぜひ応援よろしくお願いします。

 ↓ 応援ボタン

にほんブログ村 IT技術ブログ VBAへ
にほんブログ村

にほんブログ村 IT技術ブログへ
にほんブログ村

 

Twitterもやっていますので、興味があれば覗いてみてください。

それではまた!!

 

 

 

 オススメ記事

www.higashisalary.com

www.higashisalary.com