このブログのレイアウトをWordPressで実現した方法J-POPコード進行解析ブログ邦楽最新曲のコード譜・感想や、アーティスト別のコード進行の傾向をまとめた記事が中心。音楽理論、コード理論についての記事も随時更新。まとめはじめに当ブログ「J-POPコード進行解析ブログ」はWordPressにより作成しておりますが、各コンテンツの見た目や機能をどのように実現しているかについて説明していきます。いっても、ブログ構築に関しては、当方もほぼ初心者ですので、専門的な内容はあまり書けません。プラグインについての話題もありますが、「この部分はこのプラグインで行いました」程度の説明にとどめ、詳しい操作方法などはなるべく割愛させていただく方針で行います(ただし、注意すべき点がある場合は、図解で説明します)。WordPressを使いはじめたばかりの方が僕のブログを見て、「この機能どうやってるんだろう?」などと思った時の参考になればと思います。本記事は万が一ブログのレイアウトを大幅に変更した場合、意味がなくなりますので、その際は内容を変更するか削除する可能性があります。当ブログはレンタルサーバ(エックスサーバ)にWordPressをインストールして作成しております(2016年8月現在のバージョンは4.5.3)。使用テーマはSimplicity2(編集用としてはSimplicity2の子テーマ)となっています。2016年8月時点で必要とした費用は8000円ほどで、その9割がレンタルサーバの契約料(初期費用+3か月分)、残りがドメイン代です。WordPressの初期設定やテーマ、プラグインのインストール方法等は様々なページで紹介されているため割愛し、僕のブログで表示されているもののうち、デフォルトのSimplicity2のレイアウトにはないものについて、その設定方法を順に記していきます。記事の見出し当ブログでは見出しタグのうち、h2タグに使われる見出しをカスタマイズしています。見出しとは↓のようなものの事を言います。見出しのカスタマイズは、WordPressのメニューから、外観→テーマの編集で、style.cssを編集しました。ソースコードは以下の通りです。22pt;}このように編集して保存してから、記事を投稿するときにh2タグを使用すると、上図のような見出しを表示させることができます。注意点としては、Simplicity2のファイルを直接編集するのはあまり良いことではなく、その子テーマを編集した方がいいです。親テーマを編集すると、テーマがアップロードされたときに、せっかく編集した内容が消えてしまうからです。見出しに限らず、テーマをカスタマイズする場合は全て子テーマのファイルに対して編集を加えるようにしましょう。子テーマの入手方法や使用方法などについては山のように参考サイトがあるので割愛します。図のような目次は、記事を投稿する毎に自分でわざわざ作っているわけではありません。Plus」というプラグインをインストールし有効化すれば、あとはhタグの使い方さえ間違えなければ、自動的に表示されるようになります。Posts」というプラグインを同時に有効にしている場合、何も考えずに設定してしまうと、下の図のようにこの文言まで目次に含まれてしまいます。Plus」はhタグに含まれる文言を目次の対象とみなす機能を持っているためです。Posts」という小分類が含まれているように見えるので、とても不自然です。Plusを開き、下の方の「上級者向け」の「表示」のリンクをクリックします。Postsという文言が含まれている場合は目次に設定しないようにできます。Posts側の設定を変更することで解決することもできます。Postsの文言が見出しではなくなるので、目次にも載らなくなります。Postsは有効にしていません。記事の下にある「関連記事」はプラグインによるものではなく、テーマにデフォルトで設定されていたものになります。サイトマップサイトマップについても、もちろん自力で作成しているわけではありません。Sitemapというプラグインを使用しています。–>」とだけ書きます。実際にやる時は<、>は半角にしてください(この記事で半角にしてしまうと正しく表示できないのであえて全角にしてるだけです)。あとにかかれている数字を覚えておいてください(図の赤丸で囲った部分)。Sitemapでプラグインの設定画面が開きます。上の方に「サイトマップを表示する記事」の欄がありますので、先ほど覚えておいた数字を入れます。あとは変更を保存すれば出来上がりです。「スタイルの変更」の箇所をいろいろ変えてみると、見た目が大幅に変わるので、好きなものを選ぶといいでしょう。メッセージフォームメッセージフォームも自力で作る必要がありません。15年ほど前に自分のホームページ(まだブログなど存在しない頃)を作った際はHTMLやJavascriptなどを勉強して一生懸命作った覚えがありますが、プラグインがあれば数分でできてしまいました。なんか複雑な気分ですね...。7」を使用しています。インストールして有効化すると、WordPressのメニューで「お問い合わせ」→「コンタクトフォーム」が使えるようになります。あとは、「メール」の欄で自分のメアドを入力するなどした後、「このショートコードをコピーして、投稿、固定ページ、またはテキストウィジェットの内容にペーストしてください:」の下に書いてあるコードを、固定ページの記事に張り付ければ、メールフォームがあっという間にでき上がります。出来上がったら実際に送信して、ちゃんとメールが届くか試してみましょう。カテゴリの順番を変更サイドバーのカテゴリを、投稿した順番ではなく、自分の好きな順番に並べることはできないのでしょうか?これもプラグインを使えば簡単にできます。Order」というプラグインをインストールすると、メニューの「投稿」の中に、「タクソノミーオーダー」という項目が追加されます。それを選択すると、下図のような画面が表示され、ドラッグ&ドロップでカテゴリの表示順を自由に変えることができます。編集後は保存するのを忘れないようにしましょう。記事内にソースコード当ブログでは、エクセルのVBAを載せている記事があります。当記事でも上の方にスタイルシートのソースを載せています。Evolved」というプラグインを使用しました。当該プラグインをインストールし、有効化した後は、例えばCSSのソースコードを載せたければ、記事の投稿時にソースコードを、[CSS]と[/CSS]で囲むだけです。([]は全角で記していますが、実際には半角の[]を使用してください)まとめ以上となります。h2見出しのカスタマイズ以外は、ほとんどプラグインをインストールするだけで実現できていますね(見出しを装飾するプラグインもあるらしいです。僕は使ってませんが...)。各プラグインについての詳細を知りたい場合は、プラグイン名で検索すれば、使い方を紹介するサイトがいっぱい出てくるかと思います。本記事は専門的なことは何も書いておりませんが、「WordPressを使い始めたばかりの初心者でも、ほとんど難しい知識を使わずにここまでの事ができる」ということだけでも知っていただけたのなら、当方としてもこの記事を書いた甲斐があります。J-POPコード進行解析ブログ。