Kanamii

伝えたい想いを自分らしく・・・

kanamii-1310-1-2

スポンサーリンク

STINGERカスタマイズ

【WordPress】STINGER PLUS+ ヘッダー・サイドバー・コンテンツの細かいカスタマイズとCSSの基礎レッスン

2016/10/05

私が初めてWordPressに挑戦し始めた当初は、デフォルトのテーマ「Twenty Twelve」を使用していました。

どこでなにがどうなっているのか。全っ然!ひとっっつもわからず。

「パーマリンクってなに?」
「アイキャッチ画像ってなに?」
「データベースってなに?」
「この部分の色を変えたいときはどこをどう変えればいいんだろう?」・・・。

とにかく、「なに?なに?」の連続でした。

そんな時の救世主は、Web上にある宝物のような沢山のカスタマイズ情報。
見様見真似で、スタイルシートに『謎の暗号』をコピーペーストすると、あら不思議!
望み通りの見た目になってワクワク♪
だけど、上手くいかないことも多々あってションボリ。。そんな感じでしたね。

前置きが長くなりましたが、ここでは無料WordPressテーマ「STINGER PLUS+」のヘッダー・サイドバー・コンテンツの細かい部分、微調整的なカスタマイズ方法をご紹介します。

その前に、『謎の暗号』が解読できるようになるための道しるべ。
CSSの基礎についても少しだけお伝えしていきたいと思います。

「それはいらないなぁ・・」という方は、ご覧になりたいメニュー項目を優しくクリック&スルーでお願いいたします。(笑)

スポンサーリンク

CSSコードの基礎がわかれば世界が広がる

kanamii-1310-2

『謎の暗号』を解読できるようになりたくて、書籍を用いた自作テーマの作成とCSSの勉強に挑戦したのは今から約3年前。

自作テーマ作成で得た知識は実践で使うには厳しいかな。。といった感じですが、CSSの基礎を学び、その後「STINGER」と出会ったことで、柔軟なカスタマイズがそれなりにできるようになったのは本当によかったと感じています。

大げさかもしれませんが、「世界が広がった」という表現がぴったりです。

『どこの→なにを→どうする』がCSSの共通書式

大ざっぱなCSSの共通書式はこのようになっています。
私は、全てのコードをこのように揃えていますが、

例えば、こんな書き方でもOKです。

もう少し複雑なパターンを例にすると、こんな感じになります。

※「どこの」の前の「#」「.」もしくは「未入力」の違いは、適用先がid属性で指定されているかclass属性で指定されているかによって変わります。
今はなんとなくで大丈夫。コードを見ることに慣れてきたら、ご自身のサイトのページ上で右クリック→「ページのソースを表示」で確認できるようになるかと思います。

STINGERの「style.css」は良い教科書代わり

WordPressダッシュボード→外観→テーマ→テーマの編集→右上の「編集するテーマを選択」で、親テーマを選択してstyle.cssを表示してみてください。
・・最初は眩暈がしますよね。(笑)

STINGERは作者が日本の方ですので、スタイルの適用先を示すコメントが日本語表記になっているのでとてもわかりやすいんですね。

そこに書かれているCSSコードのほとんどが、『どこの→なにを→どうする』になっているかと思います。
STINGERのスタイルシートは、CSSを学ぶための良い教科書代わりになります。

そしてもうひとつの教科書、私が独学用に購入した書籍もご紹介します。
書店で手に取ってみて「私にも理解できそう・・」と感じた1冊を選びました。

Webからダウンロードできるレッスン用のサンプルデータを使って、実践しながら学べるタイプの書籍で、HTMLの復習も含め、CSSの基礎から上級技までを10日間でマスターできるカリキュラムとなっています。

正直、私の場合は上級技を使いこなせるまでには及びませんでしたが、そこは頭の構造上の問題かと。(笑)
CSSの基礎を学ぶには十分な内容だと思います。

ヘッダー右上のメニュー位置の微調整

ここからは、STINGER PLUS+ のカスタマイズとなります。
各コードの下に『どこの→なにを→どうする』の解説を入れています。
簡単なコードばかりですので、取り入れたいカスマイズが見つかりましたら是非手入力で挑戦してみてください。(全て半角入力です)

全てのテーマファイルの編集は「子テーマ」で行うことをおすすめします。
親テーマを編集される際には必ずバックアップをとり、テーマの取り扱いには十分ご注意ください。
▶子テーマについて

まずは、ヘッダー右上に表示させているメニュー(ヘッダーリンク)の位置を微調整する方法です。

kanamii-1310-2

