前回続きを読むのアイコンフォントの設置が失敗したので
この際だからボタン風の画像を作成して設置することにした
まずボタン風の画像の作成だがサイドバーのタイトル部分のコードを拝借する
style.cssを開いてa.more-linkの背景が
サイドバーのタイトル部分と同じになるようにコードを書き換え
a.more-link {
font-size: 13px;
text-align: center;
line-height: 0.8em;
color: #636363;
letter-spacing: 1px;
margin: 0;
margin-bottom: 12px;
/*! padding: 3px; */
padding: 8px 10px 8px 37px;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
border: 1px solid #cccccc;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
border-radius: 3px;
border-top-color: #9932cc;
border-top-width: 2px;
}
その後content.phpのRead moreに表示するテキストを設定するのだが
横幅を調整できるように全角スペースを入力することにする
<?php the_content( ); ?>
全角スペースの入力数は「続きを読む」に設定しい横幅になるように調整する
そして続きを読むに何も書かれていないボタンが表示されたらPrintScreenで
画面をキャプチャして画像編集ソフトでボタン部分をトリミングする
トリミングしたボタンに「続きを読む」など表示したい文章を合成する
こうして出来上がった画像をWordPressにアップロードし画像のURLを控えておく
そしてstyle.cssを再度開いてa.more-linkの部分を以下のように修正する
/*続きを読むに乃木坂ボタンを設定*/
a.more-link {
margin: 15px 0;
text-indent: -9000px; /* 文字が邪魔なので画面外に追い出す */
background-image: url("http://wastedays.cloudfree.jp/wp-content/uploads/2016/02/20160228_12-52-02.png");
background-repeat: no-repeat;
background-position: left center;
background-size: contain; /*画像を縦横比を保って拡大*/
width: 111px;
height: 36px; /*画像の縦横のpx数を入力する*/
float: left;
}
Techismの場合はa.more-linkに問答無用でcontent.phpの
Read moreに表示するテキストが表示されてしまうのだが
content.phpを前述のとおり全角スペースに置き換えても良いのだが
phpの設定をミスってWordPressが動かなくなっても困るのでなるべく弄りたくない
よってtext-indentというコードでテキストが画面外に表示されるようにした
弊害としてボタンを押したときにリンクの範囲を示す表示が一瞬表示されるのだが
まあ実用上問題ないだろう
これでボタン風の続きを読むリンクが出来上がって見た目も良さ気になった
若干フォントが汚いのが気にはなるがまあこんなもんでいいかｗ
コメントを残す