ワードプレステーマminimalでmanablogの見た目にする方法

  • Facebookで共有
  • twitterで共有
  • Lineで共有
  • はてなブックマークで共有
  • YouTubeで共有

ワードプレステーマminimalでmanablogの見た目にする方法

  • Facebookで共有
  • twitterで共有
  • Lineで共有
  • はてなブックマークで共有
  • YouTubeで共有

どうも、今日も休みの日に昼の15:00まで寝てしまった博士です。

まだ眠たいですが、前回の「」に引き続き更にワードプレステーマ「minimal」をカスタマイズしていきたいと思います。

今回の記事の目標はワードプレステーマ「minimal」の販売者であるmanablogさんのサイトの見た目に近づけるようにしていきたいですねー

具体的には以下のような変更を加えていこうと思います!

  • メニューの左側にアイコンを入れる
  • トップページのみに常表示させる記事
  • 画像サイズ変更

メニューの左側にアイコンを入れる

minimalのテーマを導入した段階ではカテゴリーの左側にアイコンがついていませんでした。Font Awesomeで設定されているので、簡単にアイコンを入れる事ができますね!さっそく設定していきましょう!

 

「外観 > テーマの編集」からテーマヘッダー (header.php)の中のコードで以下の部分を

<!-- Blogのメインコンテンツエリア -->
<main id="main" itemprop="mainContentOfPage" itemscope="itemscope" itemtype="http://schema.org/Blog">
  <div class="container">
    <div class="row">
    <!-- articleタグのマークアップ -->
    <article itemscope="itemscope" itemtype="http://schema.org/BlogPosting" itemprop="blogPost">
    <section>
    <!-- 本文の表示 -->
    <div itemprop="articleBody" class="col-xs-12 col-sm-8">

このように書き換えます。

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"><?php wp_head(); ?>

書き換えれたら、nav-menu.phpの中から以下のコードを探し出して以下の要素を付け足します(例としてシシトウ団の場合を載せます)

<li itemprop="url"><a href="#" itemprop="name">シシトウ団とは?</a></li>

このコードの文字の手前に・・・

<i class="fas fa-city" aria-hidden="true"></i>

Font Awsomeから引っ張て来たコードを付け足しましょう!

<li itemprop="url"><a href="#" itemprop="name"><i class="far fa-building" aria-hidden="true"></i> シシトウ団とは?</a></li>

i classの後の部分をこちらのページからあなたの好きなアイコンにのコードに変えていただきたい!!

 

キレイに表示させるために半角スペースを文字の手前に入れておきましょう!

同じ手順で全てのメニューにアイコンを設置してサイトを確認しましょう!

 

Font Awsomeはアイコンの種類が4,845種類もあるので、いったん仮でアイコンを置きましたが、これでメニュー部分は完成ですね!

 

トップページのみに常表示させる記事

続いてはトップページのみに表示させる記事を作っていきます!

「外観 > テーマの編集」のテーマヘッダー(header.php)

<!-- Blogのメインコンテンツエリア -->
<main id="main" itemprop="mainContentOfPage" itemscope="itemscope" itemtype="http://schema.org/Blog">
  <div class="container">
    <div class="row">
    <!-- articleタグのマークアップ -->
    <article itemscope="itemscope" itemtype="http://schema.org/BlogPosting" itemprop="blogPost">
    <section>
    <!-- 本文の表示 -->
    <div  itemprop="articleBody" class="col-xs-12 col-sm-8">

このコードに以下のコードを差し込みます!場所はarticleタグのマークアップの直前にしますぞ!

<?php if ( is_home() || is_front_page() ) : ?>
<div>ここにコンテンツ</div>
<?php endif; ?>

するとこのようになります

<!-- Blogのメインコンテンツエリア -->
<main id="main" itemprop="mainContentOfPage" itemscope="itemscope" itemtype="http://schema.org/Blog">
  <div class="container">
    <div class="row">

    <?php if ( is_home() || is_front_page() ) : ?>
    <div>ここにコンテンツ</div>
    <?php endif; ?>

    <!-- articleタグのマークアップ -->
    <article itemscope="itemscope" itemtype="http://schema.org/BlogPosting" itemprop="blogPost">
    <section>
    <!-- 本文の表示 -->
    <div  itemprop="articleBody" class="col-xs-12 col-sm-8">

しっかり反映されていますね!あとは内容だけです!しかし、説明するとかなり長くなる上に、htmlとcssとブートストラップ3つの知識が必要になってきますので、今回コピペで反映できるようにまとめておきます。

