ワードプレスのテーマ Twenty Fourteenの背景色変更方法

最近よく使われるCMSのワードプレス。オフィシャルのテーマにTwenty Fourteenがある。

この背景色が変更できない！

いや、実はできるんだけど、そこじゃない。本当に変更したいところはサイドバーやヘッダーだ。一部掲示板で公開されていた設定方法があったけど、それだとFirefoxで変わらない部分がある。

今回、Chrome、Firefoxともに色が変わる方法を調べあげたので、色を変えたい人は以下の設定を触ればよいよ。

Twenty Fourteenを選択する

• ダッシュボード > 外観 > テーマ編集

に行って、「Twenty Fourteen: スタイルシート (style.css)」を編集する。cssを変えるだけ、phpは触らなくてよい。赤枠で囲った部分の色を変えていく。

ヘッダー

まずは上から。

847行目あたりに以下のような箇所がある。

.site-header {
background-color: #000;
max-width: 1260px;
position: relative;
width: 100%;
z-index: 4;
}

この赤字の部分を変える。

.site-header {
background-color: #ｆ00;
max-width: 1260px;
position: relative;
width: 100%;
z-index: 4;
}

するとこうなる。

サイドバー

3729行目あたりに以下のような箇所がある。

#secondary {
background-color: transparent;
border: 0;
clear: none;
float: left;
margin: 0 0 0 -100%;
min-height: 100vh;
width: 122px;
}

この赤字の部分を変える。

#secondary {
background-color: #0f0;
border: 0;
clear: none;
float: left;
margin: 0 0 0 -100%;
min-height: 100vh;
width: 122px;
}

するとこうなる。

だけど注意！

よく見ると下の方は変わってない！

スクロールするとこうなってる！

これを変えるには3716行目あたりに以下のような箇所がある。

.site:before {
background-color: #000;
content: "";
display: block;
height: 100%;
min-height: 100%;
position: absolute;
top: 0;
left: 0;
width: 182px;
z-index: 2;
}

この赤字の部分を変える。

.site:before {
background-color: #00f;
content: "";
display: block;
height: 100%;
min-height: 100%;
position: absolute;
top: 0;
left: 0;
width: 182px;
z-index: 2;
}

するとこうなる。

メイン

この部分の色は簡単。820行目あたりのこの箇所を変える。

.site {
background-color: #fff;
max-width: 1260px;
position: relative;
}

この赤字の部分を変える。

.site {
background-color: #0ff;
max-width: 1260px;
position: relative;
}

するとこうなる。

検索窓

最後は検索の虫めがねマークと、それを押すと出てくる検索窓の設定を変える。

虫めがねマーク

883行目あたりのこの箇所を変える。

.search-toggle {
background-color: #24890d;
cursor: pointer;
float: right;
height: 48px;
margin-right: 38px;
text-align: center;
width: 48px;
}

.search-toggle:hover,
.search-toggle.active {
background-color: #41a62a;
}

この赤字の部分を変える。

.search-toggle {
background-color: #ff0;
cursor: pointer;
float: right;
height: 48px;
margin-right: 38px;
text-align: center;
width: 48px;
}

.search-toggle:hover,
.search-toggle.active {
background-color: #f0f;
}

するとこうなる。

後者のhoverが付いている箇所は、マウスを載せた時の色を指定している。

検索窓

あと一息！　最後はここを変えればよい。

920行目あたり。

.search-box {
background-color: #41a62a;
padding: 12px;
}

この赤字の部分を変える。

.search-box {
background-color: #999;
padding: 12px;
}

するとこうなる。

まとめるとこうなっている。

さあ、これでみんなもTwenty Fourteenの色を変えまくろう！

サウジアラビアのトランジットビザの取り方

サウジアラビアはビザを出さないことで有名だ。

そもそも観光ビザという概念がなく、観光で行くにはサウジアラビア航空や日本の旅行会社などのツアーを予約して行かないといけない。結構高くてヨルダンと合わせて11日間で40～50万円もする。

ツアー以外で行こうとすると、ムスリムになって巡礼ビザを取得するか、そういう仕事について商用ビザで行くかしかない。あと、東京のアラブ・イスラーム学院の修学旅行でも行けた気がする。

