このブログでの外見あたりのカスタムについて(『Verbosa』カスタム含む)

概要

 このブログのテーマは『Verbosa』をカスタムして使っています。
 だいたいCSSによるカスタム、もしくはプラグインによる機能追加なのですが、どの部分をどんな感じにカスタムしたか、外部CSS等はどうしたか以下に書いていこうと思います。
 まず色について説明した後は、大体のカスタマイズの設定項目の説明に、このブログでの設定値と、その最後に追加CSSの解説、その後に、だいたいどんなプラグインを使ってなにを追加したかを軽くのせておきます。
 また、設定値とした数字について、このサイトのデザインは細部の調整などで頻繁にいじるので、実際の値とは違う場合もあります。ご了承いただけると幸いです。

広告

全体的な方針

 テーマカラーは#8e0404です。普通の文字色は#333、濃い灰色は#555、という感じです。
 大きくphpをいじりまくるといったことはしていない、はず…です。

 Verbosaでは、手軽に色をカスタマイズできます。カスタマイズ画面を出してから、「【VE】 Colors」を選択することで、色々なところで使う色を設定することができます。
 このサイトでは、

  • Site Background: #ededed
  • Site Text: #555
  • Content Background: #fff
  • Sidebar Background: #fff
  • Menu Text: #555
  • Menu Text on Hover: #8e0404
  • Footer Widgets Background: #fff
  • Post/Page Titles: #333
  • Post metas: #AEAEAE
  • Primary Accent: #333
  • Secondary Accent: #8e0404

 にしています。
 詳しい意味はこちらの記事を参照ください。

リンク色

通常のリンク色

 通常のリンク色は色で設定すると自動的に変更されます。
 どうやら、

  • :linkと:visited(選択していないリンクの色)に関しては、Primary Accent
  • :hoverと:active(選択しているリンクの色)に関しては、Secondary Accent

 というふうになっているようです。方針に、テーマカラーは#8e0404としましたが、リンク選択時である:hoverと:activeには#8e0404を設定しておきたいと考えたのもあり、この設定になっています。

メニューのリンク色

 「Colors」の設定項目にある
「Menu Text」および「Menu Text on Hover」で設定。上にも書いたとおり、メニュー部分のテキストの色であるMenu Textは#555、メニュー部分のリンクにカーソルを当てたときの色であるMenu Text on Hoverを#8e0404に設定してあります。

リンクカード

 Pz-LinkCardを導入し、リンクカードでリンクを装飾できるようにしました。
 導入したときの記事はこちら:


 個人的に、文中にリンクを盛り込みたいときは通常リンク、リンクカードでリンク先の情報をより分かりやすくしたいときはリンクカードを使っています。
 これを導入すると、上のようなリンクカードを簡単にブログ内記事に貼れるので、重宝しています。
 リンクカードの設定は、「設定」から「リンクカード設定」を選択することで行えます。
 ここから、先述した色の基準で設定を行いました。
 詳しくはこちらの記事をどうぞ:

サイト基本情報(Site Idetity)

 「Site Identity」→「サイト基本情報」で設定できる項目は、右上とファビコンの通りです。見たまま設定すれば設定できます。
 「ヘッダー情報」は、おすすめをランダム表示にしています。そのうち、画像を追加するかもしれません。
 「背景画像」では、背景画像を設定できるみたいですが、特に設定していません。

レイアウト(Layout)

 「Layout」からレイアウト設定が可能です。

  • Main Layout: レイアウトを3種類から選べます。右カラム(一番右)を選びました。
  • Site Width: サイトの横幅の最大値。1440pxにしました。
  • Sidebar Width: サイドバーの横幅。色々調整の結果、330pxに。
  • Stretch sidebar to edge: サイドバーの背景をブラウザの端にあわせるか。とりあえずこのブログではEnableです。
  • Magazine Layout: これも3種類のビジュアルから選べます。私は位置ヴ番左の一列のレイアウトを選びました。
  • Margin top: ピクセル単位でトップマージンを設定できます。33にしました。
  • Post/page left/right padding: パーセント単位で左右のパディングを設定できます。15にしました。
  • Footer Widgets Columns: フッター・ウィジェットの数。とりあえず3 Columnsにしています。あんまりたぶん、意味はないですけれど…。
  • Footer Widgets alignment: フッター・ウィジェットの位置。なんとなく無難かなと思うCenterに設定しています。