以下のコードをごっそり「ここにコンテンツ」の部分に入れてください!

<!-- トップページ記事 -->
<div class="col-xs-12 picks">

  <div class="col-xs-12 col-sm-4 wrap topcolbox">
    <div itemscope="" itemtype="http://schema.org/ImageObject" class="thumbnail">
      <a style="background-image:url(https://shishitoudan.com/wp-content/uploads/2019/01/minimal-manab-description06-min.jpg)" title="ここにタイトルを入れる" itemprop="url" class="thumbnail-img topthumb-img"></a>
    </div>
    <h2 class="title topttlorg" itemprop="name headline">
      <a href="https://shishitoudan.com/" title="ここにタイトルを入れる" itemprop="url">あなたのタイトル<br>2行目のタイトル</a>
    </h2>
    <div class="readmore">
      <a href="https://shishitoudan.com/">READ MORE</a>
    </div>
  </div>

  <div class="col-xs-12 col-sm-4 wrap center topcolboxcenter">
    <div itemscope="" itemtype="http://schema.org/ImageObject" class="thumbnail">
      <a style="background-image:url(https://shishitoudan.com/wp-content/uploads/2019/01/minimal-manab-description06-min.jpg)" title="ここにタイトルを入れる" itemprop="url" class="thumbnail-img topthumb-img"></a>
    </div>
    <h2 class="title topttlorg" itemprop="name headline">
      <a href="https://shishitoudan.com/" title="ここにタイトルを入れる" itemprop="url">あなたのタイトル<br>2行目のタイトル</a>
    </h2>
    <div class="readmore">
      <a href="https://shishitoudan.com/">READ MORE</a>
    </div>
  </div>

  <div class="col-xs-12 col-sm-4 wrap topcolbox">
    <div itemscope="" itemtype="http://schema.org/ImageObject" class="thumbnail">
      <a style="background-image:url(https://shishitoudan.com/wp-content/uploads/2019/01/minimal-manab-description06-min.jpg)" title="ここにタイトルを入れる" itemprop="url" class="thumbnail-img topthumb-img"></a>
    </div>
    <h2 class="title topttlorg" itemprop="name headline">
      <a href="https://shishitoudan.com/" title="ここにタイトルを入れる" itemprop="url">あなたのタイトル<br>2行目のタイトル</a>
    </h2>
    <div class="readmore">
      <a href="https://shishitoudan.com/">READ MORE</a>
    </div>
  </div>

</div>
<!-- end of トップページ記事 -->

そして、cssの部分に以下のコードを追加します!どこに追加してもいいんですが、以前の記事から続きで見ていただいている方はスマホ版ロゴのスタイルの下に追加が一番スマートでしょう!!

/* トップページ記事 */
@media (min-width: 768px) {
main .container .topcolbox{
  width: 31.33333%;
  margin-top: 30px;
  padding-bottom: 40px;
}}
@media (max-width: 479px) {
main .container .topcolbox{
  padding-bottom: 5px;
}}
@media (min-width: 768px) {
main .container .topcolboxcenter{
  width: 31.33333%;
  margin-top: 30px;
  margin-right: 3%;
  margin-left: 3%;
  padding-bottom: 40px;
}}
@media (max-width: 479px) {
main .container .topcolboxcenter{
  padding-bottom: 5px;
}}
main .wrap .thumbnail .topthumb-img{
  height: 200px;
}
main .container .topttlorg{
  font-size: 19px;
  padding-left: 5px;
  padding-right: 5px;
}

header.phpとstyle.cssにコードを追加できたらサイトを確認しましょう!

バッチリ反映されていますね!文章や画像URLはheader.phpに張り付けたコードを見て適切あなたのサイトに合わせてください!

画像サイズ変更

style.cssに以下のコードを追加してください!(ワードプレスの新エディターグーテンベルクの場合)

/* 画像 */
.wp-block-image{
  padding: 0 40px 0 40px;
}
@media (max-width: 479px) {
  .wp-block-image{
    padding: 0 20px 0 20px;
}}

いい感じに画像に余白が出来たと思います。

この記事を見ても解決できない方へ

いかがでしたでしょうか?これでmanablogさんのサイトに近づいたかと思います!もし、この記事を見ても解決できない場合は、
もし今回の設定でわからない事があればツイッターなどで連絡をくれれば、力になれると思いますので、お気軽に連絡ください!(連絡に気づけば)

今回の記事作成にかかった時間

  • 記事構成 10分
  • コード修正 70分
  • 文章作成 80分
  • 記事作成中に食べた物 カップラーメン

合計作業時間 180分と 386キロカロリー