Webサイトにソースコードを載せる方法4 Gist

はじめに

どうもキーです。
最近は仕事が落ちいているので更新する時間がとれて書く気がおきますね。
GitHubについての記事を経て、ようやくここまで来ました。
Gistでソースコードを表示する方法についてです。
GitHubへの登録などがまだであったり、そもそもGitHubって何?という方は以下の記事を。

Gistの作成手順

1. GitHubにログインする

Sign inからログインしましょう。
Sign upはアカウント作成なので注意です。

2. Gist画面へ移動

右上の+ボタンを押してNew gistを選びましょう。

3. 必要な項目を入力する

タイトル説明ソースコードを入力しましょう。

4. 作成する

Create secret gistCreate public gistを押しましょう。
Gistの表示以外では見せたくない場合はsecret、GitHub内のアクセスも許可する場合はpublicです。

5. 作成完了

これでGistの作成は完了です。
それでは早速ブログで公開しましょう。

ブログに表示する方法

1. スクリプトをコピーする

Gistの画面のスクリプトをコピーします。

2. ブログのテキストに貼る

コピーしたスクリプトをブログに貼ります。
WordPressの場合はテキストモードで貼り付けましょう。

これだけです。

結果

終わりに

Gistはアカウントを作らなければいけませんが、一度準備ができれば次回以降ものすごく簡単にソースコードのハイライド表示ができます。
特にGitHubをよく利用しているプログラマにはおすすめかなと。
私個人としてはデザイン的に好きなgoogle-code-prettifyを今は利用していますが。

次回以降の記事は未定ですが、書いてみたいネタはまだあるのでそこから試してみて書きたいと思います。
自身の成長の記録を残せるのも悪くないですね。
このブログだけでもすこしずつ成長できている気がします。

GitHubへ登録しよう!プログラマの小さくて大きな一歩!

はじめに

