Rewrite width/height with utility classes

src/pages/articles/copyright/public-domain-creative-commons-license.md

@@ -113,15 +113,15 @@ CCライセンスには次項で紹介するような種類があります．利
 
 CC BYライセンスは，日本語で「表示」と呼ばれ，このライセンス下にある著作物を使用する際には，原作者などのクレジットを明示する必要があります．
 
-![「CC」という文字．加えて，人型のシルエットのマークと，「BY」という文字．](img/cc_by.png){:width="250px"}
+![「CC」という文字．加えて，人型のシルエットのマークと，「BY」という文字．](img/cc_by.png){:.extra-small}
 
 BYは英語の前置詞のbyから来ており，使用時に原作者などのクレジットを表示する必要性を示しています．さらに，可能な限り元の著作物へのリンクを貼る，およびクリエイティブ・コモンズのライセンスページへのリンクを貼るなどといった工夫がなされるべきであることを示しています．逆に，表示さえすれば改変や商用利用も可ということになります．なお，改変した場合にはそのことを明記する必要があります．
 
 #### CC BY-SA
 
 CC BY-SAライセンスは，日本語で「表示-継承」と呼ばれます．CC BYの条件に加え「継承」という条件が加わります．
 
-![「CC」という文字．加えて，人型のシルエットのマークと「BY」という文字，および，循環する矢印のマークと「SA」という文字．](img/cc_by_sa.png){:width="250px"}
+![「CC」という文字．加えて，人型のシルエットのマークと「BY」という文字，および，循環する矢印のマークと「SA」という文字．](img/cc_by_sa.png){:.extra-small}
 
 SAは英語のShare Alikeの略で，直訳すれば「同様に配布せよ」です．他のアイコンに比べ少々難解ですが，これは，このライセンスを持つ著作物を改変して作られた著作物は元の著作物と同じライセンスを継承せよという意味になります．つまり，このライセンスを持つ著作物を元にした二次創作物などには同じCC BY-SAライセンスを付与しなければなりません．例えば，二次創作者が他者に改変を禁止するなど，他の条件に変更することはできなくなります．
 
@@ -134,31 +134,31 @@ SAは英語のShare Alikeの略で，直訳すれば「同様に配布せよ」
 
 CC BY-NDライセンスは，日本語で「表示-改変禁止」と呼ばれます．CC BYの条件に加え，「改変禁止」の条件が付きます．
 
-![「CC」という文字．加えて，人型のシルエットのマークと「BY」という文字，および，イコールのマークと「ND」という文字．](img/cc_by_nd.png){:width="250px"}
+![「CC」という文字．加えて，人型のシルエットのマークと「BY」という文字，および，イコールのマークと「ND」という文字．](img/cc_by_nd.png){:.extra-small}
 
 NDはNo Derivative Worksの略で，文字通り改変を禁止しています．すなわち，画像の一部だけを切り取ったり，枠や文字等を重ねたり，文章を翻訳して使用したりといったことはできません．
 
 #### CC BY-NC
 
 CC BY-NCライセンスは，日本語で「表示-非営利」と呼ばれます．CC BYの条件に，「非営利」の条件が加わっています．
 
-![「CC」という文字．加えて，人型のシルエットのマークと「BY」という文字，および，ドルのマークを打ち消したものと「NC」という文字．](img/cc_by_nc.png){:width="250px"}
+![「CC」という文字．加えて，人型のシルエットのマークと「BY」という文字，および，ドルのマークを打ち消したものと「NC」という文字．](img/cc_by_nc.png){:.extra-small}
 
 NCはNoncommercialの略で，非営利での使用であれば改変も可能です．
 
 #### CC BY-NC-SA
 
 CC BY-NC-SAライセンスは，日本語で「表示-非営利-継承」と呼ばれます．CC BY-SAにNCが付加されたものとなります．
 
-![「CC」という文字．加えて，人型のシルエットのマークと「BY」という文字，ドルのマークを打ち消したものと「NC」という文字，循環する矢印のマークと「SA」という文字．](img/cc_by_nc_sa.png){:width="250px"}
+![「CC」という文字．加えて，人型のシルエットのマークと「BY」という文字，ドルのマークを打ち消したものと「NC」という文字，循環する矢印のマークと「SA」という文字．](img/cc_by_nc_sa.png){:.extra-small}
 
 このライセンスの下では，非営利での利用であれば改変も可能ですが，改変した場合も元と同じCC BY-NC-SAを継承することが必要となります．
 
 #### CC BY-NC-ND
 
 CC BY-NC-NDライセンスは，日本語で「表示-非営利-改変禁止」と呼ばれます．CC BY-NDにNCが追加されています．
 