近年、日本人で個人的にビザを取得できた人の話は以下の運び屋さんしか見当たらない。かつてはイエメンから陸路で抜けるためのビザを出していた時期があったらしい。

• サウジアラビア入国挑戦の人柱になった？でござる。。。の巻っ！
• サウジアラビアビザの取り方

ぼくも何とかして取れないかと調べているのだけど、難しそう。そもそも18時間以上トランジットのあるフライトがなかなかない。スーダンのハルツーム行きはそれに該当するらしいが、そもそもスーダンビザが取りづらい（これは日本では取りづらいからカイロで取るものらしい）。

一度、サウジアラビア大使館に電話して聞いた。ダンマンからバーレーンに抜けたいのだけど、なんとかならないか、と。バーレーンまでのフライトを買ってください、と電話口の日本人女性ににべもなく返された。

しかしネットは広いもの。調べたらアメリカ人でサウジアラビアのトランジットビザを成功法で入手した人がいた！　以下抄訳。

---

　今回の旅行ではサウジアラビアのジェッダで23時間滞在する必要があった。ルールではサウジアラビアでは18時間以内の滞在にはビザはいらない（その上、空港から出られない）。サウジアラビア航空はビザがないと乗せてくれない上に制限付きチケットだと払い戻しもないと明示してある。ビザがなければ今回の旅行はなくなる上に、お金も返ってこない。

　前例を頼りにトランジットビザを申請することにした。

1. Enjaz Onlineで申請する

注意すべきは上記サイトはWindows95ではうまく動かない。また、写真のサイズも3～18KBでなければならない。打ち間違いではない。20KBのファイルは拒否される。また、ChromeやSafariでも動かない。Internet Explorerを使用すること。一体誰が今どきそんなの使ってんだ。ActiveXを有効にしないといけない。

　申請して10ドル50セントを払えば、これで申請できあがる。

2. ビザ申請フォームを印刷する

Enjazの申請番号とカラーのパスポート用写真を添付すること。女性は婚姻関係にある男性と同伴でなければならない。

3. ワシントンのサウジアラビア大使館か地元のサウジアラビア領事館に行く/連絡する

ビザはだいたい１週間で出来上がる（外交的な制限でカナダ人の場合は2～3週間かかるらしい）。

　ぼくはワシントンの大使館に行った。並んでいる人はいなかったが、いくつかの質問を受けた。

「なぜサウジアラビアを通過する必要があるのか？」
「ジェッダ経由のサウジアラビア航空のチケットが安かったからです」

　Enjazの申請書と航空券の写し、ホテルの予約の証拠などを提出した。

　その後、彼はピンク色のレシートをパスポートにつけて、半券をもぎ取り、残りをぼくに渡し、翌週来るように、と言った。

4. ビザを受け取る

翌営業日。一週間もワシントンにいられないので、自分の住所を書いて切手を貼った封筒を大使館の人に手渡し、送ってくれるようお願いした。もし希望であれば帰りの８時間のトランジットのために、ダブルエントリービザをも出してくれるという。

　かかった費用は0ドルだった。

元記事： How to Obtain a Saudi Arabian Transit Visa By Matthew Klint



追記
EnjazにはSponsorshipを書く欄がある。そこは「n/a」としておけばよいらしい。

JimdoもWixも選ばなかったわけ

新しいウェブサイトを作った。

http://authapic.net/

最初は最近はやりのウェブページ作成支援サイトWixかJimdoを使おうと思ったのだけど、やめた。

使わなかった理由は一長一短だから

両者の一長一短ぶりはウェブ界では有名で、だいたい以下のとおりのようだ。

	Jimdo	Wix
拡張性	○	◎
スマホ対応	◎	○
デザイン性	○	◎

以下の点を考えて、最初はJimdoにしていた。

• 軽い
• 日本だとKDDIが運営している
• ページ数がいくらでも増やせる

ほんと、Wixの重さったらなかった。

