「記事を読む時間の目安を表示する」機能の砂時計アイコンフォントの余白をCSSでスタイリング

xserver-inc · Oct 25, 2023 · edb738b · edb738b
1 parent 7baf8cc
commit edb738b
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 2 deletions.
diff --git a/amp.css b/amp.css
@@ -1765,6 +1765,9 @@ span.internal-icon {
   margin: 0 3%;
   margin-bottom: 1em;
 }
+.read-time .hourglass-half-icon {
+  margin-right: 3px;
+}
 
 .eye-catch-wrap {
   display: flex;

diff --git a/css/admin.css b/css/admin.css
@@ -2150,6 +2150,9 @@ body.wp-admin {
   margin: 0 3%;
   margin-bottom: 1em;
 }
+.admin-settings .demo .read-time .hourglass-half-icon {
+  margin-right: 3px;
+}
 .admin-settings .demo .eye-catch-wrap {
   display: flex;
 }
@@ -10107,6 +10110,9 @@ body.wp-admin {
   margin: 0 3%;
   margin-bottom: 1em;
 }
+.admin-settings .demo .read-time .hourglass-half-icon {
+  margin-right: 3px;
+}
 .admin-settings .demo .eye-catch-wrap {
   display: flex;
 }

diff --git a/scss/_content.scss b/scss/_content.scss
@@ -362,4 +362,8 @@ span.internal-icon{
   border-bottom: 4px double var(--cocoon-x-thin-color);
   margin: 0 3%;
   margin-bottom: 1em;
+
+  .hourglass-half-icon {
+    margin-right: 3px;
+  }
 }
diff --git a/style.css b/style.css
@@ -1790,6 +1790,9 @@ span.internal-icon {
   margin: 0 3%;
   margin-bottom: 1em;
 }
+.read-time .hourglass-half-icon {
+  margin-right: 3px;
+}
 
 .eye-catch-wrap {
   display: flex;

diff --git a/tmp/content.php b/tmp/content.php
@@ -88,8 +88,7 @@
         } ?>
 
         <?php if (is_content_read_time_visible() && is_the_page_read_time_visible() && !is_plugin_fourm_page()): ?>
-          <div class="read-time"><?php echo '<span class="fa fa-hourglass-half" aria-hidden="true"></span>
-'.sprintf(__( 'この記事は<span class="bold">約%s分</span>で読めます。', THEME_NAME ), get_time_to_content_read(get_the_content())); ?></div>
+          <div class="read-time"><?php echo '<span class="fa fa-hourglass-half hourglass-half-icon" aria-hidden="true"></span>'.sprintf(__( 'この記事は<span class="bold">約%s分</span>で読めます。', THEME_NAME ), get_time_to_content_read(get_the_content())); ?></div>
         <?php endif; ?>
 
         <?php //PR表記（大）の出力