集客、営利目的ではありません。
本業の分野と異なり、趣味で、新デザイン(1120px幅)のカスタマイズで得た事を、淡々と覚書として纏めています。初心者向きでない点はご了承下さい。

お困りの方へ、アメブロメッセで一報を。
デザイナーの方へ、アメブロ新デザインのCSSコーダー無料受付中。作業概要は、コチラ参照。

←コチラからアメブロプラグイン、便利ツールを提供中。
  • 22 Jul
    • 旧デザイン利用者からhttps対応の相談

      はじめに 問合わせがあったので、旧デザインのサポートをしました。 https対応で、ヘッダーとサイドバーのスライダー、フッターメニューを、JavaScriptからCSSへ置換えの相談です。 疑問 旧デザインの記事上のページ送りボタンを消すのに、何故2番目の要素なのか? 疑問です。 .pagingArea:nth-of-type(2) { display : none; } この為、以下の様にしました。 .globalLinkArea+.pagingArea { display : none; } まとめ 説明するのが困難なので、 旧デザインと言えど、こちらで手直しし、CSS、フリースペース、フリープラグインを、納入させて頂きました。 CSSにコメント、インデントを付けたので、少し分かり易いかと思います。 枚数が増えたので、以前紹介したコチラとコードが違います。 animationは、@keyframesの設定が、どうも苦手です。 他人のコードは良し悪し関係なく、アイデアの宝庫です。 旧デザインでしたが、良い勉強になりました、ありがとうございます。 .c1, .c2, .c3, .c4, .c5{ position : absolute; width : 450px; height : 300px; animation-duration : 20s; animation-iteration-count : infinite; padding:0!important; border:0!important; } .c1 { animation-name : s1; left : 0px; } .c2 { animation-name : s2; left : 450px; } .c3 { animation-name : s3; left : 900px; } .c4 { animation-name : s4; left : 1350px; } .c5 { animation-name : s5; left : 760px; } @keyframes s1 { 0% { left: 0px;} 20% { left:-450px;} 20.1% { left:-450px;visibility:hidden} 40% { left: 1350px;visibility:hidden} 60% { left: 900px;visibility:visible} 80% { left: 450px;} 100% { left: 0px;} } @keyframes s2 { 0% { left: 450px;} 20% { left: 0px;} 40% { left:-450px;} 40.1% { left:-450px;visibility:hidden} 60% { left: 1350px;visibility:hidden} 80% { left: 900px;visibility:visible} 100% { left: 450px} } @keyframes s3 { 0% { left: 900px;} 20% { left: 450px;} 40% { left: 0px;} 60% { left:-450px;} 60.1% { left:-450px;visibility:hidden} 80% { left: 1350px;visibility:hidden} 100% { left: 900px;visibility:visible} } @keyframes s4 { 0% { left: 1350px;visibility:visible} 20% { left: 900px;} 40% { left: 450px;} 60% { left: 0px;} 80% { left:-450px;} 80.1% { left:-450px;visibility:hidden} 100% { left: 1350px;visibility:hidden} } @keyframes s5 { 0% { left: 760px;visibility:hidden} 20% { left: 1350px;visibility:visible} 40% { left: 900px;} 60% { left: 450px;} 80% { left: 0px;} 100% { left:-450px;} } .carousel{ position : relative; width : 670px; height : 300px; border: 1px solid #ccc; overflow : hidden; }

      NEW!

      11
      テーマ:
  • 21 Jul
    • ブログタイトル、説明文を縦横中央に配置

      はじめに 【初級】アメブロのカスタマイズ。 ブログタイトル、説明文を縦横中央に、配置するCSSを、紹介します。 CSS .skin-bgHeader > div { height : ヘッダ画像の高さ; background-image : url(ヘッダ画像のURL); } /* ブログタイトル、説明文を縦横中央配置 */ .skin-bgHeader > div > a { display : flex; align-items : center; justify-content : center; height : 100%; } .skin-headerTitle { text-align : center; } まとめ 以前の記事では、display:tableを用い、縦中央配置と、今思うと面倒な事をしています。 これもflexを用いれば簡単にできますね。

      12
      テーマ:
  • 20 Jul
    • 簡単にヘッダーとナビゲーション部分を入れ替える

      はじめに アメブロのカスタマイズ。 ヘッダー部分とナビゲーション部分の配置を入れ替える、CSSを紹介します。 アメブロ仕様変更の影響を調査した時、偶然コチラのブログを拝見しました。 このブログで使われているコードと、flexを用いたコードを紹介します。 CSS 元のコード /* ヘッダーを無くす */ header { height : 0!important; } /* リンクをヘッダー画像位置に移動 */ header a { width : 1120px; /* ヘッダー画像幅 */ height : 400px; /* ヘッダー画像高さ */ position : absolute; top : 71px; text-indent : -9999px; /* ヘッダータイトル、説明文を消す */ } /* ヘッダー画像をメイン背景に設定 */ .skin-blogBody { padding-top : 400px; /* ヘッダー画像高さ分の余白 */ background : url(ヘッダー画像のURL) no-repeat center top; } flexを用いたコード /* ヘッダー画像 */ .skin-bgHeader { background : url(ヘッダー画像のURL) no-repeat center top; } .skin-bgHeader > div > a { height : 400px; } /* ヘッダータイトル、説明文を消す */ .skin-headerTitle { display : none; } /* ヘッダーとナビゲーションの配置を入れ替え */ .skin-page { display : flex; flex-direction : column; } .skin-blogHeaderNav { order : -1; } 説明 元のコードは、ヘッダー部分の高さをheight:0で無くします。 ヘッダーでなく、メインの背景画像として、ヘッダー画像を定義します。 ヘッダー部分のリンクを、メインの背景画像位置まで移動させ重ねます。 flexを用いた場合、ヘッダー部分と、ナビゲーション部分の並び順を入れ替るだけで済みます。

      9
      テーマ:
  • 19 Jul
    • SSL時のメッセージボードのタグ閉じ忘れ

      現象 タグの閉じ忘れの時、SSLページの動作で気付いた事があります。 メッセージボードに、以下の様のコードを書きました。 <div style="border:1px solid #000; padding:20px;">○○○○○ 見ても分かる通り、</div>で閉じられていません。 この時、非SSLページとSSLページで表示が異なりました。 非SSLページは、タグが閉じられていない為、レアイウトが崩れます。 しかしSSLページは、レイアウトが崩れません。 HTMLコードを見ると、</div>が付加されています。 また、以下のコードの場合、</div>が削除される様です。 ○○○○○</div>

      14
      テーマ:
  • 18 Jul
    • 表示記事から画像を削除

      はじめに アメブロのカスタマイズ。 表示記事から表示中の画像を削除する、プラグインを紹介します。 画像フォルダは、登録した年月単位に表示されます。 過去の記事中の画像を変更する際、フォルダから探すのが一苦労です。 この為、記事に表示される画像下に、削除ボタンを設け、直接フォルダの画像を削除します。 JavaScript 本コードは、Font Awesome絵文字を用いています。 <script type="text/javascript"> $(function() { var s1 = 'http://blog.ameba.jp/ucs/upload/srvimagedeleteinput.do?id='; var s2 = '&ra=/ucs/upload/srvimagelist.do?image_date='; $(".skin-entryBody img").each(function() { var url = $(this).attr('src'); if(url.match(/\/\/stat\.ameba\.jp\/user_images\/([0-9]+).+\/(t[0-9]+?_|o)(.+)/i)) { // 登録年月 var yymm = (RegExp.$1).substr(0,6); // ファイル番号 var f = (RegExp.$3).substr(8,11); var html = '<div><a href="' + s1 + f + s2 + yymm + '" target=_blank><i class="fa fa-trash-o" aria-hidden="true"></i></a></div>'; $(this).after(html); } }); }); </script>

      16
      テーマ:
  • 17 Jul
    • アメブロカスタマイズ請負

      はじめに 空前絶後の~~~超絶怒涛のプログラマ!!プリクラ、自動車メーター、ATM、全ての組込みソフト開発に愛された男。請負金額は無料です、今がチャンスで~~~す(笑) アメブロ仕様変更に伴う影響調査で、色々ブログを見ました。 CSSですが、一字一句そっくりなコメントやコードが多いですね...また、アメブロ提供のCSS編集テンプレート下に、変更分を追加と。 今回、何かの講座か、見るに耐えないコードを見付け、その方にメッセさせて頂きました。(同じコードが数人居りましたが) それを切欠に、お店のブログを無料で新規リニューアルと、コンサルタトする事となりました。 新規作業の流れ 無料でも、何ら本業と変わらず品質第一で責任を持って、以下の手順で対応します。 CSSは、5種類のレイアウト、スタンダード、タイル、リストの全てに対応し、自由に顧客が選べる様にます。 顧客とメッセンジャーで連絡を取り合い、要件定義、スコープ定義を行い、依頼者の要求、作業範囲、納期を文章化し、合意の上、作業を開始。 CSSを新規作成&テスト。 サンプルで、既存のメッセージボード、フリースペース、記事の一部を修正。サイドバーのメニュー配置順の見直し。 プロトタイプを作成し、デバッグ用ブログに登録。 顧客がデザイン(色合い等)を確認。 要望に従い、プロトタイプを繰り返し修正。 GoogleDriveを用い、顧客と情報を共有。 完成CSS、Q&A表、作業報告書、変更前CSS等のバックアックファイルを、顧客に納入。 顧客の疑問点等をQ&A表に纏め、文章化してやり取り。(必要に応じ、画面キャプチャ等) 日々の進捗状況を、作業報告書とし纏め、顧客に報告。 リリース作業の流れ 新規の為、顧客パスワードをお借りして、リリース作業を行います。 この時、元のデータは全て、テキストファイルとして、バックアップを取ります。 CSS編集登録 メッセージボード登録 フリープラグイン、フリースペース登録 サイドバーのメニュー配置順見直し 一部の記事の体裁見直し(テーマ見直し等) 作業の振り返り 今回、過去の記事等を参考に、使用する色等を検討し、作り込みを行いました。 デザイナーでないので、凝った画像は作れません。 全体を見易くする事にポイントを絞り対応させて頂きました。 新規と言え、自分用のテンプレートがあるので、1日でプロトタイプを作成します。この為、コーディングだけなら、然程、時間を要しません。 顧客とメッセンジャーで連絡を取り合い、デザインは2日で完成しました。 多くに言える事は、デザインと、記事全般のバランスが悪い事です。 この為、改善点をExcelに纏め、顧客に提示し、コンサルタントさせて頂きました。 またリリース後、1週間運用する中、不明点等について、Wordを用い作業手順書を作成し提示、対応しました。 コンサルタントする上で、特に気になった点は以下です。 記事中に囲み枠を用いお店の宣伝を記している為、お店の宣伝公告だらけで、見栄えが悪い。 店舗紹介、サービスメニュー、お店として重要な項目に絵文字があり、ビジネス感薄い。 公告、記事中に、強調文字が多く、何が重要か伝わらない。 テーマ数は多いが、煩雑で管理できていない。 この為、以下の指示と改善を図りました。 お店の宣伝(イベント情報等)は、メッセージボードに記す様に改善。 しかし、スマートフォンの場合、記事しか情報を伝える術がありません。 この為、記事中のお店の宣伝は、スマートフォンの時しか見えない様に改善しました。 お店の重要な情報から、絵文字を削除し、記事の体裁を整えさせて頂きました。 強調文字を控え、1番重要な項目のみ使用する様、記事の体裁を整えさせて頂きました。 今後の事も考え、複雑なコードを避け、簡単に手直しできる様、定型文の雛形を作成しました。 煩雑になっていた約30テーマを、10テーマに纏め、お店の情報と、日頃の話しを分け整理しました。 御礼の言葉 この様な機会を頂き、ありがとうございました。また、勉強させて頂きました。 画面キャプチャ、GoogleDrive登録と、PCの基本操作ができるだけ、こちらも対応が楽でした。 記事の書き方を含め、見栄えは以前より良くなったと思います。 今回、折角整理したので、それを維持し、写真、記事等、丁寧に楽しく書かれる事を望みます。 美容と同じで、ブログもデザインが綺麗になると、他が気になりますよね♪ 些か、記事約180件分のテーマ変更は、結構骨が折れました(苦笑) ブログは、運用して何ぼ、お困りの時は何時でも連絡下さい。 少しでもお役に立てた事、嬉しく思います。 まとめ 分け合って使われませんでしたが、今回、お店の簡単なヘッダー画像も作りました。 今後、提供頂く、元画像の管理・保管はシッカリ頼みますね(笑) 何時も問題になるのは、ブラウザのキャッシュの事。 普段馴染みなく、ブラウザを使われている方が多いです。 ブログデザインを更新したら、必ずキャッシュクリアしましょう。   ブラウザのキャッシュを無視し、強制的にWebサーバーからファイルをダウンロードする方法。 Windows:[Ctrl]+[F5]キー Mac:[Command]+[R]キー

      テーマ:
  • 15 Jul
    • BOOKS「アメブロPerfect GuideBook改定第3版」を買ってみたけど...

      はじめに COCOさんの、以下の記事をリブログします。 感想 2017.04.27発刊なので、新デザインが主体に記されているかと思いました。 Amazonに掲載されている、見出しの構成を見ると、カスタマイズより、「アメブロとは?」に始まる使い方が主かな? カスタマイズも何処まで書かれているか怪しいですが... 折角、買ったのに残念です。

      15
      2
      テーマ:
  • 14 Jul
    • 動的にCSSを追加した際、IEだけ期待通り反映されない

      現象 IE11の動作が異なり、動的にCSSを追加した場合、何故か期待通りとなりません。 記事下に表示しているプラグイン「いいねした人/リブログした人表示」の、枠はCSSを定義する前提としています。 しかし、CSSを定義せずプラグインを使われている方が居り。 この為、プラグイン起動時に、以下の様に<head>に標準CSSを追加する様にしました。 $('head').prepend('<link rel="stylesheet" href="標準CSSのURL" type="text/css">'); 追加した標準CSSより後に、CSS編集、フリースペースのCSSが定義されている為、その値が反映されると思っていました。 IE11だけ、一旦は指定された値に変わりますが、標準CSSが追加されたタイミング?で、標準に書き換わっている様です。 暫定対策 根本原因が不明なので、CSS編集で「いねした人/リブログした人表示」の定義に、importantを追加しました(苦肉の策) ツールの出力も同様です。

      11
      テーマ:
  • 13 Jul
    • inline要素の上下に余白を定義すべきでない

      はじめに 川上雄大・パソコンインストラクターさんの、記事をリブログします。 現象 以下の様に、見出し下がはみ出ています。 しかし、スマートフォンの場合、見出し下がはみ出る事はありません。 見出し <div style="border-bottom:2px solid #4dac26;"> <span> style="padding:6px 12px; background: #4dac26; color: #ffffff; border-radius: 6px 6px 0 0; font-size: 1.2em; font-weight: bold;"> 見出し </div> </div> 原因 根本原因は、spanを用いた事です。 inline要素spanに、paddingを定義した場合、上下に余白は取ってくれますが、上下の要素に影響を与えません。 結果、上下の行に余白が重なる事となります。 この為、上下の余白を大きくすると、スマートフォンでも同じ現象となります。 また、別の要因としてfont-family:"メイリオ"が用いられた事です。 以下のテキストは、分かり易くする為に、padding:20px、font-size:40pxとしています。 メイリオの場合。 ヒラギノ角ゴ Pro W3の場合。 同じフォントサイズにも関わらず、メイリオの場合、上下に余分な10pxの余白が付き、全体の高さが20pxも異なります。 この事もあり、PCの場合、顕著に見出し部分がはみ出します。 参考として、 スマートフォンの定義は、以下となっています。 font-family:"ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", Helvetica, Arial, sans-serif; 対策 spanを止めdivにし、見出しの幅を指定します。 見出し <div style="border-bottom:2px solid #4dac26;"> <div style="width:60px;padding:6px 12px; background: #4dac26; color: #ffffff; border-radius: 6px 6px 0 0; font-size: 1.2em; font-weight: bold;"> 見出し </div> </div> 訂正 川上さんのブログに書いたコメントに指摘があり。 divに変更するのではなく、display:inline-block;を追加じゃね?と。なる程~思いもしなかったです。 blockの各値、余り理解していなかったので、また一つ勉強になりました。 指摘してくれた方、気付きを与えてくれ、誠にありがとうございます。 見出し <div style="border-bottom:2px solid #4dac26;"> <span style="display:inline-block;padding:6px 12px; background: #4dac26; color: #ffffff; border-radius: 6px 6px 0 0; font-size: 1.2em; font-weight: bold;"> 見出し </span> </div>

      15
      7
      テーマ:
  • 12 Jul
    • 最新エディタ(標準)で過去記事を編集中、カレンダーは過去の日時が表示される

      現象 過去の記事(2017年1月1日00:00:00)を最新エディタ(標準)を用い、投稿日付をクリックし、「現在時刻」(2017年7月12日01:01:01)をクリックします。 その時、 投稿日付は「現在時刻」となります。 しかし再度、投稿日付をクリックし、カレンダーを開くと、過去の日時(2017年1月1日00:00:00)のままでした。 カレンダーが、現在時刻(2017年7月12日01:01:01)を示しません。 原因 カスタマサービスの回答を、以下に記します。 お問い合わせの件につきまして、以下の例の様な状態になるとのことでしょうか。 【例】 7/2 16:00に投稿 ⇒その記事を編集 ⇒日付を現在時刻へ設定 ⇒決定 ⇒再度日付変更画面へ行くと過去の日付(今回の場合7/2)にチェックが入っている状態 恐れ入りますが、上記は、記事作成時の仕様となります。 2017.07.04

      13
      テーマ:

ブログをはじめる

たくさんの芸能人・有名人が
書いているAmebaブログを
無料で簡単にはじめることができます。

公式トップブロガーへ応募

多くの方にご紹介したいブログを
執筆する方を「公式トップブロガー」
として認定しております。

芸能人・有名人ブログを開設

Amebaブログでは、芸能人・有名人ブログを
ご希望される著名人の方/事務所様を
随時募集しております。