レンタルサーバに WordPress をインストールする

ここでは、レンタルサーバ「ロリポップ（ロリポプラン）」に WordPress をインストールする手順について紹介します。

「ログイン」→「ユーザー専用ページ」をクリック。

パスワード等を入力し、「ログイン」をクリック。

「簡単インストール」をクリック。

「WordPress」のところの「利用する」をクリック。

インストール先URLを適宜選択・入力し、「入力内容確認」をクリック。

「承諾する」にチェックを入れ、「インストール」をクリック。

サイトURLのリンクをクリック。

適宜、「サイトのタイトル」等を入力し、「WordPress をインストール」をクリックで、WordPress のインストールが始まりますが、すぐ（数秒程度）に終わります。

「ログイン」をクリック。

「ユーザー名」、「パスワード」を入力し、「ログイン」をクリックで、

WordPress の管理画面が表示されます。

次に WordPress.com のテーマをインストールするための準備をしておきます。

「外観」→「テーマ」をクリック。

「テーマをインストール」タブをクリック。

「アップロード」をクリック。

以上で、WordPress.com のテーマをインストールするための準備は完了です。

WordPress.com のテーマをレンタルサーバの WordPress へインストールする

次に WordPress.com のテーマをレンタルサーバの WordPress へインストールします。

まず、WordPress.com のテーマのソースコードをダウンロードします。

ブログ「comemo 」の「テーマの選定」→「一覧表：無料テーマ」をクリック。

任意のテーマ名をクリック。

ソースコードのリンクをクリック。

ソースコードの URL を一旦、コピーしておきます。

次に irvine というフリーソフトを開きます。

「ツール」→「リンクのインポート」をクリック。

すでに表示されているデータがあれば、全体を指定して、右クリックで「削除」をクリックし、きれいさっぱり白紙の状態にしておきます。

さきほどコピーしておいた WordPress.com のテーマのソースコードのURLを「アドレス」のところに貼り付け、Enter キーをクリックします。

すると、ソースコードのインポートが始まります。

ソースコードのインポートが終了したら、不要と思われるファイルを削除します。

全体を指定して、右クリックで「ダウンロード登録」をクリックで、

順次、ソースコードのファイルのダウンロードが始まります。

ファイルのダウンロードが終了したら、ダウンロードしたファイルの入っている以下のフォルダをクリック。

該当するフォルダのところで右クリックで「圧縮」→「.zip」を選択で、

ダウンロードしたファイル一式を zip ファイルに変換します。

このファイルをレンタルサーバの WordPress へインストールします。

「いますぐインストール」をクリック。

「有効化」をクリックで、

WordPress.com のテーマがレンタルサーバの WordPress へインストールされます。

「サイトを表示」をクリックし、

ちゃんとテーマがインストールされているか確認します。

なお、レンタルサーバの WordPress へ移行するには、その他コメントスパム対応、携帯／スマホ対応、自動バックアップ対応、各種プラグインのインストールなどさまざまな作業が必要となりますが、以下のページで各種作業の代行を受けているようです。

• WordPress導入サポート/インストール代行/カスタマイズ | ty’s empty f’log

ここでは、フロントページではフッターを表示しますが、

投稿記事を一覧表示するときには、フッターを表示しないようにすることについて考えます。

右クリックで「要素を検証」を指定（Google Chrome の場合）、

アーカイブのときのフッター部分を削除するためには、「archive」というクラス名及び「supplementary」という id 名を指定すればいいということがわかります。

CSS スタイルシートエディターでそのCSSを追加し、

「スタイルシートを保存」をクリックすると、

アーカイブ表示のときだけ、フッター部分が削除されるようになります。

3月 – 2011 – Twenty Eleven のCSSカスタマイズ

#header h1 a, #header small {
text-shadow: 1px 1px 1px #DBB08D;
}

文字に影がつきます。なお、IE（インターネットエクスプローラ）には適用されません。

