[2019]Simplicity2でブログカードを装飾してみよう

wordpress

Simplicity2でブログカードをカスタマイズする方法

ブログカードをイメージした画像

ここでは、テーマ「Simplisity」で使用できるブログカードのカスタマイズ方法について解説していきます。ブログ作成に徐々に慣れていって、序盤で覚えたいカスタムの一つにブログカードがあります。

色々なブログで使用されているブログカードは設置したら、メリットだけ発生してデメリットはほとんど(例外あり)発生しません。
他の記事を読んでもらえる可能性を作り出すブログカードは、ブログを初めて間もないうちから設置するべきです。

ブログ内を周回出来るように設置することによって、より多くの記事を読者に知ってもらう機会が増えます。つまりアクセス数Upに直結するカスタマイズになります。また、ブログ内を集会できるようにリンクを貼ることで、SEOにとってもメリットがあるといわれてます。

それでは、実際のブログカードカスタマイズ方法について解説していきます。

まだブログカードを作成したことがない方は先に記事を見てもらえると良いかと思います。

 

[2019]簡単!!!Simplicity2でブログカード作成
Simplicityでブログカードを作成する方法の紹介 ブログカードとは、一言で言うと「タイトル、概要の情報、アイキャッチ画像を一枚のカードのような形にまとめたブログ内リンクのことをいいます。下図のようなものがブログカードと呼ばれ...

 

 

ブログカードの装飾って具体的に何??

ブログカード装飾の方法〜はじめに〜

基本的なブログカードを作成する場合は、urlリンクテキストを、テキストエディタに貼り付けるだけで完成しました。

今回、解説するのは、テキストエディタではなくスタイルシート(style.ccs)にコードを記載していく方法になります。

ブログを初めて間もない方は、スタイルシートにコードを記載???なんのこっちゃ???って思われるかもしれませんが、

基本はコードをコピーして決まった場所に単純に貼り付けるだけ

なので、慣れたら簡単に出来るようになります(笑)

どんな装飾が出来るの???

今回、紹介する装飾方法は全部で6種類あります。どれが良いとかは無いので、自分のブログにあったものを選んでOKです。いくつか試してみてあなたのブログに雰囲気にマッチするものを選んで下さい(笑い)

具体的にどんな装飾があるかというと、以下の6種類になります。

  1. デフオルト
  2. 二重線&背景色
  3. 実線&背景色
  4. 太い実線&背景色
  5. 点線&背景色
  6. 破線&背景色

それぞれの作成方法を実際の例を使って簡単に解説していきますね。

スタイルシートにコードを記載する方法

今回のブログカード装飾では、先ほどちらっと書きましたが、スタイルシート(style.ccs)を使用していく方法となります。

ブログを初めて間もない方や、スタイルシートをカスタマイズしたこと無い方は、意味が分からないと思いますので、先ずは装飾の解説に入る前に、スタイルシートについて簡単に説明します。

スタイルシートについての説明は3分で終わるので、気軽にサクッと眺める感じで良いと思います。

スタイルシートのカスタマイズについて既に分かっている方は、読み飛ばしちゃって下さい。

スタイルシートってどこにあるの???

まずは、スタイルシートがどこにあるか見てみます。管理画面の左側の「ハケ」みたいなアイコンから「カスタマイズ」という項目をクリックします。そうすると画面左に以下のような縦長の表示がされると思います。

管理画面の画像

管理画面の下段部分の画像

この図の一番下に、「追加CSS」という項目がありますのでクリックします。すると、次のような画面が表示されます。

追加CCS画面の画像

これがスタイルシートというものになります。

そして、何やら文字がいっぱい書かれてますが、この文字列を「CSS」と呼びます。

「CSS」を説明すると、それだけでとんでもない時間がかかりますので、ここではこの「CSS」というものをいじれば色々なカスタマイズができるんだなって位に思っておいて下さい(笑)

ほとんどの人はこのスタイルシートを見た瞬間、、、

「えつ!?この文字列を設定するの???こんなのできない・・・・」って思いますが、、、、

実は誰でも簡単にできます。

はっきり言って、実際こんな文字列を覚えるのはよっぽど慣れている人じゃないと無理です!!!だけど、この文字列はほとんど手で入力しなくても作成できます。

現在は、ネットで検索したら色々な方が、様々なカスタマイズをするためのコードを提供してくれています。

つまり、それらのコードをコピーしてこのスタイルシートに決まったルールにそって貼り付けるだけで、簡単に設定できるようになるってことです。

事実、上のコードも単純にコピーして貼り付けただけですんで(笑)

スタイルシートについてのお話はここらへんで終了して、次から実際にブログカードを作成する方法について解説していきます。

実際にブログカードを装飾してみよう

それでは、先ほどの6種類の装飾方法について解説していきます。

デフォルト

まずは、基本的な装飾について解説していきます。以下は基本的なブログカードになります。

基本的ブログカードの画像

シンプルなブログカードです。これをベースに線やら色やらを変えていきます。基本的なCSSコードは次のようになります。

/* ブログカード装飾 */
.blog-card{
background:#ffffff; /* 背景色 */
border:1px solid #696969; /* 太さ 線種 色 */
}

そして、これを実際のスタイルシートに貼り付けると以下のようになります。

ブログカードCSSを記入した画像

上の図では106の横に貼り付けていますが、これは何番でも大丈夫です。自分の場合は上から順番に貼り付けていて、次のコードを貼り付けるときは1行開けて貼り付けていくスタイルですが、そこら辺は個人個人の好みで良いと思います。

