会社辞めてからようやく時間ができたので、ずっとやりたかったブログのリニューアル作業を行いました。

ネット上に膨大にちらばるブログの中からこのブログを見に来てもらっているんだから、出発前にもっと見やすく、操作性の良いブログにしたいなぁとずっと思ってたんですよね。

 

旅のブログの始め方[ブログ運営No.1]
世界一周する人であれば、一生に一度しかないような冒険をする訳ですから、SNS等何らかの形で情報発信したくもなります。 手っ取...

↑の記事で書いたとおり、いろいろ自由にカスタマイズしたかったのでこのブログはWordPressでつくっています。

僕はエンジニアやWebデザイナーでもないので、テーマを自分でつくったり、ここまでカスタマイズするのにそれはもう苦労しました。

直近でやったカスタマイズ作業もいろいろ調べながら2日間くらいかけてやりましたよ。

Wi-Fiが強力な喫茶ルノアールで普通のアイスコーヒーだけ頼んでずっと居座ってました。

一杯のコーヒーを飲み干した後は一切追加注文せず、何回もお茶を運んできてもらいました。

ああ、あいつ昨日もいなかったっけ?とか思われてたと思います。

いや、それは自意識過剰か。

 

ということで、自分がWordPressでブログをつくってからいろいろカスタマイズするまでの内容を、せっかくなんでまとめてみました。

まあ、長いし、マニアックだし、WordPress使っていない人にとっては何の役にも立たない記事だと思います。

自己満足ですみません。

 

 

1.WordPressについて

言わずと知れた、オープンソース・フリーのブログ作成プログラムです。

レンタルサーバーとドメインを入手し、WordPress公式サイトからプログラムの塊をダウンロードしてサーバーに突っ込めば簡単に作成できます。

レンタルサーバーはどれでもいいですが、安くてWordPressの簡単インストール機能がついているロリポップとかXサーバー辺りが使いやすいんじゃないですかね?

 

インストールから初期設定の手順については、ネットで検索すれば解説サイトがたくさん出てきます。

 

2.おすすめのテーマ

WordPressを設置したらまずはテーマ(=デザイン)を決めます。

インストール時にデフォルトで入っているテーマも良いですが、世の中には無料で配布されているものがたくさんあります。

 

個人的におすすめなのはSimplicitySTINGER

デザインがシンプルで飽きがこなく、内部SEO対策が組み込まれていて、初心者にも使いやすいです。

WordPressを使うと、ブログにいろんな機能をくっつけるためにたくさんプラグインをインストールしますが、上のテーマだと皆さんが欲しそうな機能が最初からある程度用意されていてるのでとても便利です。

 

3.自分でテーマをつくる場合

結構骨が折れるかと思いきや、時間とやる気があればつくれると思います。

つくってみても特にいいことないですが、勉強と記念にはなります。

僕は仕事でたまにWordPressを使ってWebページを作成したりしていたので、今回も自作してみました。

以下、テーマを自作する場合の作業手順です。

かなりマニアックな内容です。

 

(1)ブログのレイアウトを決める。

まずカラムのレイアウトを決めます。

 

blog

ありがちですが、こんな感じが多いですよね、スマホみたいにブラウザが小さい場合はサイドバーを縦に並べてしまうやつ。

 

(2)HTMLファイルを作成する。

構成を決めたら、html、cssファイルを作成します。

  • index.html

記事一覧が並んでいるトップページ。

  • single.html

個々の記事のページ。

  • style.css

ページのデザインを設定するファイル

 

実際にサンプルの記事をhtmlファイルに直接書き込んでいってブラウザで見てイメージを具体的にしていきます。

 

(3)phpファイルへ変換していく。

WordPressはデータベースに書き込んだ情報をphpのプログラムで呼び出してブラウザに情報を表示させます。

したがいまして、作成したhtmlファイルのような感じで実際にブログをWeb上に表示させるためには、phpファイルに変換して、WordPressの情報を呼び出すコードを記述していかなかればいけません。

作成したhtmlファイルを、パーツごとに分割します。

 

  • header.php

ヘッダー情報とかをまとめる。

  • index.php

トップ(記事一覧)ページ。

  • single.php

個々の記事。

  • sidebar.php

サイドバー(ウィジェット)情報。

  • footer.php

フッター情報をまとめる。

  • page.php

固定ページ

 

これらのファイル上に、WordPressのテンプレートタグだとかを書き込んでいきます。

WordPress Codexで調べられますが、テーマを自分で作らない場合でも、知っておくと自分でカスタマイズできるので便利です。

 

<基本的なタグ>

  • ブログのURLを取得する。

 

  • ブログタイトルを取得する。

 

  • ブログの説明文を取得する。

 

  • 記事一覧を表示する。

 

  • 記事の日付を取得する。

 

  • 記事名を取得する。

 

  • 記事の抜粋を取得する。

 

  • 記事本文を取得する。

 

  • 記事へのリンクを取得する。

 

  • 記事のサムネイル画像を取得する。

 

  • ヘッダー情報を取得する。

 

  • メニュー情報を取得する。

 

  • サイドバー(ウィジェット)情報を取得する。

 

