【TwentyTwelve】サイドバーのカスタマイズ


前回の記事:「ヘッダ画像の登録」

今回はサイドバーをプチカスタマイズして行きます。
サイドバーは
sg-001x
これ。
レンタルブログやスクリプトによっていろんな呼び方がありますが、Wordpressで言えばウィジェットが表示されてる所ですね。Wordpressだとデフォルトでは右側にあります。右サイドバーとも言えるかも。

sg-001
ご覧の通りデフォルトだとシンプルすぎてサイド「バー」と言われても何のバー感もないな・・・

(1) 背景をカスタマイズ

デフォルトだと白の背景になっていますが、この背景色を変更してみようと思います。
テーマフォルダ内の「style.css」を使用するので、念のためstyle.cssのバックアップを作っておくと安心かも…
style.cssの変更は、ダッシュボード>外観>テーマ編集 からも行えますし、FTPソフトでダウンロードしてから変更してまたアップロード、という方法もあります。そのへんはお好みで。

変更箇所は
style.css の 533行目あたり

.widget-area {
	margin: 24px 0 0;
	margin: 1.714285714rem 0 0;
}

ここです。

・例えばサイドバー全体に枠をつけたい時は

.widget-area {
	margin: 24px 0 0;
	margin: 1.714285714rem 0 0;
/* 以下を追加 */
	border:1px solid #000000;
/* 追加ここまで */
}

sg-002
黒・1px・直線の枠をつけてます。

・更に、サイドバー全体の背景色を設定したい時は

.widget-area {
	margin: 24px 0 0;
	margin: 1.714285714rem 0 0;
	border:1px solid #000000;
/* 以下を追加 */
	background-color:#ffdab9;
/* 追加ここまで */
}

sg-003
カラーネームpeachpuff(#ffdab9)の背景色にしてます。

・枠と文字の隙間なさすぎ・・・と思ったら、更に更に

.widget-area {
	margin: 24px 0 0;
	margin: 1.714285714rem 0 0;
	background-color:#ffdab9;
	border:1px solid #000000;
/* 以下を追加 */
	padding:10px;
/* 追加ここまで */
}

sg-004
こんな感じで適当に隙間が空きました。

(1) サイドバーの左右を変更する

デフォルトだとサイドバーは右側にありますが、これを左側にしたい場合は
TwentyTwelve サイドバー/記事コンテンツの左右を入れ替える超簡単な方法 | 初めてのワードプレス カスタマイズ
こちらを参考に、style.cssの1464行目あたりの

	.site-content {
		float: left;
		width: 65.104166667%;
	}


1473行目あたりの

	.widget-area {
		float: right;
		width: 26.041666667%;
	}

のfloat:left;とfloat:right;を入れ替えるだけ!
sg-005
無事に左右逆になりました~

次の記事:【TwentyTwelve】ウィジェット部分のプチカスタマイズ

【Mediawiki】 サイドバーのカスタマイズ


Seesaa Wiki(旧Livedoor Wiki)から移行してみて、いろいろとMediawikiにも制約が多いなーと思ったのですが、今一番なんとかしたいのはサイドバー部分。

ブログやレンタルWikiに慣れていると、なんというかこう・・・味気ない。
というよりも、何かサイドバーに求めてる機能(目次みたいな)が全然ない感じ。

一般的なブログやレンタルWikiだったらサイドバーに「最近更新されたページ」とか「カテゴリー」とか、そういうサイト内を回るのに便利なメニューがあるけど、Mediawikiではどちらかというと「これわざわざサイドバーに必要?」みたいなものばっかり表示されてる気がする(※あくまで個人的な意見です)。

いろいろ調べた結果、サイドバーに「最近更新されたページへのリンクを何件かリストとして表示」ということはできないらしい。なんだかサイドバーには引数が使えないとか。詳しく調べてないですが・・・

サイドバーに何を表示させるかということは追い追い考えるとして、とりあえずはサイドバーのカスタマイズ方法。

参考URL:
http://www.fukudat.com/wiki/ja/mediawiki
http://www.cudo29.org/mediawiki.html

サイドバーの編集ページを表示させるには、まず
http://MediaWikiを設置したディレクトリ/index.php?title=MediaWiki:Sidebar
をブラウザで開きます。
すると通常の記事のように、右上に「編集」タブが出ているので、それをクリック。
これで編集画面が表示されます。

しかし、なんだか異様な雰囲気・・・

* navigation
** mainpage|mainpage-description
** portal-url|portal
** currentevents-url|currentevents
** recentchanges-url|recentchanges
** randompage-url|randompage
** helppage|help
* SEARCH
* TOOLBOX
* LANGUAGES

↑こんな感じのものが表示されているはず。

↓日本語の設定でインストールしていると、実際には勝手に日本語化されたものが表示されてますもんねぇ。
wiki_sidebar
(※スキンは「Cavendish」を使用中です)

それに、通常の記事ページならウィキ内リンクは[[ページ名|表示名]]という形で入力するのに、[[]]が見当たらないのもなんだかソワソワする。
「ページ名|表示名」 という形式で入力するのは通常記事と一緒だけど、ページ名と表示名が一緒の場合でも「ページ名|ページ名」 とわざわざ入力しないとリンクが張られないみたいです。うーんイレギュラー。

ちなみに、何か修正してから「履歴」で以前の版を見ても、上記のデフォルトの*navigation~というものは表示されないようです。プレビューもプレビューとして成立してないし(笑)、特殊なページなんですかねやっぱり。

*の行がボックスの見出し、**の行がボックスの中のリストに相当するようなので、例えば

* メニュー
** メインページ|メインページ
** このサイトについて|このサイトについて
** FAQ|FAQ
* カテゴリ
** CGI・PHP|CGI・PHP
** HTML|HTML
** CSS|CSS
** 猫|猫関連記事

↑こんな感じで記入すると

↓こう表示される模様。
wiki_sidebar2
「メニュー」は「案内」に、「FAQ」という単語は「よくある質問と回答」に勝手に置き換えられるみたいですね。

ちょっとクセはありますが、カスタマイズはなんとかできそうな気がします!