お久しぶりです。キーです。
前回の更新から長く空いてしまいましたが、今回はプログラマならぜひ登録したい GitHub への登録をしたいと思います。
といってもものすごく簡単なのですぐ終わります。(GitHubについて、登録の意味などはこちら

登録手順

1. GitHubのページへアクセスする

GitHubの公式

2. 必要項目を入力

多少画面は違うかもしれませんが。

3. 決定

Create an accoutをクリックします。

4. 登録完了

以上です。これだけです。

ついでに

いろいろなサイトを見ると設定を確認しておいた方がよさそうな箇所があったので確認を。

SettingEmailsから以下の箇所を確認します。
チェックがついていれば大丈夫です。ついていなければつけてください。
※設定の意味を理解して自己責任で外される場合は外して大丈夫です。

終わりに

最近のWebサイトは登録が簡単でいいですね。
もともと私がGitHubへ登録した目的はGistでソースコードを表示するためだったので、次回はそれをやると思います。

ソースコードを管理する! GitHubとは? (プログラマの必須要件!?)

どうもキーです。
今回はGitHubについて説明していきます。

なお、本記事はGitHubをある程度知っている、利用したことがある人が読んでも、得られるものは(多分)ないです。

はじまりのまとめ

まずは先にまとめから載せます。
このまとめに行き着くように解説していきます。

  • GitHubとは、「GitHub社が提供している」「Gitバージョン管理システムを利用する」「Webサービスである」。
  • GitHubはGitを使った「ソースコードのバージョン管理をする」ために利用する。
  • 「ソースコードのバージョン管理をする」と、「問題が発生した時の切り戻し」や、「複数人でのソースコード編集によるバッティング回避」に利用できる。
  • GitHubは特に「オープンソースソフトウェアをGitの仕組みを利用して管理する」ということに対して強い。

GitHubとは

Wikipedia

以下、引用です。(引用と分かりづらかったので明記しときます。今後引用のスタイルも編集しようと思いました。)

GitHub(ギットハブ)はソフトウェア開発プロジェクトのための共有ウェブサービスであり、Gitバージョン管理システムを使用する。 Ruby on RailsおよびErlangで記述されており、GitHub社によって保守されている。

引用:GitHub – Wikipedia

さて、そもそもGitHubを知らない人にはこれを読んでもピンと来ない人も多いでしょう。
要点を説明すると以下のようなものです。

  • GitHub社が提供している
  • Gitバージョン管理システムを利用する
  • Webサービスである

前提としてGitHubとは上記のものとして認識しておいてください。
まだ、ピンとは来ないと思うのでまずは何のために利用するのか説明します。

何のために使うのか

Gitバージョン管理システムを利用するWebサービスということですが、結局何をするために使うのでしょうか。

基本的な答えは、「ソースコードのバージョン管理をする」です。

では、「ソースコードのバージョン管理をする」とはどういうことでしょうか。

例えば、WordPressのレイアウトを変更するためにstyle.cssを変更するとします。
そのときに、変更前のファイルと変更後のファイルの内容、また、その変更点が履歴としてあとからでも確認できるようにするということです。

何が良いのか

ファイルの変更の履歴が確認できるのが一体なんだというのでしょうか。
しかし、ある程度プログラムなどを経験するとその重要性に気がつくはずです。

例えば、cssファイルでも編集を誤ればWebサイトのレイアウトが大きく崩れてしまうと思います。
一般的なプログラムでもバグが発生してしまった場合は、バグの改修や発生バージョンの調査が必要になります。
そのようなときに、いつどのタイミングのプログラム変更により問題が発生したかなどを確認するために、変更の履歴が必要になるのです。

え?それなら自分で常に変更前と後のファイルを保持しておけばいい?
不可能ではないですが現実的ではないですね。それを楽にするためにシステムと言うものがあるのですから。
また、一部の方はフォルダに以下のようなファイルが入っているのを見たことがあるかもしれません。(例はstyle.cssの場合)

style.css
styel01.css
改修前_style.css
改修後_style.css
新_style.css
style.css.bak

あるあるですが、何がなんだかわからないですね。
しかも質が悪いのは、「この中のどれか一つが最新とは限らない」ということです。例えば、「改修後_style.css」と「新_style.css」には、「style.css」から変更した「全く別の内容」が入っている可能性があるのです。

これは特に、複数人で開発をしているときに起きやすくなります。
そうです。このような複数人による編集でのバッティングを防ぐために、チームで開発をするとなるとバージョン管理システムはほぼ必須のツールとなるのです。

何ができるのか

GitHubはソースコードのバージョン管理に使うと書きましたが、結局何ができるのでしょうか?

実はここまで述べてきた「バージョン管理をする」機能はGitHubのサービスではなくGitというシステムでできることなのです。(Git≠GitHub)

ではGitHubはそんなGitを利用して何を提供しているか。
数多くある機能のうち、特にGitHubのGitHubたる部分をお話すると、

  • Gitのソースコードの保管場所をオンラインに
  • 自身の作成したソースコードを世界中に公開
  • 公開されているソースコードに対して、世界中のだれもが改修を行える

ということです。
つまり、GitHubは「オープンソースソフトウェアをGitの仕組みを利用して管理するサービス」という面がとても強いです。(もちろん他の人にソースコードを公開しないようにもできますし、サービスの利用方法によっては法人用として使うこともできます。)

そして、数多くのオープンソースのプログラムがGitHubで管理されています。
オープンソースのプログラムを読むことはプログラマとしてステップアップをするための良い方法ですし、それどころか自分からライブラリを公開したり、既存のライブラリの改修に携わることができるのです。
まさに新しい世界への扉ですね☆

まとめ

というわけで、「GitHubとはなにか」について述べました。
以下は本記事のまとめです。(はじめに書いたもの)

  • GitHubとは、GitHub社が提供している」「Gitバージョン管理システムを利用する」「Webサービスである」
  • GitHubはGitを使った「ソースコードのバージョン管理をする」ために利用する。
  • 「ソースコードのバージョン管理をする」と、「問題が発生した時の切り戻し」や、「複数人でのソースコード編集によるバッティング回避」に利用できる。
  • GitHubは特に「オープンソースソフトウェアをGitの仕組みを利用して管理する」ということに対して強い。

GitHubはプログラマをやる上では避けては通れないサービスと思いますので、ぜひ登録しましょう。
と言いつつ私も最近まで(存在は知っていましたが)登録していなかったので、次回の記事では登録方法について書きたいと思っています!

かんそー:
まとめをはじめと終わりに書くのは冗長な気がしてかっこよくないですね。
結局必要なことしか書いてるつもりはないので目次をつけてはじめのまとめはなくそうと思っています。(長くても読んでもらうor飛んでもらう)
ただ目次を実装するにはもう少し時間がかかりそうですね。。。そのうちやります。
ちなみにGitHub、もうすぐ日本語対応のWebサイトが公開されるようですね。
(GitHub、日本語Webサイトを3月公開予定 | NEWS | Macお宝鑑定団 blog(羅針盤))
ただ正直プログラマをやる上で日本のみの知識でやるのはとてもキツいので、英語版の利用をしたほうがいいと考えています。私はそうしてみます。

WordPressの子テーマは必ず利用しよう(2)

子テーマの簡単な使用方法

どうも、キーです。
前回(WordPressの子テーマは必ず利用しよう)は、WordPressにおける「子テーマ」の作り方を説明しました。

今回は、「子テーマ」の簡単な使用方法を説明したいと思います。

子テーマのファイル

「子テーマ」を利用するためには前提知識が必要です。
といっても前回説明した「親テーマ」の更新の影響を受けなくする。を達成するだけであれば以下の点を覚えていれば十分です。

  • 「親テーマ」「子テーマ」に同じファイル名のファイルがあった場合、「子テーマ」のファイルが使用される。
  • 「cssファイル」と「functions.php」は例外。特に「cssファイル」は「親テーマ」→「子テーマ」の順に読み込まれる。

※「functions.php」については読み込まれ方が複雑であるのと、今回その知識は必要ないので割愛。必要なときに書きます。

例1: header.php

親テーマには通常「header.php」というファイルがあると思います。
こちらの記事(Google Analyticsを導入しよう(WordPressブログのアクセス解析について))でも編集しました。

この編集を子テーマで行うようにし、親テーマの更新の影響を受けないようにしたいと思います。
といっても手順は簡単。

  1. 「親テーマ」の「header.php」を、FTPソフトなどでダウンロードするか内容をコピーしてテキストエディタに貼り付ける。
    ※文字コードはUTF-8にする。改行コードは自分が利用しているOSのものでOK(WindowsならCR+LF、現代のmacOS、LinuxならLF)。
  2. Google Analyticsを導入しよう(WordPressブログのアクセス解析について)の記事のとおり、コピーした「header.php」を編集する。
  3. ファイルを「header.php」の名前で保存する。
  4. FTPソフトなどを利用し、子テーマのパスに作成した「header.php」をアップする。

以上です。やっていることはコピーを作って編集するだけですね。

例2: style.css

次は子テーマのスタイルシートについてです。
スタイルシート(cssファイル)については前述しましたが、「親テーマ」→「子テーマ」の順に読み込まれます。
そしてスタイルシートの特徴として、同じ項目に対する記述は、後に書いたもので上書きされます。
つまり、上書きしたい項目文のみ記載すれば良いわけです。

スタイルシートの編集内容についてはこちら(WordPressブログのレイアウトを最低限整える方法まとめです。(Twenty Seventeen))を例とさせてもらいます。

上記記事で「style.css」の編集についてごちゃごちゃと書いておりますが、子テーマを用いて同じようにする場合は以下を前回(WordPressの子テーマは必ず利用しよう)作成した子テーマの「style.css」へ追記してください。

@media screen and (min-width: 48em) {

	/* Layout */

	.wrap {
		max-width: 1100px;
	}

	.has-sidebar:not(.error404) #primary {
		width: 	68%;
	}

	.has-sidebar #secondary {
		width: 26%;
	}
}

