自分用 続きを読むを画像に変える [コマンド]
忘れないように自分用まとめです。
■ソネットブログの続きを見るを画像に変える。
※素人によるものです。
真似をしておかしくなっても責任は取れませんので注意。1)画像を用意。アップロードしておく。
2)デザイン、テンプレート管理、スタイルシート編集へ。
3)ctr+FでreadMoreLink部分を探す。
下記は実際の文。
a.readMoreLink {
padding:4px 550px 150px 8px;
//ここを消して画像URLを挿入
color:Transparent;
}
paddingは自分の画像によって大きさを変える。今回用意したのは幅500px高さ150pxだったので上記のように変更。個人で大きさを変えること。
//ここを消して画像URLを挿入の部分は画像にしたい部分のこと。各自でこの部分に画像を入れること。下にあるファイルから用意した画像を押せばOK。
color:Transparent;の記述で続きを読むの文字を透明化しています。
4)おおむね完成。個人でプレビューを見て、ずれている部分を直す。
tagや日付などがかぶっている場合は
/*--Tag--*/
.tag-word{
margin:10px 0 0 0;
font-size:10px;
}
部分のmargin記述を変えたり、
.posted{
margin:0 0 0 0;
padding:40px 40px 20px 45px;
font-size:13px;
}
のmarginの記述を変えてずれを合わせること。
課題:外部連携にチェックを入れているとタグをつけていないときに画像の上に表示される。
対策:外部連携を切る。該当箇所を捜し、外部連携部分の記述を変更する。タグを毎回つける。
コメント 0