【javascript】【css】犬のメニューバーをお絵描きしました!
mokabuu
mokabuu.com
参考:【wordpress】excerpt.phpを使おう!
この記事は上記の記事の続きになります!どうも!
先日mokabuu.comのデザインを一新してカテゴリ別excerpt.phpの(抜粋)ページの表示を変えました!
なのでその手順や僕の書いた糞コードを晒したいと思います。
※mokabuu.comではいかなる不具合も責任をとりかねます。コードを参考にする際は自己責任でよろしくお願いします。
[adsense]
/*
投稿記事一覧機能追加
*/
function new_excerpt_more($post) {
return '<a href="'. get_permalink($post->ID) . '">' . '...続きを読む ' . '</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');
前回書いたこのコードを
/*
投稿記事一覧機能追加
*/
function new_excerpt_more($post) {
return '';
}
add_filter('excerpt_more', 'new_excerpt_more');
このように編集してください!
こうする事で抜粋後の「続きを読む」の文字が一切表示されなくなります!
.excerption_block {
background-color: rgba(0,0,0,0.1);
position: relative;
float: left;
display: block;
width: 32%;
height: 320px;
margin: 2px;
font-size: 12px;
padding-top: 16px;
overflow: scroll;
}
.entry-header .entry-title_exc {
font-size: 14px;
line-height: 1.2;
font-weight: normal;
}
.entry-header .entry-title_exc a {
text-decoration: none;
}
前半部分は記事一覧の枠をつくるcssです。
後半部分はタイトルの文字を14pxにするためのcssです。
<div class="excerption_block"> <header class="entry-header"> <h1 class="entry-title_exc"> <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentytwelve' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a> </h1> </header><!-- .entry-header --> <!-- 中略 --> <?php endif; ?> </div>
まずは先ほど作ったdiv classの適用ですね!excerptの部分全体を覆うようにします。
そしてh1 classも先ほど作成したentry-title_excにしてあげます!
コメントに関する箇所は邪魔なのでコメントアウトするか削除しちゃいましょう!
役に立った!と言う方は是非mokabuu.comのイイネ!もよろしくお願いします。笑