Impact-Site-Verification: 94e066b1-c8e5-49b7-89c4-181a09eed204

製造業も大っきらい!!

製造業界で何とか生きている。IT/ライフハック/ガジェットが好きです。

【Visualstudio Code+Markdown】 1から作るMarpの会社用スライドTheme実装【not先頭ページ編】

以下のようなテーマの設定をしていく。

before→after基本的には、htmlとCSSで無理やりごり押しを行う。 mdの良さはもちろんシンプルさにあるのだが、装飾が何もないと、ダサい感じになってしまうので、今回ひと手間実施した。

before-after-marp

背景

会社特有のスライドを使う文化があり、それに対応するため。 会社のスライドっぽくなるように装飾を加えていく。無駄な装飾があり、そのスライドに情報ないよねと思いつつも・・・。

また、PowerPointの管理には限界がきたので、テキストベースでできるだけ管理しようと思い実施。

CSSとかHTMLは基本的にドットインストールで鼻くそほじくりながらふーんってレベルでしかみたことないので、一からCSS記述するのは大変だった。

基本的に図形的な装飾をどう加えるかとCoporationのロゴをどのように配置するかがメインでした。

対象者

・スライドマスターに沿ってパワーポイントを作る必要がある方 ・パワーポイントの管理をmarkdownで行いたい方。

目標

「会社 スライドマスター」で検索してすぐに出てくるサイトの画像を引用させてもらう。

ppt.design4u.jp

下記画像はスライドマスターを用いて一部改変している。

GoalSlide

Theme設定実施

事前準備

Marpまでは導入できているものとする。また、空のCSSファイルを準備しておいてください。

エディタ設定

VisualStudioCodeでCtrl+,を用いてオプションを開き、Marpと入力し、 Enable HTMLとMarpThemasの欄に自作したCSSファイルのパスを記入すればOKです。

全部は網羅していないが、一部設定があったので、下記を参照。 future-architect.github.io

mdファイル設定

mdファイル先頭に下記を宣言。 themaはCSSファイルの名前を。paginateはページインデックスが欲しければ。Sizeは4:3にしたければ実施。

---
marp: true
theme: **custom**
paginate: true
size: 4:3
---

CSS設定について補足

基本的に別ファイルに分けていますが、最悪md先頭でstyleと宣言して記述すればmdファイルだけでも完結することができます。下記の例はサンプル。

style: |
section
{
  width: 210mm;
  height: 297mm;
}

実際にスライドを作成していきます。

成果物

スライドマスター3種類(First/Normal/Last)

Nomalスライドの要件

基本的にスライドの見た目に合わせる。が答えなのですが

