ブログ記事224件
サイドエリアの設定を、画像などは用意せずにCSSの設定だけで変更する方法です。本当に基本的な部分のみをやりたいと思います。プロフィール部分のように、仕上げていきます。①ホーム画面から「ブログ管理」→「デザイン設定」→「CSSの編集」にいき、コードを書く画面の一番したにカーソルを持っていきます。そして、簡単に言ってしまうと、こちらを、ペロンと貼れば、終了なんですが、これだと自分の好きな色設定ができないので、必要最低限の解説をしていきます。②リストの文字変更/*
自作のヘッダーをいよいよ設置していきます。これでグッとオリジナル感が増し、ブログの愛着もわくというものです。私は、こんなのを作ってみました。横幅2000px、縦幅600pxで作成しています。こちらを設置していきます。①「ブログ管理」→「デザイン設定」→「CSSの編集」の手順で、設定画面を開いてください②ファイルを選択して、用意したヘッダー画像をアップロードし、画像のパスが表示されていればOKです。③デザインコードのCSSを入れる部分の一番下まで下がってくだ
目次アメブロデザインをカスタマイズする方法①画像を軽くしてみよう『【アメブロデザインカスタマイズ】①画像を軽くしてみよう』ブログといえば、画像がつきものですよね。カスタマイズを始める前に、知っておくと良い、画像を軽くすることについて、今回はご紹介してみたいと思います。画像は重い…ameblo.jp②背景(壁紙)画像を作ってみよう『【アメブロデザインカスタマイズ】②背景(壁紙)を作ってみよう』私のブログの背景画像は、無料ツールでサクッと作りました。グレーを基調にしつつも
ヘッダー部分も背景画像と合わせたり、自分の手持ちの写真なんかを使うとオリジナル感が増します。今日は、今日はphotoshopとよく似ているソフト「photopea」をご紹介します。↑リンクです。無料で使えて、photoshopとの互換性があり、psd形式ファイルで保存もできます。テンプレートも各種揃っています。photopeaのサイト上で作業をするのですが、まるで自分のPC上で作業しているかのように、使いやすい作りになっています。会員登録の必要もないのもメリットです。使い方も、
とりあえずでも、背景画像がオリジナルだと、それだけでも気分がグッと上がります。急に沢山のことは出来なくても、背景画像だけなら、ちょっとした隙間時間で、できちゃいますよ。そして、初心者の方やhtmlやcssを知らない方には、一工程ずつの方が、混乱しないと思うのです。背景画像と言っても、メインとなるヘッダー部分や、ナビゲーション部分、これよりも、下の部分に背景画像を入れてみます。まず、画像を用意してください。私は、ちょっと激しめのこちらを使っていきます。①「ブログ管
私のブログの背景画像は、無料ツールでサクッと作りました。グレーを基調にしつつも、変化を付けたページにしたかったので、ストライプにしました。自分で作ってもいいんですが、簡単にできるものがあるのならば、使った方が楽ちんです。余った時間は、他のことをしましょうということで、「StripeGenerator」のご紹介です。StripeGenerator-ajaxdiagonalstripesbackgrounddesignerGenerateseamlessst
ブログといえば、画像がつきものですよね。カスタマイズを始める前に、知っておくと良い、画像を軽くすることについて、今回はご紹介してみたいと思います。画像は重いと表示に時間がかかってしまいます。画像を1個投稿するくらいならいいかもしれませんが、枚数が多いときや、ヘッダーとか壁紙の画像はなるべく軽くした方が、表示も早くなって良いです。ヘッダーとは、こちらのこと。ブログのメインにくる、一番目立つ部分です。私はこちらをphotoshopで作成して、pngの画像形式で書き出しをしまし
webデザインを勉強した成果を発表させてください。携帯から見ている人は知らないかと思いますが、PCで見た私のブログページは、こんな感じです。ちまちまと、デザインを作って、ようやくこのデザインで収まりました。勉強もかねて、デザインはリニューアルしていこうと思っているので、記録としてこちらに残しておこうかと思い立ちました。html、javascript、dreamweaver、photoshop、xdを学校で3か月という短期集中で学び、修了後は頭から湯気をぽっぽと出しながら、phpと
オリジナルヘッダーにしたよ(CSS編集用デザイン)←まぁオリジナルと言っても弄れる所って限られてるけどwしかも、PC版のみ!!折角オリジナル作っても結局はPC版のみ←今はスマホで見る人が多いのにスマホアプリで見ると何故かヘッダーが無いwwスマホもPC版デザインを表示してほしいと思いません???スマホ版って操作しやすいけど超~絶見にくい!!慣れなのかもしれないけど・・・アメブロに物申したいわっスマホで見ても変な所で改行はいらないよう
買ったまま放置していたアメブロのCSSカスタマイズについての本を開いて新たなCSSを作った。「紫系統」でまとめてみた。CSSカスタマイズは一年以上していなかったのでどの項目をいじると、どこが変わるのかよくわからないので手さぐりで作ったよ。にほんブログ村吹奏楽吹奏楽人気ブログランキングに参加していますので創作の励みに一押し願います。
「SkinCoordinate移植ツール」とは「公式スキン」を設定したブログを「CSS編集用デザイン」の環境に変更するツールです。◎スキン移植機能で、適用していたスキンデザインを引き継ぐことが出来ます。◎環境の移行時に、サイドバーのカラムの設定を変更出来ます。◎「新タイプの公式スキン」から移行する場合は、「標準型・タイル型・リスト型」の好みのトップページ型式に変更できます。「CSS編集用デザイン」の環境は、ブログページの実用的なアレンジを可能にします。これは、満足の行
「移植ツール」の利用は注意をしてくださいこのツールは、「公式スキン」のスキンデザインを「CSS編集用デザイン」のスキンに置き換える(移植する)ツールです。「CSS編集用デサイン」のスキンを設定し、ページデザインをカスタマイズして運営されている場合は、このツールを使う事で、カスタマイズのために登録してきた「ユーザーCSS」の内容が失われます。その状態から、元のデザインに戻す事は、「ユーザーCSS」のバックアップなしでは不可能です。「CSS編集用デサイン」を適用している場合は、必ず事前
こんにちはあきりとですブログの背景とか文字の太さとか色とか、いろいろ変えてみました。ちょっと夏らしく、そして見やすくなったのかなと・・・標準の設定のままだと、文字がちょっと細かったり、背景との色合いが悪かったりと、ちょっと、痒いところに手が届かない・・・なので、CSSをいじってみました。CSSとか言われても、わからないですよねとにかくわからない人は、文字を太く柔らかくするだけですが、以下の順番で、できます。①【ブログ管理】にすすむ②【デザインの設定
「Firefox」でのトラブルを契機に判った問題点プログラムツールの制作で、どうもツールの反応が変で、一応動作するが何かひっかかる時があったりする、という問題に出会うことがあります。「SkinCoordinate」では、過去のバージョンで、Firefoxで「⇧」「⇩」キーがブラウザウインドウ全体の上下スクロールになり、これを制するのに苦慮しました。前バージョン(ver.2.1)の最終チェックでFirefoxのテストすると、「⇧」「⇩」キーの問題は無くなっていて、今度は「Space」
「RoundSelector」「プリセットボタン」の操作を同じにプログラムの半分は機能の本質部分ですが、半分(あるいはそれ以上)はユーザーインターフェイスを取り持つ部分です。インターフェイスが悪いとユーザーは直感的な操作が出来ずにイライラします。「SkinCoordinate」では、インターフェイスをいかに判り易くするかに注力しました。今回の改善により、「RoundSelector」は対象要素を「⇦⇧⇩⇨」ボタンで渡り歩く事ができますが、それ以外の背景画像の差替える操作など
ずっと気になっていた自分のアメブロのヘッダー画像★タイトルの文字種をお洒落に変更したい★シンプルにタイトルだけがいい素敵なヘッダーをお持ちの方の記事を見るたびにいつもウットリいつか私も作りたい!と密かに思っていたところ作り方がわかりやすくのせてある記事を見つけ早速取りかかってみました。【ブログ管理】>【デザインの設定】1番下のほうにある【カスタム可能】というところの【CSS編集用デザイン】というのを選択して作るんですね〜(※ただ、これを選択すると今まで
インターフェイスの改善「RoundSelector」を搭載して以降、気になっていたのが「プリセットボタン」と操作方法に統一がない点です。「RoundSelector」の開発時に、その操作を「プリセットボタン」の操作に近付ける事は不可能でした。しかし現段階で考えをめぐらすと、「プリセットボタン」の操作を「RoundSelector」に近付ける事はできそうです。方針としては、▪対象要素に対して、最初のクリックでその背景画像(または配色)を非表示化して、要素の範囲を枠線表示。▪
新旧の両タイプスキンに対応する統合版新タイプスキンと旧タイプスキンでそれぞれコードを発展させると、特殊化が目だって、一時はとても統合版は作れない様に思えました。しかし、コードの整理を進め、「CSSセレクタ」の扱いを改善すると、再び両タイプのコードが近似して来ました。現在、この両タイプに対応出来る版を編纂中ですが、単に組み合わせるのではなく、更に改善を考えています。 プリセットボタンを減らす「プリセットボタン」は、ツールに対象要素の「CSSセレクタ」を取得して自製する機能がない段
プリセットの「セレクタ」データと初期表示のコードを分離「新タイプ」は対象要素ごとに、背景画像の処理の最初に表示される「範囲表示のCSSコード」を、内的なデータペース(配列)に登録していました。letb_param=[['0','0','0','0','0','0','0','0'],['0','.skin-bgHeader{background:none;box-shadow:'+'#2196f30004px
越えれば低い山旧タイプスキンは、サイドバーの「メニュータイトル」にアクセントの小画像を配したスキンがとても多くあります。これもアレンジの対象要素で、「SkinCoordinate」はしっかりチェックするので、「RoundSelector」で探すと下の様にターゲットになります。ところが、画像の差替えや非表示化が全く出来ません。他のスキンでも、やはりアレンジ機能が働きません。原因を調べると、セレクタの表記が下の様に、親側のセレクタを冠した形になっていました。「
新タイプスキン版のコード整理◎旧タイプスキン版の制作で、新タイプスキン版のコードをずいぶん修正しました。基本コードは同じですが、重複して同コードの繰り返しが多く、可能な箇所は関数に纏めてシンプルに整理しました。◎関数名がその目的に沿わないものが幾つかあり、適切な関数名に変更しました。輻輳したコードになると、判り易い関数名は更新上で案外と重要です。また、「旧タイプ版」に合せ「新タイプ版」のパネル背景色を半透過にしました。最後に、ツール名を「SkinCoordinateⅠ」
旧タイプスキン版の主力機能新タイプスキンは、背景画像を設定する対象要素の選択は、プリセットボタンで行います。一方、旧タイプスキンは対象要素のパターンが複雑ですから、対象要素を選ぶ新しい仕組みを考えました。下は、旧タイプスキン版のコントロールパネルで、左側の5個が対象要素の選択ボタンで、編成が異なります。左端の❶「RoundSelector」は、その主力機能の起動ボタンです。また、❷~❺のボタンは、従来と同じプリセットボタンです。 ユニバーサルな
旧タイプスキンに対応版を作成中旧タイプのスキンは、背景画像が設定されている要素の種類が多く、少し調べた所では、以下のセレクタの要素が挙がって来ました。********Base****************************.skinBody/★.skinBody2/★.skinBody3/★.skinFrame2/imgとcolor*****header*****************************.skinHe
「SkinCoordinate」を実用化する環境いよいよツールを実用化する条件が揃いました。ブログスキンの背景画像の差し替えを、HTML・CSSの知識なしで可能にする道が見えて来ました。これを実現するには以下の作業をします。➀「SkinCoordinate移殖ツール」を起動して、使用している「公式スキン」を「CSS編集用デザイン」の環境に移植します。(既に「CSS編集用デザイン」を利用している場合は、これまでのアレンジ内容がリセットされます。事前に必ず「ユーザーCSS」のバ
スキンを元に戻す機能はボツ案元のスキンに戻す機能 「公式スキン」を「CSS編集用デザイン」に移行した環境から、元の「公式スキン」を適用した状態に戻すプログラムを作りました。「公式スキンに戻す」のボタンを設置して、これを押すと現在の「CSS編集用デザイン」から、ページの移行元の「公式スキン」を判定し、そのスキンを適用する処理です。「CSS編集用デザイン」の適用されたブログページでは、そのHTMLを調べても「元の公式スキン」の情報が出て来る保証はありません。もし単純に移行だけをしたペ
「標準・タイル・リスト」の型式の変更機能公式スキンをCSS編集用デザインのスキンに簡単に移植できる様になりました。5種の公式スキンで、スキンのコードネームと異なるブログ型式(タイル・リスト)が適用される事だけが問題点で、他は問題なく使えます。自動的にブログ型式・カラム指定を受け継ぎ、CSS編集用デザインに移植するのが、最初に考えた仕様です。しかし、上記の特例の問題に対処できる様に、移植時に型式・カラムの設定を選択・変更できる機能を追加しました。これにより、型式が変わってしまう5
全ての公式スキンの移植テスト現在ある公式スキンの294個の全てを、前ページのツールを使って移植テストを行いました。その結果、公式スキンのシステムについて気付いた事をまとめます。公式スキンの「スキン名 」と「コードネーム」公式スキンには、表向きに判り易い日本語もしくは英語の名前が付けられています。これとは別に、プログラム上でスキンを判別するためのコードネームが付けられています。下は公式スキンリストの最初にある「BettyBoop™」という名前のスキンですが、このコードネームは
できる事はなんでも試す「SkinCoordinate」の制作が完成に近付くと、ページにスキンが適用されるのが遅いという、致命的な問題に直面しました。「フリースペース」にアレンジ用CSSを置いて読み込ませる案は、詰めが甘かったのです。ページの読込みは、HTMLの頭側から末尾に進みますが、基本デザインや記事本文などの後に、本文末のADを読込み、次いでサイドバーに読込みが移り、ようやく「フリースペース」が読み込まれます。「SkinCoordinate」が出力するCSSコードは、記事の