FC2ブログ
TOP > Google > title - ブログでコードを簡単に載せたければGoogleドキュメントで十分かも

ITやモバイル機器、iPhone、手帳や本など。
MENU

ブログでコードを簡単に載せたければGoogleドキュメントで十分かも

2019011300.png


情報管理LOGの@yoshinonです。
ブログにコードやタグを載せたい時ってありますよね?
でも、意外に面倒くさかったりするのも事実です。そこで、Googleドキュメントを使えば、超簡単にブログに掲載できよ!ということについて書いていきます。



  
【 ブログでコードを簡単に載せたければGoogleドキュメントで十分かも 】  

 1.ブログにコードやタグを載せるの面倒問題

 2.Googleドキュメントで解決したよ

 3.コードの載せ方







checkmark.png 1.ブログにコードやタグを載せるの面倒問題

皆さんは、ブログにHTMLタグやコードをどのように載せていますか?
これが、意外に面倒なんですよね(特にHTMLタグ)。

例えば、コードを掲載する時には、こういうサービスを用いたり

ブログにいい感じにソースコードを埋め込むために、GitHubの「Gist」を導入してみた!


こんなのを使って、載せたりすると見栄えが良かったりします。

ブログでソースコードをキレイに表示できるJavaScriptライブラリ「highlight.js」の導入方法


また、さらに厄介なのは、HTMLタグです。もともとブログは、HTMLで記述されているので、

<span style="font-size:12pt;"><strong>ああああ<a href="" target="_blank" ></a> </strong></span>


というタグを載せようと思っても、リンクの記述だとブラウザで認識されてしまうので、タグ自体が表示されないのですよね。(※上のは、<>の部分を全角に置き換えた)

そこで、HTMLタグを載せるために、preタグとcodeタグを使って載せられないこともないのですが、それでも特殊文字などがあると、ちゃんと表示されないので、このようなツールを使って変換しなくてはいけないのです。
これは、超めんどい…。

HTML特殊文字変換|コードをホームページに載せる時に便利 | すぐに使える便利なWEBツール | Tech-Unlimited




checkmark.png 2.Googleドキュメントで解決したよ

そこで、情報管理LOG的にお勧めしたいのは、Googleドキュメントを使う方法です。
えっ、と思うかもしれませんが、これが意外に便利なんですよ!
まずは、これをご覧ください。



これは、先日、「FC2ブログのスマートフォン用のテンプレートを使わないようにしたらモバイルでのアクセス数が増えたよ」という記事で紹介したタグのスクリプトの記述です。

FC2ブログのスマートフォン用のテンプレートを使わないようにしたらモバイルでのアクセス数が増えたよ

ちゃんと、コード表示されてますよね?
しかも、コードが見やすく色分けされていませんか?
でもね、これ

自動でコードの色分けされている

のですよ!
Googleドキュメントなのに。Googleドキュメントってそういう機能が実装されているのです。

では、HTMLタグはどうかというと、こんな感じ。HTMLタグでは、さすがに自動色分けには、対応していませんが、何の工夫もなくできてしまいます。






checkmark.png 3.コードの載せ方

さて、では実際にコードを載せる方法について書いていきます。

1.Googleドキュメントの新規作成
Googleドキュメントにアクセスして、普通に新規作成してください。

2019011301.png


2.コードを記述する
コピペなり入力なり好きに記述しましょう。

上の埋め込みコードは、こういう風になります。



3.ページ設定をする
「ファイル」→「ページ設定」
で、カスタマイズしていきます。これは、見栄えに関わる部分になります。

2019011302.png


そうすると、こういう項目が出てきます。

2019011303.png


そこで、以下のようにカスタマイズすると見栄えが良くなります。余白を0。背景の色を灰色にしてそれっぽく。

2019011304.png



4.タグを取得する
最後にタグを取得するのですが、このままでは誰も閲覧できない状態なので、Webに公開する状態にします。

「ファイル」→「ウェブに公開」

2019011305.png




そうすると、このようなウィンドウが出てくるので、「公開」をクリックしましょう。

2019011306.png



さらにダイアログが出てくるので「OK」

2019011307.png



あとは、出てきたタグをコピペすれば、とりあえずはできました。

2019011309.png



最後に表示したいサイズに合わせて、高さと幅の数値をタグに記述してあげればOKです。

width="幅" height="高さ"

最終的には、こういう感じになります。






eyeglass2.png 情報管理LOGの眼
 Googleドキュメントの応用範囲広すぎ

Googleドキュメントは、もはやWordなんかを相手にしているのではなく、互換性を維持しながらも、独自に進化を遂げています。特にGoogleの得意とするWebへの対応や、OCRなどの機械学習方面への対応が、ずば抜けているように思えます。
というわけで、便利なので使ってみてください。


Kindle版が、半額になっています。





関連記事

Leave a reply






管理者にだけ表示を許可する

Trackbacks

trackbackURL:http://hokoxjouhou.blog105.fc2.com/tb.php/1331-1249924c
該当の記事は見つかりませんでした。
SEO
loading
情報管理LOG