2019年6月9日スポンサーリンクさて、今回からブログで副収入獲得を目指すための特集です!本特集では、ブログを私が運営、育成する過程で得た知識のアウトプットを行っていきます。ブログを作ったけど、何をしようという方の手助けになればと思っています。第一回目の記事は、ブログでソースコードを綺麗に表示する方法について。0;}では、導入手順をどうぞ!*本記事は2018/11/18に作成したものです。(注)今回はライブドアブログで導入することを前提にしています。参考スポンサーリンクSyntaxHighlighterとは?SyntaxHighlighterとは、、、実際私も詳しくは理解してません(笑)。ここで一番重要なのはブログの記事内に、ソースコードを綺麗に表示してくれるということです。私が、調べた中では様々な言語に対応しているみたいです。概要部分で見せたようなソースコードの表示が可能になります。SyntaxHighlighterを入手しようでは、実際にSyntaxHighlighterを導入していきましょう。様々な、サイトで紹介されている方法では、2018/11/18現在ダウンロードしたファイルに目的のものがない!という、問題が発生していました。今回は、私が行った方法を紹介します。SyntaxHighlighterダウンロードまずは、以下サイトでSyntaxHighlighterをダウンロードします。SyntaxHighlighterサイトに飛ぶと右のほうに、ダウンロードというボタンがあるので、そこからダウンロードをしましょう。syntaxhighlightertみたいな名前のファイルが、zipでダウンロードされるので解凍して、中にscripts,stylesというファイルがあることを確認しましょう。ちなみに、私がDLしたときは、以下のディレクトリの中にありました。実際に、ブログの記事にソースコードを導入していきましょう!syntaxhighlighterを自ブログに設置しよう最初にsyntaxhighlighterを、自分のブログに組み込む作業です。次に設定画面内にある、【フォルダを作る】を選択して、syntaxhighlighterを、導入するファイルを作成しましょう。今回はtmp01というファイルで作成を行いました。*この後の作業でこのファイル名を使うところがあるので、コピペで作業をしたい方は、tmp01という名前にするのを勧めます。ファイルを作成したら次はtmp01を開いて、scriptsとstylesの2ファイルを作成しましょう。先ほどダウンロードしたsyntaxhighlighterの、scriptsとstylesの中身をコピーしましょう。*syntaxhighlighterのscriptsとstylesと自分のブログのscriptsとstylesを同じ構成にしましょう。結果は以下のような、画面になるかと思います。ブログの設定をしよう次にブログの設定をしていきます。すると、以下のような画面になると思います。次に、head内という項目に以下の内容を張り付けましょう。*青文字は、絶対に必要な所です。赤文字は、自分が使用したい言語に合わせましょう。いうように記載しましょう*自分のブログURLは、自分が運営しているライブドアブログのURLを記載すればOKです。href=”自分のブログURL/tmp01/styles/shThemeDefault.css”>*上記のtmp01は先ほど作成したファイル名になります。効果とは?禁煙して分かった7つの事【1ヶ月編】NextHomeスポンサーリンク関連記事[Swift5]同じビュー内に違う値を持つPickerViewを2つ表示する方法1つのビュー内で異なる値を扱う、PickerViewを表示する方法のメモ。初心者ブロガーのPV向上支援企画。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイト上に表示された文字を入力してください。mixの使い方[プレミアムバンダイ]ガッツウィング1号・レビューまとめ[ウルトラマンティガ]令和初のウルトラマン・ウルトラマンタイガに期待する事WordPress+Xserverでブログ以外の独自Webサイトを作ってみたプロフィールこんにちは!そにたんと申します社会人2年目のSE(システムエンジニア)です本業を遂行しつつ細々とブログを運営して副業化を目指しています!ブログ紹介や雑記,レビューを書いています。