「WordPress」カテゴリーアーカイブ

【WordPress】ブログのテーマを『Twenty Fourteen』に変更して追加CSSでカスタマイズ

追加CSSという機能でカスタマイズしてみました。

WordPressにて構築したブログのデザインをリニューアル。これまでのデザインも気に入ってましたが、10年以上おなじテーマを使うとさすがに古くさくなってきた。従来はPC用サイトがメインで、モバイル用には別デザインが適用されていたけれど、スマートフォンなどモバイルデバイスでのアクセスが増加してきたのでPC用と親和性をもたせたい。WordPress用にオフィシャルのテーマが公開されているいっぽう、個人で凝ったテーマも公開されている。ただ、個人公開のテーマはセキュリティ的な問題があるし、メンテナンスが継続する保障もない。あるていど信用できてアップデートも期待できるとなると、オフィシャルのテーマにせざるをえません。WordPressオフィシャルテーマとしてTwentyというシリーズがあるうち、『Twenty Fourteen』というテーマをカスタマイズすることにしました。

このままのデザインでも悪くはないですが、エントリーのタイトルフォントがでかすぎたり、サイドバーやエントリーの幅がせますぎたりと気になるところがある。テーマそのものを改造することもできるけど、それだとテーマがアップデートされると元にもどってしまうので、追加CSSという機能でカスタマイズしてみました。

追加CSSとは、テーマの標準設定を特定の部分だけ上書きできるもの。旧デザインの色遣いやレイアウトに近い感じで変更。『Twenty Fourteen』のスタイルシート(style.css)を調べて、変更したい箇所の設定を洗い出し、追加CSSに追記しました。新しいテーマはブラウザのウインドウサイズごとにレイアウトが最適化されるので、PCでもスマホでもいい感じで表示されるように。

ご参考までに、現時点での当サイトに適用されている『Twenty Fourteen』用追加CSSを公開。必要と思われる箇所のみなので、気になる場所があったら随時追加、変更するかもしれません。てか、こういう情報があまりなくて、トライ&エラーでの解析が面倒でしたよ。

Amazon

楽天市場

/**
 * Twenty Fourteen for Astronaut Custom ver1.2
 * -----------------------------------------------------------------------------
 */

/**
 * 1.0 Reset
 * -----------------------------------------------------------------------------
 * リンク色、選択色を変更
 */

a {
	color: #006699;
}

a:active,
a:hover {
	color: #FF5E06;
}

::selection {
	background: #099999;
}

/**
 * 2.0 Repeatable Patterns
 * -----------------------------------------------------------------------------
 * ボタンの色を変更
 */

/* Buttons */

button,
.button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	background-color: #006699;
}

button:hover,
button:focus,
.button:hover,
.button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
	background-color: #FF5E06;
}

button:active,
.button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
	background-color: #099999;
}

/**
 * 3.0 Basic Structure
 * -----------------------------------------------------------------------------
 * メインコンテンツを中央寄せ
 */

.site {
	margin-left: auto;
	margin-right: auto;
}

/**
 * 4.0 Header
 * -----------------------------------------------------------------------------
 * ヘッダーの背景色変更、検索ボタンの色変更
 */

.site-header {
	background-color: #099999;
}

.site-title {
	font-size: 20px;
}


/* Search in the header */

.search-toggle {
	background-color: #006699;
}

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

.search-box {
	background-color: #006699;
}

/**
 * 5.0 Navigation
 * -----------------------------------------------------------------------------
 * メニュートグルの色変更
 */

.menu-toggle {
	background-color: #099999;
}

/**
 * 6.0 Content
 * -----------------------------------------------------------------------------
 */

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
	max-width: 750px;
}

/**
 * 6.1 Post Thumbnail
 * -----------------------------------------------------------------------------
 * サムネイル画像の背景を無地に
 */

.post-thumbnail {
	background: #FFFFFF;
}

a.post-thumbnail:hover {
	background-color: #FFFFFF;
}

/**
 * 6.2 Entry Header
 * -----------------------------------------------------------------------------
 * エントリーの文字サイズ、色、幅を調整
 */

.entry-title {
	font-size: 22px;
	font-weight: 600;
	color: #006699;
	text-transform: none;
}

.entry-title a {
	color: #006699;
}

.entry-title a:hover {
	color: #FF5E06;
}

/**
 * 6.3 Entry Meta
 * -----------------------------------------------------------------------------
 * エントリーリンクの色変更
 */

.entry-meta a:hover {
	color: #FF5E06;
}

.entry-meta .tag-links a:hover {
	background-color: #FF5E06;
}

.entry-meta .tag-links a:hover:before {
	border-right-color: #FF5E06;
}

/**
 * 7.1 Widgets
 * -----------------------------------------------------------------------------
 * ウィジェットの色を変更
 */

.widget a:hover {
	color: #FF5E06;
}

.widget_calendar tbody a {
	background-color: #006699;
	color: #fff;
	display: block;
}

.widget_calendar tbody a:hover {
	background-color: #FF5E06;
}

