アルバトロスのよくある質問

キーワード検索
ジャンルで絞り込み
アルバトロスにて背景色を黒(文字を白)に変更したいのですがカスタマイザーだけではできません。

アルバトロスにてサイト全体を黒背景/白文字に変更したい場合、カスタマイザーの「サイトカラー設定」だけでは不十分です。

黒背景にしたい場合は、CSSを編集する必要がございます。

サンプルCSSとして下記のようなCSSをご紹介しておりますので、お好みで色味を変更してご利用くださいませ。

下記CSSを子テーマのstyle.cssや【外観 > カスタマイズ > 追加CSS】などに追記していただくことで変更可能です。

/* albatros 黒背景にするcustom CSS */
.hentry,
.hentry header,
.hentry footer,
.single .authorbox,
.single .related-box,
#footer-top,
.comment-respond{
 background: #000;
 border-color: #888;
 color: #fff;
}
.top-post-list .post-list a,
.top-post-list .post-list .entry-content .entry-title{
 color:#fff;
}
.top-post-list .post-list a:hover{
 background:#333;
}
.sharewrap{
 background:#222;
}

※アルバトロスでは完全に真っ黒の背景色にすることを想定して設計されておりませんので、上記CSSを記載しても完全に対応できない場合がございます。あらかじめご了承くださいませ。

ランディングページで太字の背景色が黄色になるのを無効化したい

アルバトロステーマでは、ランディングページで太字(strongタグ)を使うと太字部分の背景色が黄色になる仕様となっております。

この設定を無効化するには、下記CSSを子テーマのstyle.cssなどに追記していただくことで変更可能です。

#container #content.lp-wrap strong{
 background:none;
}

 

ロゴのフォントサイズを変更したい

ロゴ部分のフォントサイズを変更するには、
下記CSSを子テーマのstyle.cssなどに追記していただくことで変更可能です。

#logo .h1.text{
 font-size:18px;
}

※数値の部分はお好みで変更してください。

またスマートフォンとそれ以外で分けたい場合は、下記のようにメディアクエリを利用することで変更可能となります。

#logo .h1.text{
 font-size:28px;
}
@media only screen and (max-width: 480px) {
#logo .h1.text{
 font-size:18px;
}
}
SNSシェアボタンを非表示にしたい

独自のSNSボタンを表示したくない場合は、カスタマイザーから無効化することが可能です。

テーマによって設定箇所が異なります。

アルバトロスの場合

【外観 > カスタマイズ > その他オプション】の「SNSボタンを表示しない」にチェックをいれることで無効化できます。

ハミングバード・ストークの場合

【外観 > カスタマイズ > 投稿・固定ページ設定】の「SNSボタンを表示しない」にチェックをいれることで無効化できます。

ヘッダー背景色を白にしたい

ヘッダー部分を白にしたい場合、カスタマイザーで設定せずに子テーマなどでのCSSを利用するのが簡単です。
カスタマイザーのヘッダー背景色はメインカラーともなるので、色をついたものを選びヘッダー部分の背景色のみCSSで変更するイメージです。

ヘッダー背景色を白にするには、下記CSSを子テーマのstyle.cssなどに追記していただくことで変更可能です。

/* ヘッダーの背景色を白に */
#container .header{
    background:#fff;
}

ロゴ画像のサイズを大きくしたい

ロゴ画像を大きくしたい場合、下記CSSを子テーマのstyle.cssなどに追記していただくことで変更可能です。
※ただし注意点として、ロゴのサイズによってはグローバルメニューに設置するメニューの数を減らす必要があります。(通常6個設置できるところを、5個にするなど)減らさない場合はロゴ部分にメニューが被ってしまう可能性があるからです。

/* PC・タブレットの場合のロゴサイズを大きく */
@media only screen and (min-width: 768px) {
 #logo{
 width:22%;
 margin-top:43px;
 }
}

/* スマホの場合のロゴサイズを大きく */
@media only screen and (max-width: 767px) {
 #logo a img{
 max-height: 42px;
 }
}

※数値はお好みで変更してください。

また、画像ではなくフォントサイズを変更したい場合は、下記のように記述します。

/* PC・タブレットの場合のロゴ文字サイズを大きく */
@media only screen and (min-width: 768px) {
 #logo{
 font-size:2em;
 }
}

/* スマホの場合のロゴ文字サイズを大きく */
@media only screen and (max-width: 767px) {
 #logo{
 font-size:1.8em;
 }
}
アルバトロスのアイキャッチの推奨サイズはありますか?

720×370pxを推奨しておりますが、これよりも大きくお作りいただいても問題ございません。

今後の運用でサイト幅を大きくする可能性がある場合はさらに大きくお作りいただいた方がいい場合もあります。

ランディングページのアイキャッチ画像サイズは?

横幅の最大サイズは1400pxとなります。
参考:ランディングページをつくる

ロゴ画像のサイズを教えて下さい

ロゴ画像のサイズは198×55pxで表示されます。これよりも大きなサイズでお作りいただいても自動縮小されますので、大きめにつくって高解像度ディスプレイに対応させることも可能です。(2倍サイズでつくるなど)

サイトタイトルが長いので複数行になってしまいます

サイトタイトルが長い場合はロゴ画像を設定していただくことをおすすめしています。ロゴ画像は【外観/カスタマイズ/ >サイトロゴ】よりアップロード可能です。

ソーシャルボタンにカウント数を表示させたい

ソーシャルボタンにカウント数を表示させたい場合は、SNS Count Cacheというプラグインを導入/有効化することで表示されるようになります。導入後表示されるまでに多少時間がかかりますので、ご注意下さい。

参考:SNSボタンのカウント表示
参考:アルバトロステーマと相性の良いプラグイン

コメント欄の消し方を教えて下さい。

コメント欄はWordPressのデフォルト機能で非表示にすることができます。詳しくはページを御覧ください。

参考:コメント欄を消したい

グローバルナビの英語表記の設定方法を教えて下さい。

英語表記は外観/メニュー設定よりお作りいただいたメニューを選んで頂き、【説明】と書かれた箇所に任意の英語(アルファベット)をご記入ください。

※「説明」メニューが表示されてない場合

説明が見つからない場合は、管理画面右上の「表示オプション」から「説明」にチェックが入っていることを確認してください。