これだけでOKです。
ページ全体の表示の幅、記事の幅、サイドバーの幅を親テーマの設定から上書きしています。
@media screen and (min-width: 48em)などはページ内の要素を特定するための記述だったりしますが、気になる方はcssの書き方を調べてください。機会があれば記事にするかもですが。

結果

子テーマを使って以下の2つの記事の内容と同じ編集ができる。

※子テーマを更新してもレイアウトなどが反映されない場合はまず以下の「レイアウトが反映されない場合」をチェックしてください。それでもわからなければこの記事ではどうしようもないですが。

レイアウトが反映されない場合

真っ先に思い当たる可能性は以下の2つです。
これらを試して違った場合は他のブログも含めもっと広い範囲で調査したほうが良いかもしれません。

  1. 記述が間違っていないか確認する。
    当然ですが、これまでの記述のどこかで誤りがあればレイアウトが反映されないということもありえます。また、テーマが違う場合はすべてがそのまま使えるとは限らないです。テーマ名で検索しましょう。
  2. ブラウザのキャッシュをクリアする。
    レイアウトを確認しているブラウザのキャッシュをクリアしましょう。
    キャッシュ関連のプラグインを利用していなくてもまず試しましょう。
    私はプラグインないから大丈夫なはずとスルーしていたら見事にハマりました。