ここでの表の見方についてですが、

106番の「/* ブログカード装飾 */」は、これから書くコードは「ブログカードの装飾」についてですよ。ってことを表しています。「/*」と「/*」で囲われた文字は実際にコードとして認識されないので、何を表しているか書いてあげると良いです。

※ブログをカスタマイズしていくにつれコードの数が増えていきます。このように解説を書いてあげないと何がなんだか分からなくなっていくので、解説を書くクセを付けましょう

※「/」はスラッシュ、「*」はアスタリスク(星印)と読みます。両方ともテンキー(数字)の上にあります。

続いて「.blog-card{」は、ここからブログカードのコードが始まりますよ。って合図です。「{」はこれからコード開始という意味です。

background:#ffffff; /* 背景色 */」ですが、backgroundは背景色は何色にします。という意味で、「:#ffffff;」で色を指定してます。「」はここで指定終わりという意味です。CCSコードでは、こういった文字の大きさや、色等を設定したあとに必ず「;」を付けいてあげます。「;」は「:」と間違いやすいので注意して下さい。下がカンマになっている方です。ちなみに「#ffffff」は白色です。

※色の指定コードについては、 こちらのサイトに沢山ありますので、気に入った色を探してあげてくださいね ⇒⇒⇒ 原色大辞典

これからしょっちゅうお世話になるサイトになると思いますので、ブックマークしておくと便利ですよ。

「border:1px solid #696969; /* 太さ 線種 色 */」枠線の太さ、種類、色を表します。

border」は線、「1px」は太さ、「solid」は線の種類、「 #696969」は線の色になります。

線の種類ですが、ここでは4種類紹介します。

  • 実線  ⇒  solid
  • 点線  ⇒  dotted
  • 二重線 ⇒  double
  • 破線  ⇒  dashed

となります。

それでは、具体的に装飾していきます。

二重線(double)&背景色

それでは、二重線「double」と背景色skyblue「#87ceeb」で作成してみます。

二重線ブログカードの画像

CSSコードは次のようになります。

/* ブログカード装飾 */
.blog-card{
background:#87ceeb; /* 背景色 */
border:5px double #696969; /* 太さ 線種 色 */
}

スタイルシードでは、

二重線ブログカードCSS画像

このように表します。二重線を使用する場合は、太さを大きい数にしてやらないと強調できません。大抵は3px以上くらいが良いと思います。ここでは5pxに設定しました。

実線(solid)&背景色

実線「solid」と背景色ライトイエロー「#fffff0」で作成してみます。

実線ブログカードの画像

CSSコードは次のようになります。

/* ブログカード装飾 */
.blog-card{
background:#fffff0; /* 背景色 */
border:2px solid #696969; /* 太さ 線種 色 */
}

スタイルシードでは、

実線ブログカードCSS画像

今回は線の太さを2pxにしてみました。

太い実線&背景色

太い実線「solid」&「7px」と背景色アクアマリン「#7fffd4」で作成してみます。

太い実線ブログカード画像

CSSコードは次のようになります。

/* ブログカード装飾 */
.blog-card{
background:#7fffd4; /* 背景色 */
border:7px solid #696969; /* 太さ 線種 色 */
}

スタイルシードでは、

太い実線ブログカードCSS画像

線の太さを7pxにしてみましたが、線が結構主張していますね(笑)

点線&背景色

点線「dotted」と背景色ピンク「#ffc0cb」で作成してみます。

点線ブログカード画像

CSSコードは次のようになります。

/* ブログカード装飾 */
.blog-card{
background:#ffc0cb; /* 背景色 */
border:3px dotted #696969; /* 太さ 線種 色 */
}

スタイルシードでは、

点線ブログカードCSS画像

点線にすると違った雰囲気になります。

破線&背景色

破線「dashed」と背景色チョコレート「#d2691e」で作成してみます。

破線ブログカード画像

CSSコードは次のようになります。

/* ブログカード装飾 */
.blog-card{
background:#d2691e; /* 背景色 */
border:3px dashed #696969; /* 太さ 線種 色 */
}

スタイルシードでは、

破線ブログカードCSS

破線は、点線を少し長くした感じですね。上の場合は背景色が強調しすぎて破線が目立ってないですね(^_^;)

組み合わせは無限大

今回は、6種類のバージョンに分けて解説してきました。線の種類、色、太さ、背景色の組み合わせは、無限にあります。

今回は背景色は原色を使用しましたが、実に様々な種類の色があります。色を探すだけでもかなり楽しかったりします。

ブログの雰囲気、スタイルに合わせて、色々試してみると面白いですね。

[2019]簡単!!!Simplicity2でブログカード作成
Simplicityでブログカードを作成する方法の紹介 ブログカードとは、一言で言うと「タイトル、概要の情報、アイキャッチ画像を一枚のカードのような形にまとめたブログ内リンクのことをいいます。下図のようなものがブログカードと呼ばれ...

コメント

  1. 篠原 より:

    はじめまして。
    simplicity2ブログカードの幅を広くすると中央寄せになってしまい、グーグルアドセンスインフィード広告と並べて表示させたときに不揃いで困っていました。
    スタイルCSSいじっても直らず、1週間くらい悩んでました。

    SNOWさんのやり方(追加CSS)を試したところ上手くいきました。
    ・ブログカードの幅を広くしない
    ・追加CSSにblog-card{width:680px}

    こんなやり方があったのかぁ!!!感動しました。
    ありがとうございました。
    今後も記事楽しみにしています。

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