前の数値２つで影をずらし、３番目で影のぼかしを調節し、「#××××××」で色をつける、といった感じです。背景色よりちょっと明るめの色を適用すると、光があたった感じに見える結果、文字の部分が凹んで見えます。

参考情報

• CSS3 text-shadow property
• text-shadow－CSS3リファレンス

タイトルの下に橙色のラインが入っていますが、これは「border」という命令で引いているものです。これを画像にして、手書き風にしてみようと思います。

まず、だいたいのサイズを図ります。Google Chrome の場合ですと「MeasureIt!」という拡張機能を使うと便利です。

このツールを使うことで、ざっと 600 px くらいの幅の図を作成すればいいということがわかります。

次に描画ソフトで手書き風の線を作成します。下の図は ArtRage で作成している様子です。

手書き風の線を作成したら、その画像を WordPress.com へアップロードします。「新規」→「メディア」を選択。

ドラッグ＆ドロップして画像をアップロード。

URLをコピー。

次に Google Chrome の方で、CSSの変更内容について、あたりをつけていきます。右クリックで表示されるメニューから「要素を検証」を選択。

「background-image」で単に画像を当てはめただけでは、以下のようになりますので、その後いろいろと調整します。

調整後はこんな感じ。

CSSの修正内容について、あたりをつけたら、それをカスタムCSSの編集画面に貼り付けて、ブログに反映させます。

あれ？　そうでした。border が適用されたままですね…。

border の適用を外します。

できました！　と思いきや…、意図していないところにも画像が反映されてしまいました…。

CSSの方を確認してみると、どうやら、「header」や「.entry-header」という記述を追加すれば、それ以外のものには画像が反映されないものと思われます。

そういうわけで、「header」を追加。

これで意図したところにだけ画像が反映されるようになりました。

次にアーカイブ等のページでもちゃんと画像が表示されるか確認してみます。

いい感じです。

次に個別投稿記事の方をチェックしてみると…、うまくいっていませんね…。

そこで、とりあえず、個別投稿記事の方には画像を反映させないことにしようと思います。個別投稿記事は、「single」というクラスでCSSが管理されていることをチェック。

頭の方にそのクラス名を追加して、「background:none;」で背景画像を削除します。

これでとりあえず、変なところに画像が表示される現象は回避されました。

次に各種 Web ブラウザでの表示を確認してみます。まず、Safari はOK。

Firefox もOK。

ie9 でもOKです。

ie8 は…背景画像の方はOKですが、上の方にある投稿記事のタイトルの文字が消えてしまっていますね…。

そこで、ie8 では背景が白くなるようにCSSを追加しておきます。

これで ie8 でもちゃんとタイトルが表示されるようになりました。

次にモバイルでの表示をチェックしてみると…画像がはみ出てしまっていますね…。

いろいろと調査したところ、幅を％で指定しておいて、「background-size：contain;」を設定しておけば、モバイルでもちゃんと縮小表示されるということがわかりました。

修正した CSS をコピーし、

カスタムCSSの下の方に貼り付けます。

「スタイルシートを保存」でCSSの追加分がブログに反映されます。

このように下の方からCSSの修正内容をどんどん追加していくと、カスタムデザインの方で自動的に以前のものと合体させてくれます。つまり、CSSの変更箇所を気にすることなく、CSSの修正をしていくことができます。

次に 「background-size」という命令は ie8 には効かないので、ie8 については、これまでどおり、「border」を適用することにします。「background:none;」で画像を削除したり、「border-bottom」でラインを追加したりします。

以上の修正で、ie8 でも、それなりに表示されるようになりました。

モバイルの方でもちゃんと表示できるように幅を微調整してできあがりです。

背景を設定すると、いろんな媒体で表示したときの位置やサイズを微調整するのがたいへんですね。正味、半日かかってしまいました。

使っている Web ブラウザは Google Chrome です。右クリックで「要素を検証」を指定。

id 名が「gravatar-2」であることを確認しておきます。