ヘッダー(Header)

  • Header Image Height: ヘッダ・イメージの高さ。とりあえず250になっています。デフォルト値だったかは覚えてません…。
  • Site Header Content: ロゴとサイトタイトルを表示するかとか、ロゴだけにするかとかを選べます。Logo & Site Titleで。
  • Menu Bullets: 多分、メニューボタンを設置するか、のはず…? Showにしています。

一般設定(General)

Structure

 構造、というか、細部の機能のオンオフに近い感じです。

  • Breadcrumbs: パンくずリストのオンオフ。Enableにしています。
  • Pagenation: ページネーション(検索結果を表示したとき、下に数字で結果が何ページあるかを表示しているあれ)のオンオフ。Enableにしています。
  • Page/Category Titles: ページとカテゴリのタイトル。Always Visibleにしています。
  • Custom Footer Text: Footerのテキストをカスタムすることが出来ます。私はTwitterリンク+from 2016で設定しています。

Decorations

 ページの装飾の設定です。Border(線を引く)、Shadow(影)、Rounded Corners(角を丸くする)といった装飾の選択が可能。私はShadowにのみチェックしています。

Post Images

 Post Image StyleとPost Captions Styleで多分投稿画像の表示方法の設定、なのでしょうか。あまり画像を使わないので一寸不明です。
 私はそれぞれ右上、With Backgroundにしています。

Social Icons

 メニュー作成画面からカスタムメニューを作成し、カスタムリンクで自分のTwitterへのリンクを作成。位置をSocial Iconsで設定すると、決められた位置でソーシャルアイコンを表示可能になります。これは、その位置を決めるオプションです。
 私はDisplay at the bottom of the Sidebarにのみチェックを入れています。ちょっとアクションのあるソーシャルリンクがはれて、結構嬉しかったり。

ポストの情報設定(Post Information)

一覧ページにその投稿で使われた画像を表示する(画像をフィーチャーする)か(Featured Image)

 カテゴリとかで一覧表示したときに、その投稿で使われている画像を差棟みたいに表示するあれに関する設定のようです。このブログではあまり画像を使わないので、ほぼデフォルトかと。

  • Featured Images: 画像のフィーチャーを可能にするか。Enabledにしています。
  • Featured Images on Single: 投稿記事単体でも表示するか。Enabledにしています。
  • Auto Select Images From Posts Content: 投稿記事のコンテンツから自動選出するか。Disabledにしています。
  • Featured Image Height: サムネ画像の高さ。400にしています。
  • Featured image responsivenees: レスポンシブな感じにする? ということで、Responsiveにしています。
  • Featured Image Alignment: サムネ画像の位置。Center Centerにしています。
  • Featured Bar Height: よくわからないです。5にしています。

メタ情報(Meta Information)

 投稿のメタ情報(投稿日時とか)で何を表示するか。
 私は「Display Date」「Display Category」「Display Tags」「Display Comments」をチェックしています。
 なお、セキュリティ上の理由から、Display Authorはonにはしていません。そもそもAuthorは私一人だし…。

