micata Web制作 WordPress

Stingerベースのテーマ「micata」で商用サイトをカスタマイズ

Stingerの作者ENJI様が作った「micata」というテーマを使って、商用サイトを制作することになりました。サイト制作をするにあたり、カスタマイズした箇所を紹介していきます。徐々に記事を更新していく予定です。

スポンサーリンク

Adsense336


この「micata」、カスタマイザーを使えばある程度形になるので、初心者にも優しいのが嬉しいところ。今回は元々別のCMSを使って作られたサイトがあり、それをStingerベースの「micata」で作り直すということをしました。このテーマが公開されてからというもの、やりたくてやりたくてウズウズしていました。

カスタマイズは変更箇所に帰属するファイルを小テーマにコピーして、当該の部分を修正するという形で行います。なのでFTPソフトが必需品となります。

PHPの簡単な構造説明

stinger5の頃は"itiran.php"に変更を加えるだけで済みましたが、今シリーズからは新たに"itiran-thumbnail-on.php"と"itiran-thumbnail-off.php"が加わりました。

今回の"itiran.php"の役割は「micata管理」の設定で、投稿一覧>投稿一覧のサムネイルを表示するかどうかを条件分岐させるものとなります。ここをチェックするかどうかで、編集するファイルが変わります。表示するなら"itiran-thumbnail-on.php"を、表示しないなら"itiran-thumbnail-off.php"を修正します。

他の"***-thumbnail-on.php"系のPHPも同様です。これで過去のカスタマイズ記事の技術を流用することができます。項目が増えてきたのでページを分けることにしました。

メニュー編

カテゴリ選択で記事一覧を全文表示

micataカテゴリーのカスタマイズ


micata|カテゴリーを選択した時に抜粋表示から全文表示に変更する方法

2016/04/08   micata, Web制作, WordPress

デフォルトではカテゴリを選択すると、抜粋表示となった一覧が表示されます。本文の記 ...

トップページ編

お知らせ表示を下にする

micataトップページのカスタマイズ


micata|トップページのお知らせの表示位置を下に移動する方法

2016/04/08   micata, Web制作, WordPress

固定ページをトップページの一番上で、その次に「お知らせ」を表示させたい。そんな時 ...

サイドバー編

おすすめの記事をカード化する

micataの記事一覧カスタマイズ


micata|記事一覧やおすすめの記事をカード形式で表示する方法

2016/04/08   micata, Web制作, WordPress

サムネイルの有無で編集先が変わります。表示するなら"popular-thumbn ...

コンテンツ編

カテゴリーの見出しに別々のセレクタを取得する方法

micata小見出しのカスタマイズ


micata|Hタグの見出しを画像で装飾する方法

2016/04/08   micata, Web制作, WordPress

流行りのCSSによる見出しもいいですが、background-imageを使った ...

邪魔な要素を非表示にする

引き算のレイアウトでコンパクトに

商用サイトのタグは複数つくことがあります。例えば何かの導線で記事を読み進めたユーザーに必ず表示させる記事下だとか。あるいはタグ検索をされるとレイアウトが崩れるなどして欲しくない時。


/*非表示*/
span.pcone {
	display: none;
}

消しすぎるとスパム判定される

独自に追加したセレクタもブロックレベル要素ごと消してくれたりと重宝します。ただしあまり多用すると、ROBOTにスパム判定されるようなのでご注意下さい。

Aタグのリンクを無効にしてテキストのみ表示する

FAQのようなQをタイトル、Aを本文にしている記事で使いました。よそのCMSで書いた記事をインポートしたはいいけど、インデックスされた記事をそのまま使いたい時に思いついたやり方です。手間はかかります。

前提として"カテゴリーの見出しに別々のセレクタを取得する方法"で記事のタイトル要素にIDセレクタを出力する必要があります。

CSS編集例

フォントサイズは適宜調整して下さい。


/*h3*/
#headingX {
	cursor: text;
}
#headingX a {
	pointer-events: none;
	text-decoration: none;
	color: #333;
}

/*Question*/
#headingX:before {
	content: "Q:";
	color: blue;
}

//本文に使用されているブロックレベル要素がPタグの場合
/*Answer*/
#headingX+.blog_info+.smanone2 p:before {
	content: "A:";
	color: red;
}

本文に固定サイズのカードを設置

記事のサイズに合わせて回り込みをするカードを設置します。複数設置しても、上手くカラム落ちするので、後は横幅を計算して理想的な大きさにするだけ。

CSS


/*
記事中カード
----------------------------*/
.box {
	display: inline;
	float: left;
	width: px; //任意のサイズに
	height: px; //autoだと中身で高さにバラつくので注意
	margin: 10px;
	padding: 10px;
	border: 1px #ccc solid;
}

HTML

.clearfixは親CSSに書かれています。floatの解除を忘れずに。


//カードの中身
The following two tabs change content below.
Akky
会社員有限会社 宮坂整骨院
横浜で整体を生業としています。当ブログは、趣味/仕事/商品紹介/気になったことを記事にしていきます。共感するところが少しでもあれば、SNSでアクションを起こしていただけると嬉しいです。

Adsense336

-micata, Web制作, WordPress

© 2024 タブカン Powered by AFFINGER5