FlyMagの編集

computer & internet

FlyMagはWordpressのテーマ。有料版のFlyMag Proに対して一部の機能制限とサポートなしの制限あり。

日本語のフォントをNoto / 游ゴシック / ヒラギノ角ゴにする

「カスタマイズ」の「フォント」の、「全体のフォント」、「見出しフォント」に下を指定する。

-apple-system, BlinkMacSystemFont, Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif

カスタムCSS

デフォルトでは行間が狭く、段落や見出しの前後のアキがない。短文ならスペースをとらずよいが、構造化された文章になると読みにくい。それを改善。

タイトルと引用のデザイン変更。テーブルのフォントを小さくしてページに収まりやすく。

@import url(https://fonts.googleapis.com/css?family=Syncopate:400,700);
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

.pandora, .site-title {
 font-family: 'Syncopate', sans-serif;
 letter-spacing: .22em;
}

.featured {
 font-weight: bold;
 font-size: .75em;
 margin: 0 0 10px;
 padding: 2px 8px;
 background: skyblue;
 color: white;
 line-height: 140%;
}

table {
 table-layout: auto;
 width: 100%;
 font-size: small;
}

blockquote {
 font-size: inherit;
 font-family: inherit;
 font-weight: inherit;
 font-style: inherit;
 color: sienna;
 line-height: inherit;
 margin: 1.5em 0em ;
 overflow: auto;
 background-color:whitesmoke;
 border: none;
 padding: 0em 1em 1.5em 3em;
 position:relative;
}

blockquote:before {
 content:"“";
 font-size:8em;
 line-height:1em;
 font-family:sans-serif;
 color:#fff;
 position:absolute;
 left:0;
 top:0;
}

blockquote strong,
blockquote b {
 font-weight: bold;
}

.wp-caption-text {
 font-size: small;
 color: lightslategray;
 text-align: inherit;
 padding: 0em 1em 0.5em
}

p {
 line-height: 1.75em;
 margin: 1.5em 0em;
}

div {
 line-height:2;
}

h3 {
 color: seagreen;
 font-size: 2em;
 margin: 1em 0em;
}

h3.widget-title {
 font-size: 1.3em;
 color: inherit;
}

h4 {
 color: steelblue;
 font-size: 1.6em;
 margin: 1em 0em
}

h5 {
 font-size: 1.4em;
 margin: 1em 0em
}

li.menu-item:hover {
 background-color: #333;
}

固定ページにアイキャッチ画像がでるようにする

投稿ページにはアイキャッチ画像が表示されるが、固定ページにはでない。設定では変更できず（開発元に確認済）、テンプレートを編集する必要がある。

コンテンツを表示させるファイルはつぎの2つ。

  • content-page.php：固定ページ用
  • content-single.php：投稿用

２つの差分から、アイキャッチ画像を表示させる部分を見極め、固定ページ用に挿入する（赤い文字の部分）。

テーマの更新でファイルが置き換えられたら、再度編集。

<?php
/**
 * The template used for displaying page content in page.php
 *
 * @package FlyMag
 */
?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

 <?php if ( has_post_thumbnail() ) : ?>
 <div class="single-thumb">
 <?php the_post_thumbnail( 'entry-thumb' ); ?>
 </div> 
 <?php endif; ?>

<header class="entry-header">
 <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
 </header><!-- .entry-header -->

<div class="entry-content">
 <?php the_content(); ?>
 <?php
 wp_link_pages( array(
 'before' => '<div class="page-links">' . __( 'Pages:', 'flymag' ),
 'after' => '</div>',
 ) );
 ?>
 </div><!-- .entry-content -->

<footer class="entry-footer">
 <?php edit_post_link( __( 'Edit', 'flymag' ), '<span class="edit-link">', '</span>' ); ?>
 </footer><!-- .entry-footer -->
</article><!-- #post-## -->