今後の構想

勘の良い方やもともと知識のある方は気づいているかもしれませんが、この方法にも問題点があります(かなり簡単にできるのはとても良い点ですが)。
問題に対応するには少し勉強が必要そうですので今しばらくはこの方法で行きたいと思います。筆者が問題に対応できるようになったら記事にしたいと思います。

 

WordPressの子テーマは必ず利用しよう

失敗は成功のもととすべし

どうも、キーです。
突然ですが今回はWordPressの子テーマについて書きたいとおもいます。
なぜ前回から突然話題が変わったかと言いますと、今回ある失敗をしてしまったために急遽対処が必要となり、同じ目に合う方を少しでも少なくしたいと思い書かせていただきます。

子テーマの作り方だけ知りたい方は「子テーマの作り方」まで飛ばしてください。

失敗の内容

簡単に言いますとブログのレイアウト設定をすべてリセットしてしまいました。
記事やサイドバーの横幅を調整したり、埋め込んだGoogle Analyticsのトラッキングコードなどもすべて削除されてしまいました。

失敗の原因

WordPressのテーマには「子テーマ」というものがあるのですが、その存在を知らず、「親テーマ」を直接編集してしまっていたことです。
WordPressの「親テーマ」はたびたび更新されるのですが、更新を適用すると新しいバージョンのファイルで既存のファイルをすべて置き換えるというような動きをするため、それまで「親テーマ」に行っていた変更が全てリセットされます。
対策としては何度も記載していますが、「子テーマ」を編集してブログのレイアウトなどを変更しましょう。

そもそも「子テーマ」とは

何度も「親テーマ」「子テーマ」と書いておりますが、そもそもどういうものでしょうか。
以下、簡単な解説です。詳しく知りたい方はググってね☆

  • 「親テーマ」…大元となるテーマです。WordPressをインストールしたときに付属しているテーマなどはこちらにあたります。(例えば本ブログではTwenty Seventeenです)「親テーマ」のテーマファイルを編集してもテーマの更新を行うとすべて元に戻ってしまいます。
  • 「子テーマ」…親テーマの設定を引き継ぎつつ、独自の設定をするために作成するテーマです。基本的には自分で作ることになります。「子テーマ」のテーマファイルを編集した場合は「親テーマ」のテーマを更新しても「子テーマ」の編集内容が残るため、テーマを再度は編集し直す必要がなくなります。

子テーマの作り方

ここからが本題です。
基本的には公式のリファレンスを参照すれば良いです。

WORDPRESS Codex 子テーマ

必要なファイル

子テーマを作成するときに最低限作成するファイルです。
ファイル作成時の注意ですが、ファイルの文字コードはUTF-8で作成しておいたほうが無難です(文字化けを防ぐため)。今後他のファイルを作成するときのためにもUTF-8で作成することを覚えたほうがよいです。

  • style.css
  • functions.php

style.css

以下のように記述します。
各項目を自分が利用している親テーマに合わせて編集してください。
得に必須の項目は「Theme Name」と「Template」です。
Theme Name」は子テーマの名前を入力してください。子テーマの名前は一般的には「親テーマ名 + Child」が利用されます。
Template」は親テーマの「ディレクトリ名」です。子テーマのファイルをアップする場所(後の手順)により変わりますが、こちらも一般的には例の形式で良いと思います。

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fifteen-child
*/

