No.5243
- ユーザ「にしし」の投稿だけを見る (※時系列順で見る)
- この投稿と同じカテゴリに属する投稿:
- この投稿日時に関連する投稿:
- この投稿に隣接する前後3件ずつをまとめて見る
- この投稿を再編集または削除する
お手軽一言掲示板(この辺の文章は「管理画面」の「設定」内にある「フリースペース」タブから編集できます。)
動作サンプルです。 ご自由にお試し下さい。パスワードguest
で管理画面もお試し頂けます。
■いま見ているスキンは「シンプル日記スキン」です。他に、
標準スキン、
昔のツイッターっぽいスキン(ブルー)、
昔のツイッターっぽいスキン(ピンク)、
付箋型スキン、
ジャーナル(日誌)スキン、
ブログタイプスキン(タイトル付きブログっぽくできるスキン)、
黒板スキン、
チャットタイプスキンがあります。
《てがろぐCGIの配布・解説ページに戻る》
:シンプル日記スキン:
スキンは弄り放題なので、掲載したくない要素はたいてい省けます。このスキンでは投稿者名を一切表示しません。
No.5243
■フリースペース:
ここは、CGIの設定画面から自由に文章を入力して掲載できるスペースです。スキンを編集しなくてもCGI上から手軽に内容を変更できます(HTML使用可)。
🥪Re:5242◆リンクを画像に変えたいだけなら、CSSで実現できます。
例えば、外側スキンに <div class="backlink">[[FREE:HOMELINK]]</div> のように書いているとします。
すると、実際には <div class="backlink"><a href="設定されたリンク先">設定されたラベル</a></div> というHTMLが出力されますね。
このリンクテキストを例えば back.png という画像に置き換えるには、以下のようなCSSを使えば可能です。
.backlink a {
display: inline-block;
width: 100px; /* 画像の幅に合わせて調整 */
height: 30px; /* 画像の高さに合わせて調整 */
background-image: url('back.png');/* 見せたい画像 */
background-size: contain;
background-repeat: no-repeat;
text-indent: -9999px;
overflow: hidden;
}
この方法なら、HTMLは何も変えずに、CSSだけでテキストリンクを画像リンクに変更できます。
(他には、JavaScriptで innerText をimg要素に置き換える手もありますけども。)