[WordPress] 記事下の一言コメントをCSSで装飾してみた

おすすめ記事個人開発のWebアプリがツイッター世界トレンド1位になったけどいろいろ辛かった話 #チョコボックス裏話 | vdeep

Tweet

Pocket

こんにちは、okutani(@okutani_t)です。以前、WordPressのカスタムフィールドを使った一言コメント挿入の記事を書きました。

[WordPress] 記事下に一言コメントを挿入！カスタムフィールドを使ってみよう

こんにちは、okutani(@okutani_t)です。よくブログを読んでいると、記事を書いた人の一言コメ...

2015-03-07 04:51

今回はその一言コメントのCSS装飾方法を解説してみようと思います。CSSなのでWordPress以外の人も参考になるかと思います。

ちなみに、キッカケはピスログのシゲさんとのTwitterにて。

@okutani_t おくたにさまーの一言のやつ素敵やん！教えてほしいー！#教えてもらっでもわからんw

— シゲ（piece.hairworks） (@piece_hairworks) 2015, 5月 28

もし、WordPressプラグインでサクッと作りたい人はシゲさんのこちらの記事がオススメです。

LINKブログプロフィールを記事下に！Fancier Author Boxが見栄え良くてオススメ！

ちなみに、今の時点でコードごちゃごちゃしまくってるので、「参考程度」にしてください。時間あったら修正します。

スポンサーリンク

記事下の一言コメントを装飾する

まずWordPressのphpファイルにHTMLを記述しました。

phpファイルにHTMLを記述

使ってるテーマの記事を構成しているphpファイルを編集します。

私の使ってるテーマStinger5ではsingle.phpがそれに該当します。<?php the_content(); //本文 ?>が本文にあたるので、その下にコードを書けば記事下に一言コメントを設置できますね。

<?php $v = get_post_meta($post->ID, 'ヒトコト', true);?>
<?php if(empty($v)):?>
<?php else:?>
<div class="hitokoto-box">
  <div class="hitokoto-title">
    <span>okutani (<a href="https://twitter.com/okutani_t">@okutani_t</a>) のヒトコト</span>
  </div>
  <div class="hitokoto-box-in">
    <div class="hitokoto-image-tw">
      <div class="h-image-prof">
        <img src="http://vdeep.net/アイコン画像までのPath"/>
      </div>
      <div class="h-tw">
        <a href="https://twitter.com/twitter" class="twitter-follow-button" data-show-count="false" data-lang="ja" data-show-screen-name="false">@twitterさんをフォロー</a>
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
      </div>
    </div>
    <div class="hitokoto-text"><div class="hitokoto-text-in hukidashi"><span><?php echo nl2br(esc_html(post_custom('ヒトコト')));?></span></div></div>
  </div>
</div>
<?php endif;?>

解説

まず初めにカスタムフィールドを使って、ヒトコトフォームに文章が入力されているときに、一言コメントを表示させるようにしています。

Twitterのフォローボタンのコードは公式から引っ張ってきましょう。貼り付けるだけなのでそんなに難しくないです。

LINKTwitterボタン | About – About Twitter

hitokoto-box-inでレスポンシブにしています。

nl2brをechoしてますが、これでカスタムフィールド内で改行を使えるようにしています。

CSSでって言っておきながらガッツリHTMLとPHP書いててすみません。では次にCSS。

CSSで装飾

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

PC用(CSS一番上に記述)