　どれだけおしゃれなページでも重いと見る気をなくすので、軽いJimdoにした。KDDIがついているとそうそうサービス終了ってのもなさそうだ。（実際、シェアを考えるとWixもそうそうないと思うけど。）

カスタマイズの限界

だけどやっぱりカスタマイズに限界があった。

　無料だと使えるテンプレートも少ないし、有料にすると年間1万円。安いレンタルサーバー借りたほうが安い。

　また、ブログとの連携も難しかった。RSS配信ができたほうがいいと思ってたので、それは少し痛い。

学習コストと比べよう

Jimdoはちゃんと勉強すればカスタマイズもゴリゴリできて自分のお気に入りのサイトができると思う。だけど、同じ時間を費やすならBootstrapやphpに費やしてレンタルサーバー借りたほうがいい。

　だから、試したけどどっちも使わなかった。

　HTMLやCSS、phpの知識がなくて、ある程度のページ数（事業紹介）ぐらいだとJimdoで十分。学習コストを考えると、あのデザインのページが簡単な操作で作れるのは素晴らしい。

結論

すでにある程度ウェブページ作成のスキルを持ってる人（学習コストを払った人）はあえてJimdoかWixに絞らずに、レンタルサーバーも視野に入れて選択肢として考えた方がいい。

　どっちみちJimdoもWixも無料で始められる。思い立ったが吉日。早速アカウントを作って試してみて、肌に合えば使い、合わなければ別の方法を考える。

　僕はたまたま合わなかったので、別の方法を使った。


リンク

• Wix
• Jimdo

miraiserverでのWordpress文字化け回避方法

miraiserverがリニューアルして使いにくくなった。

まだコントロールパネルは生きているようなので、そちらから使っている。

http://cpanel.miraiserver.com/

Wordpressを日本語で使う

さて、そこでwordpressを勉強がてら入れてみたら、思ったより使いづらい。デフォルトで英語がインストールされるからだ。日本語で使おう。

用意するもの

• Filezilla
• さくらエディタ

さて、ここまでできたらmiraiserverのコントロールパネルにあるインストールからWordpressをインストールしよう。やることは以下のとおり。

1. Wordpressをインストールする
2. FilezillaでWordpressをインストールしたフォルダからwp-config.phpをダウンロードする
3. wp-config.phpをさくらエディタで編集する
4. 以下の1行を見つける
   
   
   define('WPLANG', '');
   
   「ja」を追加する
   
   
   define('WPLANG', 'ja');
5. 以下の2行を見つける
   
   
   define(‘DB_CHARSET’, ‘utf8’);
   define(‘DB_COLLATE’, ”);
   
   「//」を追加する。
   
   
   //define(‘DB_CHARSET’, ‘utf8′);
   //define(‘DB_COLLATE’, ”);
