※当サイトではGoogleAdSense、アフィリエイトを使用した商品の紹介で収益を得ています。

【BusinessPress】写真サイトのテーマを変更したよ

wordpress
出典：https://businesspress.jp/
この記事は約10分で読めます。

写真だけをポストしているサブサイトのテーマを
CleanGalleryからBusinessPressへ変更したのでその備忘録記事

the days photography
その日撮った中の1枚だけ貼るBLOG
tdp.haineons.com
Sponsor Link
Sponsor Link

BusinessPress

BusinessPress | ビジネスサイト向け無料WordPressテーマ
日本語で使える高品質なビジネスサイト向けWordPressテーマを無料で配布しています。また、有料でカスタマイズやメールサポートを提供しています。
businesspress.jp

このテーマを知ったきっかけはリーダーに登録してあるコリスさんの記事です

コリス
Web制作に関する最新の情報をご紹介
coliss.com

テーマ名から分かる通りビジネス向けのテーマとなっていますが
ポートフォリオとはちょっと違うけど、そいう感じにデザインする事が出来たので変更した感じです


出典：https://businesspress.jp/
テーマのコンセプトとしてこのようになっています

設定

ここからは自分のサイト用に調整した部分です、まずはWordpress外観のカスタマイズ部分から

色の設定、リンクカラーと薄い背景色を変更 (#fafafa)
トップバー有効
ブログ設定をブログページ、アーカイブ、検索結果ページで3カラムギャラリーへ変更
 ┗日付、投稿者名、コメント数、全文のアイキャッチ、プロフィールを表示しないにチェック
フッターウィジェット1の幅を最大へ変更
メニューをSNSヘッダーリンク、メインメニュー、フッターメニュー表示

です、個人ブログでの使用なので、ここら辺は完全に好みですね

php

ツイッター用のメタタグが無いっぽかったので子テーマを作成
functions.phpをそこへコピーして必要な部分を書いてFTPで子テーマディレクトリを作成しそこへアップロード

/***** OG & Twitter tag *****/
function my_meta_ogp() {
  if( is_front_page() || is_home() || is_singular() ){
    global $post;
    $ogp_title = '';
    $ogp_descr = '';
    $ogp_url = '';
    $ogp_img = '';
    $insert = '';

    if( is_singular() ) { //記事＆固定ページ
       setup_postdata($post);
       $ogp_title = $post->post_title;
       $ogp_descr = mb_substr(get_the_excerpt(), 0, 100);
       $ogp_url = get_permalink();
       wp_reset_postdata();
    } elseif ( is_front_page() || is_home() ) { //トップページ
       $ogp_title = get_bloginfo('name');
       $ogp_descr = get_bloginfo('description');
       $ogp_url = home_url();
    }

    //og:type
    $ogp_type = ( is_front_page() || is_home() ) ? 'website' : 'article';

    //og:image
    if ( is_singular() && has_post_thumbnail() ) {
       $ps_thumb = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full');
       $ogp_img = $ps_thumb[0];
    } else {
     $ogp_img = '使用するアイキャッチのパス/eyecatch.jpg';
    }

    //出力するOGPタグをまとめる
    $insert .= '<meta property="og:title" content="'.esc_attr($ogp_title).'" />' . "\n";
    $insert .= '<meta property="og:description" content="'.esc_attr($ogp_descr).'" />' . "\n";
    $insert .= '<meta property="og:type" content="'.$ogp_type.'" />' . "\n";
    $insert .= '<meta property="og:url" content="'.esc_url($ogp_url).'" />' . "\n";
    $insert .= '<meta property="og:image" content="'.esc_url($ogp_img).'" />' . "\n";
    $insert .= '<meta property="og:site_name" content="'.esc_attr(get_bloginfo('name')).'" />' . "\n";
    $insert .= '<meta name="twitter:card" content="summary_large_image" />' . "\n";
    $insert .= '<meta name="twitter:site" content="ツイッターID" />' . "\n";
    $insert .= '<meta property="og:locale" content="ja_JP" />' . "\n";

    echo $insert;
  }
} //END my_meta_ogp

add_action('wp_head','my_meta_ogp');//headにOGPを出力

header.phpへウェブフォント用リンクを追加

<link rel="preload" as="font" href="フォント用ディレクトリパス/m-plus-rounded-1c-v9-latin-regular.woff2" crossorigin>
<link rel="preload" as="font" href="フォント用ディレクトリパス/m-plus-rounded-1c-v9-latin-500.woff2" crossorigin>

こっちのサイトは悲しいけどあまり見られてないので今回はアナリティクス用のタグを入れてないけど、そのうち入れるかも

Sponsor Link

style.css

スタイルシートの変更点は以下の通り
body部分の変更

/* Base */
body {
    color: #fafafa;
    font: 400 18px/1.6 "Helvetica", "Arial", sans-serif;
    word-wrap: break-word;
}
body:lang(ja) {
    font: 500 16px/1.8 "M PLUS Rounded 1c";
}

レイアウト部分のベース部分のメイン背景色、マックス幅の変更と記事部分の背景色を付けるためのセレクタ追加

/* Base */
body {
    background-color: #ccc;
}
.top-bar-content,
.main-header-content,
.featured-entry-content,
.home-header-content,
.jumbotron-content,
.site-content,
.container-content,
.footer-widget-content,
.site-bottom-content {
    max-width: 800px;
}
.site-content {
    background-color: #6c6c6c;
    padding-top: 30px;
}

メインヘッダのパディング調整

.main-header {
    padding-bottom: 15px;
    padding-top: 10px;
}

ウィジェット部分のマージン数値の変更、フッターウィジェットの文字配置を中央へパディングトップ数値の変更
サイトボトム部分の背景色とパディング数値の変更

.widget {
    margin-bottom: 2rem;
}
.footer-widget-area {
    text-align: center;
    border-top: solid 1px #eee;
    padding-bottom: 2rem;
    padding-top: 0;
}
.site-bottom {
    border-top: solid 1px #fafafa;
    padding-bottom: 1rem;
    padding-top: 1rem;
}

メディアスクリーン部分のメインヘッダーパディング数値変更

@media screen and (min-width: 782px) {
    .main-header {
        padding-bottom: 15px;
        padding-top: 10px;
    }
}

同じくトップバー部分のパディング数値変更

@media screen and (min-width: 782px) {
    .top-bar {
        padding-bottom: 5px;
        padding-top: 5px;
    }
}

スクロールした時に表示されるメインヘッダーの文字色変更

/* Main Header Clone */
.main-header-clone {
    color: #6a6a6a;
}

ソーシャルリンク用のFont awesomeにメインサイトへのリンク用アイコン追加
普通に.menu a～にしてしまうとタグリンクにまで付いちゃったので以下のようにしました

/* Social Link */
.social-link-menu a[href*="haineons.com"]:before    { content: "\F015"; }

記事用グリット背景の変更

.post-grid .entry-summary {
    color: #fcfcfc;
    font-size: 90%;
}

3カラム用のパディング数値変更

@media screen and (min-width: 980px) {
    .three-column .post-grid {
        box-sizing: border-box;
        padding: 0 15px;
    }
}

タグリンク部分の変更

.tags-links {
    color: #fcfcfc;
    margin-top: 2rem;
    text-align: right;
}
.tags-links:before {
    color: #fcfcfc;
}

ページナビゲーション文字色変更

.pagination {
    color: #fafafa;
}

ウィジェットタイトル色とマージンボトム数値変更

/* Heading */
.widget-title {
    color: #666;
    margin-bottom: 0;
}

フッター背景色の変更

/* Footer */
.site-bottom {
    background-color: #fafafa;
}

フッターにあるコピーライト＆クレジット部分のマージン数値変更

.site-copyright,
.site-credit {
    margin-bottom: 0.8rem;
}

以上の変更、調整をしたものがこんな感じです

https://cloudflare.design/color/
cloudflare.design

各部カラーは上記サイトでパレットを作成して変更しました

まとめ

CleanGalleryを調整して使っていたけど、分かりやすいとはいえ海外産だったのと
自分がこうしたいという感じの1カラムにできなかったので、良さげなものがあったら変更したいと思ってました
そこに国産で変更や調整もしやすそうだし1カラムを作りやすく写真サイトで使いやすそう！と思ったこのテーマを知り
乗り換えたという感じですね、無調整でも全然問題ないですが、自分用に調整をして使っています

グーテンベルグ、自動更新機能などにも対応しているのでシンプルなテーマを探している人におすすめだと思いますよ
気になった人は公式サイトのテーマを見るで確認してみて下さい

BusinessPress | ビジネスサイト向け無料WordPressテーマ
日本語で使える高品質なビジネスサイト向けWordPressテーマを無料で配布しています。また、有料でカスタマイズやメールサポートを提供しています。
businesspress.jp

[share]

タイトルとURLをコピーしました