カテゴリ:メニュー周り( 3 )

エキサイトブログのスキン、「テキストカスタマイズ右カラム」のスキンをベースに、メニューの「+」のアイコンを変えてみましょう。

a0342241_16363200.png

文字で置き換える

「デザインスキン」→「カスタマイズ」→「テキストカスタマイズ右カラム」のスキンを自分のブログに適用したら、
編集のCSSから下記のコードを探しましょう。

.menu .menu-title:before { content: "+"; /*---メニューリストアイコン---*/ }

ご丁寧にメニューリストアイコンってつけてくれていますが、デフォルトで入っている+はここで設定しているのですね。
この部分を文字で変更してあげると好きなものにできます。!とか○とか×とか。

a0342241_16441458.png

♡などの機種依存文字もいけるかもしれませんが、環境によっては見えないでしょう。
よくよく調べると、コードで入れてあげれば見えるみたいです。

例)✿ こんなお花だとか(\00273f) ♥ ハートマーク(\002665)

[css] contentプロパティで挿入できるコンテンツ
色とか入れてあげるとかわいいですね。

a0342241_16573301.png
content: '\002665';
color: #e74c3c;

言葉でもいけますね、文字数も1文字でなくても大丈夫です。


a0342241_16453436.png

画像にする

文字なら比較的簡単に変更することができました。
画像ではどうでしょうか?
画像の場合は、contentの中身を空にして、代わりにbackgroundで背景画像を指定しましょう。
画像サイズが小さい場合はそのままでも大丈夫ですが、大きかったりサイズが合わない場合は
background-size: 18px; など背景画像のサイズを提示してあげましょう。

.menu .menu-title:before {
content: "";
background: url(画像URL) no-repeat;
padding-left: 18px;
}
a0342241_10581770.png

[PR]
by exblog-tips | 2016-01-20 11:11 | メニュー周り
a0342241_14213215.png

エキサイトブログのサイドメニューにある、検索バー。ただそのまま入っている、って感じで結構しょぼいんですよね。
今回はこのパーツをもっと見栄え良くしたいと思います。

ボタンを枠線のみのフラットにする

今回はCSSがわりとややこしいので、CSSのコピペ用コードだけ置いておきます。

a0342241_14510185.png
.menu-body table {    
    width: 100%; 
}    
.menu-body table tbody tr:nth-child(2) td:first-child,
.menu-body table tbody input+tr td:first-child {
    width: 150px !important;
}    
.menu-body table tbody tr:nth-child(2) td:nth-child(2),
.menu-body table tbody input+tr td:nth-child(2) {
    width: 10px !important; 
} 
.menu-body table tbody tr:nth-child(2) td:nth-child(3),
.menu-body table tbody input+tr td:nth-child(3) {      
    width: 20px !important; 
}
.menu-body table input[type="submit"] {  
    background: none;  
    border: none;  
    border: 1px solid #ccc; 
    padding: 4px 5px;
}

ボタンを塗りつぶし

色を変えてカスタマイズ!

a0342241_14582604.png
.menu-body table {    
    width: 100%; 
}    
.menu-body table tbody tr:nth-child(2) td:first-child,
.menu-body table tbody input+tr td:first-child {
    width: 150px !important;
}    
.menu-body table tbody tr:nth-child(2) td:nth-child(2),
.menu-body table tbody input+tr td:nth-child(2) {
    width: 10px !important; 
} 
.menu-body table tbody tr:nth-child(2) td:nth-child(3),
.menu-body table tbody input+tr td:nth-child(3) {      
    width: 20px !important; 
}
.menu-body table input[type="submit"] {  
    display: block;    border: none;    width: 40px;    height: 30px;    background: #666;    border-radius: 4px;    color: #fff;
}

ボタンを画像化

お好きな画像で試してみてください。
画像のサイズ似合わせてbackground-sizeとwidth、heightを変えてあげればいい感じになるやも

a0342241_14510103.png
  .menu-body table {
    width: 100%;
}    
.menu-body table tbody tr:nth-child(2) td:first-child,
.menu-body table tbody input+tr td:first-child { 
    width: 150px !important;
}
.menu-body table tbody tr:nth-child(2) td:nth-child(2),
.menu-body table tbody input+tr td:nth-child(2) {
    width: 10px !important; 
}
.menu-body table tbody tr:nth-child(2) td:nth-child(3),
.menu-body table tbody input+tr td:nth-child(3) {      
    width: 20px !important; 
}
.menu-body table input[type="submit"] {      
    background: url(好きな画像のアドレス) no-repeat;
    background-size: 30px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden; 
    display: block;
    border: none;
    width: 30px;
    height: 30px;
}

[PR]
by exblog-tips | 2016-01-08 15:00 | メニュー周り
a0342241_18313813.png

SNSなどで、プロフィールが表示される時、円形に表示されることが多いですよね。
エキサイトブログでも画像を丸くすることができます。
これをすると最近のお洒落なブログっぽくなるのでオススメです。

クラス名を確認する

自分のブログをchoromeの検証から、プロフィールに使われている画像のクラス名を調べてみましょう。
>>choromeの検証機能の使い方はこちら

例えば、PCデザインスキンの「カスタマイズ」→「カスタマイズ3カラム」の写真を入れ替えて使うことのできるスキンならプロフィールの画像名のクラスは[ LOGO ]となっています。
このCSSに追加で角を丸くする指示を与えてみましょう。
ちなみに、画像を表すタグにclassの表示がなかった場合は、その上の階層のクラスからこんな風に書くことができます。

HTML

  <div class="logoimage">    
    <a href="#">      
      <img src="~~.jpg">
    </a>
  </div>

CSS

  .logoimage img { 
    border-radius: 100px;
 }

ポイントはあくまでもimgタグにあたるようにCSSを書くことです。
円にする方法自体はとっても簡単。下記のように記載しましょう。元々は四角の角を丸くするという指示ですが、角を丸くしすぎるといずれ円になりますよね。この数値をいろいろ変えて変化を実感してみましょう。

CSSを書き加える

  .LOGO { 
    border-radius: 100px;
 }
a0342241_09451133.png

横長の画像にしている方はこんな風に画像がつぶれちゃうことも。。。
その場合はimgタグではなくその上の階層のタグに角丸をつけてあげるとうまくトリミングできると思います。


[PR]
by exblog-tips | 2016-01-05 09:46 | メニュー周り

エキサイトブログをとことん使い倒すブログです。こんなことできないかな?をゆるっと募集中!


by エキブ