/**
 * 8.0 Footer
 * -----------------------------------------------------------------------------
 * フッターの背景色変更
 */

.site-footer {
	background-color: #099999;
}

.slider-direction-nav a:hover {
	background-color: #FF5E06;
}

/**
 * 11.0 Media Queries
 * -----------------------------------------------------------------------------
 * 背景色を変更し、サイドバーの幅を260px、ウィジェットの幅を200pxに変更
 */

#secondary {
background-color: #099999;
}

.primary-navigation li:hover > a,
.primary-navigation li.focus > a {
	background-color: #FF5E06;
}

@media screen and (min-width: 1008px) {
	.search-box-wrapper {
		padding-left: 260px;
	}
	.site-content {
		margin-left: 260px;
	}
	.site:before {
		background-color: #099999;
		width: 260px;
	}
	#secondary {
	width: 200px;
	}
}

@media screen and (min-width: 1080px) {
	#secondary {
	width: 200px;
	}
}

WPtouchでメニューと検索が表示されない

無料バージョンでも、かなり素敵な感じに。

スマートフォンで当サイトを閲覧されている方は、全アクセスの何パーセントぐらいなのだろうか。それはわかりませんが、WordPressで作成したブログを、スマホ用に最適化するWPtouch 4.0.4というプラグインをカスタマイズし、パソコン用のサイトとデザインを合わせてみた。

610611

WPtouchプラグイン自体は、かなり前のバージョンから導入していたのですが、デザインは標準のまま。上部左右のメニューや検索機能が正常に表示できず、無料版ならこんなものかと思っていた。しかし、デザインをいじっているうちにメニューと検索を正常に表示させることに成功。

方法はWPtouchプラグイン用のデータが保存されている「~/wordpress/wp-content/wptouch-data」以下のパーミッションを、フォルダは755、ファイルは644に変更すること。特に重要なのが「~/wordpress/wp-content/wptouch-data/cache」以下のファイルで、ここのパーミッションを644に変更したらメニューと検索機能が有効化されました。無料バージョンでも、かなり素敵な感じに。

有料版のWPtouch PROというのもありますが、いちばん安いので88ドルもするので躊躇してる。ウチのサイトの規模なら、無償版で大丈夫かな。

検索上位を最速で実現させるWordPress SE...

検索上位を最速で実現させるWordPress SE…
価格:2,484円(税込、送料込)

『BlueStacks』のKindleアプリがだいぶ使えるように

これなら有償でもいいかも。

Windows 8.1のタブレットPCを使用中。これ1台でブログの更新からお絵かきやドラクエX、確定申告や小説書きまでできてしまう。はっきりいって、デスクトップPCがなくてもコレ1台持ってれば、仕事もホビーも完結できちゃうスペック。満足度は高いですが、それでもガッカリした点は、電子書籍が読みづらいこと。特にAmazonのKindleが日本むけのアプリを用意していないため、買った電子書籍は結局、Androidタブレットを持ち歩かないと読みづらい。タブレットPCはかなり重いので、すこしでも荷物を軽くするため、Androidタブレットは持ち歩きたくないのだが。

そんな問題の解決策として、WindowsでAndroidを動かせる『BlueStacks』というアプリがある。仮想的にAndroidが起動するのでKindleアプリも動かせて便利……と行きたいのですが、はじめて『BlueStacks』を使ったころは、Androidのバージョンが古く、動きももっさりで、ちょっと実用に耐えないレベル。その時はあきらめてAndroidタブレットにもどってしまったんだけど先日、あらためて『BlueStacks』を入れてみたら、アップグレードされており、レスポンスがだいぶよくなってました。これなら実用レベルかも。しばらく、Androidタブレットなして行けるか試してみます。

現状、『BlueStacks』はベータ版で無償だけど、いずれ有償版に移行するとのこと。だいぶ完成度が上がってきたので、これなら費用をかけて使う価値がありそう。てか、現行バージョンだと無料なかわりに、やたらとゲームアプリへ誘導しようとするから、有償でプレーンなAndroidとして使えるバージョンを早く出してほしいです。

スマホ閲覧用に『WPtouch』をアップグレード

とりあえず無料版で十分かな。

ブログツールWordPressのプラグインで、スマホ用に表示してくれる『WPtouch』をアップグレード。以前のバージョンでは、一部のAndroidで正しく表示されない問題がありましたが、今回は正常に表示されます。有償バージョンだとデザインを変更できますが、無料バージョンでとりあえず見栄えの問題はクリア。

僕のスマホだと検索やメニューボタンが動いてませんが、記事は問題なく読めるので実用上の問題はないかと。これでいいかな。

WordPressの『WPtouch』プラグインが上手く表示されない問題を対処

そのうち直ると思ってたんだけど……。

当ブログは、フリーのWordPressというツールを使っています。WordPressには、さまざまな機能をプラグインで追加でき、モバイル表示は『WPtouch』で対応。iPhoneやAndroidスマホからだと、専用のモバイルページが表示されてるはず。スマホから閲覧されてる方、このブログ、ちゃんと見えてますか?