/* 記事下一言コメント */
.hitokoto-box {
  width: 100%;
  height: 100%;
  background-image: url("images/hitokoto-bk.png");
  border-radius: 6px;
  margin-bottom: 20px;
}
.hitokoto-box .hitokoto-title {
  padding: 10px 20px;
  border-radius: 4px;
  box-shadow: 1px 1px 3px #444;
  border: 1px solid #ddd;
  background-color: white;
  font-weight: bold;
}
.hitokoto-box .hitokoto-title span {
  font-size: 18px;
}
.hitokoto-box .hitokoto-title span a{
  text-decoration: none;
}
.hitokoto-box-in{
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.hitokoto-box .hitokoto-image-tw {
  width: 120px;
  min-height: 140px;
  float: right;
  margin-left: -140px;
  position: relative;
  z-index: 1;
}
.hitokoto-box .h-image-prof{
  width: 100px;
  margin-top: 6px;
}
.hitokoto-box .h-image-prof img {
  border-radius: 10px;
  padding: 3px;
  background-color: white;
}
.hitokoto-box .h-tw {
  padding: 6px 8px 1px;
}
.hitokoto-box .hitokoto-text {
  width: 100%;
  float: left;
  position: relative; /* 吹き出し用 */
  z-index: 0;
}
.hitokoto-box .hitokoto-text-in {
  padding: 12px 10px 15px 15px;
  margin: 15px 140px 15px 12px;
  background-color: white;
  border: 4px solid #ccc;
  border-radius: 6px;
  line-height: 1.7;
}
/* 一言コメント吹き出し */
.hitokoto-box .hukidashi:before {
  border: 17px solid transparent;
  border-left-color: #ccc;
  border-style: solid;
  display: block;
  position: absolute;
  top: 37%;
  right: 106px;
  width: 0;
  height: 0;
  content: "";
}
.hitokoto-box .hukidashi:after {
  border: 17px solid transparent;
  border-left-color: #fff;
  border-style: solid;
  display: block;
  position: absolute;
  top: 37%;
  right: 111px;
  width: 0;
  height: 0;
  content: "";
}

以上がPC用CSSです。

このままだとスマホで少し崩れちゃうので、スマホ用のCSSで調整します。メディアクエリ（@media）を使えばOKですね。

スマホ用(PC用の下の@media内に記述)

@media only screen and (max-width: 780px) {
  /* 記事下一言コメント */
  .hitokoto-box .hitokoto-title {
    padding: 5px 15px 6px;
  }
  .hitokoto-box .hitokoto-title span {
    font-size: 13px;
  }
  .hitokoto-box .hitokoto-image-tw {
    width: 67px;
    min-height: 115px;
    margin-left: -77px;
  }
  .hitokoto-box .h-image-prof{
    margin-top: 8px;
  }
  .hitokoto-box .hitokoto-image-tw img{
    width: 60px;
    padding: 2px;
    margin-top: 13px;
  }
  .hitokoto-box .h-tw {
    margin: 0 0 0 -11px;
  }
  .hitokoto-box .hitokoto-text span{
    font-size: 11px;
  }
  .hitokoto-box .hitokoto-text-in {
    margin: 8px 80px 8px 8px;
    padding: 5px 6px 8px 7px;
    line-height: 1.3;
  }
  /* 一言コメント画像下twitterボタン横幅 */
  iframe.twitter-follow-button {
    width: 66px !important;
  }
  /* 一言コメント吹き出し */
  .hitokoto-box .hukidashi:before {
    right: 46px;
  }
  .hitokoto-box .hukidashi:after {
    right: 50px;
  }
}

解説

background-imageで背景に画像を使用。あとは基本的に要素の位置の調整です。

Twitterのフォローボタンはスマホだと大きかったので無理やり小さくしました。若干違和感あり。

自分で見てもごちゃごちゃしています。怖い人に「なら晒すなボケ」って言われそうで怖いです(´･ω･`)

確認

こんな感じになってればOKです。

スマホだとこんな感じ(Google Chromeにて確認)。

見た目綺麗にまとまってますが、コードの方は…( ´ ▽ ` )参考にしてもらえれば幸いです。

まとめ

レスポンシブと吹き出しの実装で一言コメントを作成しました。

ところどころ無理やり感が強いコードなので、お好みで修正して使ってください。

Tweet

Pocket

okutani (okutani_t) のヒトコト

okutani_t

今見てるここがその一言コメントです。PC、スマホで確認してみてね。今度もう少し改良を加えようかと企み中。

Web開発のお仕事を募集しています