Tag Archives: CSS

HTML5, CSS, jQueryの基本コードパッケージ

0
Filed under プログラミング言語, 仕事ツール
Tagged as , , , ,

ちょっとしたテストとか、JavaScriptの動作チェックとかやる度にゼロからHTMLを書いていました。
まだ、これまではその間隔が2,3ヶ月に1度くらいだったのであまり苦痛ではなかったのですが、最近1ヶ月に1度はやっている気がする。
大抵のテストではjqueryを使いたくなるので、それをダウンロードして、読み込ませたりするし、当然CSSも必要。
でも、CSSのプロパティとかどういうパラメータ名だったっけ?とか、jqueryってどういう使い方だったっけ?と基本的なところので悩み、なんとなく、こんな感じのような。。ちがうなぁ、と試行錯誤の繰り返し。

サンプルファイルアーカイブ

今更ですが、この作業があまりに無駄に感じたので、その最初のところまでをシンプルにしてまとめたものをアップしておきます。ご自由にお持ちください!

大抵のウェブコンテンツ制作者の方には不要だと思いますが、誰よりも自分のために公開!

Read More »

WordPressの見栄え編集

0
Filed under WordPress
Tagged as ,

WordPress、特に本とかサイトとか見ていないのだけど、設定画面を眺めつつ、これはこういう意味かな?と思ってみていると何となくあれこれ出来るので、まぁ、良くできていると思います。

Black Hatテーマ

WordPressの見栄えを決めるのがテーマ設定。公式サイトにはフリーのテーマが800近くアップされており、その中から適当なものをダウンロードしてインストールすることが出来ます。

なるべくシンプルで見やすいテーマを、ということで探した“Black Hat”Nicki Faulkさん作)というテーマを使っています。「2コラム」「なるべくモノクロ」「各エリアの区切りが分かりやすい」「変な癖がなさそう」ということを考え選びました。
しかしこのテーマでも微妙にいろいろなところが納得いかないので、少しずつ修正したいと思います。

CSSを編集する

CSSとかダウンロードしたりアップロードしたりとかしなくても、設定画面内で直接書き換えられるのが便利ですね。
外観メニュー内にある「編集」をクリックして開く画面があります。その状態で右側に「テンプレート」とかあり、その下の「スタイル」のところにテーマで使われているcssファイルが列挙されています。”Black Hat”テーマの場合、この中にある「スタイルシート (style.css)」というのがページの見栄えに関するメインCSSとなっているようですので、クリックして真ん中のウィンドウに表示されるCSSを編集します。
wordpress-css-edit
編集が終わったら、下部にある「ファイルを更新」というボタンをクリックしたら次に開いた画面から編集したCSSが適用されます。

サイドバーを調整してみる

サイドバーに表示している「最近の投稿」や「カテゴリー」の項目が、改行されたときに見にくくなってしまっている問題を解決してみます。

wordpress-css-li0
まず、このあたりのHTMLソースを見てみると、ul,liで入れ子状態になっていることが分かります。それらをsideba IDのCSSで設定している以下の3つの項目について修正しました。
[css]
#sidebar ul li ul, #sidebar ul li ul li ul {
margin:0;
padding:0.5em; /* #3 */
}

#sidebar ul li ul li {
margin:0;
margin-left: 1em; /* #2 */
padding:0;
list-style-type: square; /* #1 */
}

#sidebar ul li ul li a {
padding-left:1px; /* #4 */
line-height:22px;
display:block;
}
[/css]

  • #1 .. まず、リストの行頭に四角マーカーを表示するよう設定
  • #2 .. 次に、その分インデントを調整
  • #3, #4 .. これら枠線の内側パディングを微調整

これで完了です。

以上のように設定したものは次のように表示されます。

wordpress-css-li1