記事内の外部リンクにアイコンを付けて分かりやすくするカスタマイズ - FOXISM
記事中で自分のサイトではない外部サイトへのリンクを書くときに、それが「外部サイトへのリンクだよ」というのを分かりやすくするために、リンクテキストの後ろにアイコンを付けてみます。 まえがき 普通のブラウザで、cssなど何も手を加えていない場合、リンク（aタグ）部分はたいていは「青字に下線」で表現されます。ただ、わりと早い段階からリンクの色を変えるというのはよく見られたもので、そこは気にしなかったのですが、「下線付きのテキストはリンク」というのは古くからのネット民には共通認識としてあったものでした。 ただ、現在はスマホ全盛時代。ネットはスマホからしかやったことないよ、という人も増えていると思います。で、スマホサイトでは実際に画面を押せるということからなのか、テキストだけだと反応範囲が狭いからか、「テキストよりもボタンでリンクを表現」をいうのが増えてきました。そもそも文中でテキストでリンクするこ
【保護されていません】Google Chrome バージョン62が出てた - FOXISM
前々からhttps関連で話題になっていたChrome 62が正式リリースされました。さっそくChromeを起動してバージョンアップさせ、表示を見てみました。 https化してないサイト さっそく自分のhttps化してないサイトを見てみると…あ、iマークが付くだけなのか。 いやいや、たしかテキスト入力欄がアクティブになると…って話だったな。 テキストエリアをクリックして入力受付中にしてもなにも変化せず。あれ？ 入力し始めると「保護されていません」にぴょこんと変化しました。あ、そうか、そういうことか…。これ、あまり目立たないな。テキスト入力欄に目が行ってると変化したのに気づかないと思う。いつの間にか「保護されていません」表示になっている感じ。 https化しているサイト https化されているサイトはどうなのか、見てみると… https://creatorclip.info/ こっちは最初から
はてなブログでサイドバーの見出しを1つだけ違うスタイルにする方法 - FOXISM
はてなブログのサイドバーにある「注目記事」や「プロフィール」などのモジュール、通常はここの見出しは全て同じスタイルのものが使われますが、これをcssで個別に設定することもできます。 でででーさん (id:d3dayo) さんが以下のような記事を書いてましたので、それをcssでやる、というものです。（コメントで書くと長くなりそうだったので記事にしました。） 元々のhtml部分 でででーさん さんはhtmlモジュールに入力するものを<div class="hatena-module-title">人気記事</div>から書いていましたが、注目記事部分のhtmlは元々以下のような記述になっています。 <div class="hatena-module hatena-module-entries-access-ranking" data-count="5" data-source="total_b
https化に向けて準備（あまり変更するところなかった） - FOXISM
はてなブログのhttps化に向けてのお知らせがついに来ました。一斉にというわけではなく3段階でやっていくようです。よかったね。 とりあえず、ユーザー側でやっておかなければならないことは「混在コンテンツ（Mixed Content）について」というところですね。なので自分のブログをチェックしてみました。 混在コンテンツのチェック とりあえず、ブログ内（記事だけでなくサイドバーとかそういうのも含めた全部）に以下の物があるとダメなようです。 <img src=““>http://…”> @import url(‘http://…’ ….. <script src=“http://…” …> リンク（先）がhttpなのは別にそのままで大丈夫です。まずは記事内からこれらをチェックしてみました。 探すのは簡単です。はてなブログの管理画面から「記事の管理」へ移動し、上の3つを検索してみれば良いのです。
記事を消すのは何のため？誰のため？ - FOXISM
時々はてなでも見るんだけど、過去の記事を消しました、消したらpv上がりました、という内容の記事。これについてモヤモヤ思うことを。 何のために記事を消すのか そういう系の記事はタイトルだけ見て中身はあまり見ていないんですけど、まぁたぶん必要のない記事、pvのない記事、検索順位の低い記事を消したらなぜかサイトの他の記事の検索順位が上がってpvも増えたよやっほー！という内容だと思ってます。 まぁ、つまりはSEOとして記事を消しているんだよね、ということ。でもそれがどういうことなのか、考えたのかなぁ？と。 検索のためになること 必要のない記事、薄い記事、例えば終了したキャンペーンの記事や時事的なニュースなど、まぁ確かに今必要のない記事というのはあります。それらが無駄に検索上位に来ると邪魔でしかない。 だから検索結果のクリーン化のために記事を消す。まぁそれはわかる。 自分が書いたということも消し去っ
Google検索結果での星表示にも対応させたレビューのまとめ表示カスタマイズ - FOXISM
… 基本的なデザインはGoogle Playストアの評価部分を参考にしました。ほぼアレです。 一応レスポンシブというか、横幅800px以下の時に画像と評価部分の横並びが解除されるようになってます。横幅800pxというのはこのブログの今の状態に合わせたものなので、導入の際は自分のブログに合わせてください。 html <div itemscope itemtype="http://schema.org/Product" class="review-ex"> [f:id:c-miya:20170704103615j:plain]<!-- 商品画像 --> <div class="review-ex-right"> <div itemprop="name" class="review-ex-title">Xiaomi Sling Bag</div><!-- 商品名 --> <div class="
レビューブログに使ってほしい はてなブログカスタマイズ その2：自分の評価を星で表示 - FOXISM
html <table class="star-rating1"> <tr><th>価格：</th><td style="color:#ccc;"><span style="color:#f90;">★★</span>★★★</td></tr> <tr><th>見た目：</th><td style="color:#ccc;"><span style="color:#f90;">★★★★★</span></td></tr> <tr><th>耐久性：</th><td style="color:#ccc;"><span style="color:#f90;">★★★</span>★★</td></tr> </table> ちょっとした解説 とくに何の工夫もなく、単にテキストで星（★）を表示して、点数分の星だけ<span style="color:#f90;"> ～ </span>で色を変えていま
レビューブログに使ってほしい はてなブログカスタマイズ その1：良い点・悪い点のリスト - FOXISM
私のこのブログはレビュー系ではありませんが、メインサイトの方ではスマホや周辺機器のレビューをやっています。そこで使っていたり、ほかのレビューブログでもこういうのがあるといいな、というカスタマイズを残しておきます。 まず今回の「あるといいな」は「その製品の良い点・悪い点を端的にまとめたリスト」です。 はじめに まず、レビューとか言いつつ自分では実物を手にせずにネット上のスペックだけをコピペしているだけでそれを見て「コスパ抜群です」とか言ってるようなブログ、スペックレビューとか言って本当にスペックしか書かれていない公式サイトでわかる情報以外が無いようなブログは滅んでください。よろしくお願いします。 レビューとか言って、開封の様子を順番に写真を載せただけで記事の9割が埋まっているブログもありますが、それもかなり残念な気持ちになります。開封レビューとかで、それぞれの写真にちゃんと有用なコメントつけ
サイトデザインの小さなこだわり - FOXISM
私が初めてhtmlと出会ったのは1997年のことでした。もう20年も前なんですね。それから今まで独学でhtmlやらcssやらサイトデザインやらを学んできました。そうなるとポリシーというか好き嫌いと言うかが出てきます。 使ってほしいものは「隠さない」 20年前からずっと守ってきた、なんてわけではないのですが、今の私がなるべく使わないようにしているテクニックがいくつかあります。例えばドロップダウンメニューやタブ切り替えがそれです。ハンバーガーメニューも（出始めた当初は物珍しさから使おうとしたり、残っているものもありますが）あまり好きではありません。 これは何故かと言うと、「見えないものは気づかれない、使われない」からです。 ドロップダウンメニューもタブ切り替えも、最初の状態では見えないところにコンテンツ（メニュー）が隠れています。技術や仕掛けとしては面白いのですが、今の私の考えではなるべく使い
関連記事と記事下の順番を変えたり、いろいろカスタマイズ - FOXISM
はてなブログに自動で「関連記事」が表示され始めたので、前回サラッと見てみました。それで、その時は「関連記事が記事本文の直下にあって使いにくい、カスタマイズした記事下と入れ替えたい」みたいに書きましたが、あっさりできたので共有します。 記事下と順番を入れ替える css ちょっと細かい解説 記事下の要素の間に入れる html css ちょっと細かい解説 そのほかのカスタマイズ 2列にする ○○を非表示にする サムネイルを消す 日付を消す 冒頭文を消す リストの5番目を消す 「関連記事」の表示を別の名前にする サムネイルを大きくする まとめ 記事下と順番を入れ替える 通常は「本文」→「関連記事」→「カスタマイズした記事下」の順番になりますが、これを「本文」→「カスタマイズした記事下」→「関連記事」とひっくり返します。cssだけで簡単にできます。 css .customized-footer{ d
はてなブログの記事下に「関連記事」が表示されるようになりました。が… - FOXISM
2017年6月13日から、はてなブログの記事下に「関連記事」がデフォルトで表示されるようになりました。これまでサイドバーに表示できたものとは、場所だけでなく仕様が少し異なります。 基本的なお知らせは公式のはてなブログ開発ブログでどうぞ。 まず、今回の「関連記事」が表示される場所は、記事本文の下、はてなスターの下、そしてカスタマイズ項目の「記事下」の上です。これがちょっと使いにくいんですよね。 自分的には本文の後に広告があって、そのあとに関連記事、シェアボタンと続けさせたいです。そのあたりの順番の入れ替えができないのはちょっと厳しい。もっとも、いままでもサイドバーの関連記事をjavascriptで移動させるようなカスタマイズがあったので、それと同じようにして移動すればいいんですけど。 追記（6/13 18:18）：シェアボタンなんかの下に持ってくるのはcssで簡単にできそうなのであとで記事化
アイキャッチを記事全体の背景にしてなんかいい感じにするカスタマイズ - FOXISM
前回の記事で記事タイトルの背景にアイキャッチ画像を敷いてみました。同じように、記事全体の背景としてアイキャッチを使ってみます。記事ごとに背景が変わるので、なかなかカッコイイですよ。 完成図 できあがりはこんな感じです。記事の背景がアイキャッチ画像で、ぼかしなどのフィルタをcssで掛けてあります。 html はてなブログのデザイン設定から、「ヘッダ」に以下のコードを加えます。 <div class="penta"></div> クラス名は適当です。 javascript はてなブログのデザイン設定から、「記事下」に以下のコードを加えます。 <script> function productImg() { var pi = document.getElementsByTagName('meta'); for(i=0;i<pi.length;i++){ if(pi[i].getAttribute
ブログテーマのリニューアルに向けて（2017年6月その1） - FOXISM
このブログを始めてまだ5ヶ月と少し。このテーマもまだそれ以下しか使ってません。でもちょっと飽きてきました。なのでブログテーマのリニューアルをしようかと思っています。 本当は、今のテーマでなぜ不満なのか、そういうことを考えて整理して、それを解決するためのデザインにするのがいいのだと思います。でも今はそれはぼんやりと考えているだけで、とりあえずこういうの作ってみたいという気持ちで適当にいろいろやっています。 適当に作って、実際には適用しないだろう物もありますので、ここで消す前に1つ2つ残しておこうと思います。 記事一覧表示トップページのカスタマイズ 最近のはてなブログのアップデートで、トップページに記事一覧表示を選べるようになりました。ただ、一覧表示と言っても普通にアーカイブページのようなリストにしても面白くないと思いましたので、少しいじってみました。 サムネイルを大きく 本文部分を色を付けて
はてなブログProでトップページを一覧表示にして更にカード型にするカスタマイズ - FOXISM
はてなブログProでトップページを一覧表示できるようになったので、それを使ってカード型のレイアウトにするカスタマイズを考えてみました。残念ながらcssだけでは思うようになりませんが、いくつかのコピペだけでできます。 今回は例として、多くの人が使っているテーマ「Brooklyn」で試しています。ほかのテーマでも、多少の調整は必要だとは思いますが、概ね同じようにできると思います。 一覧表示にする まず、ブログのトップページを今回追加された「一覧表示」にしてみましょう。 ブログの設定から詳細設定→トップページの表示形式で「一覧形式」を選択すればOKです。 これでトップページが一覧表示になりました。一覧表示と言うかarchiveページとほぼ同じです。同じではつまらないので、これを「ZENO-TEAL」のようなカード型にしてみます。 javascript はてなブログのデザインカスタマイズから、ヘッ
未だに悩むタブレットの使い方や使いみち - FOXISM
今、またGearBestからの商品提供でFNF Ifive Mini 4Sというタブレットのレビュー記事を書こうとしています。まぁ、だいたいは書ける感じになっているのですが、うーん…。 タブレットの使いみち 一応、現在自分で持っているタブレットとしては、Nexus 9とZenPad S 8.0、それにAmazonのFireタブレットがあります。 でも、これ…ほとんど使ってないんですよね。タブレットの用途としてよく言われるのは電子書籍や動画があります。でもそれらは私の場合は全部PCでやっていることです。 いろいろな宣伝を見ても、「PCを起動するまでもなくタブレットでかんたんに調べたり楽しんだり」という使い方になっているんですが、私の生活だと起きてすぐにPC起動して、寝る直前まで起動しています。なのでいつでもPCの前に座れます。PCに対して何の不便も面倒もありません。 では、タブレットの活躍す
cssで作るシェアボタンのデザインパターン36種類 - FOXISM
cssで作るシェアボタンのデザインパターンをたくさん考えてみました。とりあえずシェア数の表示がない、単純なボタンとして36種類あります。（色違いなども若干含みます。） 記述するhtmlはどれも同じようなものですが、一部微妙に異なるものもあります。基本的にはcssだけでデザインを決めています。アイコンフォントに関してもcssだけでほとんどやっていますが、そのコードは省略していますのでソースを見てください。 コピペでもだいたい使えると思いますが、それぞれ微調整が必要なものもあると思います。なのでコピペだけでなく自分のサイトに合わせて調整できるcss中級者以上向けですね。スマホ表示も考えてないし。（スマホで見ると崩れてるやんwと思う人はこの記事の対象外です。） というか、ローカルなhtmlで作っていたものをここにコピペしたらうまく動かないものやフォントが反映されていないものがありました。面倒なの
はてなブログテーマ「CARTA-YEL」をテーマストアに投稿しました - FOXISM
スクリーンショット トップページはブラウザ幅によって2列から5列まで変わります。トップページの記事数は12くらいがいいと思います。 個別ページもブラウザ幅によって1カラムから3カラムまで変わります。最近の投稿リストを無理やり左カラムに持ってきているので、それを設定していないと妙なスペースができてしまいます。 スマホでもそれなりに見えると思います。 デモサイトなど 今回はでもサイト作ってません。基本的にノーサポートで。 レイアウト以外の部分はあまり手を入れてないので、自分で自由にカスタマイズできます。逆に言えばカスタマイズできないとつまらない感じのテーマになってしまうと思います。まぁそれもGIGAZINEらしいと言えばそうなんですが。 どんどんカスタマイズしちゃってください。
cssってSEOに影響するんだろうか？ - FOXISM
最近、いくつかの小さな事柄からこれが気になってきました。cssはSEOに影響するのかどうか。答えが見つかっているわけではないですが、ぼんやり考えたことを記しておきます。 まぁ自分自身はSEO自体にはそれほど興味はなく、「それはウェブやユーザーにとってどうなのか」を考えれば自然と評価されると思っているので、私の中での重要度は低いのですが。 はてなブログのカスタマイズでよくあるやつ はてなブログのカスタマイズを紹介している記事でよく出てくるんですよね。display:none;が。これ非常に便利です。余計なものを非表示…というか消し去ってしまうんですから。私も自分のブログcssの中でたくさん使ってます。 とある記事でこういうのを見たんです。はてなブログで他サイトを紹介するときのブログカードありますよね。 www.orefolder.net これの最後の、カードの外にある文字リンクを消したい、と
はてなブログテーマ「ZENO-TEAL」をテーマストアに投稿しました - FOXISM
以前より何回か書いていた、はてなブログ用の公開テーマ「ZENO-TEAL」をテーマストアに投稿しました。問題なければインストールできるようになっているはずです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Fontsの中から最近お気に入りのフォントをいくつか - FOXISM