リンクボタンのデザイン変更方法を教えて下さい。
[1]◆ud7Jtza..c Android
2016/09/28 21:48
リンクタグを使用してリンクボタンを設置すると、デザインが統一されたものに変更されてしまい、困っています。(画像添付)

デザインを変更したくて、いろいろ試しましたが…無理でした。
ノイローゼになりかけています。

これはCSSによるものでしょうか?

当方、CSSの知識が無く、表示を変更することができなくて困っています。

画像を使用せずに、掲示板内すべてのリンクボタンのデザインを変更したいです。
可能でしょうか?

お忙しいところ申し訳ございませんが、回答をお願いしますm(_ _)m



書く|更新|検索|
返信数:6件

[7]◆ud7Jtza..c Android
2016/10/01 12:18
とても丁寧な回答ありがとうございます(。・ω・。♪

呪文?暗号?
文字数の多さに驚愕しております((((゜д゜;))))

当方、タグの知識が皆無に等しいのに、安易にデザインを変更しようと考えてしまい、大変失礼いたしました(>_<。)
まさか、こんなに膨大な文字列が必要とは…

自分もコツコツ勉強します(`・ω・´)

迅速に対応して下さり、とてもとてもとても感謝をしておりますヾ(*・∀・*)ノ

SMART-BBSさんを、いろんな所で紹介させていただきます☆


[6]サポート Firefox
2016/09/30 19:28
下の書込みもあわせてご覧ください。


/* 次前ページリンクあり */
a.page-jump-button-on {
display: inline-block;
*display: inline; /*for IE*/
*zoom: 1; /*for IE*/
width: 30%;
color: #ffffff;
font-weight: bold;
text-shadow: 0 -1px 0px #225588,0 -2px 0px #225588;
text-align: center;
text-decoration: none;
border: 1px solid #225588;
margin: 3px;
padding: 5px 10px;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
background: #337fcc;
background: -moz-linear-gradient(rgba(34,85,136,0.5), rgba(34,85,136,1));
background: -webkit-gradient(linear, 99% 0%, 99% 99%, from(rgba(34,85,136,0.5)), to(rgba(34,85,136,1)));
box-shadow: 1px 2px 2px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.5) inset, 0px -1px 0px rgba(255,255,255,0.2) inset;
}

/* ページ遷移リンクなし */
span.page-jump-button-off {
display: inline-block;
*display: inline; /*for IE*/
*zoom: 1; /*for IE*/
width: 25%;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #3d3b3d;
padding: 5px 10px;
margin: 3px;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border: 1px solid #b3b3b3;
background: #ffffff;
-moz-box-shadow:
1px 1px 2px rgba(000,000,000,0.2),
inset 0px 2px 1px rgba(255,255,255,1);
-webkit-box-shadow:
1px 1px 2px rgba(000,000,000,0.2),
inset 0px 2px 1px rgba(255,255,255,1);
box-shadow:
1px 1px 2px rgba(000,000,000,0.2),
inset 0px 2px 1px rgba(255,255,255,1);
}

[5]サポート Firefox
2016/09/30 19:27
お世話になります。
追加でCSSを入力していただければとりあえず四角になります。

/* 各種送信ボタン */
input[type="submit"]
{
border: 1px solid #ccc;
background: #eee;
font-weight: bold;
color: #444;
text-shadow: 0 1px 1px #f6f6f6;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fdfdfd),color-stop(1, #eeeeee));
background-image: -moz-linear-gradient(top, #fefefe, #eeeeee);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=*#fdfdfd*, EndColorStr=*#eeeeee*)";
-moz-box-shadow: 0px 1px 4px rgba(0,0,0,.3);
-webkit-box-shadow: 0px 1px 4px rgba(0,0,0,.3);
box-shadow: 0px 1px 4px rgba(0,0,0,.3);

-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;

-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;

display: block;
width: 90%;
height: 40px;
margin: 7px auto;
text-align:center;
}

/* 下部戻る等のリンク */
a.back-button {
display: block;
text-decoration: none;
font-weight: bold;
text-shadow: 0 -1px 0px #000000,0 -2px 0px #000000;
color: #3d3b3d;
width: 90%;
margin: 3px auto;
padding: 10px 10px;
background: #f0f0f0;
background: -moz-linear-gradient(
top,
#e6e6e6 0%,
#f0f0f0);
background: -webkit-gradient(
linear, left top, left bottom,
from(#e6e6e6),
to(#f0f0f0));
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
border: 1px solid #949494;
-moz-box-shadow:
1px 0px 1px rgba(000,000,000,0.3),
inset 0px 0px 2px rgba(255,255,255,1);
-webkit-box-shadow:
1px 0px 1px rgba(000,000,000,0.3),
inset 0px 0px 2px rgba(255,255,255,1);
box-shadow:
1px 0px 1px rgba(000,000,000,0.3),
inset 0px 0px 2px rgba(255,255,255,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.2),
0px 1px 0px rgba(255,255,255,1);
}

[4]◆ud7Jtza..c Android
2016/09/30 00:30
すみません。やはり、どうしても変更できないリンクボタンがありましたので、再び質問をさせて頂きます。

変更したいリンクボタンは、角部に丸みのあるもの全てです。
具体的に例を書きますと、
・掲示板トップ下の、[管理人へ連絡][管理ログイン]
・様々なページの下にある[スレッド一覧に戻る]
・書き込みページ内の[書き込み]
・スレッド入室パスワード画面の[送信]
など です。

また、掲示板やフリーページ内に、タグを使用してボタンリンクを設置すると、>>1の添付画像のリンクボタンになってしまいます。

上記、全てのリンクボタンデザインを、角に丸みの無いデザイン、かつ、任意の色に変更したいです。
具体的なデザインとタグを、画像で添付します(ボタン内の文字が途切れているのは、わざとです)。

このように変更したい理由は
・オンラインゲームの交流掲示板を作成しており(スマホ用)、ゲームのログイン画面や設定画面のボタンと、当方の掲示板のリンクボタンを同じデザインにしたい。
・上記ゲームは外国の方が作ったもので、ボタン内の文章が途切れていたり、変な日本語表示のボタンがあったりするので、当方の掲示板でもそれを再現して、利用者様を楽しませたい。
・タグの知識は無いが、簡単なデザインのため、容易にリンクボタンを作成できる。
・「通信速度制限が掛かっているスマホからでもサクサク閲覧できる」ということを売りにしているので、できるだけ画像でのリンクは使用したくない。
…など、です。

長々とすみません汗

お忙しいところ、誠に心苦しいのですが
回答をお願いします<(_ _)>



[3]◆ud7Jtza..c Android
2016/09/29 15:30
早速の回答ありがとうございます(≧ω≦)
急いで知りたかったので、とても とても助かります☆

なんとか自分で工夫してやってみます(`・ω・´)
もし、どうしても分からないことがあったら、また書きに来ますので、その時は宜しくお願いします(・ω・)ノ

お忙しいところ、本当に
ありがとうございましたm(_ _)m

[2]サポート Firefox
2016/09/29 14:54
お世話になります。

下記の様に通常のリンクを設置する場合はデザイン等のない普通のリンクとなります。
<a href="リンクURL"></a>

タグによる設置はデフォルトのCSSが反映されます。
##make_th(スレ作成)## 等

どのように変更したいなどありますでしょか?


ちなみに下記を管理画面のスマホCSS編集に入れてメインのボタン調整する事は可能です。
数値部分を変更して頂くことで表示が変化致します。

.button a{
/* 枠の外の余白 上下px 横px */
margin: 5px 1px;

/* 枠の内の余白 上下px 横px */
padding: 0px 8px;

/* 高さ */
height: 40px;

/* 文字大きさ */
font-size:90% ;

/* 文字の位置 */
text-align: center;

/* 枠内での文字位置 */
line-height: 40px;

/* 枠線の色 */
border: 1px solid #cccccc;

/* 背景の色 */
background: 未使用;

/* 枠の丸み */
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

/* 枠の影 */
box-shadow: 1px 2px 2px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.5) inset, 0px -1px 0px rgba(255,255,255,0.2) inset;
}

他にも変更したい箇所があれば説明させて頂きます。


前へ次へ
/1

書く|更新|検索|

スレッド一覧

全国募集板
RANK|LINK|ホムペ
SMART-BBS