vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間13万PV〜。

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

      2017/01/31

LINEで送る
Pocket

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

[WordPress] 記事下に一言コメントを挿入!カスタムフィールドを使ってみよう
こんにちは、okutani(@okutani_t)です。よくブログを読んでいると、記事を書いた人の一言コメ...
2015-03-07 04:51
はてブ

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

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

もし、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です。

kizisita-hitokoto-css

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

kizisita-hitokoto-css2

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

まとめ

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

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

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

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

 - CSS, WordPress

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

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

こんにちは、okutani(@okutani_t)です。よくブログを読んでいると …

WordPressサイトをGitで管理。Macローカル開発環境編

こんにちは、okutani(@okutani_t)です。みなさんはちゃんと「Wo …

[レスポンシブ対応] CSSでチャット風デザインを実装する

「好きなプログラム言語何?」と聞かれれば、ためらいなく「CSS」と答えるokut …

WordPressにFeedlyを設置しよう!Feedlyボタンの設置方法3つ

こんにちは、okutani(@okutani_t)です。ブログを運営する上で行っ …

WordPressでテーブルを利用する方法(HTML+CSS)

こんにちは、okutani(@okutani_t)です。サイトを運営していると、 …

ロリポップのWordPressデータベースを手動バックアップする方法

こんにちは、okutani(@okutani_t)です。みなさんはWordPre …

カエレバをCSSで装飾してみた

こんにちは、okutani(@okutani_t)です。Amazonや楽天の商品 …

『Vagrant+VCCW』でWordPressローカル環境を構築してみよう

こんにちは、okutani(@okutani_t)です。お店のサイトやブログなん …

ロリポップにWordPress導入&ムームードメインの独自ドメインを設定する

こんにちは、okutani(@okutani_t)です。本記事では、「ロリポップ …

CSSでリンク横に「参考・LINK」バッジをつけてみよう

こんにちは、okutani(@okutani_t)です。今回は、リンク横にCSS …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。