「このメニューはどうやって表示させているのですか?」というご質問をいくつかいただいたのですが、こちらはSTINGERの標準仕様、STINGER管理→ヘッダー設定→「ヘッダー上部にフッター用リンクを追加する」にチェックを入れ、PC用メインメニューを非表示としています。
ただし、サイトタイトルをセンタリングしている場合は表示されないようですのでご注意くださいね。

デフォルトのままだと、現在よりも上の方に表示されていたので、CSSで表示位置を少しだけ下げてサイトタイトルの位置に合わせました。
サイトタイトルの長さの関係で、逆に下の方に表示されているときは、「-**px」といったように、マイナスの値に変更すると表示位置が上に上がります。

WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」に下記コードを追加

※『ヘッダーリンクの→上の余白を→15pxにする』(px数はお好みで変更してください)

サイドバーのカテゴリー表示の親子階層に段差をつける

デフォルトでは、親子階層で作成したカテゴリーもフラットで表示されます。

親子階層がわかりやすいように、子カテゴリーを少し右側にずらし段差をつけて表示させるようにしました。

まだカテゴリーが少ないのでわかりにくいですね。すみません・・

kanamii-1310-3

WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」に下記コードを追加

※『子カテゴリーの→左の余白を→10pxにする』(px数はお好みで変更してください)

。。 関連記事

カテゴリーの作成と表示順の変更方法・投稿記事作成前に知っておきたいポイントなど - ゼロからのWordPress入門【15】

サイドバーのアーカイブ(ドロップダウン表示)の下の余白を広くする

ドロップダウン表示の「アーカイブ」の下の余白を広くしました。

kanamii-1310-3-2

WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」に下記コードを追加

※『ドロップダウン表示のアーカイブの→下の余白を→20pxにする』(px数はお好みで変更してください)

サイドバーの各項目の間の余白を広くする

デフォルトでは、サイドバーの各項目の間がキツキツな感じがしたので、余白を少しだけ広くしました。

※『サイドバーのリストの→下の余白を→10pxにする』(px数はお好みで変更してください)

WordPress標準の埋め込みカードの幅を変更

WordPress4.4から新たに追加された「埋め込みカード機能」。
リンク先のURL(内部リンクと埋め込みカードに対応している外部サイトへのリンク)を入力するだけで表示される、ブログカードのようなものですね。

【WordPress】STINGER PLUS+ サンプルデザイン(Sample03)と同じようにトップページを作る方法は?

デフォルトでは幅600pxで表示されるようですが、コンテンツの横幅いっぱいに表示されるように変更しました。
時々ですね。上手く読み込まれないときに引用文のスタイルで表示されることがあり、その場合には右端がはみ出してしまいます。
カスタマイズされる際は、その点をご了承お願いいたします。

WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」に下記コードを追加

※『埋め込みカードの→横幅を→100%にする』

コンテンツ内の見出し(h2)上の余白を広くする

コンテンツ内の見出し(h2)の上部の余白が狭い感じがしたので、広くしました。

WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」に下記コードを追加

※『見出し(h2)の→上の余白を→30pxにする』(px数はお好みで変更してください)

。。 関連記事

STINGER PLUS 見出し(h2、h3)のCSSカスタマイズ~背景色指定・背景画像使用・ステッチ風~

コンテンツ内の基本の文字の大きさを変える

コンテンツ内の基本の文字サイズの変更については、当ブログでは今のところ実践していませんが、最近、老眼が進ん・・目の不調で細かい文字が見えにくくなりつつあるので、今後変更するかもしれません。(笑)

WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」に下記コードを追加

px数はデフォルトのままにしています。
お好みに応じて数値を変更してみてください。

※『コンテンツ内の基本の文字の→フォントサイズを→**pxにする
行の高さを→**pxにする(行間指定)
段落下のスペースを→**pxにする』

。。 追記

その後やはり目の不調が気になったので(笑)、当ブログの現在の表示は下記のようにカスタマイズしています。

子テーマのstyle.cssに追加したコードが反映されない場合は、追加場所を先に入力しているコードの前に変更して再度お試しください。

以上、WordPressカスタマイズに役立つCSSの基礎について。さらに、STINGER PLUS+ のヘッダー・サイドバー・コンテンツの細かい部分のカスタマイズ方法をご紹介しました。

最後までお付き合い下さりありがとうございます。

▶STINGER PLUS+ カスタマイズ全記事一覧へ

この記事が気に入ったら
いいね!しよう

Twitter で

Facebook・Twitterへ最新記事をお届けします

-STINGERカスタマイズ