オールアバウト(All About)グループの公式コーポレートサイトです。オールアバウトはじめ、グループ会社のサービス、企業情報などをご紹介しています。
CSS だけで作れるおしゃれなボックス(枠線・囲み枠)のデザインサンプルを紹介します。 ブログ記事は文章がメインですが、ボックスを使うと重要なポイントがわかりやすくなり、記事の読みやすさにもつながります。
2017 - 03 - 20 ハンバーガー大学での講習が終わりました マック スポンサーリンク あざっす!(土下座) 下記写真は、成績優秀を称えてプレゼントされたバッジとボールペン。 どんな雰囲気だったか? 講習と言っても、単に机にしがみついて講師が話すことをノートにまとめるという感じではなく、実店舗に足を運んで学んだり、与えられた課題に対してチームでディスカッションをしたりと、退屈しない工夫が施されていたため、ハンバーガー大学での3日間はとても楽しいものでした。 若い男女が同じ空間にそろって「マック」という共通の話題を抱え、きゃっきゃ言いながらみんなで勉強するっていうのは、どことなく部活みたいなわくわくがありましたね。 いい経験をしたものです。 以前当ブログでも、「 マクドナルドは楽しく働ける職場 」と書きましたが、その企業風土はハンバーガー大学でも健在でした。 気になったことと言えば、
HTML、CSSの勉強法を以前書きました。 www.yukihy.com この記事を書いたあと、jQueryに挑戦をして、まだまだ完璧ではないものの実際にこのはてなブログを通して、いろんなブログパーツのようなものを作ることができました。 そこで、jQueryを勉強するとき、効率良く身につけられる方法を書いていきたいと思います。 僕自身いろんな本やツールに手を出しながら進めてきたので、実際に下の通りに行ったわけではありませんが、もう一度勉強しなおすとしたらこういったようにやるなといった感じです。 それではレッツゴー! jQueryを身につけるための最短ステップ ステップ1 Progateで手を動かしながら学ぶ ステップ2 平行してWebデザインレシピの記事を読む ステップ3 ドットインストールで総復習&補完 ステップ4 書籍を参考に実際に作ってみる 作りながら学ぶjQueryデザインの教科書
最近はてなブログのカスタマイズ記事ばかり投稿しているゆきひーです。 4月ぐらいまでは「HTMLって何?」ってレベルだったのですが、この数ヶ月でいろいろと学んできて、素人ではあるもののレスポンシブデザインぐらいまでなら作れるようになりました。 実際に集中して学んだのは1ヶ月ぐらいですが、趣味程度には十分だと思うので、どのようにして学んだのかをまとめてみたいと思います! Webデザインをある程度できるようになるためのステップ Step1 「Progate」で作りながら学ぶ Step2 「ドットインストール」で総復習&補完 Step3 書籍を数冊読んでできることを確認する Step4 実際に自分のブログに応用してみる その他Webデザインを効率よく学ぶコツ Webデザイン系ブログをFeedlyで定期購読する クロームの拡張ツール クロームのディベロッパーツール Color Pick Eyedro
関連記事に関して、以前ははてなブログのブログカードをカテゴリごとに自動生成してくれるという神コードを使っていたのですが、ちょっと新たな気分にするために、Milliardの関連ページプラグインというものにしてみました。 どんなものかを紹介してみたいと思います。 Milliard関連ページプラグイン Milliardでこんな感じで関連記事が表示されます 一般的に導入をすれば、こんな感じで関連記事を表示することができます。 PC画面 PCではこんな感じ(画像は全て「Milliard関連ページのよくあるカスタマイズについて(WordPressプラグイン)」から) パネル表示 画像なのでわかりづらいですが、本当はスクロールできます。 リスト表示 モバイル版 モバイルでのパネル表記 モバイルでのリスト表記 ちなみに僕はPC版はフッターではなくてサイドバーにパネル表記の関連記事を差し込んでみました。モバ
スマホ版のGoogleアドセンスの貼り方って本当に悩みますよね。 スマホもいろいろとサイズがあるものだから、どのサイズの広告を貼ろうか本当に悩みますし、正直言えば、できるだけ大きいやつを貼りたいわけです。 現在Googleに推奨されているレスポンシブの広告ならば、見ているデバイスのサイズに合わせて横幅を変えてくれるので良いのですが、何となく横に長くなる広告が嫌なんです。 なので通常の300×250のサイズの広告をセンタリングして貼ることにしました。備忘録です。 広告をセンタリングした実相図 300×250の広告をセンタリングすることで、スマホではこんな感じに見えます。 まずは普通のiPhone5 そして大きめのiPhone6プラス 同じことをパソコン上でやれば、左詰めされずに記事中に336×280の広告も目立たせることができます。 個人的に広告は目立つようにしてスルーする人にはスルーしやす
アプリを紹介するサービス「アプリーチ」 ブロガーであるまなしばさんのご主人が作成したアプリを紹介するサービス「アプリーチ」。 アプリーチ | iPhoneアプリとAndroidアプリを同時に検索し、統合されたブログパーツを作成出来ます。 上の方の検索窓にアプリの名前を入れることで、綺麗なリンクを、しかもiPhoneとアンドロイド両方つくることができます。とっても便利なので僕も使わせていただいています。ありあとうございます! アプリーチをCSSでデザインを変更! 実装図 そんなアプリーチを、ほんの若干ですがCSSを書いて若干デザインを変更してみました。 イメージとしてはこんな感じです。 ほんの若干ですが統一感を出せるようにしました。今後変わるかもしれませんが実際にはこんな感じ。 Pinterest(ピンタレスト) 開発元:Pinterest, Inc. 無料 posted with アプリー
この間追加されたはてなブログの目次機能。どのモードでも、[:contents]と書き込むだけで目次がつくれるので、「凄い!」って思ったしとっても便利になりましたよね! 今まで目次を自動生成するコードもあったのですが、特定の説明記事やリスト記事にだけ入れたいなと思っていたので、半ば諦めていました( ;´Д`) それにちょっとコードを足すとグッと使いやすくなるので、いろいろとサンプルを紹介したいと思います。 はてなブログユーザー向けの記事になります。 CSSでできるはてなブログ目次のカスタム リスト表示を番号にする 見出しの一部を消す 小見出しを消す 中見出しも消す 「目次」という言葉を入れる 目次部分に背景色をつける 文字の大きさを、少しずつ小さくしている 段の横幅を調整 jQueryでできる目次カスタム スムーズスクロールにする 最初は隠しておいて、クリックしたら表示するようにする まとめ
10/7追記1:「はてブ順」を含めた、5つボタンバージョンを追加しました。 11/16追記2:カテゴリの部分を二列にするやり方を追加しました。 最近、はてなブログは人気記事モジュールのみならば、記事上でもどこでも差し込めることを知りました。 こっ、これは!と思い、以前作ったトグルメニューと組み合わせると、スマホの回遊率が高められる(かもしれない)メニューバーというものを作ることができたので、紹介したいと思います。(レスポンシブ設定の方は、できません) 実装図 実際のカスタマイズ 4つのボタンの場合 1 HOMEボタンにURLを入れる 2 カテゴリにURLと言葉を入れる 5つのボタンの場合 1 HOMEボタンにURLを入れる 2 カテゴリにURLと言葉を入れる その他のカスタマイズ 色を変えたい 人気記事の表示する個数を変えたい はてブ数を表示したい・したくない カテゴリの部分を二列にしたい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く