こんにちは、まねぽいです。
この記事を見ているということは、はてなブログでpyhtonの記事を書きたいのですよね。しかし、普通に書くとこんな感じで色も変わりませんしすごく分かりづらいです。
for i in range(10, 100, 15):
print(i)
このままでは、コードが複雑になればなるほど見えにくくなります。また、コード内にコメント等を書けば更に分かりづらい... 記事内にソースコードを埋め込む方法なんてあるのでしょうか？
この記事では、はてなブログ内にpythonのソースコードを埋め込む方法を実際の画面を交えて紹介します。簡単なのでぜひ一緒にやってみましょう。
＜解決策＞ブログ内で別モードの編集画面を使う
プログラミングを少しでも触ったことがある方なら分かると思うのですが、ソースコードって複雑になればなるほど長くなりますよね。
そんなコードをはてなブログに直接貼っても、ただ見えにくいだけです。では、どうすれば見やすいソースコードを埋め込めるのでしょうか？
Markdownモードでpythonを記述する
実は、はてなブログの編集画面には３つの種類があるのはご存知でしょか？多くの皆さんが使っているのは初期設定の「みたままモード」です。
それをMarkdownモードに変更することでpythonのコードを綺麗に記述することが出来ます。Markdownモードへの変更方法は以下の通りです。
＜変更方法＞
「設定」から「基本設定」に移動後「Markdownモード」を選択して「保存」
その状態で新しい記事を開いてもらう普段とは違った雰囲気の編集画面が表示されるかと思います。これで下準備は完了です。
最初に書いたコードを実際にコードを記述してみます。すると...
for i in range(10, 100, 15): print(i)
すごく分かりやすくなりましたね。だた、普通に書くだけではダメで少し変わった書き方をする必要があります。これが上記の編集時のコードです。
このように最初と最後を＠のボタンにあるアクセント記号で囲んであげることでpythonのコードが記述出るようになります。
余談ですが、もっとプログラミングについて学びたい人はオンラインスクールをおすすめします。家の中で完結しますし、プログラミング系の記事にチャレンジされる方にはもってこいです。
申込みはコチラから
別の編集モードは慣れが必要
使えば分かると思いますが、Markdownモードでは基本的にHTML記述で編集を行います。基本的なHTMLタグは標準機能として使えますが、ある程度知っておかないと編集しにくいでしょう。
これが実際私が編集している画面です。
一部を抜粋していますが始めて見ると見づらいですよね。上級者向けな感じがしますが、慣れれば大丈夫です。
また、ブログを書く上でHTMLやcssは覚えておいて絶対に損は無いので勉強の為にMarkdownモードをメインに使うのも良いかもしれまんね。
スクリーンショットを貼り付ける
多くの皆さんはこちらの方法が最初に頭に浮かぶのではないでしょうか？ブラウジングしていると時々見かけますよね。
スクリーンショットであれば、コードを記述しているエディターの情報をそのままシェア出来きます。一例として私のエディターの画面を共有しますね。
このように背景が黒く変数や関数などは全て色が変わって表示される仕組みになっているものもあり、かなり見やすいです。しかし、その反面スクリーンショットならではのデメリットも存在します。
▷読者側がコピー出来ない
読者側の目的は基本的にプログラムを「コピペ」して自分のコードに取り入れることにあります。スクリーンショットはただの画像なのでコピーはできません。
また、上級者に近づけば近づくほどコードは長くなり、数百行で複数ファイルの世界は当たり前になります。コードを写すユーザーは少数いると思いますが、ほとんどのユーザーはそのサイトを離れてしまうでしょう。
▷画像なのでサイトが重くなる
画像を貼りすぎるとサイトは重くなります。どれだけスクリーンショットが小さな容量でも画像がない場合にくらべ読み込みが遅くなります。
その上、はてなブログは他のサイトにくらべ元々重い傾向にあります。画像が多ければ多いほどgoogleが必要以上の容量があるサイトと認識し読者側に表示されにくくなる可能性も上がるでしょう。
実行結果はどうするのか
最後に気になるのは実行結果はどうするのかということですね。実行結果は読者側にとってプログラムが実際に動いていることを証明する結付の手段です。プログラミング系の記事では実行結果は必ず載せるようにしましょう。
共有の方法に関してはいくつか方法がありますが、私はこのようにスクリーンショットをおすすめします。
基本的に実行画面のイメージカラーは黒ですし、読者側は実行結果をコピーする必要性がありません。しかも、スクショするだけなのでサクッと作業が終わります。
複雑な実行結果や長い実行結果を共有する場合はプログラム内で「改行」を指示すれば比較的見えやすくなります。また、実行結果が百行、何千行と長過ぎる時はそれ自体を記事にして解説するのも手の一つです。
いずれにせよ、やればやるほど自分なりのやり方が身につくのでまずは、記事を書いて自分にベストな方法を探ってみましょう。
まとめ
これで、はてなブログでpythonの記事をかけるようになったかと思います。書くのには慣れが必要ですが、記事を書けば書くほ色々なデザインが身につくかと思います。
繰り返しにはなりますが、プログラミングについての知識があまり無い方はプログラミングスクールで学ぶのがおすすめです。オンラインで完結するのが魅力的！
覚えた後、応用して作ったオリジナルプログラムなんかで記事を書ければ最高ですね。興味がある方はぜひチャレンジしてみてはいかがでしょうか。
申込みはコチラから
プログラミング関係の記事の制作は他の話題に比べ少し難易度が高いかもしれませんが、アフィリエイト収益は少し高い傾向があります。気合充分な方はぜひチャレンジしてくださいね。
今回の記事が少しでも皆さんの役に立てば幸いです。皆さんのブログがより良いものになることを心より願っています。