上記の例はTwenty Fifteenを親テーマとするTwenty Fifteen Childテーマを作成する場合の例です。

functions.php

最低限必要なコードは以下です。
親テーマのcssを子テーマで利用するための記述です。
テーマの種類等によっては更に作成した子テーマのcssも読み込む記述をしなければならない場合はありますが、そのような特殊な場合(やってできなかった場合)は公式のリファレンスでしたり、他の幾つかのサイトで調べたほうが良いでしょう。

<?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
 wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

はじめの<?php を忘れないよう気をつけましょう。
<?phpがあるなら、最後?>で閉じなければと感じるかもしれませんが、公式のリファレンスにもそのような記載はないので、書かなくて大丈夫です。
大丈夫な理由があるとは思いますが、今回は重要でないので割愛します。

以上で子テーマの作成に最低限必要なファイルの作成は完了です。

子テーマのアップロード

WordPressの機能を利用してアップロードするのが一番楽であるため、利用します。

  1. まずは上記で作成した2つのファイルを「twentyseventeen-child」といった「親テーマ-child」という名前のフォルダに入れてください。
    親テーマ名は「ディレクトリ名」になります。WordPressの機能を使ってアップロードする場合は小文字の例のような形になると思います。
  2. フォルダができたらWindowsの機能を使ってzipファイル形式に圧縮します。
    フォルダを右クリックし、「送る」→「圧縮(zip形式)フォルダー」を選んでください。
    フォルダのある場所に「twentyseventeen-child.zip」というようなファイルが出来ればOKです。
  3. WordPressのダッシュボードから「外観」→「テーマ」を選び「新規追加」→「テーマのアップロード」の順にボタンを押します。
  4. 「ファイルを選択」メニューで先程作成したzipファイルを選び「今すぐインストール」を押します。
  5. インストールが成功すればOKです。

子テーマの有効化

子テーマのインストールが完了したら有効化します。
インストール完了が表示されている画面、あるいは「外観」→「テーマ」に表示されるテーマアイコンの右下の「有効化」をクリックします。

ブログのプレビューを確認します。
現時点では親テーマから何も変更をしていないはずなので、親テーマのレイアウトがそのまま表示されればOKです(トップ画像など一部の設定は初期状態になってしまっているかもしれません)。
この段階ではページが表示できることが確認できれば次のステップに進んでも良いでしょう。

次のステップ

今回は本当に子テーマを作成する部分のみ書かせて頂きました。
次回は実際に子テーマを活用してブログのレイアウトを変更したいと思います。
やること自体は以前書いた内容の予定ですが、子テーマでできるようにします。

Webサイトにソースコードを載せる方法(1)

どうもキーです。
今回はHTMLのタグを使ってWebサイトにソースコードを載せるときにレイアウトが崩れないようにしようと思います。
タグを使うのでWordPressでなくてもできますし、JavaScriptが使えなくても大丈夫です。
ただ、見た目もそれ相応なのでご了承を。実際にブログなどに載せたい場合は次回以降のほうが参考になると思います。

方法

以下のように入力しましょう。

<pre><code>
//ここにソースコードを入力
<code></pre>

この方法を使うと上のように灰色の枠で囲まれます。

注意点として、ソースコード中の特殊文字についてはエスケープが必要です。
例えば上記のコードをpre要素とcode要素で囲むときの中身は以下のように入力する必要があります。

&lt;pre&gt;&lt;code&gt;
 //ここにソースコードを入力
 &lt;code&gt;&lt;/pre&gt;

エスケープが必要な文字はいくつかありますが正直覚えてられないです。
なのでこういうものは既存の変換サイトさんを頼らせていただきましょう。
例えば以下です。

https://webtools.dounokouno.com/htmlescape/

また、WordPressブログなどであれば、タグをテキストモードで入力して、中身をビジュアルモードで入力するという手もあります。(筆者は今のところこちらで不便していないのでこの方法です。)

結果

Webサイトでソースコードが表示できる。
といってもキーワードに色などもついておらず読みやすくはないですね。
次回はシンタックスハイライト(色付け)についてやってみようと思います。

 