-![「CC」という文字．加えて，人型のシルエットのマークと「BY」という文字，ドルのマークを打ち消したものと「NC」の文字，イコールのマークと「ND」という文字．](img/cc_by_nc_nd.png){:width="250px"}
+![「CC」という文字．加えて，人型のシルエットのマークと「BY」という文字，ドルのマークを打ち消したものと「NC」の文字，イコールのマークと「ND」という文字．](img/cc_by_nc_nd.png){:.extra-small}
 
 このライセンスはCCライセンスの中で最も厳しいものであり，BYに基づいてクレジット表示をする限り著作物のダウンロードや共有が許可されますが，改変や商用利用をすることはできません．
 
@@ -167,8 +167,8 @@ CC BY-NC-NDライセンスは，日本語で「表示-非営利-改変禁止」
 これまで紹介したCCライセンスは権利所有者が著作権を保持したまま再利用の条件を定めるためのものでしたが，CC0は，それらとは異なる選択肢を提供するものです．
 数字のゼロのアイコンや，copyrightを表すCに斜線を重ねたアイコンで表されることが多いようです．
 
-![数字のゼロのマークと，「PUBLIC DOMAIN」の文字．](img/cc_0_1.png){:width="250px"}
-![「C」を打ち消したマークと，「PUBLIC DOMAIN」の文字．](img/cc_0_2.png){:width="250px"}
+![数字のゼロのマークと，「PUBLIC DOMAIN」の文字．](img/cc_0_1.png){:.extra-small}
+![「C」を打ち消したマークと，「PUBLIC DOMAIN」の文字．](img/cc_0_2.png){:.extra-small}
 
 CC0は，著作者が自身の意思で作品をパブリックドメインに置くために，クリエイティブ・コモンズが用意した規格です．
 CC0は，「その作品について世界全地域において著作権法上認められる，その者が持つすべての権利（その作品に関する権利や隣接する権利を含む．）を，

src/pages/articles/paper-writing/index.md

@@ -33,7 +33,7 @@ author:
 
 まず，数字や文字を選択して打ち込む方法について説明します．Microsoft Wordの［挿入］タブを選択し，リボン右端にある（下図参照）［数式］をクリックします．
 
-![](./pic1.png){:height="200px"}
+![](./pic1.png){:.small}
 
 クリックすると数式タブが出てきます．（「Alt」+「Shift」+「=」キーの同時押しでも数式タブを呼び出すことが可能です．） 数式タブ内のそれぞれの項目を選択していくことで，作成したい数式を記述することができます．しかしながら，文字を一つ一つ選択する必要があるため，複雑で多くの文字を使うような数式を作成したい場合，かなりの手間と時間がかかってしまいます．
 
@@ -55,11 +55,11 @@ author:
 
 ［描画］タブを選択し，さらに［インクを数式に変換］を選択すると，下図のような画面が出てきます．（［挿入タブ］の数式の選択画面からも［インクを数式に変換］が表示されます．）
 
-![](./pic4.png){:height="400px"}
+![](./pic4.png){:.medium}
 
 数式を手書きで書き込むと下図のように読み取ってくれます．
 
-![](./pic5.png){:height="400px"}
+![](./pic5.png){:.medium}
 
 このように，文字や記号を一つ一つ選択する手間をかけずに，数式を記入することができます．また，上の画像のようにマウスで書いたような非常に読みにくい文字でも読み取ることが可能です．しかしながら，一部の特殊文字や連立した式の出力はできないことが欠点です．
 
