プロフィールサイトを作成しましょう!❸【Sublime Text3の設定】

こんにちは。いちかわともや(@tomochan8282)です。

 

プロフィールサイトのテンプレートは準備できたよー。

 

でも、どうやって文字や画像を変えていけばいいんだろう。。

 

コードって全部英語だし、すごく見にくいし。。

 

コードを簡単に入力できる方法はないのかな??

 

そんな方向けの本記事です。

 

プロフィールサイトを編集する時、必要になってくるのが、テキストエディタと呼ばれるアプリケーションです。

 

本記事では、無料で使えるテキストエディタ「Sublime Text3」をご紹介します。

 

Sublime Text3は容量が軽く、シンプルな画面で、様々な機能を拡張することができます。

 

僕が初めて使用したのは、「mi」と呼ばれるテキストエディタでしたが、このSublime Text3に変えた時、あまりの操作のしやすさに感動しました。

 

不便を感じたことはこれまで一度もありません。

 

それでは、Sublime Text3の設定いってみましょう!

 

プロフィールサイトのテンプレートをまだ取得していない方はこちら。↓







プロフィールサイトを作成しましょう!❸【Sublime Text3の設定】

Sublime Text3をダウンロード

 

まず、Sublime Text3をダウンロードしたいと思います。

 

Sublime Textの公式ページより、「Download」をクリックします。

 

 

ダウンロードページに進みますので、OSを選択してクリックします。

 

 

ダウンロードが完了したら、「Sublime Text.app」をクリックします。

 

 

Sublime Text3が開きました。この状態で「3」になっているので、安心してください。

 

便利な機能を追加する準備

 

次に、Sublime Text3の便利な機能を追加していくための準備をします。

 

「View」より「Show Console」を開きます。

 

 

このような画面(↑)が開きます。

 

 

次に、Package Control Installationの画面に行き、「Sublime Text3」のタブを選択して、コードをすべてコピーします。

 

 

そして、先ほど開いておいたコンソールの下部に、コピーしたコードを貼りつけて、Enterを押します。

 

メニューの日本語化

 

次に、メニューを日本語化します。「Sublime Text」>「Preferences」より、「Package Control」をクリックします。

 

 

「Package Control: Install Package」と入力し、クリックします。

 

 

「Japanize」と入力し、選択をします。

 

 

このような画面(↑)になれば成功です。

 

カラー指定したコードに色を付与する設定

 

次は、カラー指定したコードに色を付与する設定をします。「Sublime Text」>「Preferences」より、「Package Control」をクリックします。

 

 

「Package Control: Install Package」と入力し、クリックします。

 

 

「Color Highlighter」と入力し、選択をします。

 

 

この設定をすることで、このように(↑)カラー指定したコードに色が付与され、とても見やすくなります。

 

コーディングを簡単にする設定

 

最後に、コーディングを簡単にする設定をします。「Sublime Text」>「Preferences」より、「Package Control」をクリックします。

 

 

「Package Control: Install Package」と入力し、クリックします。

 

 

「Emmet」と入力し、選択をします。

 

 

この設定をすることで、このように(↑)コーディングを簡略化することができます。コーディングを簡略化するコマンドについては、こちらを参考にしてください。(↓)

>>参考:Cheat  Sheet

 

テキストエディタを準備したことで、プロフィールサイトの文字や画像を変えられるようになりました。

 

Sublime Text3はコードを色分けしてくれるので、見やすい画面でコーディングすることができます。

 

コーディングを簡単にする設定も完了したので、効率的に作業をする準備も整いました。

 

次は、このテキストエディタを使って、プロフィールサイトを改造していきましょう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA