Ari

最終更新日:2015-12-11

ari01

テーマの解説(英語) Ari Theme — WordPress.com
デモ(英語) Ari Demo – Just another WordPress.com site
使用例 Ari | Pearltrees
更新情報(英語) New Themes- Ari and San Kloud — Blog — WordPress.com
〃(日本語) 新テーマ: Ari と San Kloud — ブログ — WordPress.com
レンタルサーバ等にインストールして使うタイプの WordPress 用テーマの解説等 以下のページのリンク先よりダウンロードすることができます。

Ari Theme — WordPress Themes for Blogs at WordPress.com

テーマの制作者 

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

iPadや iPhone などのモバイルに対応しています。なお、他のテーマと同様に iPad や モバイル専用のテーマも別途準備されています。

ari0

設定のバリエーション

2つのウィジェットエリアがあります。

WS001793

ウィジェットエリア「サイドバー2」の方を空っぽにすると、

WS001794

2カラムになります。

ari08

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

WS001795

テーマカラーを変更することができます。(2種類)

ari03ari02

文字の色を変更することができます。

ari06

rect3015

ari04

背景を変更することができます。

ari07

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

WS001792

CSS編集のバリエーション

ウィジェットに枠をつける

以下のCSSを追加すると

aside[id*=categories] h1.widget-title {
background-color:#CCC;
text-align:center;
font-size:14px;
color:#555;
border:none;
margin:0;
padding:10px 0 14px;
}

#secondary aside[id*=categories] {
padding:0;
}

aside[id*=categories] {
border:5px solid #CCC;
border-radius:5px;
}

aside[id*=categories] ul li {
list-style:none;
}

aside[id*=categories] ul {
padding:5px 7px 12px;
}

aside[id*=categories] ul > li {
border-bottom:1px dotted gray;
line-height:3;
}

aside[id*=categories] ul > li > ul li {
border-bottom:none;
line-height:2;
}

aside[id*=recent-post] h1.widget-title {
background-color:#CCC;
text-align:center;
font-size:14px;
color:#555;
border:none;
margin:0;
padding:10px 0 14px;
}

#secondary aside[id*=recent-post] {
padding:0;
}

aside[id*=recent-post] {
border:5px solid #CCC;
border-radius:5px;
}

aside[id*=recent-post] ul li {
list-style:none;
}

aside[id*=recent-post] ul {
padding:5px 7px 12px;
}

aside[id*=recent-post] ul > li {
border-bottom:1px dotted gray;
line-height:1.5;
padding:10px 0;
}

aside[id*=recent-comments] h1.widget-title {
background-color:#CCC;
text-align:center;
font-size:14px;
color:#555;
border:none;
margin:0 0 10px;
padding:10px 0 14px;
}

#secondary aside[id*=recent-comments] {
padding:0;
}

aside[id*=recent-comments] {
border:5px solid #CCC;
border-radius:5px;
}

aside[id*=recent-comments] ul li {
list-style:none;
}

aside[id*=recent-comments] ul {
padding:5px 7px 12px;
}

aside[id*=recent-comments] ul > li {
border-bottom:1px dotted gray;
line-height:2;
}

aside[id*=archives] h1.widget-title {
background-color:#CCC;
text-align:center;
font-size:14px;
color:#555;
border:none;
margin:0;
padding:10px 0 14px;
}

#secondary aside[id*=archives] {
padding:0;
}

aside[id*=archives] {
border:5px solid #CCC;
border-radius:5px;
}

aside[id*=archives] ul li {
list-style:none;
}

aside[id*=archives] ul {
padding:5px 7px 12px;
}

aside[id*=archives] ul > li {
border-bottom:1px dotted gray;
line-height:2;
}

aside[id*=meta] h1.widget-title {
background-color:#CCC;
text-align:center;
font-size:14px;
color:#555;
border:none;
margin:0;
padding:10px 0 14px;
}

#secondary aside[id*=meta] {
padding:0;
}

aside[id*=meta] {
border:5px solid #CCC;
border-radius:5px;
}

aside[id*=meta] ul li {
list-style:none;
}

aside[id*=meta] ul {
padding:5px 7px;
}

aside[id*=meta] ul > li {
line-height:1.7;
}

ウィジェットに枠がつきます。

ariwidget01

rect3015

ariwidget02

左サイドバーをスクロールさせる

以下のCSSを追加すると

#subsidiary {
position:relative;
}

左サイドバーがスクロールするようになります。

WS001801

参照:テーマ「Oulipo」のサイドバーをスクロールするようにするためのCSS編集

カテゴリーのボックス化

以下のCSSを追加すると

aside[id*=categories] ol,aside[id*=categories] ul {
list-style:none outside none;
}

aside[id*=categories] li:hover,aside[id*=categories] li.hover {
position:static;
}

aside[id*=categories] li {
float:left;
clear:both;
padding:10px 5%;
}

aside[id*=categories] li ul li,aside[id*=categories] li {
background-image:url('https://comemo508.files.wordpress.com/2012/03/lzk8cl.png');
background-repeat:repeat-x;
background-position:0 90%;
box-shadow:rgba(0,0,0,0.4) 0 1px 2px;
line-height:26px;
width:90%;
}

aside[id*=categories] li:hover {
background-image:url('https://comemo508.files.wordpress.com/2012/03/lzk8cl.png');
background-repeat:repeat-x;
background-position:0 10%;
}

aside[id*=categories] a {
color:#cccccc;
}

aside[id*=categories] li:hover > a {
color:#373737;
}

aside[id*=categories] ul li ul li {
border:medium none;
line-height:36px;
margin:8px 0 -8px 15px;
padding:5px 0 5px 10px;
}

aside[id*=categories] ul li ul li ul li {
margin:0 0 0 15px;
}

aside[id*=categories] li ul li a {
border:0 none;
line-height:36px;
margin:-10px 0;
}

aside[id*=categories] li ul {
left:-999em;
position:absolute;
width:90%;
}

aside[id*=categories] li:hover ul,aside[id*=categories] li li:hover ul {
position:absolute;
left:auto;
}

aside[id*=categories] li:hover ul.sub-menu li ul.sub-menu {
position:absolute;
left:-999em;
}

aside[id*=categories] li ul.sub-menu li:hover ul.sub-menu {
position:absolute;
left:auto;
}

カテゴリーがボックス化されます。

categoriesbox04

rect3015

categoriesbox03

 

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

WordPress.com ロゴ

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

Google フォト

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

Twitter 画像

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

Facebook の写真

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

%s と連携中

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