@@ -97,9 +97,9 @@ snippingについてのさらなる情報は，Mathpixの提供する[こちら
 
 次に手書きで読み取る方法について説明します．左上のアイコンの左から3番目のアイコンをクリックします．
 
-![](./pic9.png){:height="400px"}
+![](./pic9.png){:.medium}
 
-![](./pic10.png){:height="400px"}
+![](./pic10.png){:.medium}
 
 「Handwrite your formula here」という文字とともに画面が表示されるので，数式を記入します．
 
@@ -176,7 +176,7 @@ Mathpixは，パソコンのスクリーン上から数式を読み取ること
 x軸やy軸の単位やラベルの設定ができます．
 
 <figure>
-<img src="pic19.png" width="400px">
+<img src="pic19.png" class="small">
 <figcaption><a href="https://www.geogebra.org">https://www.geogebra.org</a>, Byju's</figcaption>
 </figure>
 

src/pages/browse_samples/index - コピー.md

@@ -16,7 +16,7 @@ sitemap: false
 ## 授業の初回 ##
 授業の初回は,オンラインで安心して学べる環境を構築することがもっとも重要です.この先生の授業で学びたい,という環境をつくるためには,協調的な雰囲気をつくることがとても重要になってきます.下記は授業の初回の一つの進行例です.
 
-   ![](img/sample_1stclass.PNG){:width="600px"}
+   ![](img/sample_1stclass.PNG){:.medium}
 
 
 ### 導入部では,自己紹介やシステム利用や約束事の共有,目的・目標の提示など,学ぶ場づくりに時間をかけます.

src/pages/browse_samples/index.md

@@ -17,7 +17,7 @@ sitemap: false
 ## 授業の初回 ##
 授業の初回は,オンラインで安心して学べる環境を構築することがもっとも重要です.この先生の授業で学びたい,という環境をつくるためには,協調的な雰囲気をつくることがとても重要になってきます.下記は授業の初回の一つの進行例です.
 
-   ![](img/sample_1stclass.PNG){:width="600px"}
+   ![](img/sample_1stclass.PNG){:.medium}
 
 
 ### 導入部では,自己紹介やシステム利用や約束事の共有,目的・目標の提示など,学ぶ場づくりに時間をかけます.

src/pages/en/webex/create_training.md

@@ -5,11 +5,11 @@ title: How to create Webex training
 ## How to Create Webex Training
 1. To display the Training Menu, click on "Webex Training" on Home menu.
 
-	![Webex Trainingを表示する](img/webex_toppage_training.png){:width="700px"}
+	![Webex Trainingを表示する](img/webex_toppage_training.png){:.medium}
 
 2. Click on "Training Schedule"
 
-	![トレーニングのスケジュールをクリック](img/webex_training_top.png){:width="500px"}
+	![トレーニングのスケジュールをクリック](img/webex_training_top.png){:.medium}
 
 
 3. Set up
@@ -21,23 +21,23 @@ title: How to create Webex training
 	* After you get used to manipulate Webex Training, try and adjust .other settings
 	* When you finish all settings, press "Schedule".
 
-	![トレーニング設定の画面](img/webex_training_setting.png){:width="700px"}
+	![トレーニング設定の画面](img/webex_training_setting.png){:.medium}
 
 	* After you finish scheduling the Webex Training, you can confirm Training information by clicking the given home screen (See below).
 
-	![ホーム画面にリストされたトレーニング](img/webex_training_toppage_list.png){:width="500px"}
+	![ホーム画面にリストされたトレーニング](img/webex_training_toppage_list.png){:.medium}
 
-	![トレーニング設定の画面](img/webex_training_info.png){:width="700px"}
+	![トレーニング設定の画面](img/webex_training_info.png){:.medium}
 
 	* Organizers  notify session number and password to your participants.
 
 * Participants obtain the email after organizers schedule the training session. 
 
-	![招待メール](img/webex_training_mail_participant.png){:width="700px"}
+	![招待メール](img/webex_training_mail_participant.png){:.medium}
 
 * If organizers designate a presenter, the presenter obtains the following email.
 
-	![招待メール](img/webex_training_mail_presenter.png){:width="700px"}
+	![招待メール](img/webex_training_mail_presenter.png){:.medium}
 
 <br>
 <br>

src/pages/en/webex/create_webex_account.md

@@ -6,33 +6,33 @@ title: How to Log in and Create an UTokyo Webex account
 * <a href="https://hwb.ecc.u-tokyo.ac.jp/wp/literacy/email/initialize/" target="_blank">Once you create ECCS Cloud Mail account </a>, go to the <a href="https://apj27.webex.com/mw3300/mywebex/forgotpwd.do?siteurl=apj27-jp" target="_blank">password setting screen</a>（See below）. Fill the box with 10-digit common `[email protected]` of ECCS Cloud Mail. For example, If your ID is 1234567890, fill in `[email protected]` . （Continue with the process, even though the screen shows "forgot your password / username").Press "submit (送信)", and then you obtain  the email from Webex to reset your password to your ECCS Cloud Mail address. 
 	* **Caution：Webex will not recognize your changed address when you change your address of ECCS Cloud Mail. Please use your original 10-digit common ID.**
 