Google Analyticsで自分のアクセスを除外しよう

はじめに

Google Analyticsで自分のアクセスを除外する方法は調べてよく出るものが3つあります。

1.IPアドレスで除外
2.ログイン状態で除外
3.プラグインで除外

今回は2.ログイン状態で除外 で除外をしたいと思います。
理由としては以下です。

1.IPアドレスで除外
⇒スマホの除外と相性が悪い
3.プラグインで除外
⇒プラグインはページが重くなるもとなのでこの程度のことでいれたくない

結果2.ログイン状態で除外 が一番このブログでの要件を満たせるので2を使います。
駆け出しブログなので、駆け出し読者向けに簡単な手段にもしたかったというのもありますが。

手順

前回Google Analyticsのトラッキングコードを導入してもらったと思います。
今回はトラッキングコードの挿入場所付近を少し編集するだけです。
ファイルとしては同じく「テーマヘッダー(header.php)」を編集します。

<?php if ( ! is_user_logged_in() ): ?>
 トラッキングコード 
<?php endif; ?>

これだけです。

解説

せっかくの技術系のお話なので少し解説を。

<?php if ( ! is_user_logged_in() ): ?>

これは「<?php」の部分で「ここから先はphpで記載しますよ」ということを表します。「if ( ! is_user_logged_in() ):」は「ユーザーがログインしていなければ」という意味です。(「!」がnot、していない、を表します)

その後、ログインしていればトラッキングコードの部分の処理を実施し、

<?php endif; ?>

上記文でif文を閉じます。(ログインしていない場合の実行範囲を指定する)

結果

手順としてはたったこれだけなのでぜひやっておきましょう。
自分のアクセスがGoogle Analyticsにカウントされなくなるので勘違いして舞い上がるという悲しい事件を防げます。

Google Analyticsを導入しよう(WordPressブログのアクセス解析について)

どうも、キーです。
今回は表題の通り、アクセス解析のためにGoogle Analytics(Google アナリティクス)を導入します。
Google Analyticsとは何か知りたい場合は、ググってもらったほうが早いかもですが、簡単にいうと、以下のような感じです。

・Webサイトのアクセス解析をするためのもの
・サイトの閲覧ユーザ数、閲覧回数、滞在時間などを確認できる

実際には細かいレポートなども出せるらしいですが、そのあたりは必要になれば理解していこうと思います。
ただ、アクセス解析をまだ誰もいていないこのブログに導入することには2つのメリットがあったため、早めに導入しようと行動しました。

・最初の閲覧者からもれなくカウントできる
・すこしずつ閲覧数が増えればモチベになる

それでは以下、導入方法です。

導入方法

Google Analyticsの導入方法には主に以下の2種類があります。

1.WordPressテーマのヘッダを編集しての導入
2.プラグインでの導入

1のメリットは、不要なプラグインを導入せずに済むことです。
不要にプラグインを増やすとサイトが重くなるなどの懸念があります。

2のメリットは、プラグインならではのコンソールが見れたり、機能が利用できることです。
また、WordPressテーマのヘッダファイルのコードを編集するのが難しい、嫌という方もこちらでいいと思います。

本ブログは一応技術ブログですし、はじめからバンバンプラグインを増やしたくはないので、1の方法を紹介します。

2の方法についてはググってください。
自分で調べても出てこない場合は、「All in One SEO」とか「Google Analytics by Yoast」「Google Analytics by Monsterinsights」とかで調べれば、だいたい見つかると思います。

必要なもの

1.Googleアカウント
2.G-mailアドレス
3.Google Analyticsのアカウント

以上です。
1,2についてはすでに持っている人も多いかと思いますので省略します。
3については導入するときに作ります。

導入手順

1.Googleアカウントにログインします。

2.Google Analyticsのアカウントを作成します。

「Google Analytics」「Google アナリティクス」あたりでググってください。
公式のページにアクセスすると右上らへんに「ログイン」でしたり、「アカウントを作成」という画面がおそらくあります。
なかったらごめんなさい。探してください。

クリックして、画面の内容にしたがってアカウントを作成してください。
・アカウント名
・サイトのURL
などを入力します。

3.トラッキングコードの確認

