ディーエムガジェット

WordPressのTips備忘録を中心にComputer全般やデジモノ、ガジェット、アプリ紹介など

WordPressテーマ「Stinger3」のトップページの記事の間に区切り線を入れる方法

      2015/02/16

WordPressテーマ「Stinger3」のトップページの記事の間に区切り線を入れる方法

前回投稿したWordPressテーマ「Stinger3」の「続きを読む」を右側へ移動する方法ですが、最初前回の記事と今回の記事を同じ投稿で残して置こうかと思っていましたが、実際記事を書いてみるとタイトルが長くなりそうだったので別々の投稿にさせて頂きました。お役に立つ事が出来れば嬉しいです。ちなみに前回まではこのように「続きを読む」ボタンを右側に移動しました。

スポンサーリンク

WordPressテーマ「Stinger3」の「続きを読む」を右側へ移動する方法

今回はこれの下に区切り線を入れます。このような表示になります。

WordPressテーマ「Stinger3」のトップページの記事の間に区切り線を入れる方法

いかがでしょうか?区切る事で次の記事との境目がはっきりして見やすくなったと思います。(個人的には)

スポンサーリンク

style.cssを開いて区切り線を使いするコードを追加します

例:ダッシュボード→外観→テーマ編集から→スタイルシート(style.css)
自分は編集にTransmit4を使っています。

[修正前]style.cssの492行目から495行目を抜粋

.entry {
     margin-bottom: 20px;
     padding-top: 10px;
}

ここの3行目の後に「 border-bottom: 1px solid #000000; 」を加えます。最終的にこのようになっていれば問題ありません。

.entry {
     margin-bottom: 20px;
     padding-top: 10px;
     border-bottom: 1px solid #000000;
}

これで完成です。線ではなく点線にしたい方は4行目の「solid」を「dashed」に線の色は現状黒ですが、変更したい場合こちら「カラーチャート(カラーネーム)」みたいなサイトが沢山あるので好きな色を「#000000」に入れて変更してください。

スポンサーリンク

完成

いかがだったでしょうか?カスタマイズを覚えてくるともっとやりたくなってきますよね!読んで頂いてありがとうございました。

 - WORDPRESS

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


  関連記事

WordPress[Stinger5] フッターにカテゴリを追加するカスタマイズ
WordPress[Stinger5] フッターにカテゴリを追加するカスタマイズ
WordPress サイドバーにFeedlyボタンとRSSボタンを表示する方法
WordPress サイドバーにFeedlyボタンとRSSボタンを表示する方法
WordPress[Stinger3用 子テーマ] サイトマップ(目次)を設置する方法
WordPress[Stinger3用 子テーマ]サイトマップ(目次)を設置する方法
WordPressテーマ「Stinger3」記事タイトルのフォントカスタマイズ
WordPressテーマ「Stinger3」記事タイトルのフォントカスタマイズ
WordPress[Stinger3用 子テーマ]favicon(ファビコン)を変更する方法
WordPress[Stinger3用 子テーマ]favicon(ファビコン)を変更する方法
WordPress[nend] スマホ用広告(アフィリエイト)の導入方法
WordPress[nend] スマホ用広告(アフィリエイト)の導入方法
WordPress[Stinger3用 子テーマ]サイドバーのNEW ENTRYを削除する方法
WordPress[Stinger3用 子テーマ]サイドバーのNEW ENTRYを削除する方法
WordPress[さくらサーバーでCloudFlare] 管理画面にログイン出来ない問題
WordPress[さくらサーバーでCloudFlare] 管理画面にログイン出来ない問題
WordPressテーマ「Stinger3」見出しから自動的に目次を作ってくれるプラグインを導入
WordPressテーマ「Stinger3」見出しから自動的に目次を作ってくれるプラグインを導入
WordPress[Crayon Syntax Highlighter] ブログにソースコードを綺麗に表示
WordPress[Crayon Syntax Highlighter] ブログにソースコードを綺麗に表示