-	![パスワード変更手続き画面](img/webex_pw_change.PNG){:width="700px"}
+	![パスワード変更手続き画面](img/webex_pw_change.PNG){:.medium}
 
 <br>
 
 * You will receive an email with the subject **"Request for Webex account"** to ECCS Cloud Mail. Please click the link in this email. The link shows the screen below. Here you set your password.
 	* Even if you register 10-digit common ID, you obtain the message from the changed email address of ECCS Cloud Mail.
 
-	![パスワード設定画面](img/webex_pw_setting.PNG){:width="700px"}
+	![パスワード設定画面](img/webex_pw_setting.PNG){:.medium}
 
 <br>
 
 * Please set your password. If your password is valid, the screen shows  "Success. you have changed your password.
 
-	![この画面がでたら成功です](img/webex_pw_success.PNG){:width="700px"}
+	![この画面がでたら成功です](img/webex_pw_success.PNG){:.medium}
 
 * <span style="color:red">**Do not press "Log in" on this screen**</span>.Please go back to <a href="https://apj27.webex.com/mw3300/mywebex/default.do?siteurl=apj27&viewFrom=modern&login_return_url=https%3A%2F%2Fapj27.webex.com%2Fwebappng%2Fsites%2Fapj27%2Fdashboard%3Fsiteurl%3Dapj27" target="_blank">Log in screen</a>.
 
 ## Log in to WebEx
 * In the Log in screen, please add your Username and Password. Username is described in your obtained mail from Webex (UTokyoxxxx - your 10-digit Common ID). Password is set by you on the process of creating an account.
 
-	![ログイン画面](img/webex_login.PNG){:width="700px"}
+	![ログイン画面](img/webex_login.PNG){:.medium}
 
 <br>
 
 * You can see this home screen when you succeed to log in.
 
-	![WebExのホーム画面](img/webex_home.png){:width="700px"}
+	![WebExのホーム画面](img/webex_home.png){:.medium}
 
 <br>
 

src/pages/en/webex/do_events.md

@@ -16,11 +16,11 @@ Webex Event has the following roles.
 
 * Once you join an event, the screen will look as the following:
 
-	![](img/webex_events_entryview.png){:width="400px"}
+	![](img/webex_events_entryview.png){:.small}
 
 * There are buttons at the bottom of the screen. This screen is what it looks like for the host; Participants have fewer buttons. Move the mouse over the button to display the name. We will explain each icon from left to right.
 
-	![](img/webex_meeting_entryview_numbering.png){:width="500px"}
+	![](img/webex_meeting_entryview_numbering.png){:.medium}
 	1. **Mute**： When black, the microphone is on. It turns red when muted. **Participants cannot unmute themselves**
 	1. **Stop video**： When black, the camera is on. It turns red when the camera is off.
 	1. **Contents sharing**： Only presenters can share contents. This is a function for sharing screens and sharing materials with other participants.
@@ -36,7 +36,7 @@ Webex Event has the following roles.
 
 When you press "Share Content", the options of which screen to share will appear. Select the one to share and press "Share" to start.
 
-![](img/webex_share.png){:width="400px"}
+![](img/webex_share.png){:.small}
 
 * When "Screen 1" is selected, the screen of the person sharing the screen itself is shared with everyone (If you have multiple screens on a multi-monitor, the number of choices increases to Screen 1, Screen 2, and so on).
 * The window that is currently open is also displayed as an option. You can also share the screen in window units. If you don't want to show anywhere other than one window, we recommend that you select the window to share.
@@ -45,7 +45,7 @@ When you press "Share Content", the options of which screen to share will appear
 ## Advanced settings for speaker, microphone and camera
 
 ![](img/webex_more_sound.png)
-![](img/webex_config_sound.png){:width="300px"}
+![](img/webex_config_sound.png){:.small}
 
 
 Click on "Other Options" and then "Speakers, Microphones, Cameras" to set and check the speaker / microphone / camera. Since attendees cannot send video images, their settings become only "speakers and microphones" and cannot set cameras.
@@ -59,7 +59,7 @@ Click on "Other Options" and then "Speakers, Microphones, Cameras" to set and ch
 Pressing "Participants" will bring up a screen where you can see a list of participants.
 
 ![](img/webex_participants_event_host.png)
-![](img/webex_participants_event_list.png){:width="400px"}
+![](img/webex_participants_event_list.png){:.small}
 
 The left is how the window will look like from the host side, and the right side is the window displayed when you click "Show all attendees...".