実は、先日までAndroid4.1の標準ブラウザから閲覧すると、文字だけでデザインが消えた状態で見えてました。スタイルシートという見栄えを指定するファイルが読み込まれてないっぽい。調べてみたら、他の方も同様の状況になっていたみたい。数ヶ月前から気づいてたけど、そのうち直るだろうと放置してたら、最新版にアップデートしても修正される気配なし。修正用の追加プラグインを作成された方がいたので、それを使用させてもらいました。自前のAndoroid4.1スマホから、正常にモバイルサイトが表示されることを確認。

フリーツールなので多くは望めないから、問題は自力でなんとかするしかないですな。

ブログにソーシャルボタンを設置

共有してもらえる記事を書かないと。

ブログの記事を外部のサイトと連携できる、ソーシャルボタンを設置。フェイスブックやツイッター、LINEなどに、記事のURLを投稿できるようにしてみた。WordPressの「WP Social Bookmarking Light」というプラグインを使用したら、けっこう簡単に設置できました。ミクシィと連携するためにチェックキーを登録するのが、少々面倒でしたが、あとは問題なし。肝心なのは、ソーシャルメディアに連携できることより、連携してもらえる記事を書くこと。記事を充実させないとな。

ブログをiPhone/iPod touch対応にしてみた

当サイトの約4割は、Windows以外からのアクセスです。

WordPressで構築したブログに、iPhone/iPod touch表示用のプラグイン『WPtouch iPhone Theme』を導入。以前から、ケータイ表示用のプラグイン『Ktai Style』を入れてたけど、iPhone/iPod touchには対応させてなかった。プラグインをいろいろ試したけど、『WPtouch iPhone Theme』がいいみたい。

IMG_0049[2] IMG_0050[1]

左が、『WPtouch iPhone Theme』プラグインを導入して、「Safari」ブラウザで表示させたもの。右が、「Opera Mini for iPhone」ブラウザで表示させたもの。「Opera Mini」では、『Ktai Style』プラグインで最適化されますので、お好みでどうぞ。どちらも、PC版で表示させることもできますよ。

『WordPress 2.8 ベイカー』にアップグレードしてもいいんじゃない

WordPressでサイトをブログ化してから、記事の執筆に専念できるようになりました。

むかしは月末に月ごとのログページを手作業で作成してたけど、そんなわずらわしさからサクリと解放。サイト管理の簡素化とともに、記事ごとに個別ページが自動生成されるため、検索エンジンからヒットしやすくなったのも利点です。

そんなWordPressの最新版『WordPress 2.8 ベイカー』の日本語版がリリース。アップグレード好きとしては──日本語版がリリースされてから──速攻で入れてみた。トラブルがなければ、作業はオートであっという間。バックアップ作業のほうが時間がかかるぐらいです。

WS000161 WS000162

ダッシュボードの表示カラム数が変更できるので2カラムから3カラムにしてみた。あと、ウィジェット管理画面のレイアウトが変わった。そのほか、790個以上のバグを修正し、180以上の新しい機能・変更・更新・改善があるそうですよ。

こちらの環境では、アップグレード作業もアップグレード後の動作も問題ないようです。

■2009年6月15日追記

WordPress 2.8の自動アップデートにバグが発見されたそうです。サーバ上のフォルダが削除される場合があるので、手動でのアップグレードを推奨とのこと。自動でやっちゃったよ!

『Internet Explorer 8 RC 1』をいれてみた

ブラウザは、Opera 9.6を愛用中です。

さいきん、どうもInternet Explorer 7(IE)が使いにくい。メインはOperaにするとしても、Operaだと正常に表示されないサイトを閲覧するためのセカンドブラウザとしてすら、IEはイマイチ。Webアプリケーションなら、Firefoxのほうがプレーンに動作してくれる気がします。

先日、友人の家でブログをメンテナンスしようとパソコンを借りて、IEで『WordPress』のWeb管理画面にアクセスさせてもらったのだけれど、どうしても意図したとおりに動かず、しかたなくFirefoxを入れさせてもらったぐらい。もはや、ウインドウズアップデートとか、マイクロソフト系のウェブアプリケーションとか、意地でもIEでないと表示してくれないサイトを閲覧するときぐらいしか、用途がなくなりつつあります。

WS000108

そんなイマイチさんなIEの最新版候補である、『Internet Explorer 8 RC 1』がリリースされたので、さっそく入れてみた。閉じたタブの履歴が表示されたり、サイトへの訪問履歴の残らないInPrivate ブラウズ機能が追加されたりと、『Google Chrome』を意識している感じです。

新しいタブをひらくときのもっさり感が、IE7よりいくぶん緩和されましたが、ほかのブラウザでは当然できていたことなので、進歩したというよりは、マトモになったというていど。動作速度で勝負するつもりは、さらさらないようです。

自分としては、オールインワンでほしい機能がそろっているOperaで満足してるけど、たがいに競い合うほうが進歩がはやいので、IEもデファクトスタンダードにあまんじることなく、さらなる性能向上につとめていただきたいものです。どうなるのかな~。