抜粋(Excerpts)

 カテゴリ表示などの一覧ページ表示のときに、投稿を抜粋形式で表示するか、及び、その抜粋に関する設定。

  • Posts on Homepage: 多分、ホームページ表示?一覧ページ表示?のときの外見設定のようだと判断して、Excerptを選択。
  • Sticky Posts on Homepage: よくわからないですが、Full Postで。
  • Posts in Categories/Archives: こっちははっきり一覧ページ表示のときの設定みたいだったので、Excerptを選択。
  • Excerpt Length: 抜粋に表示するワード数…なんですが、使用言語が日本語なのでどうなっているんだろう…。とりあえず100に設定してあります。
  • Excerpt Suffix: 抜粋後の省略された部分の「省略されました」表示をどう表すか。私は「…」で設定しています。
  • Continue Reading Link: 「続きを読む」ボタンの表示テキスト。私は「続きを読む」にしていますが、他にも「もっと読む」「全文を読む」とか設定してもいいかもです。

コメント(Comments)

 コメント関係の設定。このブログはまだあまりコメントが付いていないので、そんなにいじってない…はず。

  • Comments Closed Text: 多分、非表示テキストについたコメントとか非表示コメントとかどうする? ってやつかと。「Hide everywhere」にしています。
  • Comments Date Format: コメントが付いた日時の表示をどうする?というやつです。時系列が分かりやすいといいなと思ったので、Date Publishedにしています。Time differenceにしたら、一時間前とか何日前とかの形式で表示されるようです。
  • Comment Form Labels: よくわからないのですが、とりあえず「Placeholders」で。
  • Comment form width: コメントフォームの横幅。とりあえずフルサイズでとおもったので、Full widthになるらしい0で設定しています。

タイポグラフィー/フォント設定(Typography)

 フォントサイズについては、


 のあたりを基準に設定しています。

General Font

 上から順に、17px、400(noramal)、Merriweatherで設定しています。
 MerriweatherはGoogle Fontの一種みたいです。デフォルトで設定されていたものですが、わりと好みなのでそのままにしています。

Header Fonts

 ブログのヘッダのフォント設定です。

  • Site Title: サイトタイトルのフォント設定。210%、300 (lighter)、Book Antiquaで設定しています。
  • Site Description: サイトの説明?のフォント設定。110%、400 (normal)、Merriweatherにしています。
  • Main Menu: メインメニューのフォント設定。100%、400 (noraml)、Merriweatherで設定しています。

Widget Fonts

 ウィジェットのフォント設定です。

  • Widget Title: ウィジェットのタイトルのフォント設定。80%、400 (normal)、Latoとしています。Latoはデフォルトだったかしら。
  • Widget Content: ウィジェットのコンテンツのフォント設定。100%、400 (normal)、Merriweatherと設定しています。

Content Fonts

 コンテンツのフォント設定です。

  • Post/Page Titles: 投稿/ページのタイトル設定。210%、300 (lighter)、Merriweatherで設定しています。
  • Post Metas: 投稿におけるメタ情報のフォント設定です。90%、400 (normal)、Latoで設定しています。
  • Headings: ヘッダのフォント設定だと解釈。100%、400 (normal)、Merriweatherで設定しています。

Formatting(書式設定)

 フォント以外の書式設定。

  • General Line Height: 行の高さの設定。1.8emに設定しています。
  • Content Text Alignment: コンテンツのテキスト水平位置、だと思います。Defalutで設定しています。
  • Content Paragraph Spacing: 段落同士の隙間の設定。1.0emにしています。おおよそ一文字分ということですね。
  • Content Paragraph Indentation: パラグラフのインデンテーション、つまり段落のインデントの長さの設定のようです。0.0emにしています。字下げをしてくれるのはありがたいのですが、まあそれなりに細かく投稿ごとに自分でエディタ上から字下げできればいいかなと思ったので。空白を一つ打てばいいだけですし。

Miscellaneous(雑多)

 Custom Theme CSSの項目で、テーマにカスタムCSSが設定できます。ここは「/* Verbosa Custom CSS */」のみで。WordPressのアップデート、JetPackの関係などにより、不必要ではありますが、カスタムCSSのないバージョンや、JetPackを入れていない場合など、結構使えるのではないでしょうか。
 なおCSSを記述するテキストエリアの下には、WordPress 4.7から追加CSSフィールドが含まれるようになったのでそちらの使用を推奨する、との記述があります。

