AutoFocus

最終更新日:2015-12-04

autofocus14

テーマの解説(英語) AutoFocus — WordPress.com
デモ(英語) AutoFocus Demo
使用例 AutoFocus | Pearltrees
更新情報(英語) New Themes- AutoFocus, Imbalance 2, and Reddle — Blog — WordPress.com
レンタルサーバ等にインストールして使うタイプの WordPress 用テーマの解説等 以下のページのリンク先よりダウンロードすることができます。

AutoFocus Theme — WordPress Themes for Blogs at WordPress.com

制作者   Allan Cole

テーマ「AutoFocus」の背景/特徴

このテーマの特徴は、トップページやアーカイブでのレイアウトが奇抜なところかと思います。

autofocus15
AutoFocus Demo

autofocus18[

テーマ設定のバリエーション

ウィジェットエリアが一つあります。固定ページの右側に表示されます。

WS001186

メニューエリアが一つあります。

WS001185

背景を追加することができます。

autofocus16

ヘッダー画像を追加することができます。

autofocus17

CSS編集のバリエーション

IEでの日本語フォントの表示をきれいにする

以下のCSSを追加すると、

body,#ie9 body,#ie8 body,#ie7 body,#ie9 #s,#ie8 #s,#ie7 #s,#ie9 #comments input,#ie9 #comments textarea,#ie8 #comments input,#ie8 #comments textarea,#ie7 #comments input,#ie7 #comments textarea,#ie9 #reply-title,#ie9 #comments-title,#ie8 #reply-title,#ie8 #comments-title,#ie7 #reply-title,#ie7 #comments-title {
font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,Osaka,"MS Pゴシック","MS PGothic",sans-serif;
}

IE(インターネットエクスプローラ)でのフォント表示がきれいになります。

テーマカラーを黒にする

以下のCSSを追加すると

body {
background:#222;
color:white;
}

a {
color:white;
}

#access ul li ul li a,#access ul li ul li a:hover,div.menu ul li ul li a,div.menu ul li ul li a:hover {
color:#222;
}

#site-title a {
color:white;
}

#site-description {
color:#888;
}

.entry-title {
color:#888;
}

tbody tr:nth-child(even) td,tbody tr.even td {
background:#181818;
color:white;
}

h1,h2,h3,h4,h5,h6 {
color:#888;
}

.archive-title em {
color:#888;
}

#entry-meta {
color:#888;
}

.hide-trigger-background {
background:#191919;
}

.sticky .hide-trigger-background {
background:#191919;
}

.featured-banner {
background:black;
}

.wp-caption {
background:#181818;
}

.featured-thumbnail {
background-color:#181818;
}

テーマカラーが白から黒に変更されます。

autofocuscolor02

rect3015

autofocuscolor01

画像の背景を黒っぽくする


WordPress.com のテーマ「AutoFocus」の画像を黒っぽくするためのCSS

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。