• 19 Oct
    • アメブロのコメント内容をCSSだけで吹き出し風にする

      アメブロのコメント内容をCSSだけで吹き出し風にするわざめーば、こと松本です。こんにちは。アメブロの記事内で吹き出し風の囲み枠を使う方法を書いたあと、ちょっと変えるだけでコメントに使えそうだと思ったのでCSSを作ってみました。画像などは使わないので、色や角の丸みなど、好み応じて変更していただけます。設定は、次のコードをご自分のブログのCSSの最後に追加するだけでOKです(CSS編集用デザイン専用です)。/* コメント内容を吹き出し風に */.commentBody {  position: relative;  display: inline-block;  margin: 0 5px 0 0;  padding: 15px 10px;  vertical-align: top;  border-style: solid;  border-width: 1px;  border-color: #cccccc; /* 枠線の色 */  border-radius: 10px; /* 四隅の丸み */  background-color: #ffffff; /* 内側の背景色 */  box-shadow: 2px 2px 4px #e0e0e0; /* 影 */  margin-bottom: 15px; /* ツノの突き出し量+余白5 */}.commentBody:before {  position: absolute;  content: "";  width: 0;  height: 0;  top: 100%;  border-style: solid;  border-color: transparent;  border-top-color: #cccccc; /* 枠線の色 */  border-width: 10px; /* ツノの突き出し量 */  left: 15px; /* ツノの位置(左から) */}.commentBody:after {  position: absolute;  content: "";  width: 0;  height: 0;  top: 100%;  border-style: solid;  border-color: transparent;  border-top-color: #ffffff; /* 内側の背景色 */  border-width: 9px; /* ツノの突き出し量-1 */  left: 16px; /* ツノの位置+1(左から) */}/* オーナーコメントの吹き出し */.ownerComment .commentBody {  background-color: #fff0f0; /* 内側の背景色 */}.ownerComment .commentBody:after {  border-top-color: #fff0f0; /* 内側の背景色 */}色など変更されたい場合は、注釈(/*と*/の間の文字)を参考にやってみてくださいね。以上、アメブロのコメント内容をCSSだけで吹き出し風にする方法をご紹介しました。もしよかったら試してみてください。なお、冒頭の画像は「なんしか、やってみたがりな方(笑)」のブログに適用した場合です^^勝手に使ってしまいすみません(_ _)ちなみに、当ブログはコメントを閉じているので、当ブログでのテストできませんでした(汗)

      4
      テーマ:
    • アメブロの記事内で会話を吹き出しで書いてみる

      アメブロの記事内で会話を吹き出しで書いてみるわざめーば、こと松本です。こんにちは。最近、SNSのボタンなどでよく見かけるCSSを使った吹き出しを参考にしてアメブロ記事内で試してみたので、無理やり会話風に書いてみます(汗)---松本さん!アメブロの記事を会話形式で書きたいんですが・・・、アメブロをカスタマイズして吹き出し風に表示することってできますか?はい、できますよ。そうなんですか?ぜひ教えて下さい。じゃ、まずは次のコードをご自分のブログのCSSの最後に追加して下さい。/* 吹き出し */.fukidashi {  position: relative;  display: inline-block;  margin: 0 5px;  padding: 15px 10px;  vertical-align: top;  border-style: solid;  border-width: 1px;  border-color: #cccccc; /* 枠線の色 */  border-radius: 10px; /* 四隅の丸み */  background-color: #fffff0; /* 内側の背景色 */  box-shadow: 2px 2px 4px #e0e0e0; /* 影 */  margin-bottom: 15px; /* ツノの突き出し量 */}.fukidashi:before {  position: absolute;  content: "";  width: 0;  height: 0;  top: 100%;  border-style: solid;  border-color: transparent;  border-top-color: #cccccc; /* 枠線の色 */  border-width: 15px; /* ツノの突き出し量 */  left: 30px; /* ツノの位置(左から) */}.fukidashi:after {  position: absolute;  content: "";  width: 0;  height: 0;  top: 100%;  border-style: solid;  border-color: transparent;  border-top-color: #fffff0; /* 内側の背景色 */  border-width: 14px; /* ツノの突き出し量-1 */  left: 31px; /* ツノの位置+1(左から) */}/* 吹き出し2(右下に下向きツノ) */.fukidashi2 {  position: relative;  display: inline-block;  margin: 0 5px;  padding: 15px 10px;  vertical-align: top;  border-style: solid;  border-width: 1px;  border-color: #cccccc; /* 枠線の色 */  border-radius: 10px; /* 四隅の丸み */  background-color: #f0ffff; /* 内側の背景色 */  box-shadow: 2px 2px 4px #e0e0e0; /* 影 */  margin-bottom: 15px; /* ツノの突き出し量 */}.fukidashi2:before {  position: absolute;  content: "";  width: 0;  height: 0;  top: 100%;  border-style: solid;  border-color: transparent;  border-top-color: #cccccc; /* 枠線の色 */  border-width: 15px; /* ツノの突き出し量 */  right: 30px; /* ツノの位置(右から) */}.fukidashi2:after {  position: absolute;  content: "";  width: 0;  height: 0;  top: 100%;  border-style: solid;  border-color: transparent;  border-top-color: #f0ffff; /* 内側の背景色 */  border-width: 14px; /* ツノの突き出し量-1 */  right: 31px; /* ツノの位置+1(右から) */}記事で使うときは、<div class="fukidashi">★</div>というタグで使います(黄色い方)。「★」の部分を吹き出し内に書きたい内容に変更して下さいね。青い方は、以下のようなタグになります。<div class="fukidashi2">★</div>あ、でも・・・、会話なら・・・、こんな形の方がいいかもしれませんね。これもCSSを書いときます。/* 吹き出し(左向きにツノ)*/.fukidashi_l {  position: relative;  display: inline-block;  margin: 0 5px;  padding: 15px 10px;  vertical-align: top;  border-style: solid;  border-width: 1px;  border-color: #cccccc; /* 枠線の色 */  border-radius: 10px; /* 四隅の丸み */  background-color: #fffff0; /* 内側の背景色 */  box-shadow: 2px 2px 4px #e0e0e0; /* 影 */  margin-left: 15px; /* ツノの突き出し量 */}.fukidashi_l:before {  position: absolute;  content: "";  width: 0;  height: 0;  right: 100%;  border-style: solid;  border-color: transparent;  border-right-color: #cccccc; /* 枠線の色 */  border-width: 15px; /* ツノの突き出し量 */  top: 10px; /* ツノの位置(上から) */}.fukidashi_l:after {  position: absolute;  content: "";  width: 0;  height: 0;  right: 100%;  border-style: solid;  border-color: transparent;  border-right-color: #fffff0; /* 内側の背景色 */  border-width: 14px; /* ツノの突き出し量-1 */  top: 11px; /* ツノの位置+1(上から) */}/* 吹き出し(右向きにツノ)*/.fukidashi_r {  position: relative;  display: inline-block;  margin: 0 5px;  padding: 15px 10px;  vertical-align: top;  border-style: solid;  border-width: 1px;  border-color: #cccccc; /* 枠線の色 */  border-radius: 10px; /* 四隅の丸み */  background-color: #f0ffff; /* 内側の背景色 */  box-shadow: 2px 2px 4px #e0e0e0; /* 影 */  margin-right: 15px; /* ツノの突き出し量 */}.fukidashi_r:before {  position: absolute;  content: "";  width: 0;  height: 0;  left: 100%;  border-style: solid;  border-color: transparent;  border-left-color: #cccccc; /* 枠線の色 */  border-width: 15px; /* ツノの突き出し量 */  top: 10px; /* ツノの位置(上から) */}.fukidashi_r:after {  position: absolute;  content: "";  width: 0;  height: 0;  left: 100%;  border-style: solid;  border-color: transparent;  border-left-color: #f0ffff; /* 内側の背景色 */  border-width: 14px; /* ツノの突き出し量-1 */  top: 11px; /* ツノの位置+1(上から) */}記事で使うときは、左にツノが出ている方が、<div class="fukidashi_l">★</div>というタグで使います。「★」の部分を吹き出し内に書きたい内容に変更するのは同じです。また、右にツノが出ている方は、以下のようなタグになります。<div class="fukidashi_r">★</div>ちなみに、これらのタグは吹き出し部分だけで、顔の画像は普通に横に置いただけです。はい。      あと、アメブロカスタマイズの常ですが、残念ながらスマホには(普通は)反映されませんので、うまく使おうと思うと、もう少し工夫が必要かもしれませんが、ひとまずご紹介です。よかったら試してみてくださいね。ありがとうございました^^

      9
      テーマ:
  • 03 Apr
    • アメブロの記事下の各種共有ボタンを消す(非表示にする)方法

      アメブロの記事下の各種共有ボタンを消す(非表示にする)方法アメブロカスタマイズのわざめーば、こと松本です。こんにちは。今回は、アメブロのカスタマイズ向けデザイン『CSS編集用デザイン』の記事下に表示される、各種共有ボタンを消す(非表示にする)方法をご紹介します。共有ボタンというのは、各記事のフッター部に表示される『なうで紹介ボタン』『mixiチェックボタン』『Twitterツイートボタン』『Facebookいいね!ボタン』の4つのボタンです。ちなみに、これらを一括してすべて非表示にしたい場合は、アメブロの基本設定ページで、『共有ボタンの表示』という項目を『表示しない』にすればOKです。ですが、この設定では、一つ一つの共有ボタンを個別に消す(非表示にする)ことはできませんので、これをCSSの編集で実現する方法をご紹介したいと思います。なうで紹介ボタンを消す(非表示にする)方法『なうで紹介』ボタンを消す(非表示にする)には、ユーザーCSSの末尾に以下のコードを追加してください。/************************************************* なうで紹介ボタンを非表示*************************************************/.articleExLinkArea .articleExLinkSubArea .nowBtn{ display:none;}通常は、コピペでOKです。mixiチェックボタンを消す(非表示にする)方法『mixiチェック』ボタンを消す(非表示にする)には、ユーザーCSSの末尾に以下のコードを追加してください。/************************************************* mixiチェックボタンを非表示*************************************************/.articleExLinkArea .articleExLinkSubArea .mixiBtn{ display:none;}これも、通常、コピペでOKです。Twitterツイートボタンを消す(非表示にする)方法『Twitterツイート』ボタンを消す(非表示にする)には、ユーザーCSSの末尾に以下のコードを追加してください。/************************************************* Twitterツイートボタンを非表示*************************************************/.articleExLinkArea .articleExLinkSubArea .tweetBtn1201{ display:none;}これも同様に、コピペでOKです。Facebookいいね!ボタンを消す(非表示にする)方法『Facebookいいね!』ボタンを消す(非表示にする)には、ユーザーCSSの末尾に以下のコードを追加してください。/************************************************* Facebookいいね!ボタンを非表示*************************************************/.articleExLinkArea .articleExLinkSubArea .fb-like{ display:none;}これも、やはり、コピペでOKです。共有ボタンを全て非表示(領域ごと)なお、共有ボタン全てを領域ごと一括してCSSで非表示にすることも可能です。全て非表示にしたい場合は、一般的には、アメブロの基本設定ページで設定すべきだと思いますが、何か理由があって敢えてCSSで消したいという場合は、この方法で非表示に出来ます。/************************************************* 共有ボタンを全て非表示(領域ごと)*************************************************/.articleExLinkArea{ display:none;}以上、アメブロのカスタマイズ向けデザイン『CSS編集用デザイン』の記事下に表示される、各種共有ボタンを消す(非表示にする)方法をご紹介しました。よかったら参考にして下さい。☞ アメブロカスタマイズと読者を増やすブログ運営 初心者でもかんたん

      110
      7
      テーマ:
  • 15 Apr
    • アメーバヘッダー(アメーバー)をカスタマイズする方法(半透明・移動・項目非表示など)

      アメブロカスタマイズアメーバヘッダー(アメーバー)をカスタマイズする方法(半透明・移動・項目非表示など)アメブロカスタマイズの松本です。こんにちは。先日仕様が変更となったアメーババーですが・・・、これは「アンタッチャブルな広告」扱いになるのかどうか・・・悩ましいですね。一応、運営側が広告と明言しているのはこちらで、僕は広告をはずすコースで外れる広告だけは有料で外す以外の方法で触ってはいけないというスタンスでカスタマイズしていますが、実際のところはそういう説明もされていません。というわけで、個人的には触れないのが安心だと思いますが、ご要望もあることですのでいくつかアメーバヘッダー(アメーバー)のカスタマイズ方法をご紹介しますね。でも、このブログでご紹介するのは少し気が引けましたので、別サイトでのご紹介とさせてください。アメーバヘッダー(アメーババー)をカスタマイズする方法「完全な白」とは言い切れませんので、くれぐれもそのあたりをご理解の上で参考になさってくださいね。関連記事☞ CSSを編集してアメブロをカスタマイズする方法☞ アメブロカスタマイズ目次☞ アメブロカスタマイズと読者を増やすブログ運営 初心者でもかんたん

      112
      19
      テーマ:
  • 08 Apr
    • CSSでヘッダーにスライドショーを表示する方法

      アメブロカスタマイズCSSでヘッダーにスライドショーを表示する方法アメブロカスタマイズの松本です。こんにちは。先日、アメピを使ってヘッダーにスライドショーを表示する方法をご紹介しましたが、CSSでできないか考えてみたところできましたのでご紹介します。アメピの方法と比較すると難易度が高めですが、「出来るだけフリープラグインは使いたくないけど、ぜひヘッダーにスライドショーを表示したい」という方はこちらでチャレンジされてもよいと思います。と言っても、事前のカスタマイズ状況にもよりますが、「アメピと比較すれば」難易度は高いということであって、そのまま使うのであれば決して難しい部類のカスタマイズではありません。なお、比較的新しい機能であるCSS3をたくさん使っているため古いブラウザではスライドショーとして表示されませんのでご注意ください。例えば、IE(Internet Explorer)の場合、バージョン10から対応しています。それから、今回ご紹介する方法では画像数2~5枚に対応していますが、CSSを変更すればもっと増やすことも可能ですので、興味のある方はご自分で調べてチャレンジしてみてもいいと思います。。CSSにスライドショーの設定をするでは、まず、以下のコードをユーザーCSSの末尾に追加して下さい。(もしユーザーCSSについてわからない場合はこちらをご参照ください。)長いので、漏れのないよう注意して貼り付けて下さいね。(このコードは、既にヘッダー画像を設定してヘッダークリックでブログトップへジャンプするようにしてある状態で、ヘッダー画像と同じ大きさのスライドショーを表示することを前提としています)/***********************************************************  CSS3スライドショー for アメブロ  2014/04/08 A.Matsumoto http://ameblo.jp/wazameba/***********************************************************/.skinContentsArea{  position:relative;}.css3ss {  position:absolute;  left:0;  top:-300px;}.css3ss img {  position:absolute;  opacity:0.0;}.css3ss br {  display:none;}.css3ss_2 img {  opacity:0.0;  animation:css3ss_ani_2 12s linear infinite 0s;  -webkit-animation:css3ss_ani_2 12s linear infinite 0s;}.css3ss_2 img:nth-of-type(1) {  opacity:0.0;  animation:css3ss_ani_2_1 12s linear infinite 0s;  -webkit-animation:css3ss_ani_2_1 12s linear infinite 0s;}.css3ss_3 img {  opacity:0.0;  animation:css3ss_ani_3 18s linear infinite 0s;  -webkit-animation:css3ss_ani_3 18s linear infinite 0s;}.css3ss_3 img:nth-of-type(1) {  opacity:0.0;  animation:css3ss_ani_3_1 18s linear infinite 0s;  -webkit-animation:css3ss_ani_3_1 18s linear infinite 0s;}.css3ss_4 img {  opacity:0.0;  animation:css3ss_ani_4 24s linear infinite 0s;  -webkit-animation:css3ss_ani_4 24s linear infinite 0s;}.css3ss_4 img:nth-of-type(1) {  opacity:0.0;  animation:css3ss_ani_4_1 24s linear infinite 0s;  -webkit-animation:css3ss_ani_4_1 24s linear infinite 0s;}.css3ss_5 img {  opacity:0.0;  animation:css3ss_ani_5 30s linear infinite 0s;  -webkit-animation:css3ss_ani_5 30s linear infinite 0s;}.css3ss_5 img:nth-of-type(1) {  opacity:0.0;  animation:css3ss_ani_5_1 30s linear infinite 0s;  -webkit-animation:css3ss_ani_5_1 30s linear infinite 0s;}.css3ss img:nth-of-type(1) {  animation-delay:0s;  -webkit-animation-delay:0s;}.css3ss img:nth-of-type(2) {  animation-delay:5s;  -webkit-animation-delay:5s;}.css3ss img:nth-of-type(3) {  animation-delay:11s;  -webkit-animation-delay:11s;}.css3ss img:nth-of-type(4) {  animation-delay:17s;  -webkit-animation-delay:17s;}.css3ss img:nth-of-type(5) {  animation-delay:23s;  -webkit-animation-delay:23s;}.css3ss img:nth-of-type(6) {  animation-delay:29s;  -webkit-animation-delay:29s;}@keyframes css3ss_ani_2_1 {  0%    {opacity:1.0;animation-timing-function:ease-in;}  41.7% {opacity:1.0;}  50.0% {opacity:0.0;animation-timing-function:ease-out;}  91.7% {opacity:0.0;}  100%  {opacity:1.0;}}@keyframes css3ss_ani_2 {  0%    {opacity:0.0;}  8.3%  {opacity:1.0;animation-timing-function:ease-in;}  50.0% {opacity:1.0;}  58.3% {opacity:0.0;animation-timing-function:ease-out;}  100%  {opacity:0.0;}}@keyframes css3ss_ani_3_1 {  0%    {opacity:1.0;animation-timing-function:lenear-in;}  27.8% {opacity:1.0;}  33.3% {opacity:0.0;animation-timing-function:lenear-out;}  94.4% {opacity:0.0;}  100%  {opacity:1.0;}}@keyframes css3ss_ani_3 {  0%    {opacity:0.0;}  5.5%  {opacity:1.0;animation-timing-function:lenear-in;}  33.3% {opacity:1.0;}  38.9% {opacity:0.0;animation-timing-function:lenear-out;}  100%  {opacity:0.0;}}@keyframes css3ss_ani_4_1 {  0%    {opacity:1.0;animation-timing-function:lenear-in;}  20.8% {opacity:1.0;}  25.0% {opacity:0.0;animation-timing-function:lenear-out;}  95.8% {opacity:0.0;}  100%  {opacity:1.0;}}@keyframes css3ss_ani_4 {  0%    {opacity:0.0;}  4.2%  {opacity:1.0;animation-timing-function:lenear-in;}  25.0% {opacity:1.0;}  29.2% {opacity:0.0;animation-timing-function:lenear-out;}  100%  {opacity:0.0;}}@keyframes css3ss_ani_5_1 {  0%    {opacity:1.0;animation-timing-function:lenear-in;}  16.7% {opacity:1.0;}  20.0% {opacity:0.0;animation-timing-function:lenear-out;}  96.7% {opacity:0.0;}  100%  {opacity:1.0;}}@keyframes css3ss_ani_5 {  0%    {opacity:0.0;}  3.3%  {opacity:1.0;animation-timing-function:lenear-in;}  20.0% {opacity:1.0;}  23.3% {opacity:0.0;animation-timing-function:lenear-out;}  100%  {opacity:0.0;}}@-webkit-keyframes css3ss_ani_2_1 {  0%    {opacity:1.0;animation-timing-function:ease-in;}  41.7% {opacity:1.0;}  50.0% {opacity:0.0;animation-timing-function:ease-out;}  91.7% {opacity:0.0;}  100%  {opacity:1.0;}}@-webkit-keyframes css3ss_ani_2 {  0%    {opacity:0.0;}  8.3%  {opacity:1.0;animation-timing-function:ease-in;}  50.0% {opacity:1.0;}  58.3% {opacity:0.0;animation-timing-function:ease-out;}  100%  {opacity:0.0;}}@-webkit-keyframes css3ss_ani_3_1 {  0%    {opacity:1.0;animation-timing-function:lenear-in;}  27.8% {opacity:1.0;}  33.3% {opacity:0.0;animation-timing-function:lenear-out;}  94.4% {opacity:0.0;}  100%  {opacity:1.0;}}@-webkit-keyframes css3ss_ani_3 {  0%    {opacity:0.0;}  5.5%  {opacity:1.0;animation-timing-function:lenear-in;}  33.3% {opacity:1.0;}  38.9% {opacity:0.0;animation-timing-function:lenear-out;}  100%  {opacity:0.0;}}@-webkit-keyframes css3ss_ani_4_1 {  0%    {opacity:1.0;animation-timing-function:lenear-in;}  20.8% {opacity:1.0;}  25.0% {opacity:0.0;animation-timing-function:lenear-out;}  95.8% {opacity:0.0;}  100%  {opacity:1.0;}}@-webkit-keyframes css3ss_ani_4 {  0%    {opacity:0.0;}  4.2%  {opacity:1.0;animation-timing-function:lenear-in;}  25.0% {opacity:1.0;}  29.2% {opacity:0.0;animation-timing-function:lenear-out;}  100%  {opacity:0.0;}}@-webkit-keyframes css3ss_ani_5_1 {  0%    {opacity:1.0;animation-timing-function:lenear-in;}  16.7% {opacity:1.0;}  20.0% {opacity:0.0;animation-timing-function:lenear-out;}  96.7% {opacity:0.0;}  100%  {opacity:1.0;}}@-webkit-keyframes css3ss_ani_5 {  0%    {opacity:0.0;}  3.3%  {opacity:1.0;animation-timing-function:lenear-in;}  20.0% {opacity:1.0;}  23.3% {opacity:0.0;animation-timing-function:lenear-out;}  100%  {opacity:0.0;}}CSSの内容については説明すると非常に長く難解になるので敢えて詳しくは説明しませんが、CSS3のアニメーション機能を使っていますので、興味のある方はどんなことをしているのか調べてみて下さい。フリースペースにスライドショーを準備次に、フリースペース(またはフリープラグイン)に、スライドショー本体のコードを記述していきます。例えば、画像が3枚の場合、コードは以下のようになります。<div class="css3ss css3ss_3" style="left:0px;top:-300px;"><a href="クリック時の移動先URL/"><img src="1枚目の画像のURL" /><img src="2枚目の画像のURL" /><img src="3枚目の画像のURL" /></a></div>赤文字の「3」の部分には、使用する画像の枚数(2~5)を記述します。「left」の値(0)と「top」の値(-300)は、スライドショーを表示する位置が、「left」を小さくすると左へ「top」を小さくすると右へ移動しますので、適切な値に調整して下さい。クリック時の移動先URLには、スライドをクリックした際にジャンプする先のURLを記述します(通常、ブログのトップページだと思いますが)。あとは、使用する画像のURLを取得して、スライドの数だけimgタグを記述すればOKです。なお、大変申しわけありませんが、こちらの方法は質問されても回答できません(大仕事になるので)。あらかじめご了承ください。ですので、「うまくいかない」「難しい」という場合は、アメピを使ってヘッダーにスライドショーを表示する方法の利用を検討してみて下さい。以上、CSSヘッダーにスライドショーを表示する方法をご紹介しました。よかったら挑戦してみて下さい。関連記事☞ CSSを編集してアメブロをカスタマイズする方法☞ アメブロカスタマイズ目次☞ アメブロカスタマイズと読者を増やすブログ運営 初心者でもかんたん

      42
      4
      テーマ:
  • 30 Mar
    • アメブロの記事領域に画像枠を付ける方法

      アメブロカスタマイズアメブロの記事領域に画像枠を付ける方法2014/03/30 過去記事の修正&再アップです。こんにちは、松本です。今回は、アメブロのカスタマイズ向けデザイン「CSS編集用デザイン」の記事領域に画像枠を付ける方法をご紹介します。画像を用意する今回は、次のような3枚の画像を使用しました。タイトル部ボディ部フッタ部これらの横幅は、3カラムレイアウトの記事の横幅の初期値である470ピクセルになっています。2カラムをお使いの場合は、初期値が665ピクセルですので、それにあわせた画像を用意してください。また、記事幅を変えている場合は、その記事幅に合わせたサイズの画像を用意して下さい。これらを、記事の各部の高さに合わせて、「タイトル部」1枚+「ボディ部」複数枚+「フッタ部」1枚の画像を縦に敷き詰め、全体で記事に画像枠がついたような効果にします。なお、今回ご紹介する方法では、タイトル部およびフッタ部の画像は、やや高さに余裕を持たせたほうがうまくできることが多いので参考にして下さい。CSSを編集するそれでは、以下のようなコードをあなたのアメブロのユーザーCSSの末尾に追加して下さい。ユーザーCSSについてわからない場合はこちらをご参照ください.skinArticle{  padding: 0;  border: none;}.skinArticleHeader{ /* タイトル部 */  margin: 0;  padding: 15px 30px 5px 30px; /* タイトル文字周辺の余白(↑→↓←の順) */  border: none;  background-image: url(https://stat.ameba.jp/user_images/20110815/19/sozai-land/31/42/p/o0470008011419016829.png);}.skinArticleTitle,.skinArticleTitle:visited,.skinArticleTitle:hover,.skinArticleTitle:focus{  color: #ffffff; /* タイトル文字色 */}.skinArticleBody2{ /* ボディ部 */  margin: 0;  padding: 0 30px 10px 30px; /* 記事周辺の余白(↑→↓←の順) */  border: none;  background-image: url(https://stat001.ameba.jp/user_images/20110815/20/sozai-land/e3/66/p/o0470001011419180108.png);}.articleThemeListArea,.articleImageListArea{  margin-bottom: 0;  padding-bottom: 20px;}.skinArticleBody{ /* フッタ部 */  padding-bottom: 10px; /* フッタ部の高さ */  background-repeat: no-repeat;  background-position: left bottom;  background-image: url(https://stat001.ameba.jp/user_images/20110815/20/sozai-land/f0/ea/p/o0470008011419180109.png);}画像ファイルのURLは上でご紹介した画像のものですので、他の画像を使用する場合は、使用したい画像のURLに変える必要があります。また、使用する画像によっては、各所の数値(余白)を変更する必要がありますが、上記コードに書いてあるコメント(注釈)を参考にして調節してみてくださいね。以上、アメブロの記事領域に画像枠を付ける方法でした。よかったら参考にして下さいね。関連記事☞ CSSを編集してアメブロをカスタマイズする方法☞ アメブロカスタマイズ目次2014/03/30 アメブロの仕様変更に合わせ記事修正&再アップ2011/08/15 記事公開アメブロカスタマイズと読者を増やすブログ運営

      53
      175
      テーマ:
    • 『読者になると、このブログの更新情報が届きます。』を太字や大きい文字サイズにして目立たせる方法

      『読者になると、このブログの更新情報が届きます。』を太字や大きい文字サイズにして目立たせる方法こんにちは、松本です。今回はアメブロカスタマイズの記事です。先日、読者登録ボタンの上下にメッセージを表示する方法というのを紹介したんですが、その際、コメントで、「更新情報が届きますって文字を赤字でもう少し太くしたい」というご要望がありましたので、今回、その方法をご紹介したいと思います。赤文字・太字で文字サイズも大きくするでは、実際の方法です。『読者になると、このブログの更新情報が届きます。』を赤文字、太字で文字サイズを大きくするには、ユーザーCSSに以下のような設定を追加して下さい。ユーザーCSSについてわからない場合はこちらを参照してください/* 『読者になると、このブログの更新情報が届きます。』を目立たせる */.readerMenu .readerRequestDescription {  font-weight: bold; /* 文字を太字に */  font-size: 14px; /* 文字サイズ */  color: #ff0000; /* 文字色を赤に */}文字サイズの14pxは、仮にこの大きさに設定していますが、ご自身のブログのサイドバーの幅に合わせて、もっと大きくしたい場合は数字を大きく(16pxなど)、小さくしたい場合は数字を小さく(12pxなど)に調節して下さい。このブログの場合はまた、参考に本ブログの設定もご紹介しておきます。この記事を書いている時点で、本ブログの『読者になると、このブログの更新情報が届きます。』は、セリフ付き(≒明朝体)、太字、文字を大きく、濃いめのオレンジ、影付きという設定なんですが、次のようなCSSになっています。/* 『読者になると、このブログの更新情報が届きます。』を目立たせる */.readerMenu .readerRequestDescription {  font-family: serif;/* セリフ付き */  font-weight: bold;/* 太字 */  font-size: 14px;/* 文字サイズ */  color: #ee7800;/* 濃いめのオレンジ色 */  text-shadow: 1px 1px 0 #ffffff, 2px 2px 0 #dddddd;/* 文字の影 */}同じか、近い表示にしたい場合はこちらを使っていただいてもOKです。表示内容を変更したい場合あと、『読者になると、このブログの更新情報が届きます。』という表示内容(文)を変更したい場合は、この文字を非表示にした上で、読者登録ボタンの上下にメッセージを表示する方法で、ボタン下にメッセージを表示するといいと思います。『読者になると、このブログの更新情報が届きます。』を非表示にするには、以下をユーザーCSSに追加すればOKです。/* 『読者になると、このブログの更新情報が届きます。』を非表示に */.readerMenu .readerRequestDescription {  display: none;}以上、『読者になると、このブログの更新情報が届きます。』を太字や赤文字、大きい文字サイズにして目立たせる方法を(ついでに消す方法も)ご紹介しました。ブログ訪問者へのアピールに役立てて頂ければと思います。よかったら参考にして下さいね。関連記事☞ CSSを編集してアメブロをカスタマイズする方法☞ アメブロカスタマイズ目次アメブロカスタマイズと読者を増やすブログ運営

      60
      2
      テーマ:
  • 28 Mar
    • 読者登録ボタンの上下にメッセージを表示する方法

      読者登録ボタンの上下にメッセージを表示する方法アメブロカスタマイズのわざめーばです。こんにちは。アメブロのサイドメニューの『このブログの読者』にある読者登録ボタン(読者になるボタン)の上または下に、CSSを使って、お好みのメッセージを表示する方法をご紹介します。例えば、今から読者になってくれようとしている方に向け、「よろしければ『相手に知らせて』で読者登録して下さいね」といったメッセージを表示するのに利用できると思います。読者登録ボタンの『上』にメッセージを表示する方法読者登録ボタンの『上』にメッセージを表示するには、ユーザーCSSに以下のような内容を追加します。ユーザーCSSについてわからない場合はこちらを参照してください/* 読者登録ボタンの『上』にメッセージ表示 */.readerMenu .readerRequestBtnArea:before{  display: block;  white-space: pre-wrap; /* 改行できるようにするおまじない */  margin-top: 10px; /* メッセージ上側余白 */  margin-bottom: 10px; /* メッセージ下側余白 */  text-align: left; /* 文字を左寄せにする */  font-size: 12px; /* 文字サイズ */  font-weight: bold; /* 文字を太字にする */  color: #f00; /* 文字色 */  content:"サイドメニューの読者登録ボタンの 『上』 に表示したい文字";}文字サイズや文字色などは、コメント(注釈)を頼りにお好みの設定に変更して下さい。読者登録ボタンの『上』にメッセージを表示する方法次に、読者登録ボタンの『下』にメッセージを表示する場合ですが、上に表示する場合とほとんど変わりません(beforeがafterに変わるだけ)。ユーザーCSSに以下のような内容を追加して下さい。/* 読者登録ボタンの『下』にメッセージ表示 */.readerMenu .readerRequestBtnArea:after{  display: block;  white-space: pre-wrap; /* 改行できるようにするおまじない */  margin-top: 10px; /* メッセージ上側余白 */  margin-bottom: 10px; /* メッセージ下側余白 */  text-align: left; /* 文字を左寄せにする */  font-size: 12px; /* 文字サイズ */  font-weight: bold; /* 文字を太字にする */  color: #f00; /* 文字色 */  content:"サイドメニューの読者登録ボタンの 『下』 に表示したい文字";}文字サイズや文字色などに関しても、同様にコメント(注釈)を頼りにお好みの設定に変更して下さい。/* 読者になると・・・届きますの『下』にメッセージ表示 */あと、おまけで、読者登録ボタンの下に最初から表示されているメッセージ「読者になると、このブログの更新情報が届きます。」のさらに下に、お好みのメッセージを表示する方法もご紹介します。ユーザーCSSに以下のような内容を追加して下さい。/* 読者になると・・・届きますの『下』にメッセージ表示 */.readerMenu .readerRequestDescription:after{  display: block;  white-space: pre-wrap; /* 改行できるようにするおまじない */  margin-top: 10px; /* メッセージ上側余白 */  margin-bottom: 10px; /* メッセージ下側余白 */  text-align: left; /* 文字を左寄せにする */  font-size: 12px; /* 文字サイズ */  font-weight: bold; /* 文字を太字にする */  color: #f00; /* 文字色 */  content:"「読者になると、このブログの更新情報が届きます。」の 『下』 に表示したい文字";}これもあまり変わりませんね(readerRequestBtnAreaがreaderRequestDescriptionに変わっただけです)。もちろん、文字サイズや文字色などに関しても、同様に変更できます。以上、サイドメニューの『このブログの読者』にある読者登録ボタン(読者になるボタン)の上または下にCSSを使ってお好みのメッセージを表示する方法をご紹介しました。どうぞ参考にして下さい。関連記事☞ CSSを編集してアメブロをカスタマイズする方法☞ アメブロカスタマイズ目次アメブロカスタマイズと読者を増やすブログ運営

      74
      23
      テーマ:
  • 25 Mar
    • リンクの色がオンマウスでゆっくり変わるようにする方法

      リンクの色がオンマウスでゆっくり変わるようにする方法アメブロカスタマイズのわざめーばです。こんにちは。アメブロのCSS編集用デザインでは、リンクにマウスカーソルを持って行くと文字の色が青から赤に変わるようになっています。通常、この色は、マウスカーソルを当てた瞬間にパッと一瞬で変わりますが、今回は、これをゆっくり「ふわっ」と変わるようにする方法をご紹介します。CSSを編集今回は、CSS3で導入されたトランジションという機能を利用します。では、早速ユーザーCSSの末尾に以下のように記述して保存して下さい。ユーザーCSSについてわからない場合はこちらを参照してください/* リンク色がゆっくり変わるようにする */a{  transition: color 0.5s ease 0s;  -webkit-transition: color 0.5s ease 0s;}「0.5s」の部分はどのくらいの時間をかけて色が変わるかを設定する部分です。「0.5s」は「0.5秒」のことです。ここは、短すぎると効果が見えませんし、あまり長いと鬱陶しいですから、0.3~0.5秒くらいがいいような気がします。記事タイトルやページ切替ボタンにも適用したいアメブロのCSS編集用デザインでは、記事タイトルやページ切替ボタンは(初期状態で)オンマウスで色が変わるようになっていませんので、上記コードで色がゆっくり変わるようにしても何の変化もありません。もしこれらにも同様の効果を適用したい場合は、以下のコードをユーザーCSSの末尾に追加して、オンマウスで色が変わるように設定して下さい。.skinSimpleBtn:hover,.skinArticleTitle:hover {  color: #FF3366; }背景色を変えることも可能また、この効果は、文字色だけでなく背景色を変える際などにも使えますので、例えばヘッダーメニューのボタンの色を「ふわっ」と変えたりすることも可能です。#headerMenu a{  transition: background-color 0.5s ease 0s;  -webkit-transition: background-color 0.5s ease 0s;}ちなみに、本ブログのヘッダーメニューもこの効果を取り入れています(0.3秒設定です)ので、どんな感じか確認したい方は、ヘッダーメニュの上でマウスカーソルをあちこち動かしてみて下さい。以上、リンクの色がオンマウスでゆっくり変わるようにする方法をご紹介しました。よかったら試していて下さいね。関連記事☞ CSSを編集してアメブロをカスタマイズする方法☞ アメブロカスタマイズ目次☞ アメブロカスタマイズと読者を増やすブログ運営 初心者でもかんたん トップページ

      96
      20
      テーマ:
  • 23 Mar
    • 縦方向にズレてしまった記事共有ボタンをきれいに整列させる方法

      縦方向にズレてしまった記事共有ボタンをきれいに整列させる方法アメブロカスタマイズのわざめーばです。こんにちは。アメブロのカスタマイズを進めていると、記事共有ボタンの並びが縦方向にズレてしまってガタガタになってしまうことがあります。実は、記事を読みやすくしようと思って、文字サイズを大きくしたり一行の高さを高くすると、共有ボタンの並びが縦方向にズレてしまいます。これを元のようにきれいに整列させるには、ユーザーCSSに以下のコードを追加すればOKです。もし、ユーザーCSSについてわからない場合はこちらを参照してください。.skinArticle .skinArticleFooter .articleExLinkSubArea {  font-size: 12px;  line-height: 1.4; }簡単ですので、もしご自身のアメブロの記事共有ボタンの並びが縦方向にズレてたら直しておいてくださいね。もう一つ方法があります通常、記事共有ボタンの並びを元に戻すには↑上のやり方で十分なので、ここからは恐らく蛇足になってしまいますが、もう一つやり方を紹介しますね。↑上のコードは、『記事共有ボタンが表示されている部分をズレる前の文字サイズと行の高さという状態に戻す』というやり方なんですが、もう一つ、『縦方向に並べ!と命令する』コードで整列させることもできます。.articleExLinkSubArea * {  vertical-align: baseline !important;}どちらの方がよいかは、時と場合によりけりですので、もし最初の方法でうまくいかなかった場合は、こちらを試してみて下さい。以上、縦方向にズレてしまって並びがガタガタになった記事共有ボタンをきれいに整列させる方法でした。よかったら参考にして下さい。関連記事☞ CSSを編集してアメブロをカスタマイズする方法☞ アメブロカスタマイズ目次☞ アメブロカスタマイズで成功するブログを作ろう トップページ

      28
      テーマ:
  • 21 Mar
    • ヘッダーメニューのカスタマイズ例(ニコンイメージング風?)

      ヘッダーメニューのカスタマイズ例(ニコンイメージング風?)アメブロカスタマイズのわざめーばです。こんにちは。僕のデジタル一眼レフの愛機ニコンD5200のページを見ていたら、そのページのメニューバーがシンプルで使いやすそうでした。で、「こんなメニューバーもいいよなぁ」と思ったので、こちらのヘッダーメニューをカスタマイズする形で作ってみました。全く同じにすることもできますが、それはそれで問題があるような気もするので敢えてそこまでしていません。でも、概ね似た感じになりました。ニコンイメージング風?ヘッダーメニューの作り方では、参考までに、どのように作成したかをご紹介しますね。やった内容は、1.基本のヘッダーメニューを設置ヘッダーメニュー(グローバルナビ)を設置する方法(V4)2.ボタン数を「9個」に変更ヘッダーメニューのボタン数を変える方法(V4)3.必要なサブメニューを追加ヘッダーメニューにサブメニューを付ける方法(V4)4.更にユーザーCSSに以下の内容を追加/***********************************************************  ヘッダーメニュー(V4)のカスタマイズ (ニコン風?)  http://ameblo.jp/wazameba/entry-11801246131.html************************************************************//* メニューバー */#headerMenu {  border: 1px solid #ccc; /* 外側枠線 */  width: 978px; /* 枠線を付けたので幅を2px減らす */  padding: 8px 4px; /* 内側に余白 */  border-radius: 5px; /* 角丸にする */  background: #fafaf9; /* 背景色(グラデ非対応用) */  background: linear-gradient( /* グラデーション */    to bottom,    #fafaf9 0%,    #ededea 50%,    #e9e8e5 51%,    #e8e7e4 100%  );}#headerMenu ul.menu {  float: left;  border-right: 1px solid #fff; /* 最右ボタン右側ラインのハイライト */}/* ボタン領域 */#headerMenu ul.menu>li, #headerMenu ul.menu>li:first-child {  width: auto; /* ボタン幅自動 */  padding: 0px 8px; /* ボタンの左右内側に余白 */  height: 19px; /* ボタンの高さ */  border-left: 1px solid #fff; /* ボタン左側ラインのハイライト */  border-right: 1px solid #c7c7c7; /* ボタン右側ラインのシャドー */}#headerMenu ul.menu>li:first-child {  border-left: 0 none; /* 第一ボタン左側はラインなし */}/* ボタンの文字 */#headerMenu ul.menu>li>a, #headerMenu ul.menu>li:first-child>a {  padding: 0px 8px; /* 文字の左右に余白 */  font-size: 12px; /* 文字サイズ */  line-height: 19px; /* 一行の高さ */  color: #333; /* 文字色 */  background: transparent; /* 文字背景を透明化 */}/* ボタンの文字(オンマウス時) */#headerMenu ul.menu>li>a:hover {  margin: -3px 0px 0px 0px; /* 3ピクセル上へずらす */  padding: 0 7px; /* 文字両側の余白を変更 */  line-height: 23px; /* 行の高さを変更 */  text-decoration: none; /* 下線なし */  color: #4D4D4D; /* 文字色 */  background: #FFE600; /* 文字背景色 */  border: 1px solid #FFEE56; /* 文字周辺に枠線 */  border-color:#FFEE56 #D6C200 #D6C200 #FFEE56; /* 枠線の色 */  border-radius: 5px; /* 枠線を角丸に */}/* サブメニュー */#headerMenu ul.submenu, #headerMenu ul.submenu li {  border-color: #CCCCCC; /* 枠線の色 */}#headerMenu ul.menu li:hover ul.submenu {  left: 10px; /* 表示位置 横位置 */  top: 20px; /* 表示位置 縦位置 */}/* サブメニューのボタン */#headerMenu ul.submenu li, #headerMenu ul.submenu>li:first-child {  width: 200px; /* 幅 */  height: auto;  /* 高さ */  padding: 7px; /* 内側に余白 */  background: #fff; /* 背景色 */}/* サブメニューのボタンの文字 */#headerMenu ul.submenu li a, #headerMenu ul.submenu>li:first-child a {  padding: 0px 8px 0px 18px; /* 文字両端に余白 */  font-size: 12px; /* 文字サイズ */  line-height: 19px; /* 一行の高さ */  text-align: left; /* 左寄せ */  white-space: normal; /* 改行可能にする */  word-break: break-all; /* ワードラップを解除 */  color: #333; /* 文字色 */  background: /* 文字背景 */    url("https://stat100.ameba.jp/mypg/img/common/icon_common.png?v20140128")    no-repeat scroll 10px -1395px transparent  ;}/* サブメニューのボタンの文字(オンマウス時) */#headerMenu ul.submenu li a:hover {  text-decoration: none; /* 下線なし */  color: #4D4D4D; /* 文字色 */  background-color: #FFE600; /* 文字背景色 */}という感じです。コードのコメント(注釈)を参考にして頂ければ、色変更なども比較的簡単に出来ると思いますので、よかったら、こちらを参考にきれいなヘッダーメニューを作って設置してみて下さいね。関連記事☞ ヘッダーメニュー(グローバルナビ)を設置する方法(V4)☞ ヘッダーメニューのボタン数を変える方法(V4)☞ ヘッダーメニューにサブメニューを付ける方法(V4)☞ CSSを編集してアメブロをカスタマイズする方法☞ アメブロカスタマイズ目次☞ アメブロカスタマイズで成功するブログを作ろう トップページ

      80
      14
      テーマ:
    • ヘッダーメニューのボタン数を変える方法(V4)

      ヘッダーメニューのボタン数を変える方法(V4)アメブロカスタマイズのわざめーばです。こんにちは。今回は、こちらのヘッダーメニューのボタン数を変える方法をご紹介します。こちらのヘッダーメニューでは、5つボタンのメニューを紹介しましたが、5つではボタンが足りないことが多々あると思いますので、今回はこのボタンを6つ~9つに増やすやり方をご紹介します。ボタンを増やすときのためのCSSヘッダーメニューのボタン数を増やすと、それに合わせてボタンの幅を変更する必要がありますので、まずは、CSSでボタンの幅をボタン数に応じた幅に設定しておきましょう。今回は、ヘッダーメニューがCSS編集用デザインの標準幅(980ピクセル)になるようにボタン幅を調整しますが、その際、どうしてもピッタリと割り切れないことが殆どですので、割り切れない端数の処理を第一ボタンの幅で調節することにします。小数を使えば割り切れるものもありますが、ブラウザによって多少理解が異なるのか、ズレが生じる場合がよくあるのでこの方法にしました。変更は、こちらのヘッダーメニュー用CSSの↓この部分を書き換えるか、#headerMenu ul.menu li {  width: 195px; /* ■ボタンの幅(第一ボタン以外) */}#headerMenu ul.menu>li:first-child {  width: 196px; /* ■ボタンの幅(第一ボタン) */}若しくは、ユーザーCSSの末尾に追加して下さい。ボタンが『6つ』場合/* ヘッダーメニュー(V4) ボタン幅調整 (6つボタン)*/#headerMenu ul.menu li {  width: 163px; /* ■ボタンの幅(第一ボタン以外) */}#headerMenu ul.menu>li:first-child {  width: 160px; /* ■ボタンの幅(第一ボタン) */}ボタンが『7つ』場合/* ヘッダーメニュー(V4) ボタン幅調整 (7つボタン)*/#headerMenu ul.menu li {  width: 139px; /* ■ボタンの幅(第一ボタン以外) */}#headerMenu ul.menu>li:first-child {  width: 140px; /* ■ボタンの幅(第一ボタン) */}ボタンが『8つ』場合/* ヘッダーメニュー(V4) ボタン幅調整 (8つボタン)*/#headerMenu ul.menu li {  width: 122px; /* ■ボタンの幅(第一ボタン以外) */}#headerMenu ul.menu>li:first-child {  width: 119px; /* ■ボタンの幅(第一ボタン) */}ボタンが『9つ』場合/* ヘッダーメニュー(V4) ボタン幅調整 (9つボタン)*/#headerMenu ul.menu li {  width: 108px; /* ■ボタンの幅(第一ボタン以外) */}#headerMenu ul.menu>li:first-child {  width: 108px; /* ■ボタンの幅(第一ボタン) */}フリースペースに増やすボタンのタグを追加する次に、フリースペースのヘッダーメニュー用のタグに足りないボタンのタグを追記しましょう。追加は、必要なボタンの数だけ、次のようにボタンの設定行を追加していくだけです(例は6つボタンの場合)。<div id="headerMenu"><!----><ul class="menu"><!----><li><a href="#" target="_blank">メニュー1</a></li><!----><li><a href="#" target="_blank">メニュー2</a></li><!----><li><a href="#" target="_blank">メニュー3</a></li><!----><li><a href="#" target="_blank">メニュー4</a></li><!----><li><a href="#" target="_blank">メニュー5</a></li><!----><li><a href="#" target="_blank">メニュー6</a></li><!----></ul><!----></div></ul>の行のすぐ上に追加していくと間違えにくいと思いますが、追加したい場所がそことは限りませんので、注意しながら必要な個所にボタンの設定を追加していってください。表示を確認する以上でボタン数の変更設定は完了です。ブログを表示してヘッダーメニューが正しく表示されるか確認してみて下さい。もちろん表示時は、F5キーを押す(Windowsの場合)などして、最新の状態を読み込んだ上で確認するようお願いします。以上、ヘッダーメニュー(V4)のボタン数を変更するやり方をご紹介しました。よかったら参考になさってください。関連記事☞ ヘッダーメニュー(グローバルナビ)を設置する方法(V4)☞ CSSを編集してアメブロをカスタマイズする方法☞ アメブロカスタマイズ目次☞ アメブロカスタマイズで成功するブログを作ろう トップページ

      60
      3
      テーマ:
  • 01 Mar
    • 記事内にサブタイトル(記事内見出し)を表示する方法

      記事内にサブタイトル(記事内見出し)を表示する方法アメブロカスタマイズのわざめーばです。こんにちは。本ブログでは記事内の所々にサブタイトルを表示しています。このようなサブタイトルは、あらかじめCSSでスタイルを設定しておけば、記事で簡単なHTMLタグを使うことによって表示できます。今回は、この方法についてご紹介したいと思います。サブタイトルに使うタグを決めるまずは、記事内のサブタイトルに使うHTMLタグを決めなければいけません。タイトル、つまり見出しですから、見出しタグ(h1、h2、h3、h4、h5、h6)の中から選択するといいと思います。ちなみに、僕はh4タグが最も使いやすそうだと思ったので、本ブログではh4タグを記事内サブタイトル用に使っています。ですので、以降は、仮にh4タグを使うものとして書かせてもらいますね。もし別のタグを利用する場合は、そのタグに読み替えて下さい。CSSにスタイルを定義では、次に、ユーザーCSSに記事内サブタイトルh4のスタイルを定義しておきましょう。これももちろんご自身のブログに合わせて設定すればいいのですが、ご参考までに、本ブログの設定をご紹介しておきます。もし同じ設定にしたい場合は、以下のコードをユーザーCSSの末尾に追加しておいてください。/* 記事内サブタイトル */.entry .contents h4, .articleText h4 {  margin: 10px 0 0 0; /* 枠線の外側余白設定 上右下左の順 */  padding: 6px 10px 5px 10px; /* 枠線の内側余白設定 上右下左の順 */  font-size: 120%; /* 文字サイズ */  border-left: 3px solid #ee7800; /* 左側枠線 */  border-bottom: 1px solid #ee7800; /* 下側枠線 */  text-shadow: 1px 1px 0px #ffffff,  2px 2px 0px #cccccc; /* 影 */}色などを変更したい場合は、コード内の注釈(コメント)を参考にして変更してみて下さいね。記事内でサブタイトル用のタグを使うCSSにスタイルを設定したら、早速記事内でサブタイトル用のタグを使ってみて下さい。使い方は簡単で、サブタイトルの内容を、上で決めた見出しタグ(仮にh4)と、その閉じタグで挟み込んで書くだけです。↓こんな感じになります。<h4>サブタイトルサブタイトルサブタイトル</h4>前は<h4>、後は</h4>(『/』を忘れないようご注意)です。なお、HTMLタグでの入力なので、新エディタを使っている場合は『HTML表示』、標準エディタを使っている場合は『HTMLタグを表示』をクリックしてHTMLタグを入力できる状態で書いて下さい(タグ編集エディタはそのままでOK)。以上、アメブロの記事内にサブタイトル(小見出し)を表示する方法をご紹介しました。よかったら参考にして下さいね。2014/03/01 新デザイン・旧デザイン両対応化2011/06/22 記事公開関連記事☞ CSSを編集してアメブロをカスタマイズする方法☞ アメブロカスタマイズ目次☞ アメブロカスタマイズで成功するブログを作ろう トップページ

      48
      34
      テーマ:
  • 25 Feb
    • サイドメニューのタイトル部のCSS3を使ったデザイン例

      サイドメニューのタイトル部のCSS3を使ったデザイン例アメブロカスタマイズのわざめーばです。こんにちは。Internet ExplorerがCSS3のサポート状況の良いバージョン10以降がメインで使われるようになったので、アメブロのカスタマイズでも気軽にCSS3が使えるようになってきましたね。今回は、このCSS3を使ったアメブロのサイドメニューのタイトル部分のデザイン例とそのデザインにするためのユーザーCSSに記述するコードをご紹介します。↓こんな感じになります。CSS3が使えなかった頃だと、画像を使わなければ不可能だったようなデザインですね。なお、(CSS3とは関係ないんですが)タイトル部分をこんな感じにすると、初期状態でサイドメニュー全体を囲っていた枠が邪魔だったので、それも外してすっきりさせました。では、このデザインにする方法をご紹介します。ユーザーCSSに以下のコードを追加して下さい。(もし、ユーザーCSSについてわからない場合はこちらを参照してください。)/* 影が切れずに表示されるように */.layoutContentsA, .layoutContentsB {  overflow: visible;}.skinSubArea {  overflow: visible;}.skinMenu {  overflow: visible;}/* サイドメニューとその本体部分を透明化 */.skinMenu, .skinMenuBody {  background: transparent;}/* サイドメニュー本体部分を枠なしに */.skinMenuBody {  margin: 15px 5px;  padding: 0;}.profileMenu .skinMenuBody {  padding: 0 15px;}/* サイドメニュータイトル部分のデザイン */.skinMenuHeader {  padding: 8px 0 7px 0;  overflow: hidden;  background: linear-gradient(to bottom    , #ffffff 0%    , #e7e7e7 50%    , #e0e0e0 51%    , #e7e7e7 100%  );  border: 1px solid #cccccc;  border-radius: 5px;  box-shadow: 3px 3px 5px #cccccc;}.skinMenuTitle {  display: block;  padding: 3px 10px 2px 10px;  color: #555555;  border-bottom: 2px solid #bbbbbb;  text-shadow: 1px 1px 0px #ffffff, 2px 2px 2px #cccccc;  box-shadow: 0px 2px 2px #ffffff;}/* サイドメニュータイトルのラインの色 */.skinMenuTitle {  border-color: #99bb22;}基本的にはこれでOKですが、事前のカスタマイズ状況によっては、それに合わせた修正が必要になる場合があります。また、細かい修正を行いたい場合などは、コード内の注釈を参考に変更してみて下さい。なお、タイトル文字の下のラインの色だけは、単独で変えやすいようコードの一番下に記述してありますので、こちらで変更して頂ければと思います。例えば、本ブログのデザインで所々に使っているオレンジ(#EE7800)に変えると次のようになります。また、黒(#000000)なら↓こんな感じ。赤(#FF0000)なら↓こんな感じ。こんな青(#336699)もスッキリしていいかもしれません。ちなみに、CSS3をサポートしていないIE8(Internet Explorer バージョン 8)で表示してみたところ・・・、↓こんな感じでした。ずいぶんとあっさりしてしまいますが、破たんするというほどではないですね。以上、CSS3を使ったアメブロのサイドメニューのタイトル部分のデザイン例をご紹介しました。良かったら参考になさってくださいね。関連記事☞ CSSを編集してアメブロをカスタマイズする方法☞ アメブロカスタマイズ目次☞ アメブロカスタマイズで成功するブログを作ろう トップページ

      43
      2
      テーマ:
    • ヘッダーメニューにサブメニューを付ける方法(V4)

      ヘッダーメニューにサブメニューを付ける方法(V4)アメブロカスタマイズのわざめーばです。こんにちは。今回は、先日ご紹介したこちらのヘッダーメニューにサブメニューを付ける方法をご紹介します。メインのヘッダーメニューだけでは項目数が足りない場合などに追加するととても便利です。サブメニューは、上下にボタンが並ぶプルダウン型ですので、「メインの横メニューには大項目を割り当てて、サブメニューには詳細項目を割り当てる」といった使い方ができると思います。また、今回ご紹介するサブメニューは、メインの横メニューのボタンとずらした位置に表示することができますので、ちょっと凝った雰囲気を演出できるのではないでしょうか。CSSにサブメニュー用の設定を追加するではまず、ユーザーCSSにサブメニューのための設定を追加しましょう。ユーザーCSSについてわからない場合はこちらを参照してください。(まず最初にCSSの設定をしますが、これだけではヘッダーメニューは表示されませんので、必ず次項のフリースペースの設定も実施して下さい)では、以下のようなコードをユーザーCSSの末尾に追加して保存しましょう。/***************************************  ヘッダーメニュー(V4)にサブメニューを追加する  by わざめーば http://ameblo.jp/wazameba/***************************************//* ▼ 通常は変更不要 (ここから) ▼ */#headerMenu ul.submenu {  position: absolute;  top: -99999px;  z-index: 99999;}/* ▲ 通常は変更不要 (ここまで) ▲ *//* ▼ メニューカスタマイズ (ここから) ▼ */#headerMenu ul.submenu {  border-width: 1px; /* ■ 枠線の太さ */  border-style: solid; /* ■ 枠線の種類 */  border-color: #ffffff; /* ■ 枠線の色 */}#headerMenu ul.menu li:hover ul.submenu {  left: 20px; /* ■ 横位置(親メニューボタンの左端から) */  top: 35px; /* ■ 縦位置(親メニューボタンの上端から) */}#headerMenu ul.submenu li {  border-top: 1px solid #ffffff; /* ■ ボタン区切り線(上側) */}#headerMenu ul.submenu li:first-child {  border: 0 none; /* ■ 第一ボタンの区切り線(上側) */}/*▲ メニューカスタマイズ (ここまで) ▲ */基本的に、ヘッダーメニューの設定を引き継ぎつつ、必要な項目を書き換える形の設定となっていますので、必ずヘッダーメニューのCSSよりも後に記述するようにしてください。また、各値はコード内の注釈を参考にしながら必要に応じて修正して下さい。フリースペースにサブメニューの内容を追加する次に、フリースペースのヘッダーメニュー用のタグにサブメニューのタグを追加していきます。追加するタグは次のようなものです。<!---->  <ul class="submenu"><!---->  <li><a href="#" target="_blank">サブメニュー1</a></li><!---->  <li><a href="#" target="_blank">サブメニュー2</a></li><!---->  <li><a href="#" target="_blank">サブメニュー3</a></li><!---->  <li><a href="#" target="_blank">サブメニュー4</a></li><!---->  <li><a href="#" target="_blank">サブメニュー5</a></li><!---->  </ul><!---->この例は、5ボタンのサブメニューですが、ボタン数は必要に応じて増減して下さい。もちろん、メインのメニューと同様、「#」と「サブメニュー?」と書いてある行が、ヘッダーメニューの各ボタンの設定になります。「#」の部分に、そのメニューボタンをクリックした時にジャンプする先のページのURL(アドレス)を設定するのも同じ(「#」を消して)。また、「サブメニュー?」の部分に、そのメニューボタンに表示したい表示内容(文字列)を設定するのも、やはり同じです。そして、このサブメニューのタグをメインのヘッダーメニューのタグの適切な位置に挿入します。挿入位置は以下のように、サブメニューを追加したいメニューボタン設定行の</a>と</li>の間です(一例です)。<div id="headerMenu"><!----><ul class="menu"><!----><li><a href="#" target="_blank">メニュー1</a></li><!----><li><a href="#" target="_blank">メニュー2</a></li><!----><li><a href="#" target="_blank">メニュー3</a><!---->  <ul class="submenu"><!---->  <li><a href="#" target="_blank">サブメニュー1</a></li><!---->  <li><a href="#" target="_blank">サブメニュー2</a></li><!---->  <li><a href="#" target="_blank">サブメニュー3</a></li><!---->  <li><a href="#" target="_blank">サブメニュー4</a></li><!---->  <li><a href="#" target="_blank">サブメニュー5</a></li><!---->  </ul><!----></li><!----><li><a href="#" target="_blank">メニュー4</a></li><!----><li><a href="#" target="_blank">メニュー5</a></li><!----></ul><!----></div>例は、メインの側の「メニュー3」にサブメニューを追加した状態ですが、この場合は、メニュー3の設定行の</a>と</li>の間にサブメニューのタグを挿入することになります。ちょっと位置がわかりにくいですが、間違えると変な表示になってしまう可能性が高いので、必ず</a>と</li>の間に入れるようにしてください。表示を確認するここまでできればサブメニュー追加の設定は完了です。ブログを表示してヘッダーメニューが設置されたかどうかを確認してみて下さい。もちろん表示時は、F5キーを押す(Windowsの場合)などして、最新の状態を読み込んだ上で確認するようお願いします。うまく設定されてれば、該当のボタン上にマウスカーソルを持って行ったときに、サブメニューが表示されるようになったと思います。以上、ヘッダーメニュー(V4)にサブメニューを追加する方法をご紹介しました。よかったら参考になさってください。2014/02/25 わかりいにくかった部分を少し修正しました。関連記事☞ ヘッダーメニュー(グローバルナビ)を設置する方法(V4)☞ CSSを編集してアメブロをカスタマイズする方法☞ アメブロカスタマイズ目次☞ アメブロカスタマイズで成功するブログを作ろう トップページ

      60
      20
      テーマ:
  • 17 Feb
    • 「記事についたいいね!」から迷惑ユーザーの「いいね!」を消す方法

      「記事についたいいね!」から迷惑ユーザーの「いいね!」を消す方法アメブロカスタマイズのわざめーばです。こんにちは。アメブロの「来たよ」アピールのメインが「ペタ」から「いいね!」に変わりつつありますが、これに伴って、ツールによる自動巡回など、迷惑なユーザーによる「いいね!」に悩まされる人が増えているようです。そこで、今回、PCでブログ記事の「いいね!した人」をクリックした時に表示される「記事についたいいね!」の一覧から、指定した迷惑ユーザの「いいね!」を見えなくする方法をご紹介します。残念ながらいいね!された情報を削除する方法ではありませんので根本的な解決にならないのですが、一度設定しておけば以降の記事についた同じ迷惑ユーザーによる「いいね!」も見えなくなりますので、読者さんに迷惑ユーザを出来るだけ見せなくて済むなど、少しは効果が期待できるのではないでしょうか。イタチごっこかもしれませんが・・・CSSに必要な設定をする今回の方法は、ユーザーCSSに設定を追加することで実現できます。ユーザーCSSについてわからない場合はこちらを参照してください。では、早速、以下のようなコードをユーザーCSSの末尾に追加しましょう。/* ついたいいね!から迷惑ユーザーを消す */.iineListItem, .iineListItem:nth-of-type(10n+1) {  padding: 0 !important;  border-top: 0 none !important;}.iineListItem a {  display: block;  padding: 8px 18px 8px 12px;  border-top: 1px dotted #b3b3b3;}.iineListItem:first-child a {  border-top: 0 none;}.iineListItem a:after{  display: block;  clear: both;  content: ".";  height: 0px;  overflow: hidden;  visibility: hidden;}.iineListItem a[href="http://ameblo.jp/????????/"],#__dummy__ {  display: none;}「????????」部分には、非表示にしたい迷惑ユーザーのアメーバIDを設定して下さい。また、複数の迷惑ユーザーを指定したい場合は、次の例のように太字の範囲を複数行記述すればOKです。・・・・・・・・・・.iineListItem a[href="http://ameblo.jp/迷惑ユーザー1のID/"],.iineListItem a[href="http://ameblo.jp/迷惑ユーザー2のID/"],.iineListItem a[href="http://ameblo.jp/迷惑ユーザー3のID/"],#__dummy__ {  display: none;}なお、今回ご紹介した方法は、あくまでもPCで記事の「いいね!した人」をクリックした時に、迷惑ユーザーが見えなくなる方法で、残念ながら、迷惑いいね!を削除する方法ではありません。なので、PC画面以外や、「いいね!」の管理画面では表示されてしまいますのでご注意ください。根本的な削除に関しては、今後の運営の対応に期待しましょう。以上、「記事についたいいね!」から迷惑ユーザーの「いいね!」の表示を消す方法をご紹介しました。よかったら参考にして下さいね。関連記事☞ CSSを編集してアメブロをカスタマイズする方法☞ アメブロカスタマイズ目次☞ アメブロカスタマイズで成功するブログを作ろう トップページ

      62
      2
      テーマ:
    • ヘッダーメニュー(グローバルナビ)を設置する方法(V4)

      ヘッダーメニュー(グローバルナビ)を設置する方法(V4)【新】CSS編集用デザイン(2016/03~)向け 「アメブロにグローバルナビを設置・表示するカスタマイズ方法」 はこちらアメブロカスタマイズの松本です。こんにちは。今回は、アメブロにヘッダーメニュー(グローバルメニュー、グローバルナビ、横メニュー等とも呼ばれます)を設置する方法です。設置すると、ブログ内の全てのページの目立つ位置に表示されますので、ブログ訪問者に是非とも知らせたい記事の案内などに威力を発揮してくれます。このヘッダーメニューに関しては、今までにも何種類か(大まかに数えて3種類)ご紹介したことがあるんですが、今回ご紹介するヘッダーメニューは、新デザインの特徴を生かしてキレイにカスタマイズしやすいよう工夫してみました。例えば下の画像のようなメニューなんかも、比較的簡単に作成できます。これから、発展的なカスタマイズ方法も含めて何回かに分けてヘッダーメニューに関する方法をご紹介しようと思っていますが、今回はその第一回目で、さらなるカスタマイズためのベースとなる、冒頭の画像のようなごく基本的なヘッダーメニューを設置する方法をご紹介します。CSSにヘッダーメニューのための設定をするでは、まず、ユーザーCSSにヘッダーメニューのための設定を追加しましょう。ユーザーCSSについてわからない場合はこちらを参照してください。(まず最初にCSSの設定をしますが、これだけではヘッダーメニューは表示されませんので、必ず次項のフリースペースの設定も実施して下さい)では、以下のようなコードをユーザーCSSの末尾に追加して保存しましょう。/***************************************  ヘッダーメニューを設置する(V4)  by わざめーば http://ameblo.jp/wazameba/***************************************//* ▼ 通常は変更不要 (ここから) ▼ */.skinContentsArea {  position: relative;}#headerMenu, #headerMenu ul,#headerMenu li, #headerMenu a {  margin: 0;  padding: 0;  background-color: transparent;}#headerMenu {  position: absolute;  line-height: 1.0;  overflow: visible;}#headerMenu ul.menu {  list-style: none;  overflow: visible;}#headerMenu ul.menu:after {  display: block;  clear: both;  content: ".";  height: 0px;  overflow: hidden;  visibility: hidden;}#headerMenu ul.menu li {  position: relative;  display: block;  float: left;  overflow: visible;}#headerMenu ul.menu>li {  border-style: none none none solid;}#headerMenu ul.menu>li:first-child {  border: 0 none;}#headerMenu ul.menu li a {  display: block;  width: auto;  white-space: nowrap;  overflow: hidden;  text-align: center;  background-repeat: repeat;  background-position: center center;}/* ▲ 通常は変更不要 (ここまで) ▲ *//* ▼ メニューカスタマイズ (ここから) ▼ */.skinContentsArea {  padding-top: 55px; /* ■設置スペース確保 */}#headerMenu {  top: 0px; /* ■上下位置調整 */  left: 0px; /* ■左右位置調整 */}#headerMenu ul.menu li {  font-size: 14px; /* ■文字サイズ */  height: 50px; /* ■ボタンの高さ(上下枠線を含む) */  line-height: 50px; /* ■ボタンの高さ(上下枠線の内側) */}#headerMenu ul.menu li {  width: 195px; /* ■ボタンの幅(第一ボタン以外) */}#headerMenu ul.menu>li:first-child {  width: 196px; /* ■ボタンの幅(第一ボタン) */}#headerMenu ul.menu>li {  border-width: 1px; /* ■区切り線の太さ */  border-color: #ffffff; /* ■区切り線の色 */}#headerMenu ul.menu li a {  color: #ffffff; /* ■文字色[白](通常時) */  font-weight: normal; /* ■太字[なし](通常時) */  text-decoration: none; /* ■下線[なし](通常時) */  background-color: #0044cc; /* ■背景色[濃い青](通常時) */}#headerMenu ul.menu li a:hover {  color: #ffffff; /* ■文字色[白](オンマウス時) */  font-weight: normal; /* ■太字[なし](オンマウス時) */  text-decoration: underline; /* ■下線[あり](オンマウス時) */  background-color: #66aaff; /* ■背景色[薄い青](オンマウス時) */}/*▲ メニューカスタマイズ (ここまで) ▲ */上記コードは、素のCSS編集用デザインの場合は特に何も変更する必要はありません。旧デザインの場合は、二箇所ある「.skinContentsArea」を「#wrap」に変更した上で、各値を必要に応じて修正して下さい。ですが、事前のカスタマイズ状況によっては設定を変更する必要がある可能性も考えられますので、コード内の注釈を参考に、必要に応じて適宜修正してみて下さい。フリースペースにヘッダーメニューの内容を定義する次に、フリースペースにヘッダーメニューの内容を設定していきましょう。設定内容は、以下のようなコードになります。<div id="headerMenu"><!----><ul class="menu"><!----><li><a href="#" target="_blank">メニュー1</a></li><!----><li><a href="#" target="_blank">メニュー2</a></li><!----><li><a href="#" target="_blank">メニュー3</a></li><!----><li><a href="#" target="_blank">メニュー4</a></li><!----><li><a href="#" target="_blank">メニュー5</a></li><!----></ul><!----></div>「#」と「メニュー?」と書いてある行が、ヘッダーメニューの各ボタンの設定になります。「#」の部分には、そのメニューボタンをクリックした時にジャンプする先のページのURL(アドレス)を設定します(「#」を消して)。また、「メニュー?」の部分には、そのメニューボタンに表示したい表示内容(文字列)を設定します。なお、表示内容は自動的に複数行表示はされませんので、メニューボタンの幅に収まる簡潔な内容にするようにしましょう。表示確認をする以上で設定は完了ですので、ブログを表示してヘッダーメニューが設置されたかどうかを確認してみて下さい。表示は、F5キーを押す(Windowsの場合)などして、最新の状態を読み込んだ上で確認するようお願いします。うまく設定できていれば、5つボタンの青いシンプルなヘッダーメニューが表示される筈ですが、もし表示されない場合は、どこかで失敗していると思われますので、もう一度設定を見直してみて下さいね。なお、今後、・ボタン数の変更・サブメニューの追加・デザインのさらなるカスタマイズ等についてもご紹介していく予定ですので、どうぞお楽しみに。以上、アメブロにヘッダーメニュー(グローバルナビ)を設定する方法をご紹介しました。よかったら参考になさってくださいね。関連記事☞ CSSを編集してアメブロをカスタマイズする方法☞ アメブロカスタマイズ目次☞ アメブロカスタマイズで成功するブログを作ろう トップページ

      110
      30
      テーマ:
  • 13 Feb
    • コメント欄の「もっと見るv」を消してコメントを最初から全て表示する方法

      コメント欄の「もっと見るv」を消してコメントを最初から全て表示する方法アメブロカスタマイズのわざめーばです。こんにちは。新デザインのブログで、コメントが初期表示で10件しか表示されなくなり、コメント一覧の下に「もっと見るV」というリンク(ボタン?)が表示されるようになっています。コメントのせいでページ表示があまり長くならないようにとの運営側の配慮なのか・・・?よくはわからないのですが、僕のように、読者さんにコメント欄からも情報を得て頂きたいと思っている場合には、ブログでこういうプラス1動作が増えることが意外に邪魔に感じますね。そこで、これが導入される前の状態、つまり、コメント欄の「もっと見るv」を消してコメントが最初から全て表示された状態にカスタマイズする方法をご紹介します。それでは早速。ユーザーCSSに末尾に、以下のコードを追加して下さい。/* コメントを全て表示 */.commentList li{  display: block !important;}/* 「もっと見るv」を消す */#commentListMoreLink{  display: none;}もし、ユーザーCSSについてわからない場合はこちらをご参照ください。ちなみに、工夫すれば、初期表示件数を好みに応じて変更できるような気もしますが、これに関してはまたの機会に考えてみますね。以上、「もっと見るv」を消して最初からコメントを全表示にする方法でした。もしよかったら参考になさってください。関連記事☞ CSSを編集してアメブロをカスタマイズする方法☞ アメブロカスタマイズ目次☞ アメブロカスタマイズで成功するブログを作ろう トップページ

      78
      10
      テーマ:
  • 09 Feb
    • 「このブログの読者」「お気に入りブログ」のリンクを全て1行表示にする方法

      「このブログの読者」「お気に入りブログ」のリンクを全て1行表示にする方法アメブロカスタマイズのわざめーばです。こんにちは。アメブロのサイドバーの「このブログの読者」や「お気に入りブログ」の各ブログへのリンクは、タイトルの短いブログは1行表示ですが、ある程度以上長いタイトルのブログは2行表示になります。今回は、「このブログの読者」や「お気に入りブログ」の各ブログへのリンクを全て1行で表示されるようにカスタマイズする方法をご紹介します。また、1行にした際にブログタイトルが1行に収まらず枠からはみ出した場合、末尾に省略記号「…」が付いてタイトルが途中までしか表示されていないことが分かるようにします。それでは早速やり方です。今回は、CSSによるカスタマイズとなります。ユーザーCSSの末尾に以下のコードを追加して保存して下さい。/* 読者・お気に入りのリンクを1行にする */.favoriteMenu li a, .readerMenu li a {  display: inline-block;  max-width: 100%;  white-space: nowrap;  word-wrap: normal;  overflow: hidden;  text-overflow: ellipsis;}これで終了です。(ユーザーCSSについてわからない場合はこちらをご参照ください)なお、こちらは、新デザイン(CSS編集用デザイン)向けの方法ですので、旧デザインの場合は次項をご覧ください。旧デザインの場合旧デザインの場合、残念ながら新デザインと全く同様にはできそうにありません(特にIEでの表示が)が、似た感じにする方法はありますのでご紹介します。/* 読者・お気に入りのリンクを1行にする(旧) */#reader li a, #favorite li a {  position: absolute;  display: block;  width: 160px;  white-space: nowrap;  word-wrap: normal;  overflow: hidden;  text-overflow: ellipsis;}こちらは、赤文字の「160px」の部分に、リンクの表示幅を設定して下さい。以上、アメブロの新デザイン及び旧デザインで、「このブログの読者」や「お気に入りブログ」の各ブログへのリンクを全て1行で表示されるようにカスタマイズする方法をご紹介しました。よかったら参考にして下さいね。関連記事☞ CSSを編集してアメブロをカスタマイズする方法☞ アメブロカスタマイズ目次☞ アメブロカスタマイズで成功するブログを作ろう トップページ

      58
      6
      テーマ:
  • 31 Jan
    • ページ切替ボタン(前ページ・次ページ)の表示を変える方法

      ページ切替ボタン(前ページ・次ページ)の表示を変える方法アメブロカスタマイズのわざめーばです。こんにちは。読者さんから、『アメブロのページ切替ボタンの「<<前ページ」と「次ページ>>」の表記が、どちらに行くと古くて、どちらに行くと新しいのかが直観的にわからない』というメッセージを頂きました。そういえば、最近はすっかり慣れてしまって、気になることがなかったんですが、以前は、「わかりにくいなぁ」と思ってたことを思い出しました。このページ切替ボタンの表記は、あまりアメブロに慣れていない訪問者さんにとっては、時系列がハッキリわかる内容の方が親切かもしれませんね。というわけで、CSSを編集することで変える方法を考えてみました。ページ切替ボタンの表示文字を「<<新しい記事」「古い記事>>」に変えるそれでは、一例として、ページ切替ボタンの表示文字を「<<新しい記事」「古い記事>>」に変える方法をご紹介します。(今回は、新デザイン向けです)ページ切替ボタンの表示文字を変えるには、以下のコードをユーザーCSSの最後に追加してみて下さい(⇒ユーザーCSSの編集に関してはこちらを参考にして下さい)。/***********************************************************  ページ切替ボタンの表示文字を変える***********************************************************/.nextPrevPaging a,.nextPrevPaging ~ article .entryPaging a {  height: 1.4em;  line-height: 1.4em;  overflow: hidden;}.nextPrevPaging ~ article .entryPaging a{  vertical-align: top;}.nextPrevPaging .pagingPrev:before,.nextPrevPaging ~ article .entryPaging .pagingPrev:before {  display: block;  white-space: pre;  content:"\3c\3c\20新しい記事\a\a\a";}.nextPrevPaging .pagingNext:before,.nextPrevPaging ~ article .entryPaging .pagingNext:before {  display: block;  white-space: pre;  content:"古い記事\20\3e\3e\a\a\a";}もし「新しい記事」「古い記事」以外にしたい場合は、赤文字の部分を変えると、ボタンに表示される文字を変えることができますので、お好みの内容を表示してみてください。また、上記コードの『1.4em』の部分を変更するとボタンの高さを調整することができます(「height」と「line-height」の値を同じにするのがコツです)。「em」は概ね「文字の高さの何倍?」と言った意味ですので、上記コードの場合は、「1.4文字分」ということになります。あと、見慣れない「¥」付きの暗号みたいなのがありますが、これは、文字化けしてしまう文字などを別の表現方法で表すやり方で、今回の場合、¥20・・・スペース¥3c・・・<¥3e・・・>¥a・・・改行の文字を表しています(が、覚えなくていいと思います)。以上、よかったら参考にしてみて下さい。ちなみに、本件提案して下さったのは、こちらの方です。ありがとうございました。関連記事☞ CSSを編集してアメブロをカスタマイズする方法☞ アメブロカスタマイズ目次☞ アメブロカスタマイズで成功するブログを作ろう トップページ

      56
      14
      テーマ:

このブログの読者

読者数: 9,425

読者になる

プロフィール

松本

性別:
男性
お住まいの地域:
兵庫県
自己紹介:
.

続きを見る >

読者になる