アカウントができたら、トラッキングコードを確認します。(このあとコピーして使います。)

画面左下の「管理」から、「トラッキング情報」-「トラッキングコード」と進んでください。
「ウェブサイトのトラッキング」という項目の下に、

<script>~</script>

というコードがあるはずです。

4.コードの挿入

ここからはWordPress側での作業です。

4-1.「外観」-「テーマの編集」から、「テーマヘッダー(header.php)」を開いてください。

4-2.</head>タグを探しましょう。<head>でも</header>ないので注意です。

4-3.</head>の前の行に3で確認した<script>~</script>のコードを入れましょう。コピー&ペーストで大丈夫です。

4-4.ファイルの更新を忘れずに。

以上で、Google Analyticsの導入手順は完了です。

次回について

終わりと言いましたが、実はもう1つ設定しておいた方がいいものがあります。
Google Analyticsで自分のアクセスを除外する方法についてです。
手順自体は簡単なものを説明しますが、まず方法が色々とあるので、記事を分けたいと思います。

レイアウトの問題点については次々回にきっと。。。

WordPressブログのレイアウトを最低限整える方法まとめです。(Twenty Seventeen)

はじめに

※前置きが長くなってしまったので、面倒な人は「設定内容」の項目まで飛ばしてください。

どうも、キーです。
無事第2稿を投稿することができました。
今回はWordPressブログの導入初期の際、レイアウトを最低限見れるものにするための設定方法をご紹介したいと思います。

ちなみにここでの最低限は私主観なので「見苦しいことこの上ないのですが?」という方がいたらすみません。

Twenty Seventeen

WordPressを導入仕立てで、この言葉の意味がわかる人がどれだけいるでしょうか。もし分かる人は以下を読まなくても、自分で設定できてしまう人なんじゃないかと思います。ただ、その場合でも以下の内容で設定を手助けできると幸いと思います。

さて、Twenty Seventeenですが、これはWordPressに入っているデフォルトテーマの一つです。私の場合はこれも入っていましたが、入っていない方がいたらごめんなさい。おそらく導入時期の違いとかのアレです。

それはさておき、今から設定を説明するにあたって予めご理解頂きたいのは、以下の内容はすべて本ブログの設定=Twenty Seventeenの場合を想定しております。
他のテーマでもそれほど変わらないとは思いますが、違うこともあるということはご理解いただければと思います。

前置きが長くなってしまったので、説明は可能な限り簡潔にします。

設定内容

問題点

まずデフォルトのレイアウトの問題は以下だと思います。

それでは、設定を変更していきます。

 1.「アクセス」を消す

まず、一番左のメニューから「外観」-「ウィジェット」を選びましょう。
上記のような編集画面が表示されたら、あとはドラッグアンドドロップでウィジェットを出し入れするだけです。(ちなみに右側の空間はサイドバーと言います。)
ウィジェットの削除は「ブログサイドバー」内のウィジェットのプルダウンメニュー(下マーク)から行うか、左のウィジェット一覧のあたりにドロップしてやると行えます。

今回はオレンジの枠のウィジェットなどを追加しました。

2.トップメニューの編集

一番左の黒いメニューで「外観」-「カスタマイズ」を選ぶと下のような画面になります。

ここにはテーマ名も表示されます。(他にも見れる画面はたくさんありますが・・・)
「メニュー」-「トップメニュー」を選べばごちゃごちゃ編集できますので、自分の好きなように改造してしまってください。
ちなみに私はとりあえずブログトップに飛べるボタンだけ作っておきたかったので、「カスタムリンク」にトップページのURLを入れた「TOP」の項目を作成しました。

3.投稿内容の表示幅を広く

このTwenty Seventeenというテーマは基本的にはシンプルでいいのですが、いかんせん投稿内容を表示する幅が狭いです。広げてやりましょう。
ただ、ここからは少しだけややこしいです。

「外観」-「テーマの編集」を選びましょう。
「スタイルシート (style.css)」というものが出てくると思います。

ここで、検索をします。
「Ctrl+f」を押して、「primary」で検索しましょう。