「margin」で上下のスペースを調整します。調整が済んだらコピーします。

「margin」の場合はマイナス値の入力も可能です。

次にカスタムCSS（「カスタムデザイン」へのアップグレードが必要です）の編集画面へ移動します。「ダッシュボード」をクリック。

「外観」→「カスタムデザイン」をクリック。

「CSS」をクリックで、カスタムCSSの編集画面が表示されます。

編集画面の一番下に先程コピーしたCSSの記述をペーストし、id 名を入力し、

「スタイルシートを保存」をクリック。

ブログ名をクリックして、ブログの表示画面に戻ります。

位置の調整ができました。

使っている Web ブラウザは Google Chrome です。高さを変更したい欄の上での右クリックで「要素を検証」を指定。

右側の欄でCSSを確認すると、高さが２箇所で設定されていますが、上の方が有効になっていることがわかります。

下の方の数値を修正し、かつ、有効になるように「!important」を追加します。

修正したものを一旦コピーしておきます。

次にカスタムCSS（「カスタムデザイン」へのアップグレードが必要です）の編集画面へ移動します。「ダッシュボード」をクリック。

「外観」→「カスタムデザイン」をクリック。

「CSS」をクリックで、カスタムCSSの編集画面が表示されます。

編集画面の一番下に先程コピーしたCSSの記述をペーストし、

「スタイルシートを保存」をクリック。

ブログ名をクリックして、ブログの表示画面に戻ります。

以上の操作で、入力欄の高さが変更されました。

使っている Web ブラウザは Google Chrome です。

まず、右クリックより「要素を検証」をクリック。

すると、下の方に HTMLやCSSのの編集欄が表示されます。

今回は投稿記事の部分の幅をせまくして、結果的に右のサイドバーとの間隔を空ける、ということを考えてみます。

下の方に表示される欄の左側にカーソルをあてていき、投稿記事の部分に色がつくところを探し出します。そこの部分の id 名を見ると、「main」となっています。つまり、投稿記事の部分は、この id 名のCSSを変更すれば、その幅などを調整することができる、ということがわかります。

ためしに下の欄の右側の一番上のところにある「element.style」という部分のあたりをダブルクリックして、「width:600px;」と入力してみます。すると、投稿記事の幅がせまくなります。「600px」の数値をいろいろといじると投稿記事の幅が広くなったり、狭くなったりします。つまり、カスタムデザインに入力する前に Google Chrome の方でCSSの変更結果を確認できるということです。

CSSの修正箇所やその変更内容を把握したら、カスタムデザインの方へ移動します。「ダッシュボード」をクリック。

「カスタムデザイン」をクリック。

「CSS」をクリックで CSSを追加編集できるページへ移動できます。

入力欄の一番下に「#main {width:600px;}」と入力します。「#」は id 名を示すときに使う記号です。

「スタイルシートを保存」でCSSの変更を確定させます。ここのところで「プレビュー」ボタンを押して、追加したCSSの反映状況を事前確認してもいいと思います。

左上のブログ名をクリックして、ブログの表示画面に戻ります。

投稿記事の部分の幅を 600 px にすることができました。

WordPress.com のカスタムデザイン機能の便利なところは、どこのCSSを修正したのかを気にすることなく、CSS の変更内容を下の方から次々と気楽に追加していけるところだと思います。

新テーマ- Retro-fitted — ブログ — WordPress.com

レトロな感じのシンプルなテーマですね。色使いなどは「Retro」に近い感じがします。

MLBlogs.com “Retro” – comemo

「設定」→「表示設定」をクリック。

「Scroll Infinitely」のチェックを外す。（※フッターエリアにウィジェットを何も設定していない場合には、このチェック欄は表示されません。2012年2月18日追記）

「変更を保存」をクリック。

関連トピック

• ブログのホームが1投稿ごとに表示されなくなりました « WordPress.com 日本語フォーラム
• Infinite scroll added to two themes in WP.com « WordPress.com Forums