ディーエムガジェット

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 検索エンジン用サイトマップを作成する方法
WordPress 検索エンジン用サイトマップを作成する方法
WordPress[Revive Old Post] アップデート後に過去記事自動ツイートが停止
WordPress[Revive Old Post] アップデート後に過去記事自動ツイートが停止
WordPress リンク表示をはてなのブログカードと同じにする
WordPress リンク表示をはてなのブログカードと同じにする
WordPress[Revision Control] リビジョンを制御して無駄な容量を抑える
WordPress[Revision Control] リビジョンを制御して無駄な容量を抑える
WordPressのテーマ「Stinger3」のサイト名を画像に変更する方法
WordPressのテーマ「Stinger3」のサイト名を画像に変更する方法
WordPress[Broken Link Checker] リンク切れを自動通知する方法
WordPress[Broken Link Checker] リンク切れを自動通知する方法
WordPress[Better Delete Revision] 過去の不要なリビジョンを削除する方法
WordPress[Better Delete Revision] 過去の不要なリビジョンを削除する方法
WordPress[MarsEdit] プレビュー画面を自分のブログデザインに変更
WordPress[MarsEdit] プレビュー画面を自分のブログデザインに変更
WordPress[Crazy Bone] 管理ページへのアクセスログを記録
WordPress[Crazy Bone] 管理ページへのアクセスログを記録
WordPress[WP-DB-Backup] プラグインでデータベースをバックアップ
WordPress[WP-DB-Backup] プラグインでデータベースをバックアップ