/* Layout */
.wrap {   max-width: 1000px;
padding-left: 3em;
padding-right: 3em;
} .has-sidebar:not(.error404) #primary { float: left; width: 58%; } .has-sidebar #secondary { float: right; padding-top: 0; width: 36%; }

なんかこんな感じの記述が見つかればOKです。
.wrapのmax-widthでページの表示部分全体の幅を広くしたり狭くしたりできます。
.has-sidebar:not(.error404) #primary は投稿の部分です。
widthで表示部分に対する%を指定しましょう。
.has-sidebar #secondaryはサイドバーです。こちらは投稿部分も広げたらその分狭く、狭めたらその分広くしましょう。
widthのあまりの6%は、投稿とサイドバーの間の広さに貼るはずですが、基本的にはそのままが無難と思います。

ちなみに私はmax-width:1100px,width:68%,36%にしています。

4.結果

以上で編集は終わりですが、ここでどの程度変化があったか見てみましょう。

まさに匠の技ですね。
なんということでしょう。

おまけ.「続きを読む」表示にする

トップページに最近の投稿を表示すると、最近の投稿の内容が全て表示されることに違和感を覚えることになる方もいると思います。
よくある「続きを読む」画面を表示させたい方。
そんな方には以下のおまじないです。

「外観」-「テーマ編集」を選び、右側のテンプレート一覧から「メインインデックスのテンプレート (index.php)」を選びましょう。
get_template_partで検索してください。2行ほど見つかりますが、ここでは、

get_template_part( 'template-parts/post/content', get_post_format() );

となっている部分を、

get_template_part( 'template-parts/post/content', 'excerpt' );

に変更してください。それだけであなたの望みは叶います。
このあたりの厳密な意味とかも筆者で勉強して記事にしたいですね。

おわりに

色々一気にまとめすぎました。
可能な限り小分けにするようにします。
書く方も読む方も大変なので・・・

この記事も問題点だらけですので、次かその次の記事あたりはこの記事の修正が題材になりそうです。。。

はじまりは自己紹介からというものです

Hello World!!

お初にお目にかかります。キーと申します。
社会人なりたて(といってもはや1年経ってしまいましたが)、
つまりはかけだしのIT関連技術者をやっております。

本ブログは私の得た知識を他の方にも知ってほしい、他の人と趣味を共有したいという思いを持ってはじめました。
もちろん趣味全開でいきますので、内容はITに限りません。
これから、週一、月一、、、いや年一、、、でも更新をしていきたいと思います。

なお、私はどちらかと言うとニワカ体質ですので、
その道でガッツリやっている方々にはもの足りない記事を書いてしまうかもしれないです。
このブログで得た情報は所詮ネット上の一情報として、ソースや他の情報源の確認など、ネットリテラシーを鍛えるチャンス程度の質だと思ってください。
所詮筆者も人間。頑張りはしますが、そこまで深い知見を持っているわけではないので・・・

まあ、人生で一番大事なことは楽しく生きることと思いますので、楽しく書いていきます。
皆様も楽しく読んでいただけ、知識を深めたり、生きる楽しみの一つとしていただけますようそこそこ頑張ります。

このブログについて

「このブログについて」と言いながら大まかなことはほぼ上に書いてしまいました。
そのためここでは、特筆すべき事項はないです。

強いて言うのであれば、本記事の執筆段階でブログのレイアウトが全く完成していないということでしょうか。
ブログを書くのは初めてなのであしからず。。。
更にいうと「そういう部分」も今後記事にして改良していければと思います。

ですので、本ブログのTwitterアカウントの設立など、
「それIT技術者を名乗る上でどうなの?先やっとけよ!」
なレベルのことから、このブログは取り扱っていきます。

真のIT技術者は、ITオンチでもITを理解できる記事を書くのです。
決して私自身がITオンチのわけではありませんよ。ええ。決して。

このページについて

あと、このページですが、思いつきで書いたので後に改変が入る可能性があります。

というかこのページ以外もです。

人間はなんとなくで生きている生き物というのが私の持論です。
全ては私の自由です。気のままです。諦めてください。

まあ、私はめんどくさがりなので、徐々に書き進めていきたいと思います。

最後に

はじめの記事から文長くてすみません。張り切り過ぎました。