6. 「utf-8・BOMなし・改行記号は揃えない」で保存する。
7. Filezillaでサーバー側のwp-config.phpを右クリックし、パーミッションを変更する。
   「444」を[666」にする。
8. Wordpress日本語版をダウンロードして解凍し、languageディレクトリを作る
9. Filezillaでwp-contentの中に入れる。

これで出来上がるはず！　お試しあれ。

作ったサイト

• 世界のちょい飯
  http://tfood.miraiserver.com/bf/

アメリカの旅 ボストン篇 その2

ボストンコモン（公園）はチューリップが満開だった。5月は本当にいい季節。

マサチューセッツ州議事堂は黄金の輝き。とてもきれい。

周辺の街路には本当のガスランプがまだ残っている。中で輝くのはガスの明かり。

お昼に食べたオープンサンドイッチ。ロブスターがプリッとしててとてもおいしい。 

コンスティテューション号。1年に一度、180度方向が変わるらしい。また奇数年後に訪れたい。 

バンカーヒル記念塔の屋上からボストンの町並みを望む。 

大西洋もきれいに見える。 

ヨーロッパから来た人たちはここに上陸したのだろう。 

ボストン図書館の内装。公共図書館なのにすごく凝っている。 

大理石とか壁画とか、いるだけで幸せになれる。蔵書は少なく感じた。 

風に揺れるアルミ箔。芸術作品っぽい。 

そんなこんなで、ボストンの観光は終わった。楽しい町だ。

phpを使ってページの文章を切り替える方法

　前の投稿（phpとJapascriptを使ってページの文章を切り替える方法）では致命的な弱点があった。改行が入っていたらエラーが起きるのだ！

　どうも改行の認識に問題があるらしい。変数を使ったりして上手にすれば回避できるらしいのだけど、そこまでするのも面倒！　という人には、phpを使った方法があったので、ここに書いておく。

• ファイル名：index.php

//*ページの一番上で変数を宣言 <?php  $inc = 1; ?> //*いろいろとコンテンツを書く <a href="index.php?inc=3">ざっと見る</a> <br> <a href="index.php?inc=2">もっと見る</a> <br> <a href="index.php?inc=1">戻る</a> //*条件式で変数に応じて読み込むphpファイルを変える <?php if($_GET['inc'] == 2){     require 'motto.php'; }elseif($_GET['inc'] == 3){     require 'zatto.php'; }else{     require 'default.php';     exit(0); } ?>

リンクを押すとincに変数が入る設定になっている。

変数によってrequireするphpファイルを変える。
何も押してない状態だとdefault.phpが読み込まれる。
incに2が入るとmotto.phpを、3が入るとzatto.phpを読み込む。

これで改行が入ってあっても大丈夫！

問題は、$_GETを使っているのでurlが汚くなっちゃうことだな。

phpとJapascriptを使ってページの文章を切り替える方法

　phpを使ってページを作っている。

　htmlフレームと同じで、画面をいくつかに分けて、小さなコンテンツを組み合わせた大きなページを作ることが可能なので、phpは好きだ。

　フレームだと簡単だけどphpじゃ難しいことが一つある。ページ全体を再読み込みせずに、小さなコンテンツの表示だけ、文章だけを切り替えることだ。

例：２ちゃんねる

このページは左のメニューをクリックすると右のフレームに掲示板が表示される仕組みになっている。左のメニュー画面は再読み込みされない。

　こういう仕組みを、phpでも作りたいと思った。だけど出来ない。



　JavaScriptを使えばいけることがわかったので、書いていく。（リンク先サイトを超参照した。すべてのphpは文字コードをutf-8にして保存すること。）

<head> <script type="text/javascript"> <!-- var txt1 = "<?php require 'red.php' ?>"; var txt2 = "<?php require 'blue.php' ?>"; var txt3 = "<?php require 'yellow.php' ?>"; function ChangeTxt(txt) {     document.getElementById("text").innerHTML=txt; } --> </script> </head> <body> <div id="text">ここの文章を変える</div> <ul>     <li><a href="javascript:void(0)" onclick="ChangeTxt(txt1); return false;">赤</a></li>     <li><a href="javascript:void(0)" onclick="ChangeTxt(txt2); return false;">青</a></li>     <li><a href="javascript:void(0)" onclick="ChangeTxt(txt3); return false;">黄色</a></li> </ul> </body>

　<head>～</head>の間にJavaScriptの記述を書く。txt1～txt3のそれぞれの変数の中にphpの命令を入れる。php requireは当該phpのページの中に別のphpのデータを持ってくる命令だ。別のphpの中身は以下のとおり。一文だけ書いて、文字コードutf-8でそれぞれの名称で保存するだけ。

red.php	|　赤は英語で<strong>red</strong>です。
blue.php	|　青は英語で<strong>blue</strong>です。
yellow.php	|　黄色は英語で<strong>yellow</strong>です。

　phpファイルのファイル名を変えたらtxt1～3で読み込むphp requireのファイル名を変えればいいだけ。クリックする文字を変えたかったら、<li>～</li>の中の文字を変えればいい。

　とっても簡単。これで出来上がり。

　しかし大きな問題があった。requireしたphpに改行があるとうまく読み込んでくれないのだ。上手に変数でなんとかすると出来るみたいだけどややこしい。やっぱりJavascriptはあきらめて、phpでやったほうがはやそうなので、phpでやってみた。

→phpを使ってページの文章を切り替える方法

• Javascriptでhtml中のテキストを変更する