こんにちは、ドリル 鈴木です。
今回は記事のタイトルをカスタマイズし、前回よりももっと目立たせる方法をご紹介致します。
記事のタイトルを見て興味を持って頂かなければいけないので、目立たないタイトルは致命的です。
なので、ちゃんとタイトルっぽくする事が大切です。
少しCSSをカスタマイズするだけで印象を変える事ができるので、ぜひチャレンジしてみて下さい。
それでは、スタートです。
カスタマイズを始める前に
今回はCSSを修正してタイトル記事のデザインをカスタマイズします。
前回と異なり、文字の色やサイズだけでなく、枠線や背景色を利用した３パターンを紹介していますので、希望に応じて使い分けて下さい。また、CSSの修正箇所が2ヶ所あり、場所が離れているので注意して下さい。
書く場所を間違えると反映されない可能性があります。
CSSの編集画面を開く
まずは、CSSの編集画面を開いて下さい。
「ブログを書く」＞サイドバーの「ブログデザイン」の「デザインの変更」＞「CSSの編集」をクリックします。
修正前のページとCSS
何も加工していない状態のタイトルになります。
これに対して３パターンの修正を入れて行きます。
また、CSSは３ヶ所を内容によって修正します。
場所が離れている箇所があるので、しっかりと上書きする様にして下さい。/* skinArticleHeader 記事タイトルエリア */ .skinArticleHeader { margin:0 29px; padding:2px 10px; border-left:5px solid #e4e4e4; } .skinArticleHeader2{} /* skinArticleTitle 記事タイトル文字 */ .skinArticleTitle,.skinArticleTitle:hover,.skinArticleTitle:focus,.skinArticleTitle:visited { font-size:1.31em; font-weight:bold; color:#0066cc; }
パターン１：ボーダーの色を変え下にもつける
横についている縦線のカラーを変更します。
また、下にも色と太さの異なるボーダーを付け、タイトルである事をよりわかりやすくします。
CSSは以下の通りです。
修正対象は「.skinArticleHeader」の一ヶ所だけになります。/* skinArticleHeader 記事タイトルエリア */ .skinArticleHeader { margin: 0 29px; padding: 5px 10px; border-left: 5px solid #CC0000; border-bottom: 1px solid #e4e4e4; }
パターン２：背景色あり、合わせて文字色も変更する
横についているボーダーを消し、背景色をつけます。
ただ、それだと文字が読みにくくなってしまうので、合わせて文字色も変更します。
CSSは以下の通りです。
修正対象は「.skinArticleHeader」と「.skinArticleTitle」の２ヶ所になります。場所が離れているので注意して下さい。.skinArticleHeader { margin: 0 29px; padding: 5px 10px; border: none; background-color: #CC0000; } .skinArticleTitle,.skinArticleTitle:hover,.skinArticleTitle:focus,.skinArticleTitle:visited { font-size:1.31em; font-weight:bold; color:#FFFFFF; }
パターン３： 二重に枠をつけて、よりタイトルっぽくする
枠としてのボーダーと左横のボーダーの二重にボーダーを使用します。
また、文字色やサイズも調整しタ事により、よりタイトルらしさを強調しています。
スペースの開け方が若干難しいので、違いをよく確認して下さい。
CSSは以下の通りです。
修正対象は３ヶ所全てになっています。
こちらも修正場所が離れているので注意して下さい。.skinArticleHeader { margin:0 29px; padding:5px 5px 5px 10px; border:1px solid #E4E4E4; background-color:#F8F8F8; } .skinArticleHeader2 { padding:2px 0px 2px 10px; border-left:5px solid #CC0000; } .skinArticleTitle,.skinArticleTitle:hover,.skinArticleTitle:focus,.skinArticleTitle:visited { font-size: 180%; font-weight: bold; color:#CC0000; }
まとめ
以上で修正は終了です。
枠に関しては「.skinArticleHeader」を修正し、文字に関しては「.skinArticleTitle」を修正すると覚えておけば間違いありません。枠を二重にする場合は特殊で、スペースの開け方が肝になります。
「padding」と「margin」の設定をよく確認して、自分にあわせて調節して下さい。
予想通りに修正出来たでしょうか？
「3-3 記事のタイトル文字を目立たせる」の応用編として記載しましたが、他の箇所にも応用のきく内容になっています。
今までの修正と比較すると難易度が高くなっているので、わかりにくい箇所があれば気軽にコメントで質問して下さい。
以上、鈴木でした。
引用元：http://www.wcf-drill.com/2013/02/ameblo-customize-content-title-design.html
こんにちは、鈴木です。
事務所でWEEZERのニューアルバムを聴きながら。。。
原点回帰的なアルバムで、すっと入ってくるいいアルバムです。
今日はコメントでリクエスト頂いた、Ameba広告削除のカスタマイズをご紹介致します。
最近ブログ記事の下の方に表記される様になった「Amebaトピックス」と「芸能人ブログランキング」を削除するカスタマイズです。
どちらも、消し方は至って簡単でした。
それでは、スタートです。「Amebaトピックス」と「芸能人ブログランキング」とは
最近、各ページの一番下に表示される様になったパーツです。 広告と言うよりは、Amebaからのお知らせに近い様な内容で、「Amebaトピック」は最近アップされた芸能人ブログの記事を紹介し、「芸能人ブログランキング」はそのまま芸能人ブログのランキングです。
内容的にあから様な広告ではないので、嫌な感じではないかも知れませんが、結構な場所をとっているので目につきます。
気になる方にとっては消したいと思う程でしょう。
CSSの編集画面を開く
まずは、CSSの編集画面を開いて下さい。「ブログを書く」＞サイドバーの「ブログデザイン」の「デザインの変更」＞「CSSの編集」をクリックします。
CSSを編集して広告を削除する
CSSの編集画面を開いたら、下記の通りCSSを追加して下さい。ちなみに、今回の修正はCSSのみです。
#js-amebatopics {/* Amebaトピック削除用 */
display: none;
}
#js-rankingCheckerGen {/* 芸能人ブログランキング削除用 */
display: none;
}
追加したら保存をクリックして、編集を完了させて下さい。
では、実際のページを見てみましょう。「Amebaトピックス」と「芸能人ブログランキング」が削除されている事がすぐにわかると思います。
まとめ
以上でカスタマイズは完了です。今回のカスタマイズはCSSのみなので、とても簡単に出来たのではないでしょうか。
また、どちらか一方だけ削除したい場合は、該当するCSS部分のみを追加する様にしてください。
今回のカスタマイズはコメントにて「みみさん」からリクエスト頂きました。ありがとうございました。
これからも、この様にご要望頂ければ、出来る限りお答えしていきたいと思います。
問題なくカスタマイズできたでしょうか？
もしうまくいかない様でしたら、お気軽にコメントして下さい。
以上、鈴木でした。
追伸
最近、本業が忙しくブログの更新やメルマガの配信に手が回っていません。コメントの返信やお問い合わせの回答にも時間が掛かってしまっています。
もし、お急ぎの場合はぜひ電話カウンセリングをご利用下さい。
↓
引用元：http://www.wcf-drill.com/2014/10/ameblo-customize-delete-ad-20141023.html
こんにちは、鈴木です。
事務所にてTHE LIBERTINESを聴きながら、、、
サマソニで飛び込み演奏で聴いて以来、かっこよさの虜になりました。
本日は、少し前に追加されたパーツ「アメーバのフッター」を削除する方法について解説します。
独自のフッターを設置しているとフッターが２重になって見栄えが悪いので、気になる方はこの方法を使ってみて下さい。
それでは、スタートです。
アメーバのフッターとは？
ブログの一番下に表示されるアメーバが設置したフッターで、
- スパムを報告へのリンク
- お問い合わせへのリンク
- 利用規約へのリンク
- ヘルプへのリンク
- サイバーエージェントのコピーライト
が表記されています。下段一列を丸まる使っているので、目立ちますね。
特に、自分でカスタマイズしたフッターを設置している場合は、フッターが二重になってしまう為、気にしている方も多いのではないでしょうか。
カスタマイズ方法はCSSのみで完了します。難易度も低いので、すぐにでも導入可能です。
それでは、カスタマイズ方法の解説を行いたいと思います。
CSSの編集画面を開く
まずは、CSSの編集画面を開いて下さい。「ブログを書く」＞サイドバーの「ブログデザイン」の「デザインの変更」＞「CSSの編集」をクリックします。
CSSを編集してフッターを削除する
CSSの編集画面を開いたら、下記の通りCSSを編集していきます。ちなみに、今回の修正はCSSのみです。
#ambFooter {
display: none;
}
修正が終わったら実際のページを見てみましょう。フッターが削除されている事がすぐにわかると思います。
まとめ
以上で修正は完了です。
今回のカスタマイズもCSSのみなので、とても簡単に出来たのではないでしょうか。
今回のカスタマイズはコメントにて一瀬さんからリクエスト頂きました。ありがとうございました。
この様なカスタマイズのご要望があれば、コメントまたはお問い合わせにてご連絡下さい。
みなさんのご参加で、より細かい所まで手の届くカスタマイズの種類を増やせていけたらと思います。
以上、鈴木でした。
追伸
どうしてもカスタマイズがうまくいかない。アクセス数に繋がらないとお悩みならカウンセリングを受けてみては如何でしょうか？お電話とメールにてカスタマイズ方法を細かく解説されて頂きます。
↓
たまにクリックで応援して頂けると、励みになります。
⇒《人気ブログランキング》
引用元：http://www.wcf-drill.com/2014/08/ameblo-customize-ameba-footer-remove.html
こんにちは、鈴木です。
事務所でIncubusを聴きながら、、、
かっこいいミクスチャーロックと言えば、Incubusが絶対お勧めです！
今日は以前からご要望頂いていた、最近(でもないかな？)アメブロに表示される様になった、ビッグヘッダー動画広告の削除方法についてご紹介します。
ただし、常に表示される訳ではないので、検証不足が否めません。 そのために、掲載にも時間が掛かってしまったのですが。。。
それでは、スタートです。
ビッグヘッダー動画広告とは
最近表示される様になった、ブログ上部に表示される静止画像のバナーとYouTube動画の両方が表示される大きな広告枠の事です。
但し、この広告は常に表示される訳ではない様です。今の所は、広告が表示される条件が不明です。
サイズは上部を横一列で高さは270pxあるので、誰の目にもつきますが、「×閉じる」で表示を消す事も出来ます。
ちなみに、今回の画像はたまたま見かけたブログをキャプチャさせて頂きました。
ちなみに、HTMLはこの時だけ追加されていて、元々のHTMLも少しだけ修正されていました。
CSS編集画面を開く
早速、CSSで広告の削除を行いたいと思います。CSSの編集画面を開いてください。
「ブログを書く」＞サイドバーの「ブログデザイン」の「デザインの変更」＞「CSSの編集」をクリックします。
CSSを編集して、広告を削除する
今回の修正はCSSを追加するだけで削除する事が出来ます。下記の通り「CSSの編集」に追加してください。
#js_odj {
display: none;
}
.skinBody {
padding-top: 0;
}
保存が完了したら、早速ブログを確認してみましょう。 広告が表示されない事が確認できると思います。
まとめ
今回の修正もコメントにてリクエスト頂いた内容になります。コメント下さった「みなもさん」ありがとうございました。
しかし、広告が表示されたりされなかったりで、検証に大変困りました。その為、ご紹介したカスタマイズも本当に正しいのか若干不安も残ります。
が、表示される事も少なそうなので、それほど気にならないかも知れません。逆に表示されたら「ツいてる！」なんて思うのもいいのではないでしょうか。
また、「CSS修正したけど広告が表示された！」などありましたら、ぜひコメント頂けると助かります。
以上、鈴木でした。
追伸
アメブロでブログデビューしたいけど、どうしたらいいかわからない。。。そんなお悩みにも親切にお答えしています。
↓
たまにクリックで応援して頂けると、励みになります。
⇒《人気ブログランキング》
引用元：http://www.wcf-drill.com/2014/07/ameblo-customize-big-header-movie-ad.html
こんにちは、ドリル 鈴木です。
今日は先日お問い合わせ頂いた内容に関して、回答をシェアしたいと思います。
ご質問頂いた内容は、「ヘッダーのナビで使いたいURLが長過ぎて正しく動作しない」と言うものでした。
この問題はHTMLだけではなく、記事の中でURLを記述した時に長過ぎて見づらいといった事もあったのではないでしょうか。
こんな場合の解決方法を回答したいと思います。
それでは、スタートです。
一行の文字数は35文字まで
一般的に1行の文字数は35文字程度までがいいと言われます。ちなみに、35文字と言うのは全角日本語の場合です。
これはブログでもメルマガでも同じで、1行が長過ぎると読みにくくなります。
適度な所で改行されていたり、段落が変わっていた方が読んでもらいやすくなるわけです。
特に紙と比べてwebの方が読んでもらいにくく、斜め読みされやすいとも言われています。
なので、読みやすくする為にも1行の文字数を多くし過ぎない注意が必要です。
とは言ってもあまりに1行の文字数が少なく改行の多い文章もまた読みにくくなってしまいますので、適度な文字数と文字の大きさを設定する事が読みやすさに繋がります。
私は3カラムのレイアウトではなく、2カラムのレイアウトをお勧めしているのですが、その理由はここにもあります。
記事欄を少しでも広く取る事で、1行の文字数を取れる上に文字のサイズも大きくできるからです。
URLは長くなりがち
普通のサイトのアドレスであればそこまで長くはなりませんが、検索結果のページに飛ばしたり、アクセス解析用のタグをつけるとどうしてもURLが長くなってしまいがちです。
また、HTMLでURLの途中に改行を入れると意味が変わってしまい、うまく動かなくなってしまいます。
メルマガではURLがそのまま記述されるため、見栄えがよくありません。
URLが長過ぎてHTMLの編集がしにくい事もあるのではないでしょうか。
そのまま使うにはとても不便ですよね。
だったらURLを短くしましょう
URLを同じ様な機能のまま短く出来たら便利だと思いませんか？今回は、そう言ったサービスをご紹介したいと思います。
見た事がある方もいらっしゃると思いますが、このサービスは「短縮URL」と言い無料で利用する事が出来ます！
短縮URLは、元々のURLを入力すると短縮したURLに変換してくれます。
あとは元々のURLと同様に、変換後のURLを利用すればＯＫです。
HTMLにも利用できますし、記事の中にも記述できます。
私は特に「メールマガジン」や「Twitter」で見かけます。 なぜメルマガやTwitterで使われるかと言うと、どちらも文字数が重要になるサービスだからです。
メルマガは先程書きましたが、Twitterも140文字という制限があるためです。
ちなみに、TwitterではURLを自動で短縮してくれるサービスがあります。
短縮URLのサービスはGoogleなど、色々な企業が無料で提供しています。
以下に参考までにサービスを提供しているサイトを一部紹介致します。
私はアカウントもあり。慣れている「Google」をよく使っています。
短縮URLに問題はないの？
とても便利に見える短縮URLですが、実はちょっとした問題があります。(私がそう思っていると言う事です)
それは、本当のURLがクリックするまでわからないと言う事です。
なぜこれが問題かと言うと、閲覧者を騙してクリックさせる事が出来るからです。
例えば、紹介文とリンク先が全く別物でもクリックさせる事が出来てしまう事になるからです。
なので、逆変換のサービスもあったりします。
先程紹介したGoogleやBitlyは短縮URLの後ろに「+」をつけると解析結果のページが表示されます。
そこで、リンク先の本当のURLを確認する事が出来ます。
これならクリックする前にリンク先がどこなのか確認する事が出来ますね。
こういった事もあり、短縮URLの時点でクリックを躊躇してしまう方がいる事も認識しておいた方がいいです。
先程のTwitterなどではとても多くのスパムツイートでアフィリエイターが使っている様です。
そもそもTwitter自身も短縮URLのサービスを提供しているので微妙ですが。
あまりいい風潮とは言えない気もします。
まとめ
今回は「短縮URL」と言うサービスを紹介させて頂きました。最近では使われている方も多いので、知っている方もいらっしゃたのではないでしょうか。
文章の中にURLを記述する際にはとても便利なサービスですので、ぜひ活用してみて下さい。
ただし、注意点に関しても認識した上で利用する事をお勧めします。
短縮したせいでクリックされなくなったら意味ないですからね。
以上、鈴木でした。
たまにクリックで応援して頂けると、励みになります。
⇒《人気ブログランキング》
引用元：http://www.wcf-drill.com/2014/02/ameblo-customize-url-shortener.html
