【はてなブログ】目次の作成方法！
はてなブログで目次の作成をしていこうと思います。
まずは適当に文字を入力します、イメージなので何でも構いません
文字を入力したら入力した文字列を選択してどの見出しにするのか選択します。
完了したら作成した見出しの一番上にカーソルを持って行って目次のアイコンを選択します。
目次の上に[:contents]が表示されると思います。その状態でプレビューを選択して仕上がりを確認してもらえば下のような目次が出来ていると思います
目次
の項目を
クリックをすると
目次から
クリックした見出しに移動する
出来ましたか？
これで目次の作成は完了です。
【はてなブログ】プログラムソースコードに行番号を表示
前回はプログラムコードを記載する方法を掲載しました。
【はてなブログ】プログラムソースコード記載方法 - 学習部屋
今回ははてな記法で掲載したプログラムコードに行番号を表示させる方法を記載していこうと思います。
まず、はてなブログのサイトへ行き自身のユーザー名をクリック→リストの中からデザインを選択→画面左のカスタマイズを選択→下の方にフッタとデザインCSSの項目が有るのでその二つをいじっていきます。
まずはフッタを選択して中に下記のコードを記入します。特にコードの意味が分からなくてもコピーあんどペーストでも構いません。
/* -----codeの行番号----- */ <script> var codeBlocks = document.getElementsByClassName('code'); [].forEach.call(codeBlocks, function(e) { if (!/lang/.test(e.className)) { return; } var lines = e.innerHTML.split(/\n/); var codeBlock = ""; lines.forEach(function(line){ if(line != ""){ codeBlock += '<div class="code-line">' + line + '</div>' } }) e.innerHTML = codeBlock; }); </script>
こんな感じです。
次にデザインCSSを変更します
/* -----code行番号表示----- */ .code-line { counter-increment: linenumber; /*code-lineクラスの数でカウント*/ } .code-line:nth-child(even){ background-color: #333333; /*偶数行のみ背景色を適用*/ } .code-line::before { content: counter(linenumber); /*行番号を擬似要素として表示*/ display:inline-block; color: #ccc; text-align: left; width: 30px; padding: 0 5px 0 0; } /* -----codeコード種類名の表示----- */ .entry-content pre.code{ padding: 30px 0 0 5px; } .entry-content pre.code:before{ content: attr(data-lang); dsplay: inline-block; position: absolute; margin-top: -30px; margin-left: 0px; padding: 3px; background: #cccccc; color: #000000; }
これで設定は完了です。
中の設定を自分で色々と変更してみれば変化が楽しめると思います。
参考にさせて頂いたサイト
【Androidstudio】作成したコードを変更前の状態に戻す
コードを書いていて変更する前は上手く機能していたのに書き足したら上手くいかなくなってしまったなんて事はありませんか？
変更する前の状態に戻す機能がAndroidstudioにはあるので紹介していきたいと思います。
TextViewとButtonを配置して、ボタンを押した時にTextViewの文字が変更されるコードを書きました。
MainActivityの変更内容を変更前の状態に戻したいと思うのでapp→java→MainActivityを右クリック→Loacl History→Show Historyを選択
Show Historyを選択すると変更内容一覧が表示されるので戻したい状態を選択して右クリックからRevertを選択します。今回は新しいプロジェクトを立ち上げた時のまっさらな状態に戻してみました
元の状態に戻ったので✖でウインドウを閉じます
元の状態に戻りました。これで好きなだけコードをいじる事が出来ると思います。
【Androidstudio】コードの画面を分割
Androidstudioでコードを書いている時にタブをクリックして何回も画面を遷移するのがめんどくさく無いですか？
複数の画面を同時に表示する機能があるので紹介していきたいと思います。
Window→Editor Tabs→Split Verticallyを選択してみて下さい。
するとこの様に横に画面が2分割されます
2画面の状態で先ほどと同じようにWindow→Editor Tabs→Split Verticallyを実行すれば3画面にすることも出来ます。
さらにWindow→Editor Tabs→Split Horaizontallyを選択すれば縦に画面を分割する事も出来ます。
自分の好みに合わせて使用してみて下さい！
Androidstudioを別画面で複数プロジェクトを表示する方法！
コーディングをしていて、参考にしたいコードを見ようとしてプロジェクトを開くと今開いているプロジェクトは閉じられてしまいます。今回紹介する方法は今開いているプロジェクトはそのままで別ウインドウでもう一つプロジェクトを立ち上げる方法をご紹介していきたいと思います。
操作は非常にシンプルです
メニューバーからFile→Settingsを選択します
▶Appearance & Behavior の矢印が▶になっている場合は▶をクリックして▼にし、SystemSystem Settingsを選択します。
デフォルトの設定だとProject Openingの中のConfirm window to open project inにチェックが入っていると思います。これは新しいプロジェクトを立ち上げると今開いているプロジェクトを閉じて新しいプロジェクトを立ち上げますという意味です。
なので、新しいウインドウを別ウインドウで開きたい時はOpen project in new windowにチェックを入れます。
これで操作は完了です。
FIle→Openで新しいプロジェクトを立ち上げてみて下さい。今開いているプロジェクトはそのままで新しいプロジェクトが別画面で開けたと思います。
Bracketsインストール方法!
OSに標準で搭載されているWindows「メモ帳」Mac「テキストエディット」がありますが、Web制作には不向きです。OS独自の文字コードや改行コードがあるからです。Windowsでテキスト作成したものをMacなどの他のOSで扱えない可能性があるからです。ネットで検索するといろいろな種類のテキストエディターがありますが今回はBracketsというテキストエディターを使用していきたいと思います。もちろん無償です。
ダウンロードをクリックして進みます。next→Install→finish
インストールが完了したらBracketsを起動し、ガイドページが表示されるので✖をクリックして閉じて下さい。
ここから初期設定を行っていきます。全角文字でソースコードを記述しないので全角文字が入っていた場合にわかりやすく表示する設定をしていきます。
画面の右端に拡張機能マネージャーのアイコンがあるのでクリックし、検索欄に「全角空白・スペース・タブ表示」と入力すると項目が表示されるのでインストールをクリックします。
では実際に適当な場所に全角でスペースキーを押してみます。
全角でスペースキーを押すと▯で表示され、半角スペースを押すと・で表示されるようになりました。最後に文字コードの確認をして終了しましょう。
画面の下の方に文字コード項目が表示されているので「UTF-8」になっているか確認してください。なっていなければ▼でUTF-8を探して変更しましょう。