Footerに関して

  1. 青色(#0070C0)背景で装飾
  2. 縦幅/横幅はスライドの見た目に合わせる
  3. ロゴを付与する。ロゴの末尾からコピーライトを付与

執筆部分に対して

  1. タイトル部分 h2タグを修正
  2. h3やpタグを修正

Footer作成

1. まずはFooterからmd側へ末尾を追加。
---
marp: true
theme: **custom**
paginate: true
size: 4:3
footer: © Presentation Design
---

Add Footer

2. footerに装飾を行う。

かなりの情報を参考にさせてもらった*1

2-1. 青色(#0070C0)背景で装飾

CSSに書き込みます。

footer {
    box-sizing:border-box;
    border:10px solid #0070C0;
    background-color:#0070C0;
}

以下のようになると思うのでさらに修正を加えます。

2-1.generate box

2-2. 縦幅/横幅はスライドの見た目に合わせる

横幅を揃える+leftとbottomの位置を調整+文字のフォントと色を指定します。

footer {
    box-sizing:border-box;
    border:10px solid #0070C0;
    background-color:#0070C0;
    width:100%; 
    left: 0px;
    bottom: 0px; 
    font:Arial;
    color : white;
}

ここまでできれば下図のような見た目になります。

2-2.footer

2-3. ロゴを付与する。ロゴの末尾からコピーライトを付与

画像は適当に用意したものなので、自社のものを使えばいいかと思います。 backcroundにイメージを設定して、サイズの調整や位置の調整を実施します。

footer {
    box-sizing:border-box;
    border:10px solid #0070C0;
    background-color:#0070C0;
    width:100%; 
    left: 0px;
    bottom: 0px; 
    font:Arial;
    color : white;
    background-image: url(./corp-normal.png);
    background-repeat: no-repeat;
    background-size: 10%;
    background-position: 10px top
}

残念ながら、ロゴとコピーライトが被ってしまうので対策。

2-3.footer

md側のfooterへ直接htmlを記述する

※あまり綺麗な方法ではありません。md側にhtmlを記載するため。

---
marp: true
theme: CorpMaster
paginate: true
size: 4:3
footer: <span style="margin-left:100px">© Presentation Design</span> 
---

2-3.footerComp

補足

疑似要素を使えばもっとうまくできるかもしれませんが、CSSの学習にリソースを割けないので、断念しました。また、この記事の先頭でも説明していますが、htmlをenableにしておいてください。

また、ページ番号部分がずれているので補正しましょう。

pagenation
ページ番号部分はsection::afterで指定します。

section::after {
    font-size:20px;
    color:white;
    bottom:10px;
}

以上でfooterの完成です。

執筆部分

1.タイトル部分 h2タグ

h2_title
h2タグに対して、フォントカラーやSizeなどもろもろを設定。

私と同様にCSSよく分からないよという方は、一つ一つ試すとよいと思います。

section h2{
    color: rgb(68, 67, 67);
    font-size: 28px;
    width: 93%;
    border-bottom: 2px solid #D7D7D7;
    position: absolute;
    top:4%;
    left:4%;
}
2.h3やpタグ

h3やpタグもお好みでフォントサイズを調整。

section h3{
    font-size: 24px;
}
section p{
    font-size: 20px;
}

本文を左上基準にします*2

section {
    justify-content: normal;
    }

以上で完成です。Before→Afterで十分会社で使えるようになったと思います。

normal-complete

Lastスライドの要件

ちょっと要件を書くのが面倒くさくなってきたので、見た目を揃えるで実施します。

Lastスライド作成

事前にLastは特殊な設定を行いたいので、md側の最終ページに下記の記入をお願いします。 classを付与できるので、設定しLastスライドだけにCSSを反映したいというときに用います*3

また<!--_paginate: false-->はページ番号を付与しないために行っています。

---
<!--最終ページ-->
<!--_class: last-->
<!--_paginate: false-->
1.ロゴ配置

基本的にFooterの解説で行ったことと同じです。CSSに下記を記述すれば、反映されます。

last-slide

section.last {
    background-image: url(./corp-last.png);
    background-repeat: no-repeat;
    background-color:#0070C0;
    background-size: 400px;
    background-position-x: center;
    background-position-y: center;
}

上記画像のように、Footerで設定したロゴ画像と、コピーライトを調整します。

具体的には、イメージの削除とコピーライトの位置調整です。本当はCenter等で指定したい所ですが、うまい方法を見つけることができなかったので下記で暫定対策としています。

section.last > footer {
    background-image:none;
    text-align:center;
    margin-left:-90px;
}

これで完成です。

footer-img

まとめ

量が多くなってきたので、分割します。

manuhater.com

とりあえず、Footerと執筆部分が完成しました。

サンプルとして使用した.mdと.cssを残します。 md

---
marp: true
theme: custom
paginate: true
size: 4:3
footer: <span style="margin-left:100px">© Presentation Design</span> 
---
<!--_class: top-->
<!--_paginate: false-->
# 顧客キーパーソンとの関係を強化する○○○○○イベント企画書
2022年04月20日
○○部☆☆課
作者太郎

© Presentation Design



---

## 想定ターゲット
### 職種・役職
本企画における直近のターゲットは「営業部門の担当者」とする。まずは既存で取引実績の多い営業担当者を中心に実績を積み上げ、次いで部長・役員クラスといった「契約や売り上げに直結する裁量権」を持った役職者にアプローチする。
### 課題に対する検討の進捗度
ターゲットの本課題に対する検討の進捗度としては以下を想定。対策を講じたい意志はあるが、具体的な手段まで落とし込めていないレベル。

---
<!--最終ページ-->
<!--_class: last-->
<!--_paginate: false-->
/* @theme custom */

@import 'default';

section {
    justify-content: normal;
    }

section h2{
    color: rgb(68, 67, 67);
    font-size: 28px;
    width: 93%;
    border-bottom: 2px solid #D7D7D7;
    position: absolute;
    top:4%;
    left:4%;
}

section h3{
    font-size: 24px;
}

section p{
    font-size: 20px;
}


footer {
    box-sizing:border-box;
    border:10px solid #0070C0;
    background-color:#0070C0;
    width:100%; 
    left: 0px;
    bottom: 0px; 
    font:Arial;
    color : white;
    background-image: url(./corp-normal.png);
    background-repeat: no-repeat;
    background-size: 10%;
    background-position: 10px top
}

section::after {
    font-size:20px;
    color:white;
    bottom:10px;
}

section.last {
    background-image: url(./corp-last.png);
    background-repeat: no-repeat;
    background-color:#0070C0;
    background-size: 400px;
    background-position-x: center;
    background-position-y: center;
}

<2022暫定対策>Kindleのハイライト末尾が削除、切れる問題

概要

Kindleで自分が本に付与したハイライトの一覧を下記のリンクから確認することができる。 read.amazon.co.jp

が、ハイライトが消える。切れる(図参照)。各アプリ(iOS)で見た場合は、ハイライトは文末までしっかり見れる。

kindlehighlightfail
kindlehighlightfail

結論

この記事を見てくれた方はがっかりしてしまうかもしれない。 が、この「ハイライト末尾が消える問題」を根本的に解決できましたという記事を見つけることはできなかった。

作業時間として6~7時間費やしたが、残念。 自分が行う暫定対策とどんな検索をしたかは作業ログとして残す。

どなたか、解決方法を見つけた暁には教えていただけると幸いです。

※暫定の解決方法として採用したものは、メールでエクスポートし、各種整形を行うというもの。

何が困るか?

前提

基本的にKindleのハイライトを出力する方法は、各単独のアプリからエクスポート。もしくは、CloudReaderNotebookからエクスポート(シンプルにコピペ)。

なぜエクスポートしたいかというと、

  1. 自分用のノートを作りたい。
  2. 上記と似るが、どの端末からもアクセスできるようなDBを作るときに不便。
困るポイント
  • Kindleのハイライトを別のアプリで再利用したい時に文末表現が不明になる。肯定?否定?
  • クラウドリーダーから連結できるアプリが上記の影響を受ける。

暫定の解決方法

実例は詳細部で解説する。この項目は、結果が知りたい方向けのもの。

1.各アプリのメールでエクスポートする(末尾は消えない)。※注意点として、上限があるかも*1

  • <メリット>下記で説明している「末尾を多めにハイライトする」という措置をとる必要なし
  • <デメリット>ハイライト更新するたびに都度行う面倒臭さがあること
  • <デメリット>htmlで出力可能だが、半角スペースがなぞに入るため整形が必要 →整形の方法を詳細で記述

2.末尾を多めにハイライトする。

約3文字程度のハイライト末尾が削除されるので、5文字程度ハイライト追加しておけば、文章を末尾までハイライトすることが可能である。

  • <メリット>すぐにハイライトがクラウドに反映される
  • <デメリット>見た目は汚い。段落をまたぐときなど、指を大目に動かす必要があり、イライラする。忘れそう

3.<未検証>kindle端末でハイライトを行う。 残念ながらこの項目は未検証ですが、試せる方はぜひ。 kindle端末本体でハイライトしたものは、影響がないと言及しているサイトがあるので*2*3


<詳細>暫定の解決方法

とりあえず2.末尾を多めにハイライトする。は美しくないので不採用。いずれCloudReaderNotebookが修正されたときにも嫌なので。1.各アプリのメールでエクスポートする。を実際に行い、自分が満足する結果が得られるか試した。

実際のやり方。

  1. アプリからhtmlファイルの出力 説明は下記のもので分かるかと。

minimaltraveler.net

※メールアプリへ移行できず、エクスポートできないという場合の対処法。自分もデフォルトのメールアプリを削除していたので、下記の説明がないと理解できなかった。

jp.amazonforum.com

末尾文字切れ発生せず。 htmlは謎の半角文字が入力される

2022/08/25 追記 iPhone経由で送ると謎の半角文字は発生していなかった。かつPCアプリだとハイライト上限引っかかったが、iPhone側では同量のハイライトでも上限に引っかからなかった。謎。

endcharaerase
endcharaerase

2.htmlファイル整形

末尾が正しく入ったことはうれしいのだが、htmlをメモアプリなどで使いやすい形に変更する必要がある。 先に空白文字を処理してもいいが、とりあえずhtmlから、mdに変更するツールが非常に便利だったので紹介。kiheleハイライトフォーマットをmarkdownやRoam形式にできるとのこと。

kindle-formatter.com

一旦mdファイルに変換する。 htmlファイルをドロップするだけで可能。

dropmd
drop

なぜか自分のhtmlファイルの場合半角スペースが文中にたびたび存在。 基本的によく使うエディタで半角スペースを一括置換すればいい。

hankaku
hankaku

以上まで行えば、自分の好きな各種ノートに放り込めばいくらでも参照・編集し放題です。

調査ログ

  • そもそも Kindleからエクスポートする方法の一覧*4
  • ClippingsIOを試してみたが、CloudReader側のハイライトを取得するので末尾問題は解決せず
    clippioshow
    clippio
  • 時たま、ネットで末尾まで上手くハイライトできる人をみるが、理由はわからない。ただ、Kindleアカウントを統合した人などは、上手くハイライトされているようで。amazon.comamazon.co.jpと日米とKindleのアカウントが違うという前提があって、昔できた統合をやっている人はどうも、末尾が正しく反映されているみたい?*5
  • ハイライトのエクスポート制限があるようで、フラッシュカードを使うことでそれを回避できるみたい。フラッシュカードにするとハイライトよりも当然情報は落ちてしまう*6
  • amazonへ問い合わせしている人もいるが上手くいっていない*7

以上