完全に私個人向けの内容なので、あまり参考にはならないと思います。
ブログを書く中で、私が今後使いそうな書式・テンプレートには以下のものがありそうです。
- 画像の貼り付け
- 動画の貼り付け
- 会話のボックス
- コードボックス
画像の貼り付け
bloggerのデフォルトの機能で特に問題なし。
ここには不満はないです。
動画の貼り付け
画像を張り付けた時の形式と統一感が出るように、下部にキャプションを付けるようにしています。
具体的にはこんな感じ。
| Jamiroquai "Virtual Insanity" |
昔はbloggerデフォルトの機能を使っていたのですが、当時の記事を確認してみると動画もサムネイルも表示されないという問題が起きていました。
当時はこんな感じのコードを使っていました。
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><div class="separator" style="clear: both; text-align: center;">
<object class="BLOGGER-youtube-video" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" data-thumbnail-src="https://ytimg.googleusercontent.com/vi/＜YouTube動画ID＞/0.jpg" height="266" width="320"><param name="movie" value="https://youtube.googleapis.com/v/＜YouTube動画ID＞&source=uds" /><param name="bgcolor" value="#FFFFFF" /><param name="allowFullScreen" value="true" /><embed width="320" height="266" src="https://youtube.googleapis.com/v/＜YouTube動画ID＞&source=uds" type="application/x-shockwave-flash" allowfullscreen="true"></embed></object></div>
</td></tr>
<tr><td class="tr-caption" style="text-align: center;">＜キャプション＞</td></tr>
</tbody></table>
なお、現在のbloggerデフォルトの機能を使うと、こういうコードになる模様（キャプションは無し）。 こちらはサムネイルが表示されます。
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/4JkIs37a2JE/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/4JkIs37a2JE?feature=player_embedded" width="320"></iframe></div>
bloggerデフォルトの動画貼り付け機能だと表示が小さくなってしまうため、YouTubeの埋め込みコードを利用するようにしています。
最初に貼った動画はこの方法で設置しています。
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;">＜YouTubeのblogger用動画埋め込みコード＞</td></tr>
<tr><td class="tr-caption" style="text-align: center;">＜キャプション＞</td></tr>
</tbody></table>会話のボックス
ライブの感想などでステージ上の会話を書くときに、いちいち「○○が『××』と言って、すると△△が～」みたいな書き方をしていたんですよ。
もうこれが本当に面倒くさくて。
そもそも構成力が無いし、読みづらいし、こんなことで三か月とか取られてしまうのはさすがに無駄が大きいなと常々感じていました。
そこでテンプレを使うことにしようと決めました。
枠と表を組み合わせてこんな感じにしようと思います。
Perfume あいさつ
| かしゆか | 「かしゆかです！」 |
| あ～ちゃん | 「あ～ちゃんです！」 |
| のっち | 「のっちです！」 |
| 「三人合わせて！」 | |
| 三人 | 「Perfumeです！」 |
表を使うと、名前の部分が長くなった場合にそこに合わせて台詞部分もきれいに整列させて表示することができます。これは良い。
画面の幅いっぱいに広がってしまうのはちょっと気になるけれど、動画やTwitterの貼り付けも同じようになっているので、そのうち気にならなくなるかな。
コードボックス
動画の貼り付けのところでコードを貼っていますが、bloggerではデフォルトではハイライトの機能は用意されていませんでした。
そこで、highlight.jsを導入しました。ちゃんとハイライトも効いていてなかなか良い感じです。
テーマがいまいちこのブログの色に合っていない気もしますが、そのあたりの調整は後々進める予定。
以下のサイトを参考に設定しました。
- bloggerテンプレートの編集方法など
AYIHIS LAND: highlight.jsでbloggerでコードのシンタックスハイライトをする - bloggerで対象のコードを貼りつける際のコツなど
Chirimenのがんばらないブログ: blogger に highlight.js を組み込む - <pre><code>対象のコード</pre></code>を記述する際の注意点など
furico tech blog: highlight.jsを使ってBloggerでコードをハイライトする - highlight.jsのテーマサンプルなど
tadnakam - Qiita: コードのハイライト表示用 JS ライブラリ highlight.js の使い方
これで少しでも書きやすくなるといいな。
0 件のコメント:
コメントを投稿