(4)function.phpファイルを作成する。

これはWordPressで使う機能の設定ファイルです。

無くても何とかなったりしますが、書きこんでおかないとテーマ上で使えるようにならない機能なんかもあります。

 

<例>

  • ナビメニュー機能を利用する。

 

  • サムネイル画像表示機能を利用する。

 

(5)ファイルをアップロード

作成したファイルをフォルダにまとめてサーバーの「WordPress設置ディレクトリ/wp-content/themes/」にアップします。

そうするとWordPressの管理画面上から自作したテーマを選ぶことができるようになります。

 

 

4.プラグインでカスタマイズ

とりあえず僕が入れてみたプラグインです。

 

<SEO系>

WordPressやるなら基本かつ必須のやつ。

(テーマによっては最初から同じような機能が入ってます。)

これでSEO設定をほぼ全てカバーできます。

サイトマップを自動で作成してGoogle様に送信してくれます。

サイトマップの有無はSEOに大きな影響を及ぼすらしいです。

 

<SNS系>

記事をツイッターに連携させたときに記事名とかサムネイルとかブログのmeta情報を送信してくれる。

twitter

 

<作業が便利になる系>

カテゴリ一覧を表示させたときに自由に並べ替えることができます。

taxonomyorder

プラグイン無しの初期状態だと、カテゴリがつくった順に自動で並んでしまって、見栄えが悪いです。

お問い合わせフォームを簡単に作成できます。

contact

 

記事作成時のエディタにいろんな機能(フォント変更、リスト表示、文字装飾、表作成など)が加わります。

記事にコードをそのまま文字列として表示させることができます。

↑こういうの。

この記事書くためだけに入れましたが、旅ブログでこんなもん普通使わないか!

 

<画像ファイル管理系>

fancybox

こんな感じに、画像をクリックしたときにピュッと拡大させることができます。

画像をWordPressにアップロードしたときに自動でリサイズしてくれます。

ブログの画像って大きいままアップするとめちゃめちゃ重くなるんですよね。

今まで手動でリサイズしてたんですが、これ入れたら作業が楽になりました。

 

<見た目が面白くなる系>

アクセスカウンターを作成できます。

countperday

さっき入れました!

これからどんどん数が増えていってくれると嬉しいです。

もう出発直前であんま意味ないけど、イベントとかまでのカウントダウンとを表示してくれます。

milestone

出発したら今度はカウントアップ用のやつを入れないとダメですね。

記事のリンクを入れたときに、はてなのブログカード風に表示してくれます。

もう少しで旅に出ます
はじまり はじめましてこんにちは。 突然ですが、あと数か月したら長期の旅に出る予定です。 それまではバリバリ仕事をせざるを...

↑こんな感じ。

クリックするとページの一番上までスクロールバックしてくれるボタンを表示できます。

img_0148

スマホとかだと、縦のスクロールが長くなっちゃうからこれあると便利だなと思って入れました。

記事の目次を自動で作成してくれます。

tableplus

「項目が〜以上あるときに目次を作成」とかいろいろ設定変更できます。

 

<ページ表示速度アップ系>

ページを表示したときに、画像を後から読み込んでくれます。

スクロールに応じて写真とかがフワッと表示されるサイトがありますよね、あれです。

ブラウザのキャッシュを利用することによりページの表示速度を上げる。

でもいろいろ不具合もあるらしいです。

このブログも表示が変になってたら是非教えてくだせえ!

 

5.プラグインを使わずにカスタマイズ

プラグイン以外にも、直接プログラムをいじっていろいろ機能を付け加えてみました。

気をつけたのは、スマホのときに見やすい表示にするという点です。

ブログ見るときって大半はスマホからですしね。

 

(1)SNSシェアボタン

sns

これはプラグインで簡単にできるんですが、画像ファイルだと重くなるんで全部Webフォント対応にしました。

 

sns_sm

スマホで見るとLINEボタンも出るようになってます。

 

(2)ページ送り

pagination

これもWebフォントを使ってちょっとお洒落な感じに!

 

pagination_sm

スマホで見ると現在のページ番号だけ表示されます。

 

(3)ヘッダーの固定化

スマホで見たときに縦にスクロールが長くなってしまうので、メニューをクリックするときページの一番上まで戻らなきゃいけなくなる、という点を改善するため、ヘッダーを固定してみました。

fix

 

ヘッダー要素に、

 

というCSSを指定すれば固定されます。

後は位置を調整すればO.K.です。

 

ページを移動させてもヘッダーメニューがずっと付いてきます。

 

(4)ヘッダーにカテゴリ・アーカイブ検索フォームを追加

スマホの場合のみ表示させてます。

dropdown

スマホの場合、サイドバーが一番下になってしまうんで、検索しづらいかなと思いました。

 

ちなみにこれはヘッダー部に↓のようなコードを入れてます。

 

<カテゴリ検索フォーム>

 

<月別検索フォーム>

 

 

 

文系人間ごときがいろいろ頑張ったと思います。

もうこんなにいじくり回すことは今後ないです絶対。

 

何とか満足いくレベルまできたので、ようやく旅に集中できそうです。