サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
デスク環境を整える
scope.minibird.jp
1から自分で作成していくことも出来ますし、Galleryをみて気に入った物を加工したりしていくことも出来ます。 「EnjoyCSS」ジェネレーターの使い方 使い方といってもジェネレーターなので、自身で好きなように加工していくだけです。 作りたいもの(要素)からと作成したい装飾形態のどちらかを選択して作り始めます。 以下は、作成できる装飾の種類 このジェネレーター指定できる項目がかなり豊富です。 ただ、指定項目が多いので、CSS初心者の方は難しいかもと思いましたが、知らなくても数値を変更すればいいだけになっていたりするので、見ながら触りながらできるので大丈夫かと思います。 どこをどうしたらどうなるの?って方は、Galleryから選択して加工していけばOK! 1. 選択する 今回は、テキストからAdobe Fontsを選択してつくってみます。 ぽちっと押すと、以下の画面にいきます。 少し見づら
ブログに紹介したい動画を貼り付けて載せる場合には、埋め込みコードを使ってブログにコピペしますよね? ただ、このコードをそのまま貼り付けるとスマホで見るとはみ出てしまいます。 それは、貼り付けコードの中身を見るとすぐわかるのですが、横と縦の大きさが固定幅で設定されているからです。 これをCSSでスマホ用に最適化する方法。
本日9/16でこのブログが1歳を迎えました! 拙いブログですが、いつもご覧頂きまして、本当にありがとうございます。 あっという間の1年でしたが、これからのことやこれまでのことを振り返ってみたりなんかしたいと思います。 これまでの1年を振り返る ほんとうにあっという間という言葉がこれほどしっくりくる感じもないなというくらいにあっという間でした。 もともと違うところでブログを書いていたりしていたのですが、これほどのスピード感はありません。 そんな疾走感満載なブログだと思っていたのですが、後半は更新なにそれ美味しいの?くらいの事態となり総記事数92件という数値となりました。 ただ、わたしにとって更新頻度というのは、ブログとしてどうなの?と思えるくらいに重要度が低いのでRSSに登録して頂いている方には申し訳ないなぁとたまに思います。はい。たまに。 1年間でよく読まれた記事 この1年間でよく読まれた
表題のとおりです! 3カラム需要あるかなぁどうかなぁと思いましたが、作りましたので良かったら使ってくださいねw informationこの記事でのカスタマイズバージョン:stinger3ver20140327 3カラム「DeepJaggy-threeColumn」 図は左側にカラムが追加されたものですが、今回メインとサイドの間にカラムを追加したものと2つ作りました。 デザイン変更はPC版のみです! モバイル端末では今回追加したカラムは表示されません。 出来上がりの図 「DeepJaggy-threeColumn」デモ 真ん中にカラムを追加したもの DeepJaggy-threeColumn_center 左側にカラムを追加したもの DeepJaggy-threeColumn_left 追加した機能 機能というほどでもないですが、以下のようなものを使えるようしました。
「FontAwesome」ってなに?? Webフォントです。cssで色を変えたり大きさを変えたりすることのできるものです。 またcssだけでなく「FontAwesome」のクラス名でカスタマイズも可能です(以下に記載しました。) フォントなので高解像度になっても綺麗に見えるというのが利点。 「FontAwesome」導入手順 ブログへの導入手順としては
ブログにTwitterウィジェットを設置されている方、多いと思います。このブログでも最初の頃設置しておりました。 ただ、わたしはデザインはデフォルトのままで設置していたのですが、今回このデザインを自分なりにアレンジしたい方向けのお話です。 1. Twitterウィジェット(埋め込みタイムライン)を設置する まずは、Twitterウィジェットを作成していきます。 公式のTwitterページの右上、歯車アイコンから → 設定を選択。 左下のウィジェットをクリック 新規作成ボタンを押すと、下記のような画面に行きます。 今回は、デザインをカスタマイズするので詳細な設定はせずにこのまま左下のウィジェット作成ボタンを押します。 ボタンを押すとコードが表示されるので このコードをブログに貼り付けます。 ここまでで設置は完了です。 あとはデザインをカスタマイズしていきます。 2. Twitterウィジェッ
タグクラウドをウィジェットを使って表示させたのですが、ウィジェット側では文字の大きさや並び順等を操作することができません。 設定値のまま使うと少々見栄え的に好きではないので、少しだけカスタマイズして使用しています。 今日は、そのカスタマイズ方法を。 ウィジェットのタグクラウドの初期値 まだ少ない投稿数だと変化がよくわからないのですが、ウィジェットのタグクラウドは、書いた記事数によって文字の大きさが違ったり、並び順も昇順で表示されます。 それは、WordPressであらかじめそれぞれの値が決められているからなのですが、その値というのが以下になります。 <?php $defaults = array( 'smallest' => 8, 'largest' => 22, 'unit' => 'pt', 'number' => 45, 'format' => 'flat', 'orderby' =
WordPressにはpタグを自動挿入してくれる機能(auto paragraph)というものがあります この自動で記事を整形してくれるやっかいな機能があるため、たまに意図しないような出来上がりとなっていることもあったりします。
background-color: #ffffff;background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnPgoJPHJhZGlhbEdyYWRpZW50IGlkPSdnJyBjeD0nMjUuMyUnIGN5PScyNi41JScgcj0nNjcuNyUnPgoJCTxzdG9wIG9mZnNldD0nMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiNmZmZmZmY7JyAvPgoJCTxzdG9wIG9mZnNldD0nNTAlJyBzdHlsZT0nc3RvcC1jb2xvcjojZWRiM2Y1OycgLz4KCQk8c3RvcCBvZmZzZXQ9Jz
すごく簡単にショートコードが使えるようになるプラグイン「Shortcodes Ultimate」を導入しました。 ショートコードってなに?? functions.phpに関数を記述して、投稿記事に[](ブラケット)内にショートコード名を記述することで、あらかじめ設定しておいた関数を呼び出すことができる機能のことです。 例えば 画像をキャプション付きで入れるとショートコードで表示されたりしますね! こんな感じになります。 [caption id="attachment_322" align="aligncenter" width="550"] <img src="#/strip.jpg" alt="hogehoge" width="640" height="480" class="size-full wp-image-322" /> hogehoge [/caption]
そして、今ご覧頂いている記事から始まるStinger Advent Calendar 2013 これから25日まで、いろいろな方がStingerについての想いを語ります。 本日、第1日目担当であるわたしがお伝えするのは、Stingerのデザインについてです。 ものを作るときには、そこには意味(理由)があります。 デザインもそのひとつで、どれも意味をもって構成されています。 では、Stingerのデザインは、どのような意味を持って構成されているのか。 Stingerのデフォルトデザイン ここでは大きく3つの要素デザインについて考察してみました。 ※ あくまでもわたし自身が思っていることです。 1. 背景色とコンテンツの色 Stingerのデフォルトの背景色はグレーですが、メインコンテンツ(記事)のところは白色となっています。 どうしてこの配色なのか? これは、ブログの背景を灰色に設定、メイン
前にも書いたのですが、書き忘れていたものがあったので第二弾。 前のものはこちら、【Stinger3カスタマイズ】少し落ち着いたのでこのブログで変更したところを書き留めておく備忘録 #1 よろしければこちらも合わせてお読みください。 informationこの記事でのカスタマイズバージョン:stinger3ver20130913b <div class="sumbox-single"> <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"> <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?> <?php $title= get_the_title(); the_post_thumbnail(array( 550,9999 ), arr
久々にブログ書くとどうやって書いていたのか完全に忘れております。今回は、Stinger5 for Ladysでブログタイトルをロゴにする方法!
このブログは、Stinger3というテーマをもとにゴニョゴニョ…カスタマイズしています。今回はこのブログのカスタマイズ備忘録です。 細かいところまで書いてしまうと、とても膨大な数になるので少し絞って書きます。デザインだけ変更したよというところは省きます。 informationこの記事でのカスタマイズバージョン:stinger3ver20130913b
このブログは、Stinger3というテーマをもとにゴニョゴニョ…カスタマイズしているのですが、見出しデザインにとても迷っていたところとてもよいものがあるらしいと教えてもらい作成しました。 使い方 使い方というほどでもありませんが、見出しの種類は 吹き出しリボン普通(枠上) 普通(枠下)普通(枠上下) 5種類の中から選ぶことが出来ます。 他にも、枠の色や影をつけたり文字色などなど様々に変更することができ、1番下にあるジェネレートというボタンを押すと結果がすぐさま反映されて見ることができます。 結果がその場で見れるのはとても嬉しいですよね。何度でも作り直すことができるので、気に入るものができるまでひたすらジェネレート!! 見出しデザインが決まったら これでよしっ!と思うモノが出来たら、CSSを変更していきます。 Stinger3の見出しタグ Stinger3では、h2とh3を見出しタグとし
このページを最初にブックマークしてみませんか?
『scope.minibird.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く