Stingerの作者ENJI様が作った「micata」というテーマを使って、商用サイトを制作することになりました。サイト制作をするにあたり、カスタマイズした箇所を紹介していきます。徐々に記事を更新していく予定です。
スポンサーリンク
この「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も同様です。これで過去のカスタマイズ記事の技術を流用することができます。項目が増えてきたのでページを分けることにしました。
メニュー編
カテゴリ選択で記事一覧を全文表示
トップページ編
お知らせ表示を下にする
サイドバー編
おすすめの記事をカード化する
コンテンツ編
カテゴリーの見出しに別々のセレクタを取得する方法
邪魔な要素を非表示にする
引き算のレイアウトでコンパクトに
商用サイトのタグは複数つくことがあります。例えば何かの導線で記事を読み進めたユーザーに必ず表示させる記事下だとか。あるいはタグ検索をされるとレイアウトが崩れるなどして欲しくない時。
/*非表示*/
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の解除を忘れずに。
//カードの中身
- 新年ですね！目標が決まりました - 2017年1月13日
- STINGER PLUS+をゴリゴリのグリッドレイアウトにカスタマイズ - 2016年9月13日
- 整体でリピート率を上げる為に知っておきたいこと - 2016年5月5日