メニュー

 メニューの位置まわりの設定を行えます。
 VerbosaはPrimary NavigationとSocial Iconsの二つのメニュー位置を持っています。
 Primary Navigationは通常のメニューの位置、Social Iconsは上のSocial Iconsで書いた、ソーシャルアイコン用のメニューの位置です。
 この辺の細かい変更を行えますが、割と色々被ってたり、メニューで設定できたりするので省略します。

固定フロントページ

  • フロントページの表示: 固定ページ
  • フロントページ: このブログについて
  • 投稿ページ: ブログ記事
     よくわかりませんが、大体こんな感じです。これはWordPressデフォルトのカスタム項目のようです。

追加CSS

 長いソースコードを一気に乗せるのもあれなので、設定したものあたりで区切りつつ、説明します。
 なお、長期間をかけてこの記事を書いたので、マージンなど細かいところは実際に使っているソース・数値と違う部分もあります。数値も結構変動させますし。それについては、Google ChromeやVivaldiの「検証」メニューなどで確認ください。これはあくまでもアバウトに、軽く解説したものです。でも、色々設定したらメモがてら、適宜書き加えていく予定。

エントリー・ヘッダとタイトル

/* entry-header */
.entry-header{
margin: 3em 0 1.5em;
}

.type-post .entry-header{
margin:3em 0 1.5em;
}


 エントリー・ヘッダ部分(.entry-headerで指定できます)はマージンをいじりました。
 加えてその中のエントリー・タイトル部分は、
h1.entry-title,h2.entry-title {
border-width: 0;
border-style: none;
padding: 0;
}

.entry-title:first-letter {
color: #8e0404;
}


 としています。まず後述する見出しで設定したスタイルをある程度キャンセルし、一文字目を#8e0404にしています。

リンク装飾

.entry-content a:link,.entry-content a:visited {
text-decoration: none;
}

.entry-content a:hover,.entry-content a:active {
text-decoration: none;
}


 リンクの装飾を弄った名残。またせっていしたくなったらここを再利用します。

引用

.main blockquote{
font-style: normal;
}

 引用の文字が斜めだと見づらかったので。

見出し

h1 {
font-size: 1.6em;
}

h2 {
font-size: 1.5em;
}

h3 {
font-size: 1.375em;
}

h4 {
font-size: 1.25em;
}

h5 {
font-size: 1.125em;
}

.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5 {
border: #8e0404 solid;
border-width: 0 0 0 5px;
padding: 2px 5px 3px;
}

.entry-content h3,.entry-content h4,.entry-content h5{
border: #8e0404 solid;
border-width: 0 0 0 3px;
}

h1:first-letter,h2:first-letter,h3:first-letter,h4:first-letter,h5:first-letter {
}


 始めのほうで文字サイズを弄ってある以外、ほぼデフォルトですが、一応#8e0404のボーダーを横に表示できるようにしています。h2は5px、h3は3pxです。
 h2とh3の区切りに集中してスタイリングしてあるのは、カスタマイズ時にh2とh3をうっかり使用しやすいフォントサイズにしてしまって、だいたい見出しにh2を使うようになったから、です…。なんとなく、Markdown記法で「##」って打つと、「あ、見出し!」って感じるクセまでできてしまいました…。
 あと、最後の:first-letterは装飾を弄ったときの名残です。

リスト

.entry-content ul{
list-style: outside;
padding: 0em 0em 0em 1.5em;
}

 いい感じにインデントされて見えるようになってるように調整…できてる…はず…? 変だったらすいません。

サイドバーとウィジェット周り

#sidebar{
padding:2em 2em 2em 3em;
}

#text-6{
margin: 0.25em 0 1.5em;
text-align:center;
font-size: 1.1em;
}
#search-2{
margin: 0 0 0;
}

#access{
margin:2.5em 0 2.0em;
}


 マージンその他を弄っています。広告の位置調整とか、ウィンドウサイズを変更したときのサイドバーの余白いじりとか。

