ブログは見た目も大切! コピペでOK!超簡単に見出しを変更

LINEで送る
Pocket

この記事の所要時間: 812

テーマをとてもシンプルなsimplicityに変えたので、記事の部分もとってもスッキリ。それはとてもうれしいことなのですが、読みにくさも同時に出てしまった……というのが正直なところ。そこで雰囲気に合わせて、どんどんとカスタマイズしています。

現状3つのブログを主に動かしていて、そのうち1つはサボり気味。そこで2つのブログをカスタマイズしています。その1つがここと多読ブログです。

英語多読のコトノハ

多読ブログに関しては、実は謎の現象が!

何かしらのプラグインだかなんかが干渉しているんだと思うのですが……その上、確認していたら本のデータベースのCSSがグチャグチャ、これも早く直さねば……。それはそれとして、なぜか、H2タグの上にmeta情報が挿入されてしまうんです。

0ff9b791-2d8d-46ea-87f9-f4b9fef15c08

しばらく格闘してみましたが、どうしてもわからないので、通常H2タグを使うところH3に、H3をH4にとCSSを変更しました。ちなみにここのブログはそんな現象は起きていないので、普通にH2を使っています。

多読でのH3タグはこんな感じ。 

203ee07a-fd3f-48db-9a22-8e885978a268

これはWEB道さんで公開されているCSS見出しジェネレーターを使って作成しました。こちらの吹き出しというのを利用させてもらい、色を指定してぽちっとな!はいできました~(笑)と3分で終了

画像を使用せずCSSのみで見出しを作成するCSSジェネレーター。吹き出し型、リボン型なども生成可能。

これをslimplicityの子テーマのstyle.cssに書き入れるだけという超簡単さ。実は子テーマを導入していなかったので、一から設定し直しという悲しいことにはなりましたが、まぁそこはご愛嬌。

色を選ぶカラーコードもこんな素敵なサイトを発見

色はsimplicityのスキンを深紅きなりにしているので、和色大辞典というサイトからカラーコードを参考にさせてもらいました。

日本の伝統色の名前とカラーコードが一目でわかるWEB色見本
ちなみにこのH2(多読はH3のCSSは
.article h3{
    position: relative;
    color: #ffffff;
    background: #b33e5c;
    font-size: 16pt ;
    border: 1px solid #b33e5c;
    margin: 10px 10px 21px 10px;
    padding: 10px 5px 10px 10px;
    border-radius: 3px;
    box-shadow:1px 3px 7px 0px  #666666 ;
}
.article h3:after, .article h3:before {
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
}
.article h3:after {
    left: 40px;
    border: 10px solid transparent;
    border-top: 10px solid #b33e5c;
}
.article h3:before {
    left: 39px;
    border: 11px solid transparent;
    border-top: 11px solid #b33e5c;
}

このH2タグはこれ!

こちらに関してはSQUEEZEさんのH1一つでここまで出来るCSS見出しデザインのアイデア9個という記事から旗というのを利用させていただきました。

こちらのスキンは瑠璃紺きなり。上のと同じ和色大辞典さんで、和なちょっとだけ薄めの青色を探しいれさせてもらいました。

こちらのCSSはこんな感じです。
/* 09.旗 */
.article h2{
    position:relative;
    color: #ffffff;
    background: #4a42e3;
    margin:0 20px 0 20px;
    padding:10px 15px;
}
.article h2:before{
    content:"<";
    position:absolute;
    top:middle;
    left:-10px;
    width:0;
    height:0;
    font-size:25px;
    line-height:1.0;
    color:#c96;
}

.article h2:after{
    content:" ";
    position:absolute;
    top:-2px;
    left:-10px;
    width:0;
    height:130%;
    border:#600 solid 2px;
    border-radius:2px;
    -webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    transform: rotate(-2deg);
}
 

さらにH3タグ(多読ブログはH4)はこんな感じ。

もともとのsimplicityのものをベースに、アイコンをつけました。参考にさせて頂いたのはこちら

どーん(^o^)/ 当サイトはWordPressを利用して運用しており、テーマは「Simplicity」を使用…

このsimplicityというテーマはもともとWebフォントの「Font Awesome Icons」というのが使えるそうで、本当に簡単に導入ができました。

.article h3: before {
margin-right: 5px;
font-family: "FontAwesome";
content: "\f046";
}

これだけ!

最後の行「content:」の数字を変えればアイコンフォントが変えられるということで、この「Font Awesome Icons一覧」を参考にして、自分の使いたいアイコンに変えてみました。
 
H4タグやH5タグも同様にアイコンだけ変更して完了!
 

ここで苦労したのが多読ブログ……関連する記事の表示がおかしい!

ここまでは簡単にいったのですが……実際に表示を見てみると関連する記事に関してもこのH3タグが反映されてしまったんです。まぁH2のところをH3にしちゃったため、そりゃあおかしいですよね。

この関連する記事は、Wordpress Related Postsでやっているものだったので、プラグインの記述を探しまくり、見つけました!「init.php」の中に記述が。

if ($options['display_zemanta_linky']) {
 $posts_footer .= '<div class="wp_rp_footer"><a class="wp_rp_backlink" target="_blank" href="http://www.zemanta.com/?wp-related-posts" rel="nofollow">Zemanta</a></div>';
 }
 
$css_classes = 'related_post wp_rp';
 $css_classes_wrap = ' ' . str_replace(array('.css', '-'), array('', '_'), esc_attr('wp_rp_' . $platform_options['theme_name']));
 
$related_posts_lis = wp_rp_generate_related_posts_list_items($related_posts, $selected_related_posts);
 $related_posts_ul = '<ul class="' . $css_classes . '">' . $related_posts_lis . '</ul>';
 
$related_posts_title = $title ? ($before_title ? $before_title . $title . $after_title : '<h3 class="related_post_title">' . $title . '</h3>') : '';
 
$first_id_attr = '';
 if($wp_rp_is_first_widget) {
 $wp_rp_is_first_widget = false;
 $first_id_attr = 'id="wp_rp_first"';
 }

11行目の<h3>を<h4>に変更することで落ち着きました。ちなみに、jetpackのSNSの部分で「共有」という文字も<h3>になっていたので、何とか変えたかったのですが……こちらは発見できず、あえなく何もいれずブランクにしたところ、文字が消えたので、それで終了しています。

何ともかんとも、たぶんまたいろいろと不具合が出るんだろうなあとは思いますが、その都度、戦っていくしかありませんね汗

水月 和香

TVディレクター, ライター, 翻訳家の卵(勉強中) at フリーランス
報道・ドキュメンタリーを手がけるTVディレクターです。最近ではウェブライターの仕事も。翻訳家(出版翻訳)を目指し勉強中。
英語洋書の多読が趣味。海外ドラマと映画も好きです。
◆◇ 次回予告 ◇◆
次回の記事はたぶん、きっと……
ブログの下書きにはEvernoteが最強! 3日坊主だったブログが続くようになった3つの理由 」になる予定です。読み逃しなく♪
RSS購読はこちら →

Fatal error: Call to undefined function is_bottom_sns_btns_visible() in /home/sites/heteml/users/a/q/u/aqualuna/web/jpnet/wp-content/themes/simplicity-child/entry-body.php on line 89