ついでにいろいろなサイトを見ると設定を確認しておいた方がよさそうな箇所があったので確認を。SettingのEmailsから以下の箇所を確認します。チェックがついていれば大丈夫です。ついていなければつけてください。※設定の意味を理解して自己責任で外される場合は外して大丈夫です。終わりに最近のWebサイトは登録が簡単でいいですね。私がGitHubへ登録した目的はGistでソースコードを表示するためだったので、次回はそれをやると思います。(プログラマの必須要件!?)どうもキーです。今回はGitHubについて説明していきます。本記事はGitHubをある程度知っている、利用したことがある人が読んでも、得られるものは(多分)ないです。はじまりのまとめまずは先にまとめから載せます。このまとめに行き着くように解説していきます。GitHubとは、「GitHub社が提供している」「Gitバージョン管理システムを利用する」「Webサービスである」。GitHubはGitを使った「ソースコードのバージョン管理をする」ために利用する。「ソースコードのバージョン管理をする」と、「問題が発生した時の切り戻し」や、「複数人でのソースコード編集によるバッティング回避」に利用できる。GitHubは特に「オープンソースソフトウェアをGitの仕組みを利用して管理する」ということに対して強い。GitHubとはWikipedia以下、引用です。(引用と分かりづらかったので明記しときます。今後引用のスタイルも編集しようと思いました。)GitHub(ギットハブ)はソフトウェア開発プロジェクトのための共有ウェブサービスであり、Gitバージョン管理システムを使用する。RailsおよびErlangで記述されており、GitHub社によって保守されている。Wikipediaさて、そもそもGitHubを知らない人にはこれを読んでもピンと来ない人も多いでしょう。要点を説明すると以下のようなものです。GitHub社が提供しているGitバージョン管理システムを利用するWebサービスである前提としてGitHubとは上記のものとして認識しておいてください。来ないと思うのでまずは何のために利用するのか説明します。何のために使うのかGitバージョン管理システムを利用するWebサービスということですが、結局何をするために使うのでしょうか。基本的な答えは、「ソースコードのバージョン管理をする」です。「ソースコードのバージョン管理をする」とはどういうことでしょうか。WordPressのレイアウトを変更するためにstyle.cssを変更するとします。そのときに、変更前のファイルと変更後のファイルの内容、また、その変更点が履歴としてあとからでも確認できるようにするということです。何が良いのかファイルの変更の履歴が確認できるのが一体なんだというのでしょうか。ある程度プログラムなどを経験するとその重要性に気がつくはずです。cssファイルでも編集を誤ればWebサイトのレイアウトが大きく崩れてしまうと思います。一般的なプログラムでもバグが発生してしまった場合は、バグの改修や発生バージョンの調査が必要になります。そのようなときに、いつどのタイミングのプログラム変更により問題が発生したかなどを確認するために、変更の履歴が必要になるのです。え?それなら自分で常に変更前と後のファイルを保持しておけばいい?不可能ではないですが現実的ではないですね。それを楽にするためにシステムと言うものがあるのですから。一部の方はフォルダに以下のようなファイルが入っているのを見たことがあるかもしれません。(例はstyle.cssの場合)style.cssstyel01.css改修前_style.css改修後_style.css新_style.cssstyle.css.bakあるあるですが、何がなんだかわからないですね。質が悪いのは、「この中のどれか一つが最新とは限らない」ということです。「改修後_style.css」と「新_style.css」には、「style.css」から変更した「全く別の内容」が入っている可能性があるのです。これは特に、複数人で開発をしているときに起きやすくなります。このような複数人による編集でのバッティングを防ぐために、チームで開発をするとなるとバージョン管理システムはほぼ必須のツールとなるのです。何ができるのかGitHubはソースコードのバージョン管理に使うと書きましたが、結局何ができるのでしょうか?実はここまで述べてきた「バージョン管理をする」機能はGitHubのサービスではなくGitというシステムでできることなのです。(Git≠GitHub)ではGitHubはそんなGitを利用して何を提供しているか。公開されているソースコードに対して、世界中のだれもが改修を行えるということです。GitHubは「オープンソースソフトウェアをGitの仕組みを利用して管理するサービス」という面がとても強いです。(もちろん他の人にソースコードを公開しないようにもできますし、サービスの利用方法によっては法人用として使うこともできます。)そして、数多くのオープンソースのプログラムがGitHubで管理されています。オープンソースのプログラムを読むことはプログラマとしてステップアップをするための良い方法ですし、それどころか自分からライブラリを公開したり、既存のライブラリの改修に携わることができるのです。新しい世界への扉ですね☆まとめというわけで、「GitHubとはなにか」について述べました。以下は本記事のまとめです。(はじめに書いたもの)GitHubとは、「GitHub社が提供している」「Gitバージョン管理システムを利用する」「Webサービスである」。GitHubはGitを使った「ソースコードのバージョン管理をする」ために利用する。「ソースコードのバージョン管理をする」と、「問題が発生した時の切り戻し」や、「複数人でのソースコード編集によるバッティング回避」に利用できる。GitHubは特に「オープンソースソフトウェアをGitの仕組みを利用して管理する」ということに対して強い。GitHubはプログラマをやる上では避けては通れないサービスと思いますので、ぜひ登録しましょう。言いつつ私も最近まで(存在は知っていましたが)登録していなかったので、次回の記事では登録方法について書きたいと思っています!かんそー:まとめをはじめと終わりに書くのは冗長な気がしてかっこよくないですね。結局必要なことしか書いてるつもりはないので目次をつけてはじめのまとめはなくそうと思っています。(長くても読んでもらうor飛んでもらう)ただ目次を実装するにはもう少し時間がかかりそうですね。ちなみにGitHub、もうすぐ日本語対応のWebサイトが公開されるようですね。blog(羅針盤))ただ正直プログラマをやる上で日本のみの知識でやるのはとてもキツいので、英語版の利用をしたほうがいいと考えています。2018年2月3日WordPressの子テーマは必ず利用しよう(2)子テーマの簡単な使用方法どうも、キーです。前回(WordPressの子テーマは必ず利用しよう)は、WordPressにおける「子テーマ」の作り方を説明しました。今回は、「子テーマ」の簡単な使用方法を説明したいと思います。子テーマのファイル「子テーマ」を利用するためには前提知識が必要です。いっても前回説明した「親テーマ」の更新の影響を受けなくする。達成するだけであれば以下の点を覚えていれば十分です。「親テーマ」「子テーマ」に同じファイル名のファイルがあった場合、「子テーマ」のファイルが使用される。「cssファイル」と「functions.php」は例外。「cssファイル」は「親テーマ」→「子テーマ」の順に読み込まれる。※「functions.php」については読み込まれ方が複雑であるのと、今回その知識は必要ないので割愛。必要なときに書きます。header.php親テーマには通常「header.php」というファイルがあると思います。Analyticsを導入しよう(WordPressブログのアクセス解析について))でも編集しました。この編集を子テーマで行うようにし、親テーマの更新の影響を受けないようにしたいと思います。「親テーマ」の「header.php」を、FTPソフトなどでダウンロードするか内容をコピーしてテキストエディタに貼り付ける。※文字コードはUTF-8にする。改行コードは自分が利用しているOSのものでOK(WindowsならCR+LF、現代のmacOS、LinuxならLF)。Analyticsを導入しよう(WordPressブログのアクセス解析について)の記事のとおり、コピーした「header.php」を編集する。ファイルを「header.php」の名前で保存する。FTPソフトなどを利用し、子テーマのパスに作成した「header.php」をアップする。やっていることはコピーを作って編集するだけですね。style.css次は子テーマのスタイルシートについてです。スタイルシート(cssファイル)については前述しましたが、「親テーマ」→「子テーマ」の順に読み込まれます。スタイルシートの特徴として、同じ項目に対する記述は、後に書いたもので上書きされます。上書きしたい項目文のみ記載すれば良いわけです。スタイルシートの編集内容についてはこちら(WordPressブログのレイアウトを最低限整える方法まとめです。Seventeen))を例とさせてもらいます。上記記事で「style.css」の編集についてごちゃごちゃと書いておりますが、子テーマを用いて同じようにする場合は以下を前回(WordPressの子テーマは必ず利用しよう)作成した子テーマの「style.css」へ追記してください。26%;}}これだけでOKです。ページ全体の表示の幅、記事の幅、サイドバーの幅を親テーマの設定から上書きしています。48em)などはページ内の要素を特定するための記述だったりしますが、気になる方はcssの書き方を調べてください。機会があれば記事にするかもですが。子テーマを使って以下の2つの記事の内容と同じ編集ができる。WordPressブログのレイアウトを最低限整える方法まとめです。Analyticsを導入しよう(WordPressブログのアクセス解析について)※子テーマを更新してもレイアウトなどが反映されない場合はまず以下の「レイアウトが反映されない場合」をチェックしてください。それでもわからなければこの記事ではどうしようもないですが。真っ先に思い当たる可能性は以下の2つです。これらを試して違った場合は他のブログも含めもっと広い範囲で調査したほうが良いかもしれません。記述が間違っていないか確認する。当然ですが、これまでの記述のどこかで誤りがあればレイアウトが反映されないということもありえます。テーマが違う場合はすべてがそのまま使えるとは限らないです。テーマ名で検索しましょう。ブラウザのキャッシュをクリアする。レイアウトを確認しているブラウザのキャッシュをクリアしましょう。キャッシュ関連のプラグインを利用していなくてもまず試しましょう。私はプラグインないから大丈夫なはずとスルーしていたら見事にハマりました。勘の良い方やもともと知識のある方は気づいているかもしれませんが、この方法にも問題点があります(かなり簡単にできるのはとても良い点ですが)。問題に対応するには少し勉強が必要そうですので今しばらくはこの方法で行きたいと思います。筆者が問題に対応できるようになったら記事にしたいと思います。2018年1月30日WordPressの子テーマは必ず利用しよう失敗は成功のもととすべしどうも、キーです。今回はWordPressの子テーマについて書きたいとおもいます。前回から突然話題が変わったかと言いますと、今回ある失敗をしてしまったために急遽対処が必要となり、同じ目に合う方を少しでも少なくしたいと思い書かせていただきます。子テーマの作り方だけ知りたい方は「子テーマの作り方」まで飛ばしてください。簡単に言いますとブログのレイアウト設定をすべてリセットしてしまいました。Analyticsのトラッキングコードなどもすべて削除されてしまいました。失敗の原因WordPressのテーマには「子テーマ」というものがあるのですが、その存在を知らず、「親テーマ」を直接編集してしまっていたことです。WordPressの「親テーマ」はたびたび更新されるのですが、更新を適用すると新しいバージョンのファイルで既存のファイルをすべて置き換えるというような動きをするため、それまで「親テーマ」に行っていた変更が全てリセットされます。対策としては何度も記載していますが、「子テーマ」を編集してブログのレイアウトなどを変更しましょう。そもそも「子テーマ」とは何度も「親テーマ」「子テーマ」と書いておりますが、そもそもどういうものでしょうか。以下、簡単な解説です。「親テーマ」...大元となるテーマです。WordPressをインストールしたときに付属しているテーマなどはこちらにあたります。Seventeenです)「親テーマ」のテーマファイルを編集してもテーマの更新を行うとすべて元に戻ってしまいます。「子テーマ」...親テーマの設定を引き継ぎつつ、独自の設定をするために作成するテーマです。基本的には自分で作ることになります。「子テーマ」のテーマファイルを編集した場合は「親テーマ」のテーマを更新しても「子テーマ」の編集内容が残るため、テーマを再度は編集し直す必要がなくなります。子テーマの作り方ここからが本題です。基本的には公式のリファレンスを参照すれば良いです。子テーマ必要なファイル子テーマを作成するときに最低限作成するファイルです。ファイル作成時の注意ですが、ファイルの文字コードはUTF-8で作成しておいたほうが無難です(文字化けを防ぐため)。今後他のファイルを作成するときのためにもUTF-8で作成することを覚えたほうがよいです。style.cssfunctions.phpstyle.css以下のように記述します。各項目を自分が利用している親テーマに合わせて編集してください。Name」と「Template」です。Name」は子テーマの名前を入力してください。Child」が利用されます。「Template」は親テーマの「ディレクトリ名」です。子テーマのファイルをアップする場所(後の手順)により変わりますが、こちらも一般的には例の形式で良いと思います。Childテーマを作成する場合の例です。functions.php最低限必要なコードは以下です。親テーマのcssを子テーマで利用するための記述です。テーマの種類等によっては更に作成した子テーマのcssも読み込む記述をしなければならない場合はありますが、そのような特殊な場合(やってできなかった場合)は公式のリファレンスでしたり、他の幾つかのサイトで調べたほうが良いでしょう。忘れないよう気をつけましょう。<?phpがあるなら、最後?>で閉じなければと感じるかもしれませんが、公式のリファレンスにもそのような記載はないので、書かなくて大丈夫です。大丈夫な理由があるとは思いますが、今回は重要でないので割愛します。以上で子テーマの作成に最低限必要なファイルの作成は完了です。子テーマのアップロードWordPressの機能を利用してアップロードするのが一番楽であるため、利用します。上記で作成した2つのファイルを「twentyseventeen-child」といった「親テーマ-child」という名前のフォルダに入れてください。親テーマ名は「ディレクトリ名」になります。WordPressの機能を使ってアップロードする場合は小文字の例のような形になると思います。フォルダができたらWindowsの機能を使ってzipファイル形式に圧縮します。フォルダを右クリックし、「送る」→「圧縮(zip形式)フォルダー」を選んでください。フォルダのある場所に「twentyseventeen-child.zip」というようなファイルが出来ればOKです。WordPressのダッシュボードから「外観」→「テーマ」を選び「新規追加」→「テーマのアップロード」の順にボタンを押します。「ファイルを選択」メニューで先程作成したzipファイルを選び「今すぐインストール」を押します。インストールが成功すればOKです。子テーマのインストールが完了したら有効化します。インストール完了が表示されている画面、あるいは「外観」→「テーマ」に表示されるテーマアイコンの右下の「有効化」をクリックします。ブログのプレビューを確認します。現時点では親テーマから何も変更をしていないはずなので、親テーマのレイアウトがそのまま表示されればOKです(トップ画像など一部の設定は初期状態になってしまっているかもしれません)。この段階ではページが表示できることが確認できれば次のステップに進んでも良いでしょう。次のステップ今回は本当に子テーマを作成する部分のみ書かせて頂きました。次回は実際に子テーマを活用してブログのレイアウトを変更したいと思います。やること自体は以前書いた内容の予定ですが、子テーマでできるようにします。2018年1月30日Webサイトにソースコードを載せる方法(1)どうもキーです。今回はHTMLのタグを使ってWebサイトにソースコードを載せるときにレイアウトが崩れないようにしようと思います。タグを使うのでWordPressでなくてもできますし、JavaScriptが使えなくても大丈夫です。見た目もそれ相応なのでご了承を。実際にブログなどに載せたい場合は次回以降のほうが参考になると思います。以下のように入力しましょう。<pre><code>//ここにソースコードを入力<code></pre>この方法を使うと上のように灰色の枠で囲まれます。注意点として、ソースコード中の特殊文字についてはエスケープが必要です。上記のコードをpre要素とcode要素で囲むときの中身は以下のように入力する必要があります。&lt;code&gt;&lt;/pre&gt;エスケープが必要な文字はいくつかありますが正直覚えてられないです。いうものは既存の変換サイトさんを頼らせていただきましょう。https://webtools.dounokouno.com/htmlescape/また、WordPressブログなどであれば、タグをテキストモードで入力して、中身をビジュアルモードで入力するという手もあります。(筆者は今のところこちらで不便していないのでこの方法です。)結果Webサイトでソースコードが表示できる。いってもキーワードに色などもついておらず読みやすくはないですね。次回はシンタックスハイライト(色付け)についてやってみようと思います。Analyticsで自分のアクセスを除外する方法は調べてよく出るものが3つあります。除外をしたいと思います。理由としては以下です。このブログでの要件を満たせるので2を使います。駆け出しブログなので、駆け出し読者向けに簡単な手段にもしたかったというのもありますが。Analyticsのトラッキングコードを導入してもらったと思います。今回はトラッキングコードの挿入場所付近を少し編集するだけです。ファイルとしては同じく「テーマヘッダー(header.php)」を編集します。解説せっかくの技術系のお話なので少し解説を。?>これは「<?php」の部分で「ここから先はphpで記載しますよ」ということを表します。):」は「ユーザーがログインしていなければ」という意味です。?>上記文でif文を閉じます。手順としてはたったこれだけなのでぜひやっておきましょう。Analyticsにカウントされなくなるので勘違いして舞い上がるという悲しい事件を防げます。Analyticsを導入しよう(WordPressブログのアクセス解析について)どうも、キーです。アナリティクス)を導入します。Analyticsとは何か知りたい場合は、ググってもらったほうが早いかもですが、簡単にいうと、以下のような感じです。確認できる実際には細かいレポートなども出せるらしいですが、そのあたりは必要になれば理解していこうと思います。アクセス解析をまだ誰もいていないこのブログに導入することには2つのメリットがあったため、早めに導入しようと行動しました。・最初の閲覧者からもれなくカウントできる・すこしずつ閲覧数が増えればモチベになるそれでは以下、導入方法です。Analyticsの導入方法には主に以下の2種類があります。1.WordPressテーマのヘッダを編集しての導入2.プラグインでの導入1のメリットは、不要なプラグインを導入せずに済むことです。不要にプラグインを増やすとサイトが重くなるなどの懸念があります。2のメリットは、プラグインならではのコンソールが見れたり、機能が利用できることです。WordPressテーマのヘッダファイルのコードを編集するのが難しい、嫌という方もこちらでいいと思います。本ブログは一応技術ブログですし、はじめからバンバンプラグインを増やしたくはないので、1の方法を紹介します。2の方法についてはググってください。Monsterinsights」とかで調べれば、だいたい見つかると思います。Analyticsのアカウント以上です。1,2についてはすでに持っている人も多いかと思いますので省略します。3については導入するときに作ります。導入手順1.Googleアカウントにログインします。Analyticsのアカウントを作成します。アナリティクス」あたりでググってください。公式のページにアクセスすると右上らへんに「ログイン」でしたり、「アカウントを作成」という画面がおそらくあります。なかったらごめんなさい。クリックして、画面の内容にしたがってアカウントを作成してください。・サイトのURLなどを入力します。3.トラッキングコードの確認アカウントができたら、トラッキングコードを確認します。(このあとコピーして使います。)画面左下の「管理」から、「トラッキング情報」-「トラッキングコード」と進んでください。「ウェブサイトのトラッキング」という項目の下に、<script>~</script>というコードがあるはずです。4.コードの挿入ここからはWordPress側での作業です。4-1.「外観」-「テーマの編集」から、「テーマヘッダー(header.php)」を開いてください。4-2.</head>タグを探しましょう。<head>でも</header>ないので注意です。4-3.</head>の前の行に3で確認した<script>~</script>のコードを入れましょう。コピー&ペーストで大丈夫です。4-4.ファイルの更新を忘れずに。Analyticsの導入手順は完了です。次回について終わりと言いましたが、実はもう1つ設定しておいた方がいいものがあります。Analyticsで自分のアクセスを除外する方法についてです。手順自体は簡単なものを説明しますが、まず方法が色々とあるので、記事を分けたいと思います。レイアウトの問題点については次々回にきっと。2017年10月9日WordPressブログのレイアウトを最低限整える方法まとめです。Seventeen)はじめに※前置きが長くなってしまったので、面倒な人は「設定内容」の項目まで飛ばしてください。無事第2稿を投稿することができました。今回はWordPressブログの導入初期の際、レイアウトを最低限見れるものにするための設定方法をご紹介したいと思います。ちなみにここでの最低限は私主観なので「見苦しいことこの上ないのですが?」という方がいたらすみません。SeventeenWordPressを導入仕立てで、この言葉の意味がわかる人がどれだけいるでしょうか。分かる人は以下を読まなくても、自分で設定できてしまう人なんじゃないかと思います。その場合でも以下の内容で設定を手助けできると幸いと思います。Seventeenですが、これはWordPressに入っているデフォルトテーマの一つです。私の場合はこれも入っていましたが、入っていない方がいたらごめんなさい。導入時期の違いとかのアレです。Seventeenの場合を想定しております。他のテーマでもそれほど変わらないとは思いますが、違うこともあるということはご理解いただければと思います。デフォルトのレイアウトの問題は以下だと思います。それでは、設定を変更していきます。1.「アクセス」を消すまず、一番左のメニューから「外観」-「ウィジェット」を選びましょう。上記のような編集画面が表示されたら、あとはドラッグアンドドロップでウィジェットを出し入れするだけです。(ちなみに右側の空間はサイドバーと言います。)ウィジェットの削除は「ブログサイドバー」内のウィジェットのプルダウンメニュー(下マーク)から行うか、左のウィジェット一覧のあたりにドロップしてやると行えます。今回はオレンジの枠のウィジェットなどを追加しました。左の黒いメニューで「外観」-「カスタマイズ」を選ぶと下のような画面になります。ここにはテーマ名も表示されます。(他にも見れる画面はたくさんありますが・・・)「メニュー」-「トップメニュー」を選べばごちゃごちゃ編集できますので、自分の好きなように改造してしまってください。ちなみに私はとりあえずブログトップに飛べるボタンだけ作っておきたかったので、「カスタムリンク」にトップページのURLを入れた「TOP」の項目を作成しました。Seventeenというテーマは基本的にはシンプルでいいのですが、いかんせん投稿内容を表示する幅が狭いです。ここからは少しだけややこしいです。「外観」-「テーマの編集」を選びましょう。(style.css)」というものが出てくると思います。ここで、検索をします。「Ctrl+f」を押して、「primary」で検索しましょう。}なんかこんな感じの記述が見つかればOKです。.wrapのmax-widthでページの表示部分全体の幅を広くしたり狭くしたりできます。widthで表示部分に対する%を指定しましょう。#secondaryはサイドバーです。こちらは投稿部分も広げたらその分狭く、狭めたらその分広くしましょう。widthのあまりの6%は、投稿とサイドバーの間の広さに貼るはずですが、基本的にはそのままが無難と思います。ちなみに私はmax-width:1100px,width:68%,36%にしています。以上で編集は終わりですが、ここでどの程度変化があったか見てみましょう。なんということでしょう。おまけ.「続きを読む」表示にするトップページに最近の投稿を表示すると、最近の投稿の内容が全て表示されることに違和感を覚えることになる方もいると思います。ある「続きを読む」画面を表示させたい方。そんな方には以下のおまじないです。(index.php)」を選びましょう。get_template_partで検索してください。);に変更してください。それだけであなたの望みは叶います。このあたりの厳密な意味とかも筆者で勉強して記事にしたいですね。おわりに色々一気にまとめすぎました。可能な限り小分けにするようにします。書く方も読む方も大変なので・・・この記事も問題点だらけですので、次かその次の記事あたりはこの記事の修正が題材になりそうです。World!!お初にお目にかかります。社会人なりたて(といってもはや1年経ってしまいましたが)、つまりはかけだしのIT関連技術者をやっております。本ブログは私の得た知識を他の方にも知ってほしい、他の人と趣味を共有したいという思いを持ってはじめました。趣味全開でいきますので、内容はITに限りません。いや年一、、、でも更新をしていきたいと思います。私はどちらかと言うとニワカ体質ですので、その道でガッツリやっている方々にはもの足りない記事を書いてしまうかもしれないです。このブログで得た情報は所詮ネット上の一情報として、ソースや他の情報源の確認など、ネットリテラシーを鍛えるチャンス程度の質だと思ってください。頑張りはしますが、そこまで深い知見を持っているわけではないので・・・まあ、人生で一番大事なことは楽しく生きることと思いますので、楽しく書いていきます。皆様も楽しく読んでいただけ、知識を深めたり、生きる楽しみの一つとしていただけますようそこそこ頑張ります。このブログについて「このブログについて」と言いながら大まかなことはほぼ上に書いてしまいました。そのためここでは、特筆すべき事項はないです。言うのであれば、本記事の執筆段階でブログのレイアウトが全く完成していないということでしょうか。ブログを書くのは初めてなのであしからず。いうと「そういう部分」も今後記事にして改良していければと思います。「それIT技術者を名乗る上でどうなの?先やっとけよ!」なレベルのことから、このブログは取り扱っていきます。真のIT技術者は、ITオンチでもITを理解できる記事を書くのです。私自身がITオンチのわけではありませんよ。