テーブルの装飾

.entry-content table{
border: #555 solid 1px;
border-width: 1px;
}

.entry-content th{
border-color: #555;
border-style: none solid double none;
border-width: 0 1px 3px 0;
vertical-align: middle;
}

.entry-content td{
border: #555 solid 1px;
vertical-align: middle;
}

.entry-content td .center{
text-align: center;
}
.entry-content td .right{
text-align: right;
}


 テーブルについて、ボーダー表示とか弄りました。
 これから書いていくにあたって、ここは付け足される可能性が大きいかなあ、とも思いつつ。

カスタムSNSボタンのCSS

 大まかに、カーソルで選択していないときは灰色、カーソルが乗るとそれぞれのSNSのカラーになるようにしています。
 CSSの内容は、省略します。詳しくは追加予定の記事にて。CSSを見る場合は、右クリックからの検証より参照していただければと思います。

広告部分用のCSS

 広告挿入部分用のCSSです。ウィジェット化していたり、Header and Footerを用いてコメント投稿部分前に挿入していたりするので、そこの表示部分をコントロールしています。

/* 広告系のCSS設定 */
.content-after-ad{
display: block;
margin: 0em -10%;
position:relative;
text-align: center;
}
.admax{
text-align: center;
}
.content-after-ad .admax{
display: inline-block;
vertical-align: middle;
}

h3.adh{
display:inline-block;
font-family: Lato;
font-size: 80%;
font-weight: 400;
position: relative;
text-align:center;
vertical-align:middle;
width:13em;
padding:0;
margin:0;
}

h3.adh:before{
border-top: 1px solid #eee;
content:””;
position: absolute;
top: 50%;
width: 100%;
}

h3.adh span{
display: inline-block;
position: relative;
letter-spacing: 0.1em;
padding: 0 0.5em;
margin-left: 1.5em;
margin-right: 0.5em;
background-color: white;
}

h3.adh span:first-letter{
color: #8e0404;
}

プラグインを使ってどのようにテーマをカスタムしたか

 だいたいはCode SnippetsとHeader and Footerの力です。

カスタムSNSボタン

 Code SnippetsとHeader and Footerを使って挿入しています。詳しくは以下ページにて。

Header and Footerで外部CSSを含むツール挿入

 ここにある手順で導入したHeader and Footerで、Prism.jsと鈍色合字アイコンフォント・Vivaldiconsの読み込みをしています。

  • SECTION INJECTION: headタグ内に指定したタグを挿入。ここで、鈍色合字リガチャフォントとvivaldicons用のCSSを読み込んでいます。一応ie7.cssも読み込んでみたり。
  • BEFORE THE CLOSING TAG (FOOTER): 追加して行うjsの読み込みはほぼここで行っています。アイコンフォント用のjsもここです。尚全てasync入れてます。
  • Generics->GENERIC INJECTION 1: <section id=”comments”>をマーカーにして、コメントの前に広告を挿入しています。
  • Posts->BEFORE THE POST CONTENT & AFTER THE POST CONTENT: 投稿の前後にSNSアイコンを表示するために、Code Snippetsで設定したショートコードを挿入しています。

広告の挿入

 WidgetにHTMLコード貼り付け+Header and Footerの挿入機能で記事下に+Code Snippetsを利用して最初のh2前に挿入、という感じです(なお随時変更)。
 Code Snippetsを利用してコードを貼り付ける方法は以下の記事で解説しています。

まとめ+コメントなど

 今回はこのサイトでのVerbosaのカスタムについて述べました。かなり長くなってしまった…。まあでも、外部CSSでカスタムしている部分も大きかったので、しょうがなかったかしら。
 とりあえずカスタムしていて思いましたが、Verbosaは思っていたより便利です。見た目のフィーリングとかそういう感じで選んだテーマでしたが、選んでよかったなあと思っております。

広告

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA